手动触发角数据输入域绑定（单元测试，仅供参考） [英] Manually trigger Angular data binding for an input field (for unit testing purposes only)
问题描述
我正在写一个角指令一些测试，我需要模拟用户输入到输入字段中。我试着这样做：
I'm writing some tests for an Angular directive and I need to simulate user input into an input field. I tried to do this:
element.find('input').val('some value').trigger('input');
但它没有工作。触发变更也不能工作。我知道我可以直接与 element.scope（），并改变它访问该元素的范围，但它似乎更自然改变输入的值，让角度做数据绑定。
but it didn't work. Triggering change didn't work either. I know I can access the element scope directly with element.scope() and change it, but it seems more natural to change the input's value and let Angular do the data binding.
有关它的价值，我已经签出输入（名）。进入（值）从角ngScenario，似乎像我一样做同样的：
For what it's worth, I've checked out input(name).enter(value) from Angular ngScenario, and it seems to do the same as I did:
...
input.val(value);
input.trigger(event || (supportInputEvent ? 'input' : 'change'));
...
我在想什么？有没有更好的方法来测试在这种情况下用户输入？
What am I missing? Is there a better way to test user input in this case?
（我做了一个jsFiddler脚本来说明问题）
更新
我觉得需要一些澄清。我并不想改变DOM，也不角范围之外的范围的本身的。我有呈现绑定到指令的范围的属性的输入框指令。我写的自动化测试，以确保指令做什么它应该做的，什么一个测试应该做的是模拟一些输入，使该指令范围得到更新，我可以断言，有些行为是该输入进行。正如我前面提到的，我可以通过改变从测试code指令的范围 element.scope（），但我宁愿改变输入的值，并让角做它的东西。
I think some clarification is needed. I'm not trying to change the DOM nor the scope outside Angular realm per se. I have a directive that renders an input box bound to a property of the directive's scope. I'm writing automated tests to ensure the directive does what it's supposed to do, and what one test should do is to simulate some input so that the directive scope gets updated and I can assert that some behavior is performed on that input. As I mentioned earlier, I can change the directive's scope from the test code by using element.scope(), but I'd rather change the input's value and let Angular do its thing.
推荐答案
花更多的时间研究和测试后，我已经想通了什么岔子：jqLite使用注册的事件处理程序的addEventHandler ，他们没有得到的jQuery 触发功能触发。我的jsfiddle脚本不工作，因为角度的剧本正在前jQuery的加载（因此使用jqLite是）。我更新脚本的，这样对角以正确的顺序加载一切$ C>函数注册事件处理程序，而现在它模拟的输入框的变化，并告诉角度做数据绑定。
After spending some more time researching and testing, I've figured out what was wrong: jqLite registers event handlers using addEventHandler and they don't get triggered by jQuery trigger function. My jsFiddle script wasn't working because Angular's script was being loaded before jQuery's (and therefore was using jqLite). I updated the script to load everything in the correct order so that Angular uses jQuery on function to register event handlers, and now it simulates changes on the input box and tells Angular to do the data binding.
我的测试code的不工作的同样的原因。我通过改变脚本命令以及固定它。如果我不碰巧使用jQuery，我会通过调用触发事件则dispatchEvent 而不是触发
My test code wasn't working for the very same reason. I fixed it by changing the scripts order as well. If I didn't happen to be using jQuery, I would have to trigger the event by calling dispatchEvent instead of trigger.
这篇关于手动触发角数据输入域绑定（单元测试，仅供参考）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
