Karma+Angular 내에서 모의 JSON 파일 로드JS 테스트

Karma+Angular 내에서 모의 JSON 파일 로드JS 테스트

나는 Angular를 가지고 있다.JS 앱은 Karma+Jasmin을 사용하여 테스트를 셋업합니다.테스트하고 싶은 함수는 큰 JSON 오브젝트를 가져와서 다른 앱에서 사용하기 쉬운 포맷으로 변환하고 변환된 오브젝트를 반환하는 것입니다.바로 그겁니다.

테스트에서는 스크립트는 사용하지 않고 모의 JSON 콘텐츠만 있는 별도의 JSON 파일(*.json)을 준비해 주셨으면 합니다.테스트를 위해 JSON 파일을 로드하여 테스트 중인 함수에 객체를 펌핑할 수 있도록 하고 싶습니다.

JSON은 http://dailyjs.com/2013/05/16/angularjs-5/에서 설명한 바와 같이 모의 공장에 삽입할 수 있지만, JSON은 스크립트에 포함되지 않고 스트레이트 JSON 파일만 포함하고 싶습니다.

나는 몇 가지 시도를 해봤지만 이 방면에서는 꽤 소박하다.먼저 JSON 파일을 포함하도록 Karma를 설정했습니다.

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

보아하니 카르마가 파일을 보낼 기본 디렉토리를 만들고 있는 것 같아.그래서 재미삼아 jquery 데이터 요청을

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

그리고 효과가 있다!하지만 지금 나는 더러워서 샤워를 해야 해.내가 다시 깨끗해 질 수 있게 도와줘.

각진 씨앗을 가진 각진 장치를 사용하고 있어요저는 이것을 스트레이트 .json 고정 파일과 jasmine-jquery.js로 해결했습니다.다른 사람들은 이 대답을 암시했지만, 나는 모든 조각들을 제자리에 놓는 데 시간이 좀 걸렸다.이게 다른 사람에게 도움이 됐으면 좋겠어요.

./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 그것은 지만, 것 the가 필요했다.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. 카르마 파일에 카르마-read-json.js를 저장합니다.예:

   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);
   

외부 데이터를 테스트 케이스에 로드하는 방법을 찾는 데 애를 먹고 있습니다.위 링크: http://dailyjs.com/2013/05/16/angularjs-5/에서 작업을 했습니다.

주의사항:

"default JSON"을 모의 데이터 파일의 키로 사용해야 합니다. default J를 참조하기만 하면 됩니다.아들.

Dashboard J를 조롱했다.SON.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
    ....
}

솔루션이 올바른 솔루션인 것 같습니다만, 마음에 들지 않는 점이 2개 있습니다.

• 재스민 사용
• 그것은 새로운 학습 곡선을 필요로 한다

저는 이 문제에 부딪혔고 마감 시간이 남아있지 않아 빨리 해결해야 했고, 다음과 같이 했습니다.

json 리소스가 너무 커서 테스트에 복사할 수 없어서 별도의 파일을 보관해야 했지만 json이 아닌 javascript로 유지하기로 결심하고 다음 작업을 수행했습니다.

var someUniqueName = ... the json ...

그리고 나는 이것을 업보에 포함시켰다.

필요에 따라 백엔드 http 응답을 조롱할 수 있습니다.

$httpBackend.whenGET('/some/path').respond(someUniqueName);

여기에 포함될 새로운 각도 모듈을 쓰고 json 자원을 다음과 같이 변경할 수도 있습니다.

angular.module('hugeJsonResource', []).constant('SomeUniqueName', ... the json ... );

에 그냥 하면 돼요.SomeUniqueName더 깔끔해 보이는 테스트로.

어쩌면 서비스로 포장할 수도 있다

angular.module('allTestResources',[]).service('AllTestResources', function AllTestResources( SomeUniqueName , SomeOtherUniqueName, ... ){
   this.resource1 = SomeUniqueName;
   this.resource2 = SomeOtherUniqueName; 
})

이 솔루션은 나에게 더 빨랐고, 깨끗하고, 새로운 학습 곡선이 필요하지 않았다. 그래서 나는 이 방법을 선호한다.

저도 같은 걸 찾고 있었어요이 방법을 시도해 보겠습니다.구성 파일을 사용하여 모의 데이터 파일을 포함하지만 json이 angular.module('Mock Data Module')에 전달되어야 하기 때문에 json보다 조금 더 많습니다.value 및 유닛테스트에서는 여러 모듈을 로드하여 값 세트를 에 삽입할 수 있습니다.각 inject 콜은 에 삽입할 수 있습니다.

또한 비용이 많이 들지 않는 xhr 요청에 적합한 다른 접근 방식을 발견했습니다. 미드웨이 테스트에 대해 설명하는 훌륭한 게시물입니다. 이러한 방법을 이해하면 컨트롤러/서비스는 실제로 e2e 테스트와 같은 데이터를 가져올 수 있지만 미드웨이 테스트에서는 컨트롤러 범위에 실제로 액세스할 수 있습니다(e2e는 그렇지 않습니다).

JSON 파일에서도 동작하는 Karma 프리프로세서가 있습니다.다음 중 하나가 있습니다.

https://www.npmjs.org/package/karma-ng-json2js-preprocessor

그리고 뻔뻔한 플러그, 이건 내가 개발한 플러그인데JS 지원

https://www.npmjs.org/package/karma-ng-json2js-preprocessor-requirejs

karma-html2js-preprocessor를 사용하여 json 파일을 __html__글로벌에 추가할 수 있습니다.

상세한 것에 대하여는, 다음의 회답을 참조해 주세요.https://stackoverflow.com/a/22103160/439021

여기 Cameron의 답변에 대한 대안이 있습니다.jasmine-jquery예를 들어 Angular 서비스를 테스트하기 위한 추가 카르마 구성도 없습니다.$resource:

angular.module('myApp').factory('MyService', function ($resource) {
    var Service = $resource('/:user/resultset');
    return {
        getResultSet: function (user) {
            return Service.get({user: user}).$promise;
        }
    };
});

그리고 해당 단위 테스트는 다음과 같습니다.

describe('MyServiceTest', function(){
    var $httpBackend, MyService, testResultSet, otherTestData ;

    beforeEach(function (done) {
        module('myApp');
        inject(function ($injector) {
            $httpBackend = $injector.get('$httpBackend');
            MyService = $injector.get('MyService');
        });
        // Loading fixtures
        $.when(
            $.getJSON('base/test/mock/test_resultset.json', function (data) { testResultSet = data; }),
            $.getJSON('base/test/mock/test_other_data.json', function (data) { otherTestData = data; })
        ).then(done);
    });

    it('should have some resultset', function() {
        $httpBackend.expectGET('/blahblahurl/resultset').respond(testResultSet);
        MyService.getResultSet('blahblahurl').then(function (resultSet) {
            expect(resultSet.length).toBe(59);
        });
        $httpBackend.flush();
    });
});

언급URL : https://stackoverflow.com/questions/17370427/loading-a-mock-json-file-within-karmaangularjs-test