Тестирование Angular/Jasmine директива не может получить шаблон HTML

Question

У меня есть следующий тест Karma/Jasmine Angular-директивы, который содержит templateUrl:

describe("topbar Directive", function() {

    var scope,element;

    beforeEach(module('app'));
    beforeEach(module('app/directives/topbar.html'));

    var title = 'This is the title';

    beforeEach(inject(function ($rootScope,$compile) {
        console.log(1)
        var formElement = angular.element('<div top-bar title="\'' + title + 
                '\'" on-close="modalCancel()"></div>');
        console.log(2)
        scope = $rootScope.$new();
        console.log(3)
        element = $compile(formElement)(scope);
        console.log(4)
        scope.$digest();
        console.log(5)
    }));


    it("should have a title", function() {
        console.log(6)
        expect(element.find('title')).toEqual(title);
    })

});

Результат теста не распечатывается console.log(5) и бросает исключение. В чем может быть проблема?

15 01 2017 12:36:53.239:INFO [karma]: Karma v1.3.0 server started at http://localhost:9876/
15 01 2017 12:36:53.242:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
15 01 2017 12:36:53.248:INFO [launcher]: Starting browser PhantomJS
15 01 2017 12:36:54.770:INFO [PhantomJS 2.1.1 (Windows 8 0.0.0)]: Connected on socket /#0Ml05I-NApeqvN5wAAAA with id 22588553
LOG: 1
LOG: 2
LOG: 3
LOG: 4
LOG: 6
PhantomJS 2.1.1 (Windows 8 0.0.0) topbar Directive should have a title FAILED
        Error: Unexpected request: GET assets/app/directives/topbar.html
        No more request expected (line 1245)
        $httpBackend@test/libs/angular/angular-mocks.js:1245:90
        sendReq@test/libs/angular/angular.js:10558:21
        serverRequest@test/libs/angular/angular.js:10268:23
        processQueue@test/libs/angular/angular.js:14792:30
        test/libs/angular/angular.js:14808:39
        $eval@test/libs/angular/angular.js:16052:28
        $digest@test/libs/angular/angular.js:15870:36
        test/directives/topbar.test.js:19:16
        invoke@test/libs/angular/angular.js:4523:22
        workFn@test/libs/angular/angular-mocks.js:2439:26
        loaded@http://localhost:9876/context.js:151:17
        undefined
        Expected ({ length: 0, prevObject: ({ 0: HTMLNode, length: 1 }), context: undefined, selector: 'title' }) to equal 'This is the title'.

ОБНОВИТЬ

Я загружаю шаблоны с ng-html2js плагин кармы

В karma.conj.js:

preprocessors: {
    'app/directives/*.html': 'ng-html2js'
},
ngHtml2JsPreprocessor: {
    stripPrefix: 'assets/'
},

И это директива, которую я тестирую, обратите внимание на templateUrl

angular.module('app').
directive("topBar", function() {
      return {
        restrict: "AE",        
        scope: {        
            title: '='
        },
        templateUrl: "assets/app/directives/topbar.html",
        link: function (scope, element, attrs) {
            scope.modalClose = function () {
                // ... some code
            }
        }
      }
});

Answer 1

Угловые юнит-тесты не могут выполнять реальные запросы.

Все templateUrl шаблоны должны быть издевались с

$templateCache.put('assets/app/directives/topbar.html', ...topbar.html contents...)

до действия, которое их запрашивает ($compile позвони в этом случае).