javascript - fixture 不会在 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() .这就是 fixture 需要进来的地方，因为没有它 getElementById()将返回 null . (这是我遇到的问题。)

我在网上搜索了将近一整天，寻找可以尝试的东西，但除了 TypeError: document.getElementById(...) is null 之外，我似乎无法从 Karma 中得到任何东西。 .我已经尝试更改我的 Karama 配置，而不是空的，preprocessors有"**/*.html": []在其中禁用html2js ，但那什么也没做。我试过禁用 jasmine-jquery并使用 html2js相反，但几乎没有关于 karma-html2js-preprocessor 的任何文档，所以我什至不知道我是否正确使用它。 (这就是为什么我更倾向于 jasmine-jquery 的原因。)我就是想不通。

更新(10 月 3 日)

我找到了 this question on 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');

然后我找到了this issue thread on 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

我还找到了this post并尝试了其中概述的配置——除了添加 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));
    }
});

不过我还是得到了同样的结果。不确定我还能尝试什么。

更新(10 月 4 日)

我找到了 this question/answer on 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. 将 fixture 加载到您的测试规范中 - loadFixtures('index.html');

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

karma 配置 http://karma-runner.github.io/0.12/config/files.html

更新 02.16.16

较新版本的 Chrome 不允许 file://URI 读取其他 file://URI。实际上，jasmine-jquery 无法在某些版本的 Chrome 下正确加载固定装置。对此的替代是使用开关 --allow-file-access-from-files 运行 Chrome。 https://github.com/velesin/jasmine-jquery#cross-domain-policy-problems-under-chrome