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

我花了很多时间试图了解$ 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调用此解决方案，测试这一切也已完成。

来源

2014-08-28 DanielM

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

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

请注意，我不知道角转换期望的excact对象，因此它可能与我的建议不同。无论如何，当GET请求被感知时返回它。

此外，您不应该在测试中自己完成GET请求。如果一切正确设置，它应该工作，如果您将预期的回报添加到您的预期GET请求。

来源

2014-09-02 19:08:44 Daniel

我已经认为没有明确的$ http请求必须存在，但事实上，当我不这样做时，我得到错误“没有待处理的请求刷新！”。我已经尝试过你的解决方案，但没有成功：/角度翻译似乎需要别的东西才能正常运行......但我不知道那会是什么。无论如何，谢谢你的尝试，丹尼尔。 – DanielM 2014-09-02 20:37:19

尝试提供更多信息...实际上，需要通过$ translatorProvider进行一些配置（设置前缀和首选语言）。是否有必要为测试配置这些东西，或者应用程序配置是否得到了某种程度？如果是这样，我怎么能从测试内部调用.config（）？另一件事是，如果我尝试在beforEach（）中注入$ translate（可以替代第一个配置），就像我在控制器中使用它一样，我会收到错误“Unknown provider：$ translateProvider” 。 – DanielM 2014-09-02 21:04:05

遗憾的是，由于restrictions on angular-translate，但你可以通过使用自己的真实JSON区域文件：

1）使用插件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错误。

来源

2015-09-05 04:17:38

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

回答

相关问题