如何触发指令测试在AngularJS NG-变化 [英] How to trigger ng-change in directive test in AngularJS
问题描述
我有创建一个输入元素下面AngularJS指令。输入具有运行的doIt（）函数 NG-变化属性。在我的指令的单元测试我要检查，如果当用户改变输入 doIt方法函数被调用。但测试没有通过。虽然工作在浏览器中手动测试时。
I have the following AngularJS directive that creates an input element. Input has ng-change attribute that runs doIt() function. In my directive's unit test I want to check if doIt function is called when users changes the input. But the test does not pass. Though it works in the browser when testing manually.
指令：
...
template: "<input ng-model='myModel' ng-change='doIt()' type='text'>"
测试：
el.find('input').trigger('change') // Dos not trigger ng-change
现场演示（NG-变化）：<一href=\"http://plnkr.co/edit/0yaUP6IQk7EIneRmphbW?p=$p$pview\">http://plnkr.co/edit/0yaUP6IQk7EIneRmphbW?p=$p$pview
现在，测试通过，如果我手动绑定更改事件，而不是使用 NG-变化属性。
Now, the test passes if I manually bind change event instead of using ng-change attribute.
template: "<input ng-model='myModel' type='text'>",
link: function(scope, element, attrs) {
element.bind('change', function(event) {
scope.doIt();
});
}
现场演示（手动绑定）：<一href=\"http://plnkr.co/edit/dizuRaTFn4Ay1t41jL1K?p=$p$pview\">http://plnkr.co/edit/dizuRaTFn4Ay1t41jL1K?p=$p$pview
有没有办法使用 NG-变化并使其可测试的方法吗？谢谢你。
Is there a way to use ng-change and make it testable? Thank you.
推荐答案
从你的解释性注释：
我要的指令中的测试做的是检查 doIt方法当用户改变输入被调用。
All I want to do in directive's test is to check that
doItis called when user changes the input.
不管是不是除权pression通过 NG-变化表示正确评估或不是真的 ngModel 指令，所以我不知道我会测试它以这种方式;相反，我相信，在 ngModel 和 ngChange 指令正确实施和测试，以调用指定的函数，和公正的测试调用函数本身影响以正确的方式的指令。端至端或集成测试可以用来处理充分使用方案
Whether or not the expression indicated by ng-change is correctly evaluated or not is really the responsibility of the ngModel directive, so I'm not sure I'd test it in this way; instead, I'd trust that the ngModel and ngChange directives have been correctly implemented and tested to call the function specified, and just test that calling the function itself affects the directive in the correct manner. An end-to-end or integration test could be used to handle the full-use scenario.
这是说，你可以得到驱动 ngModel 更改回调的 ngModelController 实例的保持和设置视图珍惜自己：
That said, you can get hold of the ngModelController instance that drives the ngModel change callback and set the view value yourself:
it('trigger doIt', function() {
var ngModelController = el.find('input').controller('ngModel');
ngModelController.$setViewValue('test');
expect($scope.youDidIt).toBe(true);
});
就像我说的，不过，我喜欢这种感觉是深远太远 ngModel 的职责，打破了黑拳，你与自然组合的指令得到的。
As I said, though, I feel like this is reaching too far into ngModel's responsibilities, breaking the black-boxing you get with naturally composable directives.
例如：<一href=\"http://plnkr.co/edit/BaWpxLuMh3HvivPUbrsd?p=$p$pview\">http://plnkr.co/edit/BaWpxLuMh3HvivPUbrsd?p=$p$pview
[更新]
在AngularJS源环顾四周后，我发现下面还有作品：
After looking around at the AngularJS source, I found that the following also works:
it('trigger doIt', function() {
el.find('input').trigger('input');
expect($scope.youDidIt).toBe(true);
});
它看起来像事件是在某些浏览器不同的; 输入似乎为Chrome工作。
It looks like the event is different in some browsers; input seems to work for Chrome.
例如：<一href=\"http://plnkr.co/edit/rbZ5OnBtKMzdpmPkmn2B?p=$p$pview\">http://plnkr.co/edit/rbZ5OnBtKMzdpmPkmn2B?p=$p$pview
下面是<一个href=\"https://github.com/angular/angular.js/blob/724819e3cfd8aeda1f724fb527db2b57494be9b7/test/ng/directive/inputSpec.js#L327-330\">relevant AngularJS code ，它使用了 $嗅探器服务找出触发的事件：
Here is the relevant AngularJS code, which uses the $sniffer service to figure out which event to trigger:
changeInputValueTo = function(value) {
inputElm.val(value);
browserTrigger(inputElm, $sniffer.hasEvent('input') ? 'input' : 'change');
};
即使有这个，我不知道我会用这种方式测试指令。
Even having this, I'm not sure I'd test a directive in this way.
这篇关于如何触发指令测试在AngularJS NG-变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
