1

翻訳機能がまだ機能するかどうかをテストするために、 $httpBackend と angular-translate がどのように連携するかを理解しようと多くの時間を費やしています。

私はこの時点で、この問題を解決する方法が本当にわかりません。

'use strict';

describe('Directive: translate', function () {

    beforeEach(function () {
        angular.module('myApp', ['pascalprecht.translate']);
    });

    var element,
        $compile,
        $rootScope,
        $http,
        $httpBackend;

    beforeEach(inject(function (_$rootScope_, _$compile_, _$httpBackend_, _$http_) {
        $compile = _$compile_;
        $rootScope = _$rootScope_;
        $http = _$http_;
        $httpBackend = _$httpBackend_;
    }));

    afterEach(function() {
        $httpBackend.verifyNoOutstandingExpectation();
        $httpBackend.verifyNoOutstandingRequest();
    });

    it('should translate to English', function () {
        element = $compile('<p translate>discover_more</p>')($rootScope);
        $rootScope.$digest();

        $httpBackend.expect('GET', 'langs/en.json').respond(200); // Should I return some data at this point?
        $http.get('langs/en.json').then(function () {}); // Should I do something here?
        $httpBackend.flush();

        expect(element.html()).toBe('Discover more');
    });

});

私のテストはもちろん失敗します。問題は、1) データを含む JSON を実際に取得する方法と、2) 「ここにデータがあります。作業を行ってください」という指示を言う方法がわからないということです。

編集：

わかりました、問題についていくつかの光。このAngularモジュールのテスト（https://github.com/angular-translate/angular-translate/tree/master/test/unit/directive）を見ていましたが、動作させることができました：

'use strict';

describe('Directive: translate', function () {

    beforeEach(function () {
        angular.module('gajoApp', ['pascalprecht.translate']);
    });

    var element,
        $compile,
        $rootScope;

    beforeEach(module('pascalprecht.translate', function ($translateProvider) {
        $translateProvider
            .translations('en', {
                'discover_more': 'Discover more'
            })
            .preferredLanguage('en');
    }));

    beforeEach(inject(function (_$rootScope_, _$compile_) {
        $compile = _$compile_;
        $rootScope = _$rootScope_;
    }));

    it('should translate to English', function () {
        element = $compile('<p translate>discover_more</p>')($rootScope);
        $rootScope.$digest();

        expect(element.html()).toBe('Discover more');
    });
});

しかし、私が望むのは、このソリューションを JSON を返す適切な AJAX 呼び出しと組み合わせて、これも行われたことをテストすることです。

4

2 に答える 2

0

angular-translate が要素内の を実際に置き換えるために必要なものは何でも、予想される GET リクエストから返す必要がありdiscover_moreます。

beforeEach(function () {
    $httpBackend.when(
        'GET',
         'langs/en.json'
    ).respond({'discover_more': 'Discover more'});
});

angular-translate が期待する正確なオブジェクトがわからないため、私の提案とは異なる可能性があることに注意してください。とにかく、GET 要求が認識されたときにそれを返します。

さらに、テスト内で自分で GET リクエストを行うことは想定されていません。すべてが正しく設定されていれば、予想される戻り値を予想される GET リクエストに追加すると機能するはずです。

于 2014-09-02T19:08:44.057 に答える
0

残念ながら、これはangular-translate の制限によるものですが、次のいずれかで実際の JSON ロケール ファイルを使用できます。

1) プラグインを使用してJSON ファイルをロードし、 angular $httpBackend-translate がリクエストしたときにロケール ファイルをロードします。

beforeEach(inject(function (_$httpBackend_) {
    $httpBackend = _$httpBackend_;

    $httpBackend.whenGET('locale-pt.json').respond(readJSON('langs/en.json'));
    $httpBackend.flush();
})));

$translateProvider.translations()2) JSON ファイルをロードするプラグインによって読み取られた JSON を使用するメソッドでアプリの翻訳をオーバーライドする

beforeEach(module(function ($translateProvider) {
    $translateProvider.translations('en', readJSON('langs/en.json'));
}));

これを下回る必要があることに注意してください。そうしbeforeEach(module('myApp'));ないと、$injectorエラーが発生します。

于 2015-09-05T04:17:38.980 に答える