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) 说指令“这是你的数据，做你的工作”。

编辑：

好的，对这个问题有所了解。我只是在看这个角度模块的测试（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

您应该从预期的 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 文件，并$httpBackend在 angular-translate 请求时加载您的语言环境文件。

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

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

2) 使用插件读取 JSON 的方法覆盖应用程序的翻译$translateProvider.translations()以加载 JSON 文件

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

请注意，这应该在您的下方beforeEach(module('myApp'));，否则您将收到$injector错误消息。

于 2015-09-05T04:17:38.980 回答