如何在 jasmine 单元测试中的元素上触发 keydown

Question

I am writing a jasmine unit test for a function that receives 'keydown' event. It's just a plain javascript(not using any framework)

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

When I console log the event in myFunction This is what I get:

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

The 'target' property is null

How do I set the target value? Please help

Answer 1

It looks like you're looking to dispatch the event you created . The MDN article I linked indicates the target parameter is used to initialize target in the event. In your case, I would do something like:

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

This makes the assumption that you've bound myFunction to #selector 's keydown event via:

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

or

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

If you're not binding the function with an event listener, you could leverage duck typing by building a fake event object and passing that fake event to myFunction :

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