Support the change event for `<input type="range">`

[illright]

Problem description

I want to test that my <input type="range"> calls the necessary function upon moving the slider thumb to a particular value. So far, it doesn't seem to be possible with the current capabilities of user-event.

Suggested solution

Similarly to selectOptions, I would like to have something like this:

await userEvent.setValueInRange(screen.getByRole('slider'), 50);

Other ideas for the name could be dragTo, moveSliderTo.

Additional context

No response

[illright]

I would be willing to implement this feature with some guidance

[ph-fritsche]

The problem with utility APIs like selectOptions is that they define the interaction by the effect. The user can achieve that effect by different means. So there isn't a single truth of desired behavior that we could check the implementation against.

An <input type="range"/> can be changed per keyboard or per pointer - per different keys and movements. I'd rather implement the behavior on those events than introduce a new utility.
Then interacting with the control in the test gives confidence that a user can actually change the value.

Keyboard interaction should be easy to implement. ArrowLeft, ArrowRight, Home, End, PageUp, PageDown, anything else?
Pointer interaction might be more tricky as the pointer position corresponds with a value based on the control dimensions. And possibly how the control is displayed by different browsers?
In testing environments without layout (JSDOM), this might be tricky. But we might also just view that problem as out of scope and rely on the user to set the necessary element properties in such environment.

[dios-david]

In the meantime, this works fine:

import { fireEvent } from '@testing-library/dom'; // or `@testing-library/react`

// ...
const slider = container.querySelector('input[type="range"]')!;

fireEvent.change(slider, { target: { value: 170 } });

But it would be cool to see support for this in @testing-library/user-event as well.

[0fprod]

I've tried using .click(element) to give the focus to the element and then using .keyboard() with arrow keys but it's currently throwing an error as described here #901 😅

Meanwhile, we can achieve this with fireEvent like @illright says, in my case I used

const slider = screen.getByRole('slider');
await fireEvent.update(slider, '5');