Question

我花了很多时间试图理解$ 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）说出指令＆＃34;这是你的数据，做你的工作＆＃34;。

编辑：

好的，对这个问题有所了解。我只是在看这个角度模块（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调用结合起来，以测试是否也已完成。

Answer 1

您应该从预期的GET请求返回，无论角度转换需要实际替换元素中的discover_more。

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

注意，我不知道angular-translate所期望的精确对象，所以它可能与我的建议不同。无论如何，当感知到GET请求时，它会返回它。

此外，您不应该在测试中自己提出GET请求。如果所有内容都设置正确，那么如果您将预期的回报添加到预期的GET请求，它应该可以正常工作。

Answer 2

不幸的是，它归因于restrictions on angular-translate，但您可以通过以下任一方式使用真正的JSON语言环境文件：

1）当angular-translate请求时，使用load JSON files与$httpBackend结合的插件加载您的语言环境文件。

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

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

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

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

请注意，这应该低于beforeEach(module('myApp'));，否则会出现$injector错误。

使用$ httpBackend和angular-translate指令进行测试

2 个答案: