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

[rexcheng1997]

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

[ph-fritsche]

Thanks for taking the time to contribute to this library ❤️

A PR calculating and adding these to the events in https://github.com/testing-library/user-event/blob/main/src/pointer/pointerMove.ts would be very much welcome.