如何在 Jasmine 测试中使用我的 templateCache 模块？答案

【问题标题】：How can I utilise my templateCache module in my Jasmine tests?如何在 Jasmine 测试中使用我的 templateCache 模块？
【发布时间】：2015-12-04 04:26:57
【问题描述】：

我不想使用 karma-ng-html2js-preprocessor 或 $httpBackend。我有一个动态创建的 templateCache 模块。

app.js

angular.module('myApp', ['ngRoute', 'ui.bootstrap', 'ui.router', 'appTemplates']);

模板.js

(function(){

'use strict';

angular.module('appTemplates', []).run(['$templateCache',
    function($templateCache) {
        $templateCache.put('js/Templates/datetimepicker.html', '<div>My html here</div>');
    }
]);
})();

还有一个指令

datetimepicker.js

angular.module('myApp').directive('datetimepicker',
    function () {
        return {
            restrict: 'A',
            replace: false,
            templateUrl: 'js/Templates/datetimepicker.html'
        };
    }
);

问题是，我的测试在编译指令时似乎不想使用templateCache。

test.js

(function () {

"use strict";

describe("Datetimepicker directive tests", function () {

    var scope, templateCache, element;

    // load the directive's module
    beforeEach(module('myApp'));

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


    }));

    it('should exist', inject(function ($compile) {

       //this console.log prints out the correct HTML from cache
  //console.log(templateCache.get('js/Templates/datetimepicker.html'));

        element = angular.element('<div data-datetimepicker></div>');
        element = $compile(element)(scope);
        // this logs the element
        console.log(element);
        //this $digest call throws the error
        scope.$digest();

        console.log(element);

        expect(element.html()).toContain('div');
    }));
});
})();

我明白了：

Error: Unexpected request: GET template/datepicker/datepicker.html

当我运行测试时，我的控制台中的 $httpBackend 预计不会有更多请求。

任何帮助表示赞赏。谢谢

【问题讨论】：

线索在错误中。 datetimepicker 指令包含一个名为 datepicker 的 Angular-UI 指令。正是这导致了错误。我猜我的指令不可单元测试。

标签： javascript angularjs jasmine angular-templatecache

【解决方案1】：

线索在错误中。 datetimepicker 指令包含一个名为 datepicker 的 Angular-UI 指令。正是这导致了错误。我想我的指令不是可单元测试的，我将专注于这个指令的 E2E 测试。因此，这个问题具有误导性，因为该模板实际上包含的 HTML 比我在此处发布的要多。无论如何，谢谢！希望这个答案能帮助遇到同样错误的人！

【讨论】：

【解决方案2】：

任何一个指令模块都应该引用模板缓存模块作为依赖：

angular.module('myApp', ['appTemplates']).directive('datetimepicker',

或者在你的测试中手动加载模块：

// load the directive's module
beforeEach(module('myApp'));
beforeEach(module('appTemplates'));

否则模板缓存模块run 方法将不会执行，因此缓存中没有模板。

【讨论】：

从我的原始代码中可以看出，appTemplates 模块作为依赖项注入到我的应用程序 (app.js) 中。正如我在 test.js 中的评论所证明的那样，templateCache 正在运行。 templateCache.get 有效！您的解决方案应该有效，但我的测试无法识别它，这仍然是问题所在。

【解决方案3】：

对请求使用 $httpBackend 模拟服务。

//expect a GET request to a url.
$httpBackend.expectGET('whatever url you want');
//...place your code.

//flush pending requests.
$httpBackend.flush();

欲了解更多信息，请参阅official angular $httpBackend service page.

【讨论】：