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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (28)

我有一个使用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')...
提问于
用户回答回答于

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

用法

  1. 把karma-read-json.js放到你的Karma文件中。例: files = [ ... 'bower_components/karma-read-json/karma-read-json.js', ... ]
  2. 确保您的JSON由Karma提供服务。例: files = [ ... {pattern: 'json/**/*.json', included: false}, ... ]
  3. readJSON在测试中使用该功能。例: var valid_respond = readJSON('json/foobar.json'); $httpBackend.whenGET(/.*/).respond(valid_respond);

扫码关注云+社区