夹具不会在Karma中加载

Question

我一直在尝试很多东西,但是当我运行Karma时,我似乎无法加载.我已经尝试使用html2js和karma-jasmine-jquery-我向后者倾斜,但我会好起来用哪一个被我固定在DOM加载) -但据我可以告诉它没有得到装载并连接到DOM时我的测试运行.

我的目录结构非常简单:

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

这些是我安装的节点模块:

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

这是我的karma.conf.js设置:

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

在我的规范中,我从describe()一个beforeEach()运行以下两行开始:

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

然后it()功能开始.他们正在测试一个函数,该函数<img>使用一些元素添加一个事件监听器document.getElementById().这就是灯具需要进入的地方,因为没有灯具getElementById()就会回归null.(这是我遇到的问题.)

我已经在网上搜索了将近一整天的时间来寻找可以尝试的东西,但除了卡玛外,我似乎无法获得任何东西TypeError: document.getElementById(...) is null.我试着改变我的卡拉马的配置,这样,而不是被空的,preprocessors有 "**/*.html": []它禁用html2js,但什么也没做.我试过禁用jasmine-jquery和使用html2js,但几乎没有任何文档karma-html2js-preprocessor,所以我甚至无法判断我是否正确使用它.(这就是为什么我更倾向于jasmine-jquery.)我只是想不出这个.

更新(3月3日)

我在Stack Overflow上发现了这个问题并在那里尝试了答案,但它没有用 - 我仍然有同样的行为,我一直看到.我的karma.conf.js情况与上面没有变化,但是spriteloader.spec.js我改变了Jasmine的调用:

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

我也尝试了这个,并再次得到了相同的结果:

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

后来我发现GitHub上这个问题的线程,改变preprocessors在karma.conf.js此:

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

我在我的规范中改变了Jasmine调用:

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

这也导致了相同的行为: TypeError: document.getElementById(...) is null

我也发现了这个帖子,并试图在列出的配置它,除了添加JASMINE和JASMINE_ADAPTER对files部分karma.conf.js-但我仍然得到同样的行为.

由于我已karma-jasmine-jquery在本地安装,因此我指向了这样的jasmine-jquery脚本:

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

我甚至试图完全抛弃Jasmine调用并改为使用AJAX调用:

$('#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));
    }
});

不过,我仍然得到了同样的结果.不确定我还能尝试什么.

更新(4月4日)

我在StackOverflow上找到了这个问题/答案,并尝试html2js按照那里的解决方案进行设置.我删除了我jasmine-jquery的frameworks部分karma.conf.js,并添加了一个plugins看起来像这样的部分:

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

我也改变了我的preprocessors部分看起来像这样:

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

我改变beforeEach()了以下内容:

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

不过,我仍然看到了同样的情况TypeError: document.getElementById(...) is null.

Answer 1

如果您使用,karma-jasmine-jquery您可以设置以下内容:

1. 将其添加为框架 - frameworks: ['jasmine-jquery', 'jasmine']

2. 将你的灯具作为文件数组下的模式包含 - { pattern: 'test/fixtures/*.html', included: false, served: true }

3. 使用base/例如jasmine.getFixtures().fixturesPath = 'base/test/fixtures';在测试套件中设置路径.

4. 将灯具加载到您的测试规格中 - loadFixtures('index.html');

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

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

更新02.16.16

较新版本的Chrome不允许file:// URIs读取其他文件:// URI.实际上,jasmine-jquery无法在某些版本的Chrome下正确加载灯具.对此的覆盖是使用开关运行Chrome --allow-file-access-from-files.https://github.com/velesin/jasmine-jquery#cross-domain-policy-problems-under-chrome