【发布时间】：2014-10-02 01:35:56
【问题描述】：
我已经尝试了很多东西，但是当我运行 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() 函数启动。他们正在测试一个使用document.getElementById() 向一些<img> 元素添加事件监听器的函数。这就是夹具需要进入的地方，因为没有它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 并将karma.conf.js 中的preprocessors 更改为：
preprocessors: {
'**/*.html': []
},
我将规范中的 Jasmine 调用更改为：
var fixtures = jasmine.getFixtures();
fixtures.fixturesPath = 'base/karma/';
fixtures.load('imagelist.fix.html');
这也导致了相同的行为：TypeError: document.getElementById(...) is null
我还找到了this post 并尝试了其中列出的配置——除了在karma.conf.js 的files 部分添加了JASMINE 和JASMINE_ADAPTER——但我仍然得到相同的行为。
因为我在本地安装了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 进行设置。我从karma.conf.js 的frameworks 部分中删除了jasmine-jquery，并添加了一个如下所示的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。
【问题讨论】：
-
这就是你的提问方式。
标签： javascript gruntjs jasmine karma-runner fixtures