如何在指令的链接功能测试行为 [英] How to test behavior in the link function of a directive

问题描述

在我的一些指令，我添加功能的范围来处理特定的指令逻辑。例如：

In some of my directives, I'm adding functions to the scope to handle logic specific for the directive. For example:

link: function(scope, element, attrs) {
         scope.doStuff = function() {
            //do a bunch of stuff I want to test
         }        
      }

我如何去测试该功能？我用Google搜索周围如何测试指令，但我发现事情更有关测试在元素上的变化。当然，我可以编译我的每个测试之前我的指令，但是这将消灭每一次我的范围。我要测试的功能特性在我的范围发生变化。

How do I go about testing that function? I googled around for how test a directive, but the things I found were more about testing changes on the element. I can certainly compile my directive before each of my tests, but that would wipe out my scope every time. I want to test the function as properties in my scope changes.

有没有办法让一个从指令定义返回的对象的举行？然后，我可以直接调用链接功能和测试上的每个范围定义的函数的行为。有没有更好的方式来做到这一切的？

Is there any way to get a hold of the object that is returned from the directive definition? Then I could just call the link function directly and test the behavior of each of the functions defined on the scope. Is there a better way to do all this?

我用茉莉花来运行我的测试，我想在描述的功能，这样我就可以有多个是功能相同范围的数据。

I'm using Jasmine to run my tests, and I'm wanting to my scope setup in the describe functions, so I can have multiple it functions for the same scope data.

推荐答案

基本上，而不是测试链接功能本身，你会测试指令的结果（S）编程。你会做什么是写出来的指令为一个字符串，并使用 $编译有角处理它。然后你测​​试的输出，以确保一切正确接线。

Basically, rather than test the link function itself, you'd test the outcome(s) of the directive programmatically. What you would do is write out the directive to a string, and use $compile to have angular process it. Then you test the output to make sure everything is wired up correctly.

角的来源是充满了如何做到这一点...例如的的ngRepeat指令角的测试

Angular's source is full of good examples of how to do this... for example Angular's test of the ngRepeat directive

您可以看到他们正在做的是建立指令，改变的范围（在这种情况下 $ rootScope ），确保它的 $摘要编辑，然后测试其输出，以确保一切的DOM正确接线。您还可以测试什么的范围，如果该指令改变这一点。

You can see what they're doing is setting up the directive, Changing the scope (in this case $rootScope) making sure it's $digested, and then testing the DOM it outputs to make sure everything is wired up correctly. You can also test what's in the scope, if the directive is altering that.

为ngClick测试也是pretty有趣，因为它显示了一个浏览器交互的测试和它的规模效应。

The test for ngClick is also pretty interesting, because it shows testing of a browser interaction and it's effect on the scope.

为了完整起见，这里是从ngClick测试，我想总结了测试指令相当不错的一个片段：

For sake of completeness, here's a snippet from the ngClick tests that I think sums up testing a directive fairly well:

 it('should get called on a click', inject(function($rootScope, $compile) {
   element = $compile('<div ng-click="clicked = true"></div>')($rootScope);
   $rootScope.$digest();
   expect($rootScope.clicked).toBeFalsy();

   browserTrigger(element, 'click');
   expect($rootScope.clicked).toEqual(true);
 }));

因此​​，在您 scope.doStuff 功能的情况下，我不会考什么它的做的，这么多，我想考不管它影响的范围，并且它随后影响DOM元素。

So in the case of your scope.doStuff function, I wouldn't test what it's doing, so much as I'd test whatever it's affected on the scope, and it's subsequently effected DOM elements.

这篇关于如何在指令的链接功能测试行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！