javascript - Angular Translate 单元测试 - 无法注入(inject) $translateProvider

Question

我正在使用 ES6、AngularJS、Karma/Jasmine 和 Angular-translate。似乎无法让我的单元测试通过。在单元测试方面，不太确定如何使用第三方模块，例如 Angular 翻译。我收到的代码和错误如下。 $translateProvider 未加载。

import CatalogueModule from './catalogue.module'
import CatalogueService from './catalogue.service'

let service,
    _$translateProvider;

describe('CatalogueService', () => {
  beforeEach(angular.mock.module(CatalogueModule));

  beforeEach(() => {
    angular.mock.module({
      $translateProvider: jasmine.createSpyObj('$translateProvider',
        ['translations', 'preferredLanguage']
      ),
      $translate: jasmine.createSpyObj('$translate',
        ['use']
      )
    });
  })

  beforeEach(inject(($translateProvider) => {
    _$translateProvider = $translateProvider;

    _$translateProvider.translations('en', {});
    _$translateProvider.preferredLanguage('en');

    // service = new CatalogueService();
  }));

  it('should set the config object after initialization', inject(($translateProvider, CatalogueService) => {
    // $translateProvider.use.and.returnValue();
    // expect(service.config.headers).to.equal(null);
  }));
});

这是错误:

✖ "before each" hook: WorkFn for "should set the config object after initialization"
      Chrome 59.0.3071 (Mac OS X 10.12.3)
    Error: [$injector:unpr] Unknown provider: $translateProviderProvider <- $translateProvider

更新 - 添加catalogue.service.js

class CatalogueService {
  constructor($http, $q, $translate) {
    'ngInject';

    this._$http      = $http;
    this._$q         = $q;
    this._$translate = $translate;

    this.config = {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Accept': '******',
        'P3-APP-ID': '*****',
        'P3-Date': '*****'
      }
    };

    this.catalogue = this.getCatalogue();
  }

  getCatalogue() {
    const lang = this._$translate.use();
    const url = `https://somedomain.com/catalog?language_code=${lang}`;
    const deferred = this._$q.defer();

    this._$http
      .get(url, this.config)
      .then(
        (res) => deferred.resolve(res.data.characters),
        (err) => deferred.reject(err)
      );

    return deferred.promise;
  };

  getCharacterByCharId(charId) {
    return this.catalogue
      .then((res) => {
        return res.find((character) => {
          return character.link_name === charId;
        });
      });
  };
}

export default CatalogueService;

Answer 1

没有

beforeEach(angular.mock.module(...))

在测试中。这意味着当前测试只加载了 ng 和 ngMock 模块，并且没有 $translateProvider 服务。

最好通过使用 DI 实例化 Angular 单元来测试它们，而不是直接进行测试。这允许测试服务注释和类内部。

非常希望保持单元测试隔离，并从测试中消除除已测试单元之外的每个单元，尤其是第三方库。如果测试单元需要 $translateProvider，最好将其替换为模拟或 stub :

beforeEach(angular.mock.module('moduleThatContainsCatalogueService');

beforeEach(() => {
  angular.mock.module({
    $translateProvider: jasmine.createSpyObj('$translateProvider',
      ['translations', 'preferredLanguage', 'use']
    )
  });
})

it('...', inject(($translateProvider, catalogueService) => {
  $translateProvider.use.and.returnValue(...);
  ...
}));