如何使用 App Config 中初始化的 Angular Translate 测试控制器? [英] How do I test controllers with Angular Translate initialized in App Config?

问题描述

我有一个使用 Angular Translate 的应用程序(https://github.com/PascalPrecht/angular-translate).Translate 通过浏览器在应用程序中运行良好，但是当我尝试测试任何控制器时，我得到 错误:意外请求:GET locale/locale-en.json.自从 translate 在启动时对语言文件发出 GET 请求后，如何对控制器进行单元测试?

I have an app that uses Angular Translate (https://github.com/PascalPrecht/angular-translate). Translate works great in the application via browser but when I try to test any controller I get Error: Unexpected request: GET locale/locale-en.json. How do I unit test my controllers since translate does a GET request for the language file on startup?

我正在使用 yeoman 角度生成器和 Karma.

I am using the yeoman angular generator with Karma.

App.js:

angular.module('myApp', ['ngCookies', 'ui.bootstrap', 'pascalprecht.translate'])
  .config(function ($routeProvider, $locationProvider, $translateProvider) {

    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });

      $translateProvider.useStaticFilesLoader({
        prefix: 'locale/locale-',
        suffix: '.json'
      });
      $translateProvider.uses('en');
      $translateProvider.useLocalStorage();
  });

控制器测试:

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

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

  var DocumentationCtrl,
    scope,
    $httpBackend;

  // Initialize the controller and a mock scope
  beforeEach(inject(function ($controller, $rootScope, $injector) {
    $httpBackend = $injector.get('$httpBackend');
    scope = $rootScope.$new();
    DocumentationCtrl = $controller('DocumentationCtrl', {
      $scope: scope
    });
  }));

  it('should attach a list of awesomeThings to the scope', function () {
    $httpBackend.whenGET('locale/locale-en.json').respond(200, {
      "TITLE": 'My App'
    });
    expect(scope.awesomeThings.length).toBe(3);
  });

});

文档控制器只是一个标准生成的控制器.

The Documentation Controller is just a standard generated controller.

推荐答案

你必须在配置阶段而不是运行阶段指定首选语言.所以 $translate.uses('us') 变成 $translateProvider.preferredLanguage('us').useLocalStorage() 也是如此.这些都是配置$translate服务的方法.

You have to specify the preferred language within config phase rather then run phase. So $translate.uses('us') becomes $translateProvider.preferredLanguage('us'). Same goes for useLocalStorage(). These are all methods to configure $translate service.

您还应该尽量避免 uses() 设置默认语言.请改用 preferredLanguage().这样做的原因是， $translate.uses() 试图尽快加载 i18n 文件，如果有一个 cookie 或类似的使用另一种语言键，uses() 将加载两个文件，这就是我们引入 preferredLanguage() 的原因，是的，这应该可以解决问题.

You should also try to avoid uses() to set a default language. Use preferredLanguage() instead. The reason for this is, that $translate.uses() tries to load a i18n file as soon as possible, if there's a cookie or similar which uses another language key, uses() will load two files, that why we introduced preferredLanguage() And yea, this should solve the problem.

这篇关于如何使用 App Config 中初始化的 Angular Translate 测试控制器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！