unit-testing - 如何使用 Angular 翻译进行单元测试

Question

我从这里使用了 Angular 翻译( http://pascalprecht.github.io/angular-translate/ )，它工作正常，但它破坏了我的 Controller 的单元测试，并出现错误:

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

我不明白为什么？

我使用 yeoman 并用 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 测试:

'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(...);

  ...

});

如果我将其添加到测试 Controller 中，则会产生相同的错误:

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

或

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

我找到这篇文章How do I test controllers with Angular Translate initialized in App Config?但没有帮助我:/

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

$translateProvider.preferredLanguage('en');

如果我添加运行时(在我的 Controller 中)，显然是一个错误

$translate.uses(local);

我最终遇到了同样的错误？

所以我转向翻译配置(configTranslate.js)或者在运行时是相同的结果:

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

这是我测试的语法，无论是在“beforeEach(inject(function(...});”中

或者在测试“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);

结尾处

httpMock.flush();

我也尝试过 $ apply

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

什么也没发生，但这个错误还是让我发疯..

如果您有任何建议

Answer 1

这是一个已知问题，请按照此处的文档进行操作: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');

}));

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