手动触发输入字段的Angular数据绑定(仅用于单元测试)

Mic*_*ord 9 angularjs angularjs-directive angularjs-scope

我正在为Angular指令编写一些测试,我需要将用户输入模拟到输入字段中.我试着这样做:

element.find('input').val('some value').trigger('input');
Run Code Online (Sandbox Code Playgroud)

但它不起作用.触发change也不起作用.我知道我可以直接访问元素范围element.scope()并更改它,但更改输入值并让Angular执行数据绑定似乎更自然.

对于它的价值,我已经input(name).enter(value)从Angular ngScenario中检出了它,它似乎和我一样:

...
input.val(value);
input.trigger(event || (supportInputEvent ? 'input' : 'change'));
...
Run Code Online (Sandbox Code Playgroud)

我错过了什么?在这种情况下,有更好的方法来测试用户输入吗?

(我制作了一个jsFiddler脚本来说明这个问题)

UPDATE

我认为需要澄清一些.我不是试图改变DOM以及Angular领域之外的范围本身.我有一个指令,它将输入框绑定到指令范围的属性.我正在编写自动化测试以确保指令执行它应该做的事情,并且一个测试应该做的是模拟一些输入以便指令范围得到更新并且我可以断言在该输入上执行某些行为.正如我之前提到的,我可以通过使用来改变测试代码的指令范围element.scope(),但我宁愿改变输入的值,让Angular做它的事情.

Mic*_*ord 7

在花了一些时间研究和测试之后,我发现了什么是错误的:jqLit​​e注册使用的事件处理程序addEventHandler,它们不会被jQuery trigger函数触发.我的jsFiddle脚本无效,因为Angular的脚本是在jQuery之前加载的(因此使用的是jqLit​​e).我更新了脚本以正确的顺序加载所有内容,以便Angular使用jQuery on函数注册事件处理程序,现在它模拟输入框上的更改并告诉Angular执行数据绑定.

我的测试代码无法正常工作.我通过更改脚本顺序修复了它.如果我没有碰巧使用jQuery,我将不得不通过调用触发事件dispatchEvent而不是trigger.

  • jQuery的`trigger`**通过`addEventListener`来解决**处理程序:http://jsbin.com/APEwimu/1(来源:http://jsbin.com/APEwimu/1/edit).对于[长](http://jsbin.com/APEwimu/2),[**long**](http://jsbin.com/APEwimu/3)时间(1.2.6为很久以前我决定去).在Chrome,Firefox和[IE8](http://jsbin.com/APEwimu/4)上测试过 - 必须编辑最后一个脚本,当然,因为它需要`attachEvent`. (2认同)