javascript - Fixtures won't load in Karma

I've been trying numerous things, but I can't seem to get an fixture to load when I run Karma. I've tried using html2js and karma-jasmine-jquery—I'm leaning toward the latter, but I'll be okay with whichever one gets my fixture loaded in the DOM)—but as far as I can tell it's not getting loaded and attached to the DOM when my tests run.

My directory structure is pretty simple:

img/
  ↳ mac.png
  ↳ link.png
  ↳ pocketwatch.png
js/
  ↳ spriteloader.js
  ↳ spriteloader.spec.js
karma/
  ↳ imagelist.fix.html
  ↳ karma.conf.js
Gruntfile.coffee
index.html
grunt.config.coffee
package.json

These are the node modules I've got installed:

grunt 0.4.5
grunt-contrib-jshint 0.10.0
grunt-contrib-watch 0.6.1
grunt-karma 0.9.0
karma 0.12.23
karma-chrome-launcher 0.1.4
karma-firefox-launcher 0.1.3
karma-html2js-preprocessor": "^0.1.0",
karma-jasmine 0.2.0
karma-jasmine-jquery 0.1.1
karma-safari-launcher 0.1.1
karma-story-reporter 0.2.2

And here's my karma.conf.js settings:

basePath: '../',

frameworks: ['jasmine-jquery', 'jasmine'],

files: [
  // Source and spec files
  {
    pattern: 'js/*.js',
    watched: true,
    served: true,
    included: true
  },
  // Fixtures
  {
    pattern: 'karma/*.fix.html',
    watched: false,
    served: true,
    included: false
  }
],

exclude: [
],

preprocessors: {
},

reporters: ['story'],

port: 9018,

colors: true,

logLevel: config.LOG_INFO,

autoWatch: true,

browsers: ['Chrome', 'Firefox', 'Safari'],

singleRun: true

In my spec, I start off my describe() with a beforeEach() that runs the following two lines:

jasmine.getFixtures().fixturesPath = '../';
jasmine.getFixtures().load('/karma/imagelist.fix.html');

Then the it() functions start. They're testing a function that adds an event listener to some <img> elements using document.getElementById(). That's where the fixture needs to e in, because without it the getElementById() will return null. (Which is the issue I'm hitting.)

I've scoured the web for almost a full day looking for things to try, but I can't seem to get anything out of Karma other than TypeError: document.getElementById(...) is null. I've tried changing my Karama config so that, instead of being empty, preprocessors has "**/*.html": [] in it to disable html2js, but that did nothing. I've tried disabling jasmine-jquery and using html2js instead, but there's barely any documentation on karma-html2js-preprocessor, so I can't even tell if I'm using it right. (Which is why I'm leaning more towards jasmine-jquery.) I just can't figure this one out.

UPDATE (3 OCT)

I found this question on Stack Overflow and tried out the answer there, but it didn't work—I still got the same behaviour I've been seeing. My karma.conf.js is unchanged from above, but in my spriteloader.spec.js I changed the Jasmine calls to this:

jasmine.getFixtures().fixturesPath = 'http://localhost:9019/base/karma/';
jasmine.getFixtures().load('imagelist.fix.html');

I also tried this, and got the same result again:

jasmine.getFixtures().fixturesPath = 'http://localhost:9019/base/karma/';
jasmine.getFixtures().load('http://localhost:9019/base/karma/imagelist.fix.html');

I then found this issue thread on GitHub and changed preprocessors in karma.conf.js to this:

preprocessors: {
    '**/*.html': []
},

And I changed the Jasmine calls in my spec to this:

var fixtures = jasmine.getFixtures();
fixtures.fixturesPath = 'base/karma/';
fixtures.load('imagelist.fix.html');

This also resulted in the same behaviour: TypeError: document.getElementById(...) is null

I also found this post and tried the configuration outlined in it—except for the addition of JASMINE and JASMINE_ADAPTER to the files section of karma.conf.js—but am still getting the same behaviour.

Since I have karma-jasmine-jquery installed locally, I pointed to the jasmine-jquery script like this:

'node_modules/karma-jasmine-jquery/lib/jasmine-jquery.js'

I even tried ditching the Jasmine calls altogether and going with an AJAX call instead:

$('#fixture').remove();
$.ajax({
    async: false, // must be synchronous to guarantee that no tests are run before fixture is loaded
    dataType: 'html',
    url: '../karma/imagelist.fix.html',
    success: function(data) {
        $('body').append($(data));
    }
});

