Question

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

element.find('input').val('some value').trigger('input');

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

为了它的价值，我从Angular ngScenario中检查了input(name).enter(value)，它似乎和我一样：

...
input.val(value);
input.trigger(event || (supportInputEvent ? 'input' : 'change'));
...

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

（我让a jsFiddler script来说明问题）

更新

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

Answer 1

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

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

Answer 2

这是以角度方式执行此操作的正确方法。你应该这样做。

Working DEMO

在$ scope中创建函数并更改变量值，以便angular本身将更新输入字段以及您使用（绑定）此变量的所有位置。

Angular Function

$scope.changeInput = function() {
    $scope.value="barfoo";
}

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

2 个答案: