在angularjs测试中使用element.triggerHandler（）进行粘贴和按键事件似乎没有效果

Question

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

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

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

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

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

对于keypress测试，我相信我正确触发了该事件，但是它似乎没有更新element的值（使用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');

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

limitKeypressLength指令的基本功能是侦听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指令也是limitPasteLength ，因为它的目的也是基于条件调用preventDefault ，只是要做一些附加的模拟。