I still got the same result, though. Not sure what else I can try.

UPDATE (4 OCT)

I found this question/answer on StackOverflow and tried to set it up with html2js per the solution in there. I removed jasmine-jquery from the frameworks section of my karma.conf.js, and added a plugins section that looks like this:

plugins: [
    'karma-chrome-launcher',
    'karma-firefox-launcher',
    'karma-html2js-preprocessor',
    'karma-jasmine',
    'karma-safari-launcher',
    'karma-story-reporter'
],

I also changed my preprocessors section to look like this:

preprocessors: {
    '**/*.html': ['html2js']
},

And I changed my beforeEach() to the following:

beforeEach(function() {
    var imagelist = __html__['../karma/imagelist.fix.html'];
    document.body.appendChild(imagelist);
});

I'm still seeing the same TypeError: document.getElementById(...) is null, though.

My directory structure is pretty simple:

img/
  ↳ mac.png
  ↳ link.png
  ↳ pocketwatch.png
js/
  ↳ spriteloader.js
  ↳ spriteloader.spec.js
karma/
  ↳ imagelist.fix.html
  ↳ karma.conf.js
Gruntfile.coffee
index.html
grunt.config.coffee
package.json

These are the node modules I've got installed:

grunt 0.4.5
grunt-contrib-jshint 0.10.0
grunt-contrib-watch 0.6.1
grunt-karma 0.9.0
karma 0.12.23
karma-chrome-launcher 0.1.4
karma-firefox-launcher 0.1.3
karma-html2js-preprocessor": "^0.1.0",
karma-jasmine 0.2.0
karma-jasmine-jquery 0.1.1
karma-safari-launcher 0.1.1
karma-story-reporter 0.2.2

And here's my karma.conf.js settings:

basePath: '../',

frameworks: ['jasmine-jquery', 'jasmine'],

files: [
  // Source and spec files
  {
    pattern: 'js/*.js',
    watched: true,
    served: true,
    included: true
  },
  // Fixtures
  {
    pattern: 'karma/*.fix.html',
    watched: false,
    served: true,
    included: false
  }
],

exclude: [
],

preprocessors: {
},

reporters: ['story'],

port: 9018,

colors: true,

logLevel: config.LOG_INFO,

autoWatch: true,

browsers: ['Chrome', 'Firefox', 'Safari'],

singleRun: true

In my spec, I start off my describe() with a beforeEach() that runs the following two lines:

jasmine.getFixtures().fixturesPath = '../';
jasmine.getFixtures().load('/karma/imagelist.fix.html');

UPDATE (3 OCT)

jasmine.getFixtures().fixturesPath = 'http://localhost:9019/base/karma/';
jasmine.getFixtures().load('imagelist.fix.html');

I also tried this, and got the same result again:

jasmine.getFixtures().fixturesPath = 'http://localhost:9019/base/karma/';
jasmine.getFixtures().load('http://localhost:9019/base/karma/imagelist.fix.html');

I then found this issue thread on GitHub and changed preprocessors in karma.conf.js to this:

preprocessors: {
    '**/*.html': []
},

And I changed the Jasmine calls in my spec to this:

var fixtures = jasmine.getFixtures();
fixtures.fixturesPath = 'base/karma/';
fixtures.load('imagelist.fix.html');

This also resulted in the same behaviour: TypeError: document.getElementById(...) is null

Since I have karma-jasmine-jquery installed locally, I pointed to the jasmine-jquery script like this:

'node_modules/karma-jasmine-jquery/lib/jasmine-jquery.js'

I even tried ditching the Jasmine calls altogether and going with an AJAX call instead:

$('#fixture').remove();
$.ajax({
    async: false, // must be synchronous to guarantee that no tests are run before fixture is loaded
    dataType: 'html',
    url: '../karma/imagelist.fix.html',
    success: function(data) {
        $('body').append($(data));
    }
});

I still got the same result, though. Not sure what else I can try.

UPDATE (4 OCT)

plugins: [
    'karma-chrome-launcher',
    'karma-firefox-launcher',
    'karma-html2js-preprocessor',
    'karma-jasmine',
    'karma-safari-launcher',
    'karma-story-reporter'
],

I also changed my preprocessors section to look like this:

