如何测试指令的link函数中的行为

Question

在我的一些指令中,我正在向作用域添加函数来处理特定于指令的逻辑.例如:

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

我该如何测试该功能？我搜索了如何测试指令,但我发现的更多是关于测试元素的更改.我可以在每次测试之前编译我的指令,但这样每次都会消灭我的范围.我想测试该函数作为我的范围更改中的属性.

有没有办法获取从指令定义返回的对象？然后我可以直接调用链接函数并测试作用域上定义的每个函数的行为.有没有更好的方法来做这一切？

我正在使用Jasmine运行我的测试,我想在describe函数中设置我的示波器,所以我可以it为相同的示波器数据提供多个函数.

Answer 1

基本上,您不是测试链接函数本身,而是以编程方式测试指令的结果.你要做的是将指令写出一个字符串,并用$compile它来对它进行角度处理.然后测试输出以确保所有内容都正确连接.

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

您可以看到他们正在做的是设置指令,更改范围(在这种情况下$rootScope)确保它已$digest编辑,然后测试它输出的DOM以确保所有内容都正确连接.如果指令正在改变,你也可以测试范围内的内容.

对ngClick的测试也非常有趣,因为它显示了浏览器交互的测试及其对范围的影响.

为了完整起见,这里是ngClick测试的一个片段,我认为总结了相当好的测试指令:

 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元素.