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

Question

我有一个使用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')...

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

Answer 1

我正在使用带有角度种子的角度设置。我最终通过直接的.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