测试 Angular/Jasmine 指令无法获取模板 html

Question

我对包含 templateUrl 的 Angular 指令进行了以下 Karma/Jasmine 测试：

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 插件加载模板

在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

Angular 单元测试不能做真正的请求。

所有 templateUrl 模板都应使用

模拟

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

在请求它们的操作之前（$compile 在这种情况下调用）。

测试 Angular/Jasmine 指令无法获取模板 html

Testing Angular/Jasmine directive cannot GET template html

angularjs

karma-jasmine

jasmine2.0