angularjs - 在 Karma+AngularJS 测试中加载模拟 JSON 文件

Question

我有一个 AngularJS 应用程序，使用 Karma+Jasmine 设置了测试。我想测试一个函数，它接受一个大型 JSON 对象，将其转换为应用程序其余部分更容易使用的格式，然后返回转换后的对象。就是这样。

对于我的测试，我希望您有单独的 JSON 文件 (*.json)，其中仅包含模拟 JSON 内容 - 无脚本。对于测试，我希望能够加载 JSON 文件并将对象注入(inject)到我正在测试的函数中。

我知道我可以将 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')...

而且它有效!但现在我觉得很脏，需要洗澡。帮助我再次感觉干净。

Answer 1

我正在使用带有 Angular 种子的 Angular 设置。我最终用直接的 .json 固定文件和 jasmine-jquery.js 解决了这个问题。其他人已经提到了这个答案，但我花了一段时间才把所有的部分放在正确的位置。我希望这对其他人有帮助。

我的 json 文件位于文件夹 /test/mock 中我的网络应用程序位于 /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