在 angularjs 测试中使用 element.triggerHandler() 来测试粘贴和按键事件似乎没有效果

Question

想知道是否有人可以阐明如何在 angularjs 单元测试中正确使用element.triggerHandler()来paste和keypress事件。

我有两个指令，一个用于限制用户在达到长度限制后继续在元素中触发keypress事件的能力。第二种方法是防止用户在文本长度超过限制时将文本粘贴到元素中。

有关完整示例，包括我失败的测试，请参阅以下 plunker：https://plnkr.co/edit/5Yyv2cnn3dRKzsj2Lj61?p=preview

对于paste测试，我知道我没有使用正确的语法，但无法找到如何正确执行此操作。有什么建议吗？

element.triggerHandler('paste', 'astring')

对于keypress测试，我相信我正确地触发了事件，但它似乎没有更新元素的值(使用element.val()检索)

被困了一会儿，任何帮助将不胜感激。谢谢！

Answer 1

让我们从用户按下并释放1键并专注于输入时可能发生的情况(实际上取决于浏览器实现)的简短细分开始：

1. 触发事件keydown
2. 触发事件keypress
3. 输入值更改为1并触发事件input
4. 触发事件keyup

在JS中没有办法实际模拟用户按下一个键。您可以模拟的是用户这样做时(通常)发生的事情，例如上述步骤。

triggerHandler函数执行与特定元素上的指定事件类型的 jQuery 绑定的所有处理程序。

因此，将triggerHandler与keypress一起使用不会模拟用户按下某个键，它只会触发事件，就像上面的步骤 2 一样。该值不会更改，因为这发生在另一个步骤中。

现在，人们会认为，在对limitKeypressLength指令的测试中，您可以简单地模拟自己上面步骤 3 的第一部分(只需手动设置值)：

for (var i = 0; i < 10; i++) {  
element.triggerHandler({type: 'keypress', keyCode: 49});
element.val(element.val() + '1');
}
expect(element.val()).toBe('1111111111');
element.triggerHandler('keypress', {which: 49});
element.val(element.val() + '1');
expect(element.val()).toBe('1111111111');

但是，这将不起作用，因为即使在指令中捕获了第十一个按键事件，下面的代码仍将执行并更新该值。

limitKeypressLength指令的基本功能是侦听按键事件，并调用event.preventDefault或不基于。这是您要测试的内容。

例如：

// Set value to something longer than allowed
element.val('123456789123456789');
// Create the event
var e = jQuery.Event('keypress', {
keyCode: 49
});
// Create a spy
spyOn(e, 'preventDefault');
// preventDefault should not have been called yet
expect(e.preventDefault).not.toHaveBeenCalled();
// Trigger the event
element.triggerHandler(e);
// Assert that preventDefault has been called
expect(e.preventDefault).toHaveBeenCalled();

演示：https://plnkr.co/edit/ktmcBGSuTdMnvqVRlkeQ?p=preview

现在，您可以轻松测试元素值何时设置为等于/低于允许的值。

limitPasteLength指令基本上也是如此，因为它的目的也是根据条件调用preventDefault，只是还有一些额外的模拟要做。