preprocessors: {
    '**/*.html': ['html2js']
},

And I changed my beforeEach() to the following:

beforeEach(function() {
    var imagelist = __html__['../karma/imagelist.fix.html'];
    document.body.appendChild(imagelist);
});

I'm still seeing the same TypeError: document.getElementById(...) is null, though.

Share Improve this question edited May 23, 2017 at 12:17 CommunityBot 11 silver badge asked Oct 2, 2014 at 1:35 user1282270

THIS is how you question. – Naruto Sempai Commented Aug 26, 2016 at 21:47

Add a ment |

3 Answers 3

Sorted by: Reset to default 12

If you use karma-jasmine-jquery you can just set the following:

add it as a framework - frameworks: ['jasmine-jquery', 'jasmine']
include your fixtures as patterns under the files array - { pattern: 'test/fixtures/*.html', included: false, served: true }
set the path using base/ such as jasmine.getFixtures().fixturesPath = 'base/test/fixtures'; in your test suites.
load the fixtures into your test specs - loadFixtures('index.html');

karma-jasmine-jquery https://www.npmjs./package/karma-jasmine-jquery

Karma Config http://karma-runner.github.io/0.12/config/files.html

Update 02.16.16

Newer versions of Chrome don't allow file:// URIs read other file:// URIs. In effect, jasmine-jquery cannot properly load fixtures under some versions of Chrome. An override for this is to run Chrome with a switch --allow-file-access-from-files. https://github./velesin/jasmine-jquery#cross-domain-policy-problems-under-chrome

How to load JSON Fixture in Karma?

Step-1 Register json fixtures to files array inside karma.conf.js

// list of files / patterns to load in the browser
  files: [

     //load fixtures
      {
          pattern: 'tests/**/*.json',
          watched: true,
          served: true,
          included: false
      },

     //Other js/spec files go here

     'src/sample.test.js',
     'tests/sample.test.spec.js'

      ]

Step-2 Loading json fixture inside describe in sample.spec.js file

describe('sample test suit', function () {     
let testFixture = {};
 //load test data fixture

beforeEach(function () {

    //loading fixtures data before each case
    jasmine.getJSONFixtures().fixturesPath = 'base/tests/fixtures';
    testFixture = getJSONFixture('test.testdata.json').key;        

});

it('should return test here', function () {

    expect(testFixture ).toBe({ data : 'some data' });

});

How to load HTML Fixture in Karma?

Step-1 Create a HTMLfixture as follows (test.dom.js file)

function setUpHTMLFixture() {
    jasmine.getFixtures().set(' *********Email sender******** \
\
                                <div class="div3">  \
                                    <a id="sender-0"> \
\
                                             ********* removeIningAttachmentsFromTab ******** \
                                               <div id="newLineBR"></div> \
                                                <div class="sender-attachments"></div> \
                                                 <div class="attachmentiFramecls" style="margin-left:10px;"></div> \
                                             *********End removeIningAttachmentsFromTab ******** \
\
                                     </a> \
                                 </div> \
\
                                *********End email sender******** \
\
\
                                ********* createIFrameFormForPost ******** \
\
                                    <div id="iFrameFormForContainer"></div> \
\
                                *********End createIFrameFormForPost ******** \
\
\
                                ********* initEmailBody ******** \
\
                                    <div id="emailBody">Email Sending Test from test at 7/18/2018 8:06:56 AM \
                                                        hi, here is a a link http://testlabz./ \
                                                        This is an automated test email. \
                                                         Please do not reply</div> \
\
                                 ********* End initEmailBody ******** \
\
       ');
}

Step-2 Register email fixture in karma config inside files array as follows:

  files: [
         //load fixtures
         "tests/fixtures/test.dom.js",
        //load spec file
        './tests/emailclient.spec.js',
        ]

Step-2 Load HTMLFixture before each test case as follows:

  describe('htmlFixture test suit', function () {

     //load test dom fixture

      beforeEach(function () {

       //loading html fixtures data before each case
       setUpHTMLFixture();      
   });

   //test the element with here

     it("should text html", function () {       

       expect($("#emailBody")).toExist();

   });

  });

Adding fixture to frameworks in the karma.conf.js file solved this issue for me. frameworks: ['jasmine', 'fixture']

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Fixtures won't load in Karma - Stack Overflow

3 Answers 3

Update 02.16.16

与本文相关的文章

评论列表(0)