Жасмин тестирует директивы AngularJS с шаблономUrl

Ответ 1

Если вы используете ngMockE2E или ngMock:

все HTTP-запросы обрабатываются локально с использованием заданных вами правил, и ни один из них не передается на сервер. Поскольку шаблоны запрашиваются через HTTP, они также обрабатываются локально. Поскольку вы не указали что-либо делать, когда ваше приложение пытается подключиться к views/currency-select.html, оно сообщает вам, что оно не знает, как его обрабатывать. Вы можете легко сказать ngMockE2E пройти по запросу шаблона:

$httpBackend.whenGET('views/currency-select.html').passThrough();

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

Документы обсуждают это более подробно: http://docs.angularjs.org/api/ngMockE2E.$httpBackend

В противном случае используйте это:

Вам нужно использовать $injector для доступа к новому серверу. Из связанных документов:

var $httpBackend;
beforeEach(inject(function($injector) {
  $httpBackend = $injector.get('$httpBackend');
  $httpBackend.whenGET('views/currency-select.html').respond(200, '');
}));

Ответ 2

способ Karma - динамически загружать шаблон html в $templateCache. вы могли бы просто использовать предварительный процессор hmml2js karma, как описано здесь

это сводится к добавлению шаблонов .html к вашим файлам в файле conf.js также препроцессоры = { '.html': 'html2js' };

и используйте

beforeEach(module('..'));

beforeEach(module('...html', '...html'));

в файл тестирования js

Ответ 3

Если это единичный тест, у вас не будет доступа к $httpBackend.passthrough(). Это доступно только в ngMock2E2, для сквозного тестирования. Я согласен с ответами с участием ng-html2js (обычно называемым html2js), но я хотел бы расширить их, чтобы предоставить здесь полное решение.

Чтобы отобразить вашу директиву, Angular использует $http.get() для извлечения вашего шаблона из templateUrl. Поскольку это модульное тестирование и angular-mocks загружено, angular-mocks перехватывает вызов $http.get() и дает вам ошибку Unexpected request: GET. Вы можете попытаться найти способы передать это, но гораздо проще использовать Angular $templateCache для предварительной загрузки ваших шаблонов. Таким образом, $http.get() не будет проблемой.

То, что делает ng-html2js препроцессор для вас. Чтобы запустить его, сначала установите его:

$ npm install karma-ng-html2js-preprocessor --save-dev

Затем настройте его, добавив/обновив следующие поля в karma.conf.js

{
    files: [
      //
      // all your other files
      //

      //your htmp templates, assuming they're all under the templates dir
      'templates/**/*.html'
    ],

    preprocessors: {
        //
        // your other preprocessors
        //

        //
        // tell karma to use the ng-html2js preprocessor
        "templates/**/*.html": "ng-html2js"
    },

    ngHtml2JsPreprocessor: {
        //
        // Make up a module name to contain your templates.
        // We will use this name in the jasmine test code.
        // For advanced configs, see https://github.com/karma-runner/karma-ng-html2js-preprocessor
        moduleName: 'test-templates',
    }
}

Наконец, в тестовом коде используйте только что созданный модуль test-templates. Просто добавьте test-templates к вызову модуля, который вы обычно делаете в beforeEach, например:

beforeEach(module('myapp', 'test-templates'));

Это должно быть плавным отсюда. Чтобы более подробно изучить этот и другие сценарии тестирования директив, просмотрите этот пост

Ответ 4

Вы могли бы получить $templatecache из инжектора, а затем сделать что-то вроде

$templateCache.put("views/currency-select.html","<div.....>");

где вместо <div.....> вы разместите свой шаблон.

После этого вы настраиваете свою директиву, и она должна работать нормально!

Ответ 5

Если это еще не работает, используйте скрипт для просмотра содержимого файла js, динамически созданного процессором htmltojs, и проверьте путь к файлу шаблона.

Это должно быть что-то вроде этого

angular.module('app/templates/yourtemplate.html', []).run(function($templateCache) {
  $templateCache.put('app/templates/yourtemplate.html', 

В моем случае это было не так, как в моей фактической директиве, которая вызывала проблему.

Наличие шаблонаURL точно так же во всех местах меня достало.

Ответ 6

В соответствии с запросом, преобразование комментария в ответ.

Для людей, которые хотят использовать ответ @Lior в приложениях Yeoman:

Иногда, когда шаблоны ссылаются на конфигурацию кармы и, следовательно, имена модулей, созданных ng-html2js, не соответствуют значениям, указанным как templateUrl в определениях директив.
Вам нужно будет настроить имена сгенерированных модулей в соответствии с templateUrl s.
Это может быть полезно:

• https://github.com/karma-runner/karma-ng-html2js-preprocessor#configuration
• gist: https://gist.github.com/vucalur/7238489

Ответ 7

Это пример того, как проверить директиву, использующую partial как templateUrl

describe('with directive', function(){
  var scope,
    compile,
    element;

  beforeEach(module('myApp'));//myApp module

  beforeEach(inject(function($rootScope, $compile, $templateCache){
   scope = $rootScope.$new();
   compile = $compile;

   $templateCache.put('view/url.html',
     '<ul><li>{{ foo }}</li>' +
     '<li>{{ bar }}</li>' +
     '<li>{{ baz }}</li>' +
     '</ul>');
   scope.template = {
     url: 'view/url.html'
    };

   scope.foo = 'foo';
   scope.bar = 'bar';
   scope.baz = 'baz';
   scope.$digest();

   element = compile(angular.element(
    '<section>' +
      '<div ng-include="template.url" with="{foo : foo, bar : bar, baz : baz}"></div>' +
      '<div ng-include="template.url" with=""></div>' +
    '</section>'
     ))(scope);
   scope.$digest();

 }));

  it('should copy scope parameters to ngInclude partial', function(){
    var isolateScope = element.find('div').eq(0).scope();
    expect(isolateScope.foo).toBeDefined();
    expect(isolateScope.bar).toBeDefined();
    expect(isolateScope.baz).toBeDefined();
  })
});

Ответ 8

Если вы используете jasmine-maven-plugin вместе с RequireJS, вы можете использовать текстовый плагин, чтобы загрузить содержимое шаблона в переменную, а затем поместить его в кеш шаблона.

define(['angular', 'text!path/to/template.html', 'angular-route', 'angular-mocks'], function(ng, directiveTemplate) {
    "use strict";

    describe('Directive TestSuite', function () {

        beforeEach(inject(function( $templateCache) {
            $templateCache.put("path/to/template.html", directiveTemplate);
        }));

    });
});