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

我对包含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);
    })

});

更新

我正在加载带有

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
            }
        }
      }
});

---

角度单元测试不能完成真正的请求

所有

templateUrl

模板都应使用

$templateCache.put（'assets/app/directives/topbar.html'，…topbar.html内容…）

---

在请求它们的操作之前（

$compile

在本例中调用）。

我使用的

ng-html2js

已经在缓存中加载模板。您已将其从问题中排除，而这是最相关的部分。基本上，它应该做上面描述的事情。因为它应该是assets/app/directives/topbar.html而不是app/directives/topbar.html，所以我认为这就是问题所在。如果我添加

console.log（$templateCache.get（'app/directives/topbar.html'）我可以看到模板已加载。因为请求的url是
assets/app/..
，而不是
app/..
。这是两个不同的URL。我不使用html2js，但我想您需要选项。如果我将
app/..
更改为
assets/app/..
，那么console.log 1到5将
未打印，这意味着声明模板的模块失败。
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
            }
        }
      }
});