testing-library / testing-library/user-event
Support "movementX" and "movementY" for MouseEvent and PointerEvent
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 2.3k
- Forks
- 258
- PR merge metrics
- No merged PRs in 30d
Description
Problem description
It would be beneficial to support movementX and movementY for MouseEvent and PointerEvent. This MDN page describes MouseEvent.movementX, which PointerEvent also has because it inherits from MouseEvent.
An example use case would be:
- I have a rectangle (implemented as a DOM element) on the page and the user can drag the rectangle around.
- In order to move the rectangle along with the user's mouse or pointer, I can use
event.movementXandevent.movementYas the delta values to update the rectangle's position. - It would involve a lot of mess if I use
event.clientXandevent.clientYinstead because you would then have to figure out the mouse's or pointer's position relative to the rectangle.
I wish I could test this behavior with this library. Now, if I use event.movementX in my source code, tests will fail because event.movementX is not provided.
Suggested solution
A straightforward solution can be to extend the type definition PointerCoords to include movementX and movementY and to modify assignPositionInit in createEvent.ts to accept movementX and movementY as function parameters. In this way, we can directly specify movementX and movementY in our tests like
await user.pointer({
pointerName: 'TouchA',
target: myRectangle,
coords: { movementX: dx, movementY: dy },
});
Another possibly better solution would be to calculate movementX and movementY from the previous pointerState which is already something the library keeps track of.
Additional context
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Read src/event/createEvent.ts and the PointerCoords and pointerState definitions first, then inspect the existing pointer-event tests. Decide whether coordinates are supplied directly or derived from prior state, and consider confirming that choice because the issue leaves both approaches open. Done means MouseEvent and PointerEvent expose movementX and movementY in pointer-driven tests.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- testing-qa
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100