如何做单元测试角翻译 [英] How do unit test with angular-translate

问题描述

我使用的角度从这里翻译（<一个href=\"http://pascal$p$pcht.github.io/angular-translate/\">http://pascal$p$pcht.github.io/angular-translate/)它只是做工精细，但它打破我的控制器单元测试蒙山错误：

 意外的请求：GET脚本/国际化/区域设置en.json
 

我不understant为什么？

我用的自耕农和测试与因果报应。

app.js：

 使用严格的;（函数（）{  angular.module（'wbApp'，['authService'，'authUserService'，'checkUserDirective'，'ui.bootstrap'，'帕斯卡precht.translate']）
    的.config（函数（$ routeProvider）{
      $ routeProvider
        。什么时候（'/'， {
          templateUrl：意见/ login.html的，
          控制器：'LoginCtrl'，
          访问：{
            isFree：真
          }
        }）
        。当（'/主'，{
          templateUrl：意见/ main.html中，
          控制器：'MainCtrl'，
          访问：{
            isFree：假的
          }
        }）
        。除此以外（{
          redirectTo：'/'
        }）;
    }）;}）（）;
 

configTranslate.js：

 使用严格的;（函数（）{  angular.module（'wbApp'）
    的.config（['$ translateProvider'，
      功能（$ translateProvider）{        $ translateProvider.useStaticFilesL​​oader（{
            preFIX：'脚本/国际化/ locale-'，
            后缀：以.json
        }）;        $ translateProvider preferredLanguage（'恩'）。      }]）;}）（）;
 

karma.conf.js：

 文件= [  ...  应用程序/ bower_components /角翻译/角translate.js'，
  'app/bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.js',  ...];
 

控制器测试：

 使用严格的;描述（控制器：LoginCtrl'，函数（）{  //加载控制器模块
  beforeEach（模块（'wbApp'））;  VAR LoginCtrl，范围，位置，httpMock，AUTHUSER;  //初始化控制器和模拟范围
  beforeEach（注（函数（$控制器，$ rootScope，$位置$ httpBackend，为AuthUser）{
    AUTHUSER =为AuthUser;
    位置= $位置;
    httpMock = $ httpBackend;
    范围= $ rootScope $新的（）。    LoginCtrl = $控制器（'LoginCtrl'，{
      $适用范围：适用范围
    }）;
    httpMock.when（'GET'，'脚本/国际化/区域设置en.json'）直通（）。  }））;  它（...）;  ...}）;
 

如果我在测试控制器添加此，产品同样的错误：

  httpMock.when（'GET'，'脚本/国际化/区域设置en.json'）响应（200）;
httpMock.flush（）;
 

或

  httpMock.when（'GET'，'脚本/国际化/区域设置en.json'）直通（）;
httpMock.flush（）;
 

我觉得这个职位<一个href=\"http://stackoverflow.com/questions/17345928/how-do-i-test-controllers-with-angular-translate-initialized-in-app-config/18874667#18874667\">How我做测试用角控制器在应用程序配置翻译初始化但不能帮我？/

我广泛在我的测试使用$ httpBackend，它工作正常，但在这种情况下，它是无效的。如果我评论该行：

  $ translateProvider preferredLanguage（'恩'）;
 

显然是错误的，如果我加上运行时间（在我的控制器）

  $ translate.uses（本地）;
 

我结束了同样的错误？

于是我转向转换配置（configTranslate.js），或在运行时是同样的结果：

 意外的请求：GET脚本/国际化/区域设置en.json
 

下面是我测试过的语法，无论是在beforeEach（注（功能（...}）;

或在测试它（'...'，函数（）{...}）;

  httpMock.expectGET（'脚本/国际化/区域设置en.json'）;
httpMock.when（'GET'，'脚本/国际化/区域设置en.json'）直通（）。
httpMock.when（'GET'，'脚本/国际化/区域设置en.json'）响应（数据）。
 

与结束

  httpMock.flush（）;
 

我也尝试了$适用

  httpMock.expectGET（'脚本/国际化/区域设置fr.json'）;
范围。$应用（函数（）{
  $ translate.uses（FR）;
}）;
httpMock.flush（）;
 

什么也没有发生，不过这个错误是推动我疯了..

如果您有任何建议

解决方案

这是一个已知的问题，请按照文件在这里：的单元测试的角度

  

解决方案

  
  

不幸的是，这个问题是由设计造成的
  角翻译。为了解决这些错误，我们所能做的就是
  覆盖我们的模块配置在我们的测试套件，它不
  使用异步加载在所有。当没有异步加载器，
  有没有XHR，因此没有错误。

  
  

那么，我们如何在运行时重写我们的模块配置我们
  测试套件？当实例化一个角模块，我们可以随时申请
  这是因为配置功能执行的内联函数。这个
  构造函数可用于覆盖模块
  配置，因为我们可以访问所有供应商。

  
  

