在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' }我在Charles中检查了这个请求，它向
/mock-data/two-metrics-with-anomalies.json而我配置为由Karma“包含”的其余文件则在以下位置请求，例如：
/base/src/app.js显然，Karma正在设置某种基本目录来提供来自的文件。因此，我将我的jquery数据请求更改为
$.getJSON('base/mock-data/two-metrics-with-anomalies.json')...而且它起作用了！但是现在我觉得很脏，需要洗个淋浴。帮我恢复清白吧。
回答 6
Stack Overflow用户
发布于 2013-08-30 09:44:40
我使用的是angular seed的角度设置。我最终用直接的.json fixture文件和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。如果没有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:295Stack Overflow用户
发布于 2013-08-16 23:34:24
我一直在努力寻找将外部数据加载到我的测试用例中的解决方案。上面的链接：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
....
}Stack Overflow用户
发布于 2013-07-12 03:56:16
我也在找同样的东西。我要试试this approach。它使用配置文件来包含模拟数据文件，但这些文件比json多一点，因为json需要传递给angular.module('MockDataModule').value，然后您的单元测试也可以加载多个模块，然后可以将值集注入到beforeEach注入调用中。
我还发现了another approach，对于不昂贵的xhr请求，它看起来很有前途，这是一个描述中途测试的很好的帖子，如果我理解正确的话，它可以让你的控制器/服务像e2e测试一样实际检索数据，但是你的中途测试可以实际访问控制器作用域(我不认为e2e)。
https://stackoverflow.com/questions/17370427
复制相似问题