将模板附加到元素的测试指令

Question

我有一个动态添加加载指示器到 html 元素的指令。这是指令：

return {
    restrict: 'EA',
    scope: true,
    replace: true,
    transclude: true,
    template: '<div ng-transclude></div>',
    link: function(scope, element, attr) {
        var loadingExpression = attr["loadingIndicator"] || attr["loadingState"];

        scope.$watch(loadingExpression, function (isLoading) {
            scope["isLoading"] = isLoading;
        });

        $templateRequest('/templates/loading-indicator/indicator.html').then(function(template) {
            $compile(template)(scope).appendTo(element);
        });

        // Apply position:relative to parent element if necessary
        var position = element.css('position');
        if (!position || position === 'static') {
            element.css('position','relative');
        }
    }
};

按预期工作。

现在我想为该指令编写一个简单的测试，以查看是否将加载微调器（indicator.html 模板的一部分）添加到 DOM:

describe('loadingIndicatorDirective', function () {
    var element, $scope;

    beforeEach(function () {
        module('loadingIndicator');

        inject(function ($rootScope, $compile) {
            element = angular.element(
                '<div>' +
                    '<div loading-indicator="true">' +
                        '<p>Lorem Ipsum ...</p>' +
                        '<p>TEST TEST TEST</p>' +
                    '</div>' +
                '</div>'
            );

            $scope = $rootScope;
            $compile(element)($scope);
            $scope.$digest();
        })
    });

    it('should create a loading spinner', function () {
        var spinner = element.find('.loading-indicator');

        expect(spinner.length).toBe(1);
    });
});

当运行测试时，我得到错误："Error: Unexpected request: GET /templates/loading-indicator/indicator.html"。我想要一个测试，它使用我在指令中附加的实际模板。这不可能吗？

Answer 1

这是因为 Angular 尝试使用 HTTP GET 请求获取 HTML 内容。但是，在单元测试环境中，您实际上无法发出 HTTP 请求，因为您没有完整的 Web 服务器环境。

要解决这个问题，您必须避免直接 GET 请求，并用将 Angular 模板编译成 JavaScript 字符串的预处理器代替它们。例如，html2js 完成这项工作。

您可以遵循以下 html2js 操作方法之一：

其他 Whosebug 用户已经遇到了一些 html2js 错误。您还可以检查这些问题：

Directive with templateUrl - testing with ng-html2js
Karma throws error: Can not load "ng-html2js", it is not registered

将模板附加到元素的测试指令

Testing directive that appends template to element

javascript

angularjs

mocha.js

chai