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

运行测试时，我收到错误：“错误：意外请求：GET /templates/loading-indicator/indicator.html”。我想要一个测试，它使用我在指令中附加的实际模板。这不可能吗？

Answer 1

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

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

您可以按照其中一个html2js操作方法：

其他StackOverflow用户已经在html2js中出现了一些错误。您还可以查看以下问题：

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

1 个答案: