I have an event listener on a container element. I'm now trying to test that options are selected, when enter is pressed on an input contained within.
I have tried using the following code, but found out, that this does not bubble by default, so my event listener attached to the container (– parent) is never reached.
await testElm.dispatchEvent("keydown", { key: "enter" });
Of course, I've then tried:
await testElm.dispatchEvent("keydown", { key: "enter", bubbles: true });
But that leads to an error, which supposedly is caused by how the properties are assigned to the event internally by angular:
TypeError: Cannot set property bubbles of [object Event] which has only a getter
For now, I've resorted to the following code, which for multiple obvious reasons, would be considered bad practice, so I'm hoping to change it:
((testElm as any).element as HTMLInputElement).dispatchEvent(
new KeyboardEvent("keydown", { key: "enter", bubbles: true }),
);