From 715eda1604f6b0b015b11577adaf1f118dbe2843 Mon Sep 17 00:00:00 2001 From: Sergei Maertens Date: Thu, 6 Mar 2025 17:17:47 +0100 Subject: [PATCH] :green_heart: [#445] Fix flakiness in Chromatic/interaction tests Doing a click + ArrowDown on a react select seems to have a race condition where sometimes the *next* option gets 'focus', resulting in it being higlighted with a different color, which in turn trips the Chromatic snapshots as it's toggling between which option is focused. Replacing this with an explicit focus + ArrowDown causes the menu to open and seems to avoid the race condition. The click used to be required in older versions of testing library and react-select to properly focus the input/select when the browser window itself doesn't have focus, e.g. when live-reloading saved code in SB which would lead to a frustrating DX. --- .../appointments/fields/LocationSelect.stories.jsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/appointments/fields/LocationSelect.stories.jsx b/src/components/appointments/fields/LocationSelect.stories.jsx index 25cf5947b..73e5af0cf 100644 --- a/src/components/appointments/fields/LocationSelect.stories.jsx +++ b/src/components/appointments/fields/LocationSelect.stories.jsx @@ -31,10 +31,10 @@ export const MultipleCandidates = { const canvas = within(canvasElement); await expect(canvas.queryByText('Open Gem')).not.toBeInTheDocument(); const dropdown = canvas.getByLabelText('Locatie'); - await userEvent.click(dropdown); + dropdown.focus(); await userEvent.keyboard('[ArrowDown]'); - await expect(await canvas.findByText('Open Gem')).toBeVisible(); - await expect(await canvas.findByText('Bahamas')).toBeVisible(); + expect(await canvas.findByRole('option', {name: 'Open Gem'})).toBeVisible(); + expect(await canvas.findByRole('option', {name: 'Bahamas'})).toBeVisible(); }, }; @@ -52,7 +52,7 @@ export const SingleCandidate = { await expect(canvas.queryByText('Bahamas')).not.toBeInTheDocument(); const dropdown = canvas.getByLabelText('Locatie'); - await userEvent.click(dropdown); + dropdown.focus(); await userEvent.keyboard('[ArrowDown]'); // wait for locations to be loaded @@ -61,8 +61,8 @@ export const SingleCandidate = { expect(textNodes.length).toBeGreaterThan(0); }); - await expect(canvas.queryByText('Bahamas')).not.toBeInTheDocument(); + expect(canvas.queryByText('Bahamas')).not.toBeInTheDocument(); await userEvent.keyboard('[Escape]'); - await expect(await canvas.findByText('Open Gem')).toBeVisible(); + expect(await canvas.findByText('Open Gem')).toBeVisible(); }, };