使用$提供供应商，我们可以建立一个自定义的装载机厂，
  应，然后用来代替静态文件装载机

  beforeEach（模块（'对myApp'，函数（$提供，$ translateProvider）{  $ provide.factory（'customLoader'，函数（）{
    //装载机逻辑放在这里
  }）;  $ translateProvider.useLoader（'customLoader'）;}））;
 

请在提供上面的链接阅读更多。

I have uses angular translate from here (http://pascalprecht.github.io/angular-translate/) and it's just work fine, but it break my controller's unit test whith Error:

Unexpected request: GET scripts/i18n/locale-en.json

I don't understant why?

I use yeoman and test with karma.

app.js:

'use strict';

(function() {

  angular.module('wbApp', ['authService', 'authUserService', 'checkUserDirective', 'ui.bootstrap', 'pascalprecht.translate'])
    .config(function($routeProvider) {
      $routeProvider
        .when('/', {
          templateUrl: 'views/login.html',
          controller: 'LoginCtrl',
          access: {
            isFree: true
          }
        })
        .when('/main', {
          templateUrl: 'views/main.html',
          controller: 'MainCtrl',
          access: {
            isFree: false
          }
        })
        .otherwise({
          redirectTo: '/'
        });
    });

})();

configTranslate.js:

'use strict';

(function() {

  angular.module('wbApp')
    .config(['$translateProvider',
      function($translateProvider) {

        $translateProvider.useStaticFilesLoader({
            prefix: 'scripts/i18n/locale-',
            suffix: '.json'
        });

        $translateProvider.preferredLanguage('en');

      }]);

})();

karma.conf.js:

files = [

  ...

  'app/bower_components/angular-translate/angular-translate.js',
  'app/bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.js',

  ...

];

controller test:

'use strict';

describe('Controller: LoginCtrl', function() {

  // load the controller's module
  beforeEach(module('wbApp'));

  var LoginCtrl, scope, location, httpMock, authUser;

  // Initialize the controller and a mock scope
  beforeEach(inject(function($controller, $rootScope, $location, $httpBackend, AuthUser) {
    authUser = AuthUser;
    location = $location;
    httpMock = $httpBackend;
    scope = $rootScope.$new();

    LoginCtrl = $controller('LoginCtrl', {
      $scope: scope
    });


    httpMock.when('GET', 'scripts/i18n/locale-en.json').passThrough();

  }));

  it(...);

  ...

});

if i add this in test controller, product same error:

httpMock.when('GET', 'scripts/i18n/locale-en.json').respond(200);
httpMock.flush();

or

httpMock.when('GET', 'scripts/i18n/locale-en.json').passThrough();
httpMock.flush();

i find this post How do I test controllers with Angular Translate initialized in App Config? but not helped me :/

I extensively use $httpBackend in my tests and it works fine, but in this case it is ineffective. If I comment the line:

$translateProvider.preferredLanguage('en');

obviously an error, if I add on the runtime (in my controllers)

$translate.uses(local);

I end up with the same error?

So I turn to the translation configuration (configTranslate.js) or at runtime is the same result:

Unexpected request: GET scripts/i18n/locale-en.json

Here is the syntax that I tested, either in a "beforeEach(inject(function(...});"

or in a test "it('...', function() {...});"

httpMock.expectGET('scripts/i18n/locale-en.json');
httpMock.when('GET', 'scripts/i18n/locale-en.json').passThrough();
httpMock.when('GET', 'scripts/i18n/locale-en.json').respond(data);

with at end

httpMock.flush();

I also tried a $ apply

httpMock.expectGET('scripts/i18n/locale-fr.json');
scope.$apply(function(){
  $translate.uses('fr');
});
httpMock.flush();

nothing happens, Still this error is driving me crazy ..

If you have any suggestion

解决方案

it's a known issue, please follow the documentation here: unit testing angular

The solution

Unfortunately, this issue is caused by the design of angular-translate. To get around these errors, all we can do is to overwrite our module configuration in our test suite, that it doesn't use asynchronous loader at all. When there's no asynchronous loader, there's no XHR and therefore no error.

So how do we overwrite our module configuration at runtime for our test suite? When instantiating an angular module, we can always apply a inline function which is executed as configuration function. This configuration function can be used to overwrite the modules configuration since we have access to all providers.

Using the $provide provider, we can build a custom loader factory, which should then be used instead of the static files loader.

beforeEach(module('myApp', function ($provide, $translateProvider) {

  $provide.factory('customLoader', function () {
    // loader logic goes here
  });

  $translateProvider.useLoader('customLoader');

}));

Please read more in the above link provided.

这篇关于如何做单元测试角翻译的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！