加载噶+ AngularJS测试中的模拟JSON文件 [英] Loading a mock JSON file within Karma+AngularJS test

问题描述

我有一个AngularJS应用程序设置为使用噶+茉莉测试。我有一个功能，我想测试，需要一个大的JSON对象，将其转换为一种格式，通过该应用程序的其余部分更消费品，而且转换的对象返回。这就是它。

I have an AngularJS app set up with tests using Karma+Jasmine. I have a function I want to test that takes a large JSON object, converts it to a format that's more consumable by the rest of the app, and returns that converted object. That's it.

有关我的测试中，我希望你有单独的JSON文件（*以.json）与模拟JSON唯一内容 - 无脚本。对于测试，我希望能够将对象加载JSON文件中，并泵入我测试的功能。

For my tests, I'd like you have separate JSON files (*.json) with mock JSON content only--no script. For the test, I'd like to be able to load the JSON file in and pump the object into the function I'm testing.

我知道我可以模拟一个工厂内嵌入JSON如下所述： http://dailyjs.com / 2013/05/16 / angularjs-5 / 但我真正想要的JSON不包含脚本中 - 只是直JSON文件

I know I can embed the JSON within a mock factory as described here: http://dailyjs.com/2013/05/16/angularjs-5/ but I really want the JSON to not be contained within script--just straight JSON files.

我已经尝试了一些东西，但我在这方面很小白。首先，我建立了我的噶，包括我的JSON文件只是为了看看它会怎么做：

I've tried a few things but I'm fairly noob in this area. First, I set up my Karma to include my JSON file just to see what it would do:

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

于是，我改变它只是提供文件服务，而不是包括他们：

So then I changed it to just serve the files and not "include" them:

files = [
    ...
    { pattern: 'mock-data/**/*.json', included: false }
    ...
]

现在，他们只提供服务，我想我会尝试在该文件中使用$ HTTP从我的规格内加载：

Now that they're only served, I thought I'd try to load in the file using $http from within my spec:

$http('mock-data/two-metrics-with-anomalies.json')

当我跑我收到的规格：

Error: Unexpected request: GET mock-data/two-metrics-with-anomalies.json

这在我的理解是指预计从$ httpBackend一个嘲笑回应。所以......在这一点上，我不知道采用了棱角分明的实用程序，所以我想我会尝试jQuery来看看我至少可以得到工作如何加载该文件：

Which in my understanding means it expects a mocked response from $httpBackend. So...at this point I didn't know how to load the file using Angular utilities so I thought I'd try jQuery to see if I could at least get that to work:

$.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' }

我在检查查尔斯这个请求它使一个请求

I inspect this request in Charles and it's making a request to

/mock-data/two-metrics-with-anomalies.json

虽然我已经配置文件的剩余部分被纳入的因果报应被要求在，例如：

Whereas the rest of the files I've configured to be "included" by Karma are being requested at, for example:

/base/src/app.js

显然因果报应的设立某种形式的基本目录，从提供文件服务。所以踢我改变了我的jQuery数据请求

Apparently Karma's setting up some sort of base directory to serve the files from. So for kicks I changed my jquery data request to

$.getJSON('base/mock-data/two-metrics-with-anomalies.json')...

和它的作品！但现在我觉得脏，需要洗澡。再帮我感觉干净。

And it works! But now I feel dirty and need to take a shower. Help me feel clean again.

推荐答案

我使用的是具有角种子角度设置。我结束了直以.json夹具文件和茉莉的jquery.js解决这个。其他人提到这个答案，但我花了一段时间才能得到一切在正确的地方的碎片。我希望这可以帮助别人。

I'm using an angular setup with angular seed. I ended up solving this with straight .json fixture files and jasmine-jquery.js. Others had alluded to this answer, but it took me a while to get all the pieces in the right place. I hope this helps someone else.

我有我的JSON文件的文件夹 /测试/模拟和我的web应用程序是在 /应用程序。

I have my json files in a folder /test/mock and my webapp is in /app.

我的 karma.conf.js 有这些项（其中包括）：

my karma.conf.js has these entries (among others):

basePath: '../',

files: [
      ... 
      'test/vendor/jasmine-jquery.js',
      'test/unit/**/*.js',

      // fixtures
      {pattern: 'test/mock/*.json', watched: true, served: true, included: false}
    ],

然后我测试的文件有：

then my test file has:

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 ='基地/测试/模拟';
我原本设置它只是测试/模拟，但它需要的基在那里。
没有这个基础，我得到了这样的错误：

The real trick was the jasmine.getJSONFixtures().fixturesPath='base/test/mock'; I had originally set it to just test/mock but it needed the base in there. Without the base, I got errors like this:

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

这篇关于加载噶+ AngularJS测试中的模拟JSON文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！