Question

我有一个指令需要在其值发生变化时重新进行评估。代码实际上工作正常，但我想在测试用例中捕捉到这一点，我似乎无法让手表处理程序运行。

我将提供一个简化示例：

所以这是使用该指令的html - data.id是在范围上评估的属性，可以更新并使指令运行其监视处理程序

<div my-directive="id=data.id"></div>

这是指令代码

angular.module("myApp").directive("myDirective", function()
{
    return {
        restrict: "A",
        link: function(scope, element, attrs)
        {
            function execute(directiveValue) {
                /** run directive things **/
            }
            execute(attrs.myDirective);
            scope.$watch(attrs.myDirective, execute);
        }
    };
}]);

这是我试图通过的Jasmine测试 - 间谍用于在execute（）函数内调用并沿着

传递新ID值的工厂

describe("updating ID", function() {
        it("should re-evaluate directive", function() {
        scope.myID = "12345";
        element = $compile("<div my-directive='id=myID;'></div>")(scope);
        scope.$digest();

        scope.myID = "new ID";
        scope.$apply();
        var instances = spy.calls.mostRecent().args[2];

        expect(instances).toEqual(["new ID"]);
    });
});

我的测试失败了

    Expected [ '12345' ] to equal [ 'new ID' ].

谢谢！

Answer 1

如果你有一个范围。$ watch函数，在调用范围之后。$ digest / $ apply，你应该断言你的$ watch方法的改变已经改变了：

describe("updating ID", function() {
    it("should re-evaluate directive", function() {
        scope.myID = "12345";
        element = $compile("<div my-directive='id=myID;'></div>")(scope);
        scope.$digest();

        scope.myID = "new ID";
        scope.$digest();

        expect(whatever scope property your watch function changes).toEqual(your expectation);
    });
});

Answer 2

我设法让这个工作，我不完全确定我的问题的根源是什么，但我会发布我的代码，以防它帮助任何人。我认为这更多地与正在评估的值的评估方式有关，因为我的监视处理程序实际上正在运行但是传递的值无效

指令：

angular.module("myApp").directive("myDirective", function()
{
    return {
        restrict: "A",
        link: function(scope, element, attrs)
        {
            function execute(directiveValue) {
                /** run directive things **/
            }
            scope.$watch(function() {
                return attrs.myDirective;
            }, execute);
        }
    };
}]);

测试：

describe("updating ID", function() {
    scope.myID = "12345";
    compile("<div my-directive='id=myID;'></div>");

    spyOn(AuthCheck, "isAuthorised");
    scope.myID = "newID";
    scope.$digest();

    expect(AuthCheck.isAuthorised).toHaveBeenCalled();
});

如何测试Angular指令在其值更改时运行监视处理程序

2 个答案: