javascript - 在 Angular 上，我如何测试指令中正在调用的范围函数？

Question

在 Angular 上，我如何测试在我的指令中调用的范围函数？

我在 Angular 版本 1 中使用 jasmine、karma runner 和 js 单元测试。

这是我的指令代码:

angular.module("myApp.directives")
    .directive("test", ["$rootScope", function($rootScope) {
        return {
            restrict: "E",
            scope: {
                "figures": "="
            },
            templateUrl: "templates/components/test.html",
            link: function(scope) {

                scope.init = function() {
                    if (scope.figures !== undefined) {
                        for (let i = 0; i < scope.figures.length; i++) {
                            scope.figures[i].isModalVisible = false;
                        }
                    }
                };

                scope.init ();
            }
        };
    }]);

这是我的单元测试:

describe("test", function () {    
    var element,
        scope,
        otherScope
        mockData = [
            {                
                isModalVisible: true
            },
            {                
                isModalVisible: false
            }
        ];

    beforeEach(angular.mock.module("myApp.directives"));

    beforeEach(inject(function($rootScope, $compile) {
        scope = $rootScope.$new();
        scope.agg = mockData;

        element = "<test figures=\"agg\"></test>";
        element = $compile(element)(scope);

        angular.element(document.body).append(element);

        scope.$digest();

        otherScope = element.isolateScope();

        spyOn(otherScope, "init");
    }));    

    //This one doesn't work
    it("should close all modals by default", function () {
         expect(otherScope.init).toHaveBeenCalled();
    });
});

这是我目前收到的错误:“Expected spy init to have been called。”

Answer 1

首先:你的spyOn(scope, "init")和expect(scope, "init")都是在错误的上执行的范围。您将 init inside 指令添加到隔离范围，因此它应该是 spyOn(otherScope, "init") 和 expect(otherScope, "init").

其次，第一点还是会失败。 :) 原因是 init() 只会在调用 link() 时执行一次，这将在 beforeEach block 内的 scope.$digest() 上发生——但您不在其中提供数据。您稍后在测试中提供它时为时已晚，因为指令已经链接到第一个摘要周期并且 init() 不会在测试中的第二个 scope.$digect() 上调用。要解决这个问题，您需要推迟第一个摘要周期，直到您在测试用例本身中准备好所有数据。

第三，您需要先将 html 元素附加到 DOM，然后再编译它。在这种简单的情况下，它可能会起作用，但是如果您的元素中的任何内容都需要父元素某处的指令(即内部指令具有类似 require: "^something" 的配置)，那么编译将失败:有在您将新元素实际插入到 DOM 之前，只是没有包含新元素所需实体的父元素。

更新

你不能像那样测试这个场景。安装 spy 的正确时间点是在将 init() 添加到范围之后但在调用它之前，但问题是这个时间点位于指令内，因为函数调用在添加后立即触发作用域。由于这一点不在测试代码中，因此您没有机会以这种方式编写测试。

但是让我们从另一个 Angular 考虑这种情况。初始化()是做什么的？它重置数据数组上的标志。因此，您可以在 $digest() 之前使用 true 值初始化这些标志，并且您可以检查这些标志是否已重置 在 调用$digest() 之后。通过这种方式，您可以轻松准备数据并断言结果。您的测试将能够清楚地告诉您 init() 是否实际被调用，甚至更多 - 如果它做了它应该做的事情。