14.4: pointermove events no longer trigger

[dermoumi]

trafficstars

Reproduction example

https://codesandbox.io/s/userevent-touchmove-skz767?file=/src/App.test.js

Prerequisites

1. Use version >= 14.4.0
2. Setup a page that listens to pointerdown and pointermove, and logs them.
3. Trigger pointer events in the test like the following:

    const touchable = screen.getByTitle('container')
    await user.pointer([
      {
        keys: "[TouchA>]",
        target: touchable,
        coords: { x: 100, y: 100 },
      },
      {
        pointerName: "TouchA",
        target: touchable,
        coords: { x: 125, y: 100 },
      },
    ]);

Expected behavior

The new coordinates from the second pointermove event should be logged. (125, 100)

Actual behavior

The initial cordinate from the initial pointerdown event are logged. (100, 100)

User-event version

14.4.0

Environment

Testing Library framework:

JS framework:

Test environment:

DOM implementation:

Additional context

Works just fine on version 14.3.0

[ph-fritsche]

Thanks for the report :heart:

There is a typo in the helper: https://github.com/testing-library/user-event/blob/1aa2027e5ec445ab413808556efa7763b65053d3/src/system/pointer/shared.ts#L30-L31

[maxired]

@ph-fritsche any plan to fix this ?

[GadgetBlaster]

I'm running into this bug as well. The onMouseMove event is only called when the y coordinate changes. I guess I'll downgrade until this is fixed.

[pjho]

I dug in to this today and realised while there is a bug in the isDifferentPointerPosition util that wasn't what was causing our tests to fail in versions >= 14.4.0.

Our tests were all specified with clientX & clientY. Changing these to x and y respectively allows our tests to pass again.

Breaks in >= 14.4.0:

await user.pointer([
  {
    keys: '[MouseLeft>]',
    target: el,
    coords: { clientX: 100, clientY: 100 },
  },
  {
    coords: { clientX: 200, clientY: 200 },
  },
  {
    keys: '[/MouseLeft]',
  },
]);

Fixed in >= 14.4.0:

await user.pointer([
  {
    keys: '[MouseLeft>]',
    target: el,
    coords: { x: 100, y: 100 },
  },
  {
    coords: { x: 200, y: 200 },
  },
  {
    keys: '[/MouseLeft]',
  },
]);