单元测试 – 你如何模拟指令以启用高级指令的单元测试?

前端之家收集整理的这篇文章主要介绍了单元测试 – 你如何模拟指令以启用高级指令的单元测试?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在我们的应用程序中,我们有几层嵌套指令。我试图写一些单元测试的顶级指令。我嘲笑了指令本身需要的东西,但现在我从低级指令运行错误。在我对顶级指令的单元测试中,我不想担心低级指令发生了什么。我只是想嘲笑较低级别的指令,基本上它没有做任何事情,所以我可以测试顶级指令隔离。

我试过覆盖指令定义,做这样的事情:

angular.module("myModule").directive("myLowerLevelDirective",function() {
    return {
        link: function(scope,element,attrs) {
            //do nothing
        }
    }
});

但是,这不会覆盖它,它只是运行这个除了真正的指令。如何阻止这些低级指令在我的单元测试中执行顶级指令?

由于执行了指令注册,似乎不可能用嘲笑的指令替换现有指令。

但是,您有几种方法来单元测试较高级别的伪指令,而不受较低级别伪指令的干扰:

1)不要在单元测试模板中使用下级指令:

如果您的较低级别的指令没有被更高级别的指令添加,在您的单元测试中使用一个只有高级指令的模板:

var html = "<div my-higher-level-directive></div>";
$compile(html)(scope);

所以,较低级别的指令不会干扰。

2)在指令实现中使用服务:

您可以通过服务提供较低级别的指令链接功能

angular.module("myModule").directive("myLowerLevelDirective",function(myService) {
    return {
        link: myService.lowerLevelDirectiveLinkingFunction
    }
});

然后,您可以在您的单元测试中模拟此服务,以避免干扰您的更高级别的指令。如果需要,这个服务甚至可以提供整个指令对象。

3)您可以使用终端指令覆盖您的下级指令:

angular.module("myModule").directive("myLowerLevelDirective",function(myService) {
    return {
        priority: 100000,terminal: true,link: function() {
            // do nothing
        }
    }
});

使用终端选项和更高的优先级,您的实际低级指令将不会被执行。更多信息在directive doc

看看它在这个Plunker如何工作。

原文链接:https://www.f2er.com/angularjs/146379.html

猜你在找的Angularjs相关文章