From 14bd586f53f308e4d5c12d0df1d4d68b6dfc870c Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 2 Aug 2024 21:40:57 +0200 Subject: [PATCH] Apply workaround for false-positive detection of pointer-events --- WORKAROUNDS.md | 7 +++++++ app/note/edit/[id]/page.stories.tsx | 9 +++++++-- app/note/edit/page.stories.tsx | 8 ++++++-- 3 files changed, 20 insertions(+), 4 deletions(-) create mode 100644 WORKAROUNDS.md diff --git a/WORKAROUNDS.md b/WORKAROUNDS.md new file mode 100644 index 0000000..d35e607 --- /dev/null +++ b/WORKAROUNDS.md @@ -0,0 +1,7 @@ +## FALSE_POSITIVE_POINTER_EVENTS + +When running vitest in browser mode, the pointer events are not correctly simulated. This can be related to this [known issue](https://github.com/microsoft/playwright/issues/12821). The bug also appears not only in chromium, but also in webkit. The workaround is to use `userEvent` events with the setting `{ pointerEventsCheck: 0 }` to disable the pointer events check. + +```javascript +await userEvent.type(titleInput, 'New Note Title', { pointerEventsCheck: 0 }) +``` diff --git a/app/note/edit/[id]/page.stories.tsx b/app/note/edit/[id]/page.stories.tsx index 8784f24..fd49dc3 100644 --- a/app/note/edit/[id]/page.stories.tsx +++ b/app/note/edit/[id]/page.stories.tsx @@ -64,12 +64,16 @@ export const SavingExistingNoteShouldUpdateDBAndRedirect: Story = { ) await userEvent.clear(titleInput) - await userEvent.type(titleInput, 'Edited Title') + // WORKAROUND: FALSE_POSITIVE_POINTER_EVENTS + await userEvent.type(titleInput, 'Edited Title', { pointerEventsCheck: 0 }) await userEvent.clear(bodyInput) - await userEvent.type(bodyInput, 'Edited Body') + // WORKAROUND: FALSE_POSITIVE_POINTER_EVENTS + await userEvent.type(bodyInput, 'Edited Body', { pointerEventsCheck: 0 }) await userEvent.click( await canvas.findByRole('menuitem', { name: /done/i }), + // WORKAROUND: FALSE_POSITIVE_POINTER_EVENTS + { pointerEventsCheck: 0 } ) await expectRedirect('/note/2') @@ -94,6 +98,7 @@ export const DeleteNoteRemovesFromDBAndSidebar: Story = { await userEvent.click( await canvas.findByRole('menuitem', { name: /delete/i }), + { pointerEventsCheck: 0 } ) await expectRedirect('/') diff --git a/app/note/edit/page.stories.tsx b/app/note/edit/page.stories.tsx index 76c79fa..8047a14 100644 --- a/app/note/edit/page.stories.tsx +++ b/app/note/edit/page.stories.tsx @@ -57,11 +57,15 @@ export const SaveNewNote: Story = { 'Enter the body for your note', ) await userEvent.clear(titleInput) - await userEvent.type(titleInput, 'New Note Title') - await userEvent.type(bodyInput, 'New Note Body') + // WORKAROUND: FALSE_POSITIVE_POINTER_EVENTS + await userEvent.type(titleInput, 'New Note Title', { pointerEventsCheck: 0 }) + // WORKAROUND: FALSE_POSITIVE_POINTER_EVENTS + await userEvent.type(bodyInput, 'New Note Body', { pointerEventsCheck: 0 }) await userEvent.click( await canvas.findByRole('menuitem', { name: /done/i }), + // WORKAROUND: FALSE_POSITIVE_POINTER_EVENTS + { pointerEventsCheck: 0 } ) await expectRedirect('/note/3')