jolly cargo
Hi!
I’m currently building a component library for our website and I can’t find a way to fire custom events.
Let’s say I want to fire keyup events, I can use userEvent(".my-component", "keyup") but I didn’t find a way to also pass a key code.
Am I missing something?
versed lagoon
hum
I would go for that way
👉 https://qwik.builder.io/docs/components/events/#useon
🙌
jolly cargo
Sorry, I guess it wasn’t clear enough. Let me give an example.
I am currently catching events with a useOn hook in my component:
// MyComponent.jsx
export const MyComponent = component$(() => {
useOn("keyup", $((event) => {
switch (event.code) {
case "ArrowDown":
// ...
break;
// ...
}
}));
return (
<div class=".my-component">
// ...
</div>
);
});
And here is what my test looks like:
// MyComponent.test.jsx
test("ArrowDown on my component", async () => {
const { render, screen, userEvent } = await createDOM();
await render(<MyComponent />);
await userEvent(".my-component", "keyup");
// ^^^^^^^ I can only pass a string here
// ...
});
I can fire keyup events but I didn’t find a way to pass key codes.
I’m actually surprised I haven’t found any related questions/issues here or on GitHub.
How do you test keyboard interaction?
My question isn’t only about testing keyboard interaction but firing any kind of custom events.
versed lagoon
ok got it. Well, I'm not familiar with this part of Qwik API yet ..so 🤷
green grotto