单元测试 – 如何使用angular-translate进行单元测试

我使用angular translate从这里( http://pascalprecht.github.io/angular-translate/)，它的工作正常，但它打破了我的控制器的单元测试错误：

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

我不知道为什么？

我使用yeoman和测试与业力。

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',...

];

控制器测试：

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

  ...

});

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

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

显然一个错误，如果我添加上运行时(在我的控制器)

$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();

没有什么发生，仍然这个错误驱使我疯了..

如果你有任何建议

这是一个已知的问题，请按照文档： 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');

}));

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