Closed ZeeshanTamboli closed 3 months ago
Thanks @ZeeshanTamboli. It looks like this is indeed the required behavior, if something isn't working properly, please file an issue for this one in the user-event repo.
@MatanBobi @timdeschryver I'm trying to test textarea resizing with the user-event library to ensure it doesn't glitch. Here's what I've done:
it.only('should not glitch when resizing textarea', async function test() {
if (/jsdom/.test(window.navigator.userAgent)) {
this.skip();
}
const { container } = render(<TextareaAutosize />);
const textarea = container.querySelector<HTMLTextAreaElement>('textarea')!;
console.log('before textarea.style.height: ', textarea.style.height);
// Get the element's dimensions
const { top, left, width, height } = textarea.getBoundingClientRect();
// Calculate coordinates of bottom-right corner
const bottomRightX = left + width;
const bottomRightY = top + height;
const user = userEvent.setup();
await user.pointer([
{
keys: '[MouseLeft>]',
target: textarea,
},
{
pointerName: 'MouseLeft',
target: textarea,
coords: { clientX: bottomRightX, clientY: bottomRightY },
},
'[/MouseLeft]',
]);
console.log('after textarea.style.height: ', textarea.style.height);
});
But I'm getting an error saying Trying to access pointer "MouseLeft" which does not exist.
If I change pointerName
to mouse
, it doesn't error. In our existing tests, we use pointerName: 'mouse'
. Or is it that for mouse events, pointerName
should be mouse
, and for touch events, it should be TouchA
, TouchB
, and so on? If that's the case, it's confusing. The documentation says:
You can declare which pointer is moved per
pointerName
property. This defaults tomouse
.
Do you still want me to create an issue?
I assume that this is different for pointers, let's wait for @ph-fritsche to respond as he knows this area best :) I'll re-open.
There is {pointerId: 1, pointerType: 'mouse'}
for the mouse. This pointerId
is reused and the pointer always exist and can have e.g. pointermove
events – no matter if a button is pressed. You get a pointerdown
for the first button that is pressed, and a pointerup
for the last button that is released.
For a touch device there is a new {pointerId: n, pointerType: 'touch'}
for every pointerdown
event. The subsequent events with the same pointer share that pointerId
. If you lift the finger from the touch device and touch it again, a new pointer is established.
Therefore I implemented pointerName
to distinguish multiple touch pointers in the test code. For mouse you can just omit it (or set it to mouse
).
@ph-fritsche Thanks for the explanation! I understand it now. This section was confusing for me earlier, but now it's clear to me after your explanation. I'll close this PR.
✅ Deploy Preview for testing-library ready!
Toggle QR Code...
Use your smartphone camera to open QR code link.
To edit notification comments on pull requests, go to your Netlify site configuration.