Angular тестирование с использованием passThrough в модульном тестировании

Я пытаюсь проверить директиву в Angular, но я не могу заставить соответствующий шаблон работать.

Директива перечисляет templateUrl так:

templateUrl: 'directives/listview/view.html'

Теперь, когда я пишу какой-либо unit тест, я получаю

Error: Unexpected request: GET directives/listview/view.html

Итак, я должен использовать $httpBackend и отвечать на что-то разумное, например

httpBackend.whenGET('directives/listview/view.html').respond("<div>som</div>");

Но на самом деле я хочу просто вернуть фактический файл, а также сделать это синхронно, поэтому нет проблем с ожиданиями, отложенными объектами и т.д. Как это сделать?

Ответ 1

Теперь я использую https://github.com/karma-runner/karma-ng-html2js-preprocessor. То, что он делает, это чтение во всех используемых вами шаблонах, преобразование их в шаблоны Angular и их установка в шаблон $templateCache, поэтому, когда ваше приложение нуждается в них, оно будет извлекать их из кеша и не запрашивать их с сервера.

В моей карточной конфиге

files: [
    // templates
    '../**/*.html'
],

preprocessors : {
  // generate js files from html templates
  '../**/*.html': 'ng-html2js'
},

ngHtml2JsPreprocessor: {
    // setting this option will create only a single module that contains templates
    // from all the files, so you can load them all with module('templates')
    moduleName: 'templates'
},

И затем в тесте, выполните

// Load templates
angular.mock.module('templates');

И он работает!

Ответ 2

Обязательно включите модуль ngMockE2E в ваш beforeEach

Если вы не используете mock-сервисы $browser, не будут создаваться при вызове whenGET, а возвращаемое значение не будет устанавливать функцию passThrough

beforeEach(function() {
   module('yourModule');
   module('ngMockE2E'); //<-- IMPORTANT!

   inject(function(_$httpBackend_) {
    $httpBackend = _$httpBackend_;
    $httpBackend.whenGET('somefile.html').passThrough();
   });
});

Место в angular -mocks.js, где это настроено:

Исходный код находится в функции $httpBackend mock when:

function (method, url, data, headers) {
  var definition = new MockHttpExpectation(method, url, data, headers),
      chain = {
        respond: function(status, data, headers) {
          definition.response = createResponse(status, data, headers);
        }
      };

  if ($browser) {
    chain.passThrough = function() {
      definition.passThrough = true;
    };
  }
  definitions.push(definition);
  return chain;
}