[解決済み] Karma+AngularJSのテスト内でモックJSONファイルを読み込む

質問

AngularJSのアプリで、Karma+Jasmineを使用したテストを設定したことがあります。私は大きな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

そこで、ファイルを提供するだけで、"include"をしないように変更しました。

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

今はサーブされるだけなので、specの中から$httpを使ってファイルを読み込んでみようと思ったのです。

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

specを実行すると、受け取った。

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で"include"されるように設定した残りのファイルは、例えば、で要求されているのに対し。

/base/src/app.js

どうやらKarmaは、ファイルを提供するためのベースディレクトリのようなものを設定しているようです。そこで、試しにjqueryのdata requestを次のように変更してみました。

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

そして、うまくいきました しかし、今私は汚れていると感じ、シャワーを浴びる必要があります。またきれいになるのを手伝ってください。

どのように解決するのですか？

私はangular seedでangular setupを使用しています。 私はストレート.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