userEvent.pointer does not set the button and buttons properties

[alkstal]

Reproduction example

https://codesandbox.io/s/misty-haze-n45bf4?file=/src/App.js

Prerequisites

1. <button>Touch me</button>

document.querySelector('button').addEventListener('pointerup', (e) => {
    console.log(e.button)
})

await user.pointer({
    tags: '[MouseLeft]',
    target: document.querySelector('button'),
})

Expected behavior

PointerEvent sets event.button and event.buttons to allow us to figure out which button was used.

https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events#determining_button_states

As an example, if the left mouse button was used, the pointerup event event.button is 0.

Actual behavior

The PointerEvent created by userEvent.pointer() does not assign event.button or event.buttons, so both are undefined in a event handler.

This means event handlers using these properties don't work under test.

User-event version

14.0.4

Environment

Testing Library framework:

JS framework:

Test environment:

DOM implementation:

Additional context

No response

[ph-fritsche]

Thanks for the report. ❤️

We add the button to the PointerEventInit here:

user-event/src/pointer/firePointerEvents.ts

Line 35 in ef826a4

init.button = getMouseButton(button ?? 0)

This is an issue with the environment not implementing PointerEvent. This results in the event constructor being just Event which discards the properties from MouseEventInit/PointerEventInit.
https://github.com/testing-library/dom-testing-library/blob/11fc7731e5081fd0994bf2da84d688fdb592eda7/src/events.js#L50

We already apply a workaround for coordinates and other properties here and should maybe add button or (partially) replace it with the workaround below:

user-event/src/event/createEvent.ts

Lines 40 to 45 in ef826a4

	// Can not use instanceof, as MouseEvent might be polyfilled.
	if (isMouseEvent(type) && init) {
	// see https://github.com/testing-library/react-testing-library/issues/268
	assignPositionInit(event as MouseEvent, init)
	assignPointerInit(event as PointerEvent, init)
	}

The following workaround fixes the issue:

if (!window.PointerEvent) {
  window.PointerEvent = window.MouseEvent
}

https://codesandbox.io/s/dreamy-firefly-xf3zke?file=/src/App.test.js:45-117

[alkstal]

Thanks for the explanation and the suggested workaround!

[github-actions]

🎉 This issue has been resolved in version 14.4.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[ph-fritsche]

@all-contributors add @alkstal bug

[allcontributors]

@ph-fritsche

I've put up a pull request to add @alkstal! 🎉