手动触发输入字段的 Angular 数据绑定(仅用于单元测试目的) [英] Manually trigger Angular data binding for an input field (for unit testing purposes only)
问题描述
我正在为 Angular 指令编写一些测试，我需要模拟用户输入到输入字段中.我试图这样做:
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');
但是没有用.触发 change 也不起作用.我知道我可以使用 element.scope() 直接访问元素范围并更改它，但更改输入的值并让 Angular 进行数据绑定似乎更自然.
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.
对于它的价值，我已经从 Angular ngScenario 中查看了 input(name).enter(value)，它似乎和我做的一样:
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 脚本来说明问题)
(I made a jsFiddler script to illustrate the question)
更新
我认为需要澄清一下.我不是要更改 DOM 或 Angular 领域之外的范围本身.我有一个指令，它呈现一个绑定到指令范围属性的输入框.我正在编写自动化测试以确保指令完成它应该做的事情，并且一个测试应该做的是模拟一些输入，以便指令范围得到更新，并且我可以断言对该输入执行了某些行为.正如我之前提到的，我可以使用 element.scope() 从测试代码中更改指令的范围，但我宁愿更改输入的值并让 Angular 来做它的事情.
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 trigger 函数触发.我的 jsFiddle 脚本不起作用，因为 Angular 的脚本在 jQuery 之前加载(因此使用 jqLite).我更新了 脚本 以正确的顺序加载所有内容，以便 Angular 使用 jQuery on 函数进行注册事件处理程序，现在它模拟输入框的变化并告诉 Angular 进行数据绑定.
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.
出于同样的原因，我的测试代码无法正常工作.我也通过更改脚本顺序来修复它.如果我没有使用 jQuery，我将不得不通过调用 dispatchEvent 而不是 trigger 来触发事件.
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.
这篇关于手动触发输入字段的 Angular 数据绑定(仅用于单元测试目的)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
