Dom-testing-library: extend eventProperties of mouseMove

[bitttttten]

Describe the feature you'd like:

The possibility to send in eventProperties to mouse events.

I have a carousel and I want to be able to test that dragging and moving by more than 25 pixels will move the carousel to the next slide.

fireEvent.mouseDown(getByTestId('item'), { pageX: 0 })
fireEvent.mouseMove(container, { pageX: 26 })

Suggested implementation:

I am guessing it lies somewhere in here?

Describe alternatives you've considered:

I don't think any exist? :p

[alexkrolick]

I think you'd add it around here: https://github.com/kentcdodds/dom-testing-library/blob/933aab4ad7b13a3a1be2edb7615bca1e77c298e5/src/events.js#L307

[kentcdodds]

Hi @bitttttten!

Hmmm, I would assume that this would work already because of this:

https://github.com/kentcdodds/dom-testing-library/blob/933aab4ad7b13a3a1be2edb7615bca1e77c298e5/src/events.js#L306

Feel free to open a pull request. That'll probably help me understand why this isn't already working. Thanks!

[bitttttten]

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/MouseEvent

I think it's because you cannot create a mouseEvent with the pageX or pageY keys included 🙃

There's also some discussion here: https://github.com/mui-org/material-ui/pull/13479#issuecomment-435248385

I guess you can close this PR and I could leave my solution for the google fu if or when I come across one?

[kentcdodds]

Ah yes, it looks like this is a problem with jsdom: https://github.com/jsdom/jsdom/issues/1911

I'm afraid there's not much we can do in this library :-( You may need to use cypress or run your tests in the browser to test this behavior.

Sorry!

[bitttttten]

I am just going to extend the getters for pageX into (e.pageX || e.clientX) and pass in clientX in my tests. It's enough for now.

For anyone coming from google, what I did was start the mouse at x 100, and move it to x 25.

fireEvent.mouseDown(getByTestId('item'), { clientX: 100 })
fireEvent.mouseMove(container.firstChild, { clientX: 25 })
fireEvent.mouseUp(getByTestId('item'))

Thanks kent and alex for the quick replies :)

[maitojepoy]

I have stumbled into this situation also where I am testing for Gesture swipe using react-with-gesture.

I gave up using mouseEvents and instead I used touchEvents, and it worked. Just FYI for those who came from google looking for answers.

here's what I did:

const touchstart = [{ pageX: 0, pageY: 0 }];
const touchdest = [{ pageX: 513, pageY: 0 }];
const window = (container.ownerDocument || container).defaultView;
fireEvent.touchStart(container.firstChild, { touches: touchstart });
fireEvent.touchMove(window, { touches: touchdest });
fireEvent.touchEnd(window, { touches: touchdest });

Hope this helps