How can I use HTML fixtures with Karma test runner

Question

I'm playing with Karma test runner (http://karma-runner.github.io/0.8/index.html) using qunit (http://qunitjs.com). I succesfully created and ran simple tests (100% JavaScript), but now I'm trying to use HTML fixtures in order to test code that interacts with DOM nodes. I'm able to load these fixtures by declaring them in "files" in this way:

{pattern: 'fixtures/myfixture.html', watched: true, served: true, included: false}

it get served by karma's server, but I don't understand how can I access to its DOM :(

Let's suppose my fixture is a simple html file containing the following markup:

<div id="container">hello world</div>

How can I write a test that can access to that node (the div)? The "document" is related to the "context.html" file under "static" folder as far I know... so where are the HTML of my fixture??

Answer 1

I'm not using AngularJS... I solved by adopting jasmine-jquery: https://github.com/velesin/jasmine-jquery (I use jasmine only for the fixtures, my tests are still written using qunit). In my configuration file I have the following:

    frameworks = ['qunit', 'jasmine'];

    files = [

      JASMINE, 
      JASMINE_ADAPTER,
      QUNIT, 
      QUNIT_ADAPTER,

      // dependencies
      {pattern: 'src/main/webapp/js/libs/jquery/jquery-1.8.3.js', watched: false, served: true, included: true},
      {pattern: 'src/test/js/lib/jasmine-jquery.js', watched: false, served: true, included: true},

      // fixtures
      {pattern: 'src/test/js/**/*.html', watched: true, served: true, included: false},
      {pattern: 'src/test/js/**/*.json', watched: true, served: true, included: false},
      {pattern: 'src/test/js/**/*.xml', watched: true, served: true, included: false},

      // files to test 
      {pattern: 'src/test/js/**/*.js', watched: true, served: true, included: true}
    ];

then in my test files:

module("TestSuiteName", {
    setup: function() {
        var f = jasmine.getFixtures();
        f.fixturesPath = 'base';
        f.load('src/test/js/TestFixture.html');
    },
    teardown: function() {
        var f = jasmine.getFixtures();
        f.cleanUp();
        f.clearCache();
    }
});

Answer 2

If you are using AngularJS, you can use the html2js preprocessor. An example how to do that is at https://github.com/vojtajina/ng-directive-testing.

These html files are served by Karma, but they are not included in the page, so you would have to fetch them - probably through xhr request.

Here is a similar preprocessor, that converts html file into a JS string (not tight to Angular): https://github.com/karma-runner/karma-html2js-preprocessor You can see how to use it in the e2e test: https://github.com/karma-runner/karma-html2js-preprocessor/tree/master/e2e-test

NOTE: this html2js preprocessor is not part of Karma 0.8 and plugins only work with Karma 0.9+ (currently in canary channel), so you have to use canary (which contains lot of changes ;-))...