testing-library / testing-library/user-event

Support "movementX" and "movementY" for MouseEvent and PointerEvent

Open
#903 1 comment 5 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
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.movementX and event.movementY as the delta values to update the rectangle's position.
  • It would involve a lot of mess if I use event.clientX and event.clientY instead 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.