指示:
... template: "<input ng-model='myModel' ng-change='doIt()' type='text'>"
测试:
el.find('input').trigger('change') // Dos not trigger ng-change
现场演示(ng-change):http://plnkr.co/edit/0yaUP6IQk7EIneRmphbW?p=preview
现在,如果我手动绑定更改事件而不是使用ng-change属性,则测试通过。
template: "<input ng-model='myModel' type='text'>",link: function(scope,element,attrs) { element.bind('change',function(event) { scope.doIt(); }); }
现场演示(手动装订):http://plnkr.co/edit/dizuRaTFn4Ay1t41jL1K?p=preview
有没有办法使用变更并使其可测试?谢谢。
All I want to do in directive’s test is to check that
doIt
is called when user changes the input.
ng变化表示的表达是否正确评估是否真的是ngModel指令的责任,所以我不知道我会用这种方式进行测试;相反,我相信,ngModel和ngChange指令已被正确实现和测试,以调用指定的函数,只是测试调用函数本身以正确的方式影响指令。可以使用端对端或集成测试来处理完整的场景。
也就是说,您可以抓住驱动ngModel更改回调的ngModelController实例,并自行设置视图值:
it('trigger doIt',function() { var ngModelController = el.find('input').controller('ngModel'); ngModelController.$setViewValue('test'); expect($scope.youDidIt).toBe(true); });
正如我所说,尽管如此,我觉得这对于ngModel的责任来说太过分了,打破了用自然可组合的指令打黑盒子。
示例:http://plnkr.co/edit/BaWpxLuMh3HvivPUbrsd?p=preview
[更新]
在查看AngularJS源码后,我发现以下内容也起作用:
it('trigger doIt',function() { el.find('input').trigger('input'); expect($scope.youDidIt).toBe(true); });
在某些浏览器中,该事件看起来是不同的;输入似乎适用于Chrome。
示例:http://plnkr.co/edit/rbZ5OnBtKMzdpmPkmn2B?p=preview
这是relevant AngularJS code,它使用$ sniffer服务来确定要触发的事件:
changeInputValueTo = function(value) { inputElm.val(value); browserTrigger(inputElm,$sniffer.hasEvent('input') ? 'input' : 'change'); };
即使这样,我不知道我会用这种方式测试一个指令。