User-event: arrow keys?

[benmonro]

for the life of me I can't seem to be able to fire an event for a keypress with arrow keys on a radio button, is this a problem in jsdom, or am I crazy?

js fireEvent.keyPress(myRadioButton, { key: 'ArrowUp', which: 38, keyCode: 38 });

[Stuj1]

fireEvent is not part of the user-event library, it is dom-testing-library. The user-event library was created because of such issues with fireEvent for keyboard events, which in my experience it has been a lot better at. However, I'm not sure that user-event can simulate soft keys. I'll have to look at the source for user-events to see if soft-key support is possible.

[benmonro]

Apologies I did mean user event

[Stuj1]

Ok, so there is no soft key support in user-event.

[benmonro]

Do you think it should be?

[Stuj1]

Hmm. It's currently pretty simple to use:
userEvent.type(input1, 'a');

So you might think you could easily provide an object for softkey interaction:
userEvent.type(input1, { key: 'ArrowUp', which: 38, keyCode: 38 });

However, the 'type' method also handles strings of multiple characters:
userEvent.type(input1, 'apples');

How would you include a soft key in this sequence? Perhaps if soft key is only supported for single key strokes. Otherwise you would have to provide an array of input keystrokes, which could get a bit messy.

[Gpx]

Probably related to testing-library/user-event#31
At some point, we will want to support things like userEvent.type('hella{left_arrow}{delete}o') but for now it's not possible

[benmonro]

@kentcdodds (or anyone else) do you ever test arrow key functionality w/ RTL at all?

[kentcdodds]

I do with downshift using Cypress

[kentcdodds]

Actually I think we do with jest too. It's been a few years since I can't remember 😅

[benmonro]

Jest?! If you happen to remember how I'd love to know. 🙌🏻😃

[kentcdodds]

Here it is: https://github.com/downshift-js/downshift/blob/master/src/__tests__/downshift.get-input-props.js

[benmonro]

Awesome thanks!

[smeijer]

Do you think it should be?

Support for key presses would be very useful. Think of typing 'hi' in a textarea, and using ctrl + enter to submit the form.

Or testing if hotkeys still work.

[kentcdodds]

We should be able to implement this relatively easily now that we have modifier support implemented. You'd put it somewhere around here: https://github.com/testing-library/user-event/blob/4bbb4b9a6e33641bb2bec3830b6f97e373e29541/src/type.js#L109

[brandonpittman]

Just found myself looking for this feature too.

[testing-library-bot]

:tada: This issue has been resolved in version 12.2.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: