☰

Karma+AngularJSテスト内でモックJSONファイルをロードする 質問する

tag-icon • tag-icon angularjs karma-runner
Karma+AngularJSテスト内でモックJSONファイルをロードする 質問する

Karma+Jasmine を使用したテストを設定した AngularJS アプリがあります。大きな JSON オブジェクトを受け取り、それをアプリの残りの部分でより使いやすい形式に変換し、その変換されたオブジェクトを返す関数をテストしたいです。それだけです。

私のテストでは、スクリプトなしでモック JSON コンテンツのみを含む個別の JSON ファイル (*.json) を用意したいと思います。テストでは、JSON ファイルをロードして、テストしている関数にオブジェクトを送り込むことができるようにしたいと思います。

ここで説明されているように、モック ファクトリ内に JSON を埋め込むことができることはわかっています。翻訳元:しかし、私は 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

どうやらKarmaはファイルを提供するための何らかのベースディレクトリを設定しているようです。そこで、興味本位でjQueryデータリクエストを次のように変更しました。

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

効果はありました！でも今は汚れた感じがして、シャワーを浴びる必要があります。また清潔に感じられるよう助けてください。

ベストアンサー1

私は、Angular シードを使用した Angular セットアップを使用しています。最終的には、.json フィクスチャ ファイルと jasmine-jquery.js だけでこの問題を解決しました。他の人もこの回答に言及していましたが、すべてのピースを適切な場所に配置するのに時間がかかりました。これが他の誰かの役に立つことを願っています。

json ファイルはフォルダーにあり/test/mock、Web アプリは にあります/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

おすすめ記事