您如何模拟指令以启用更高级别指令的单元测试?

问题描述

在我们的应用程序中，我们有多层嵌套指令.我正在尝试为顶级指令编写一些单元测试.我嘲笑了指令本身需要的东西，但现在我遇到了来自较低级别指令的错误.在我对顶级指令的单元测试中，我不想担心低级指令中发生了什么.我只想模拟较低级别的指令，基本上什么都不做，这样我就可以单独测试顶级指令.

我尝试通过执行以下操作来覆盖指令定义:

angular.module("myModule").directive("myLowerLevelDirective", function() {返回 {链接:函数(范围，元素，属性){//没做什么}}});

然而，这不会覆盖它，它只是在真正的指令之外运行它.如何阻止这些较低级别的指令在我的顶级指令的单元测试中执行任何操作?

解决方案

由于指令注册的实施，似乎不可能用模拟指令替换现有指令.

但是，您有多种方法可以在不受低级指令干扰的情况下对高级指令进行单元测试:

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

如果你的低级指令没有被你的高级指令添加，在你的单元测试中使用一个只有你高级指令的模板:

var html = "
";$编译(html)(范围)；

因此，较低级别的指令不会干扰.

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

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

angular.module("myModule").directive("myLowerLevelDirective", function(myService) {返回 {链接:myService.lowerLevelDirectiveLinkingFunction}});

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

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

angular.module("myModule").directive("myLowerLevelDirective", function(myService) {返回 {优先级:100000，终端:真的，链接:函数(){//没做什么}}});

使用终端选项和更高的优先级，您真正的低级指令将不会被执行.指令文档中的更多信息.

看看它在这个 Plunker 中是如何工作的.

In our app we have several layers of nested directives. I'm trying to write some unit tests for the top level directives. I've mocked in stuff that the directive itself needs, but now I'm running into errors from the lower level directives. In my unit tests for the top level directive, I don't want to have to worry about what is going on in the lower level directives. I just want to mock the lower level directive and basically have it do nothing so I can be testing the top level directive in isolation.

I tried overwriting the directive definition by doing something like this:

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

However, this does not overwrite it, it just runs this in addition to the real directive. How can I stop these lower level directives from doing anything in my unit test for the top level directive?

解决方案

Due to the implementation of the directive registration, it does not seem possible to replace an existing directive by a mocked one.

However, you have several ways to unit test your higher level directive without interference from lower level directives :

1) Do not use lower level directive in your unit test template :

If your lower level directive is not added by your higher level directive, in your unit test use a template with only you higer-level-directive :

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

So, lower level directive will not interfere.

2) Use a service in your directive implementation :

You can provide the lower level directive linking function by a service :

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

Then, you can mock this service in your unit test to avoid interference with your higher level directive. This service can even provide the whole directive object if needed.

3) You can overwrite your lower level directive with a terminal directive :

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

With the terminal option and a higher priority, your real lower level directive will not be executed. More infos in the directive doc.

See how it works in this Plunker.

这篇关于您如何模拟指令以启用更高级别指令的单元测试?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！