如何在指令的链接函数中测试行为 [英] 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
         }        
      }

我该如何测试该功能?我在谷歌上搜索了如何测试指令，但我发现的东西更多的是关于测试元素的变化.我当然可以在每次测试之前编译我的指令，但这每次都会消除我的范围.我想在范围内的属性发生变化时测试该函数.

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?

我使用 Jasmine 来运行我的测试，并且我想要在 describe 函数中设置我的范围，所以我可以有多个 it 函数用于相同的范围数据.

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.

推荐答案

基本上，不是测试链接函数本身，而是以编程方式测试指令的结果.您要做的是将指令写入字符串，然后使用 $compile 对其进行角度处理.然后测试输出以确保一切都正确连接.

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.

Angular 的源代码中充满了如何做到这一点的好例子……例如 Angular 对 ngRepeat 指令的测试

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

您可以看到他们正在做的是设置指令，更改范围(在本例中为 $rootScope)确保它是 $digest ed，然后测试它输出的 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 的测试也很有趣，因为它显示了对浏览器交互的测试及其对范围的影响.

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屋！