Чтобы модульные тесты были наиболее эффективными для решения проблем, модуль должен быть изолирован от других модулей. Таким образом, если тест становится красным, можно однозначно определить неисправный блок. По этой причине предпочтительнее явно имитировать все в модульных тестах и ​​предоставлять фикстуры вместо того, чтобы полагаться на реальные данные.

Использование сторонних модулей нарушает изоляцию, потому что их проблемы (баги, версии пакетов) невозможно отличить от проблем в самих модулях. Это делает отладку более дорогостоящей.

Зависимость от pascalprecht.translate может быть устранена в модульных тестах путем предоставления ложного фильтра, который будет выполнять проверенные функции упрощенным и контролируемым способом. Чтобы протестировать реальные данные, Karma должна быть настроена для поддержки модулей, например. karma-commonjs, таким образом данные JSON могут быть загружены напрямую, а не через запрос XHR.

Lodash get хорошо подходит для анализа путей, разделенных точками, аналогично тому, как это делает служба перевода:

  var translationsEn = require('.../locale-en_US.json');
  ...
  beforeEach(angular.mock.module({ translateFilter: function (path) {
    return _.get(translationsEn, path);
  }));

Это будет имитировать фильтр translate (который является внутренней службой translateFilter) с простым обходным решением. Это будет работать до тех пор, пока значения не используют расширенные функции перевода, такие как множественное число.

В качестве альтернативы, реальную службу перевода можно исправить аналогично тому, как руководство предлагает использовать CommonJS для загрузки файлов JSON:

beforeEach(angular.mock.module(function ($translateProvider) {
  $translateProvider.translations('en', translationsEn);
}));

Вместо module следует использовать angular.mock.module, чтобы избежать конфликтов имен при использовании модулей CommonJS.

Хорошо, копнув глубже, я думаю, что нашел решение, которое не слишком хакерское и довольно чистое. Сначала я установил и следовал инструкциям для этого плагина Karma-fixture https://www.npmjs.com/package/karma-fixture

После настройки фикстуры я вызываю глобальную переменную, созданную karma-fixture, и использую ее в своем тесте, чтобы получить нужный файл json, а также аккуратно загрузить его в $translateProvider.translations, как показано ниже.

Примечание. Шаблоны и приспособления, а также файлы важны:

beforeEach(module('pascalprecht.translate', function ($translateProvider) {

   $translateProvider.translations('en', 
     fixture.load('app/resources/locale-en_US.json')
   );

   $translateProvider.preferredLanguage('en');
}));

Полный рабочий пример модульного теста Jasmine, который компилирует компонент с переводами ниже.

Karma.conf.js: файл

module.exports = function(config) {
  'use strict';

   config.set({
     autoWatch: true,
     basePath: '../',

     frameworks: ['jasmine', 'fixture'],

     files: [
       // bower:js
       ... <-Bower files Here ->
       // endbower
       {pattern: 'app/resources/angular-i18n/*.js', included: true, served: true },
       {pattern: 'app/resources/*.json', included: true, served: true},
       'app/**/*.app.js',     // First load main module
       'app/**/*.module.js',  // Then Load all modules
       'app/**/*.tpl.html',   // Then Load all html pages
       'app/**/!(*.spec).js', // Then load all javascript files that are not tests
       'app/**/*.spec.js'     // Finally load all tests
     ],

     exclude: [
       'app/css/**/*.js',
       'app/js/**/*.js',
       'app/styles/vendor/**/*.js'
     ],

     port: 8080,

     browsers: ['PhantomJS'],

     plugins: [
       'karma-phantomjs-launcher',
       'karma-chrome-launcher', 
       'karma-jasmine',
       'karma-coverage',
       'karma-ng-html2js-preprocessor',
       'karma-json-fixtures-preprocessor',
       'karma-fixture'
     ],

     preprocessors: {
       'app/**/*.js': 'coverage',
       'app/**/*.html': 'ng-html2js',
       'app/resources/*.json'   : ['json_fixtures']
     },

     ngHtml2JsPreprocessor: {
       'moduleName': 'Templates',
       'stripPrefix': 'app/'
     },

     jsonFixturesPreprocessor: {variableName: '__json__'},

     reporters: ['progress', 'coverage'],
     singleRun: false,
     colors: true,
     logLevel: config.LOG_INFO,
   });
 };

Jasmine Unit Test: базовые компоненты с использованием компонентов и переводов.

(function() {
  'use strict';

  describe('Home component', function() {
    var rootscope, compile, componentElement;

    beforeEach(module('Templates'));
    beforeEach(module('app'));

    beforeEach(module('pascalprecht.translate', function ($translateProvider) {
      $translateProvider.translations('en', 
        fixture.load('app/resources/locale-en_US.json')
      );

      $translateProvider.preferredLanguage('en');
    }));

    beforeEach(inject(function(_$rootScope_, _$compile_) {
      rootscope = _$rootScope_.$new();
      compile = _$compile_;
    }));

    function getCompiledElement(){
      var element = angular.element('<home-component></home-component>');
      var compiledElement = compile(element)(rootscope);
      rootscope.$digest();
      return compiledElement;
    }

    describe('Home tests', function () {

      it('should have component defined', function () {
        componentElement = getCompiledElement();
        console.log('Compiled component with translations', componentElement);
        expect(componentElement).toBeDefined()
      });
    });
  });
})();

Приведенная выше реализация скомпилирует ваш компонент (может передавать привязки и т. д.), а также использует переводчик и покажет ваши переводы в вашем компоненте в консоли.

Вместо <h1>{{home.title | translate}}</h1> теперь вы увидите <h1>Home Page</h1>