How can I use HTML fixtures with Karma test runner using Qunit?

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??

Solution 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();
    }
});

Solution 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 ;-))...

Comments

[Tomas Romero]

Check my answer here: stackoverflow.com/questions/15214760/…

[zigomir]

I'm also really interested in testing the DOM with karma. Will this be available in future releases or should I seek for workarounds? I probably won't be using Angular for it...

[Vojta]

Just use canary release of karma (it will eventually become stable;-) and use the karma-html2js-preprocessor plugin, which is not tight to AngularJS.

[Camilo Martin]

How to install the canary release on npm? Sorry for the silly question.

[Camilo Martin]

Just wanted to say that I found out you can do npm install karma@canary... I thought the versions had to be numbers for upgrading to work (I still don't understand if the canary release changes and how does that happen if the version is the same). Also, I wanted to say that this requirement is pretty ugly, karma could have some easy built-in mechanism of loading fixtures.

[NickL]

Good job buddy. Do you still need to have JASMINE and JASMINE_ADAPTER in the config though?

[Hallvar Helleseth]

To make it work for me I had to add "preprocessors: {'*/.html': [] }". This to remove the html2js preprocessor which was on by default for me in Karma 0.10

[jfroom]

Related github issue discussion about the preprocessors in Karma.

[Inanc Gumus]

Is it possible that you supply an example jsfiddle or jsbin? @daveoncode

[Malki]

It's worth noting that the preprocessor paths are relative to basePath, which in turn is relative to the location of the karma.conf file. I have my karma.conf inside a directory called test-config, and it took some debugging to figure out I had to set basePath to '../' for the preprocessors to work