在Karma + AngularJS测试中加载模拟JSON文件
我有一个使用Karma + Jasmine进行测试的AngularJS应用程序。 我有一个我想测试的函数，它需要一个大的JSON对象，将它转换为应用程序其余部分更易于使用的格式，并返回该转换后的对象。 而已。
对于我的测试，我希望你有单独的JSON文件（* .json）和模拟JSON内容 - 没有脚本。 对于测试，我希望能够加载JSON文件并将对象抽入我测试的函数中。
我知道我可以在模拟工厂内嵌入JSON，如下所述：http://dailyjs.com/2013/05/16/angularjs-5/但我真的希望JSON不要包含在脚本中 - 只需直接使用JSON文件。
我已经尝试了一些东西，但我在这方面很努力。 首先，我将Karma设置为包含我的JSON文件，以查看它会做什么：
files = [
...
'mock-data/**/*.json'
...
]
这导致：
Chrome 27.0 (Mac) ERROR
Uncaught SyntaxError: Unexpected token :
at /Users/aaron/p4workspace4/depot/sitecatalyst/branches/anomaly_detection/client/anomaly-detection/mock-data/two-metrics-with-anomalies.json:2
然后我将它改为只提供文件而不是“包含”它们：
files = [
...
{ pattern: 'mock-data/**/*.json', included: false }
...
]
现在，他们只是送达，我想我会尝试从我的规范中使用$ http加载文件：
$http('mock-data/two-metrics-with-anomalies.json')
当我运行我收到的规范时：
Error: Unexpected request: GET mock-data/two-metrics-with-anomalies.json
在我的理解中，这意味着它期待$ httpBackend的模拟响应。 所以...在这一点上，我不知道如何使用Angular工具加载文件，所以我想我会尝试jQuery，看看我是否至少可以让它工作：
$.getJSON('mock-data/two-metrics-with-anomalies.json').done(function(data) {
console.log(data);
}).fail(function(response) {
console.log(response);
});
这导致：
Chrome 27.0 (Mac) LOG: { readyState: 4,
responseText: 'NOT FOUND',
status: 404,
statusText: 'Not Found' }
我在查尔斯检查这个请求，并提出请求
/mock-data/two-metrics-with-anomalies.json
而我已配置为由Karma“包含”的其余文件正在被请求，例如：
/base/src/app.js
显然，Karma设置了某种基本目录来提供文件。 所以对于踢我改变了我的jquery数据请求
$.getJSON('base/mock-data/two-metrics-with-anomalies.json')...
它的工作原理！ 但现在我觉得很肮脏，需要洗个澡。 帮助我再次感觉干净。
我正在使用有角种子的角度设置。 我最终用直接.json夹具文件和jasmine-jquery.js解决了这个问题。 其他人暗示了这个答案，但是我花了一段时间才把所有的东西都放在正确的位置。 我希望这可以帮助别人。
我有我的json文件在一个文件夹/test/mock和我的webapp在/app 。
我的karma.conf.js有这些条目（除其他外）：
basePath: '../',
files: [
...
'test/vendor/jasmine-jquery.js',
'test/unit/**/*.js',
// fixtures
{pattern: 'test/mock/*.json', watched: true, served: true, included: false}
],
那么我的测试文件有：
describe('JobsCtrl', function(){
var $httpBackend, createController, scope;
beforeEach(inject(function ($injector, $rootScope, $controller) {
$httpBackend = $injector.get('$httpBackend');
jasmine.getJSONFixtures().fixturesPath='base/test/mock';
$httpBackend.whenGET('http://blahblahurl/resultset/').respond(
getJSONFixture('test_resultset_list.json')
);
scope = $rootScope.$new();
$controller('JobsCtrl', {'$scope': scope});
}));
it('should have some resultsets', function() {
$httpBackend.flush();
expect(scope.result_sets.length).toBe(59);
});
});
真正的技巧是jasmine.getJSONFixtures().fixturesPath='base/test/mock'; 我最初设置它只是test/mock但它需要在那里的base 。 没有基地，我得到这样的错误：
Error: JSONFixture could not be loaded: /test/mock/test_resultset_list.json (status: error, message: undefined)
at /Users/camd/gitspace/treeherder-ui/webapp/test/vendor/jasmine-jquery.js:295
通过夹具提供JSON是最简单的，但由于我们的设置，我们无法轻松完成，所以我编写了一个替代的辅助函数：
知识库
安装
$ bower install karma-read-json --save
OR
$ npm install karma-read-json --save-dev
OR
$ yarn add karma-read-json --dev
用法
把karma-read-json.js放到你的Karma文件中。 例：
files = [
...
'bower_components/karma-read-json/karma-read-json.js',
...
]
确保您的JSON由Karma提供服务。 例：
files = [
...
{pattern: 'json/**/*.json', included: false},
...
]
在测试中使用readJSON函数。 例：
var valid_respond = readJSON('json/foobar.json');
$httpBackend.whenGET(/.*/).respond(valid_respond);
我一直在努力寻找将外部数据加载到我的测试用例的解决方案。 上面的链接：http://dailyjs.com/2013/05/16/angularjs-5/为我工作。
一些说明：
“defaultJSON”需要用作模拟数据文件中的关键字，这很好，因为您可以参考defaultJSON。
mockedDashboardJSON.js：
'use strict'
angular.module('mockedDashboardJSON',[])
.value('defaultJSON',{
fakeData1:{'really':'fake2'},
fakeData2:{'history':'faked'}
});
然后在你的测试文件中：
beforeEach(module('yourApp','mockedDashboardJSON'));
var YourControlNameCtrl, scope, $httpBackend, mockedDashboardJSON;
beforeEach(function(_$httpBackend_,defaultJSON){
$httpBackend.when('GET','yourAPI/call/here').respond(defaultJSON.fakeData1);
//Your controller setup
....
});
it('should test my fake stuff',function(){
$httpBackend.flush();
//your test expectation stuff here
....
}