如何在茉莉花单元测试中触发元素的按键

Question

我正在为接收 'keydown' 事件的函数编写 jasmine 单元测试。这只是一个普通的 javascript（未使用任何框架）

var event = document.createEvent('Event');
event.keyCode = 84; 
event.initEvent('keydown');
event.target = $('#selector');
myFunction(event);

当我控制台在 myFunction 中记录事件时这是我得到的：

{"returnValue":true,"timeStamp":1607595872162,"eventPhase":0,"target":null,"defaultPrevented":false,"srcElement":null,"type":"keydown","cancelable":false,"currentTarget":null,"bubbles":false,"cancelBubble":false,"keyCode":84}

'target'属性为空

如何设置目标值？请帮助

Answer 1

您似乎在寻找 dispatch the event you created。我链接的 MDN 文章指出 target 参数用于初始化事件中的 target。在你的情况下，我会做类似的事情：

var event = document.createEvent('Event');
event.keyCode = 84; 
event.initEvent('keydown');
$('#selector')[0].dispatchEvent(event);

这假设您已通过以下方式将 myFunction 绑定到 #selector 的 keydown 事件：

document.getElementById("selector").addEventListener('keydown', myFunction);

或

$('#selector').on('keydown', myFunction);

如果您没有将函数与事件侦听器绑定，您可以通过构建一个假事件对象并将该假事件传递给 myFunction:

来利用 duck typing

myFunction({
    type: 'keydown',
    keyCode: 84,
    target: $('#selector')[0]
});

如何在茉莉花单元测试中触发元素的按键

How to trigger keydown on an element in jasmine unit test

javascript

jasmine

gruntjs

typescript