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



我正在为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'));
...

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

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

更新

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

在花了更多的时间进行研究和测试后,我发现了问题所在:jqLite使用addEventHandler注册事件处理程序,而它们不会被jQuery trigger函数触发。我的jsFiddle脚本不起作用,因为Angular的脚本是在jQuery之前加载的(因此使用的是jqLite)。我更新了脚本,以正确的顺序加载所有内容,这样Angular使用jQueryon函数来注册事件处理程序,现在它模拟输入框上的更改,并告诉Angular进行数据绑定。

出于同样的原因,我的测试代码无法工作。我也通过更改脚本顺序来修复它。如果我没有使用jQuery,我将不得不通过调用dispatchEvent而不是trigger来触发事件。

在angular中这样做不是正确的方法。你应该这样做。

工作演示

在$scope内创建函数并更改变量值,以便angular本身将更新您的输入字段以及您使用(绑定)该变量的所有位置。

Angular Function

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

最新更新