From 03e0a41da23c03291cd937f07acf783010610b58 Mon Sep 17 00:00:00 2001 From: Sergei Maertens Date: Thu, 10 Oct 2024 15:09:15 +0200 Subject: [PATCH] :thread: Attempt to make interaction tests more reliable There seem to be race conditions between opening/closing the panel and its children being in a visible/hidden state. Wrapping the assertions in waitFor should enable some 'natural' retry behaviour. --- src/registry/addressNL/edit.stories.ts | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/src/registry/addressNL/edit.stories.ts b/src/registry/addressNL/edit.stories.ts index 3452c4a..bc9ce8f 100644 --- a/src/registry/addressNL/edit.stories.ts +++ b/src/registry/addressNL/edit.stories.ts @@ -1,5 +1,5 @@ import {Meta, StoryObj} from '@storybook/react'; -import {expect, userEvent, within} from '@storybook/test'; +import {expect, userEvent, waitFor, within} from '@storybook/test'; import ComponentEditForm from '@/components/ComponentEditForm'; @@ -36,7 +36,9 @@ export const PostcodeValidationTabWithoutConfiguration: Story = { await userEvent.click(canvas.getByRole('link', {name: 'Validation'})); await userEvent.click(canvas.getAllByText('Postcode')[0]); - expect(await canvas.findByLabelText('Regular expression for postcode')).toBeVisible(); + await waitFor(() => { + expect(canvas.getByLabelText('Regular expression for postcode')).toBeVisible(); + }); expect(await canvas.findByText('NL')).toBeVisible(); expect(await canvas.findByText('EN')).toBeVisible(); expect(await canvas.findByText('Error code')).toBeVisible(); @@ -56,7 +58,9 @@ export const CityValidationTabWithoutConfiguration: Story = { await userEvent.click(canvas.getByRole('link', {name: 'Validation'})); await userEvent.click(canvas.getAllByText('City')[0]); - expect(await canvas.findByLabelText('Regular expression for city')).toBeVisible(); + await waitFor(() => { + expect(canvas.getByLabelText('Regular expression for city')).toBeVisible(); + }); expect(await canvas.findByText('NL')).toBeVisible(); expect(await canvas.findByText('EN')).toBeVisible(); expect(await canvas.findByText('Error code')).toBeVisible(); @@ -98,7 +102,9 @@ export const PostcodeValidationTabWithConfiguration: Story = { await userEvent.click(canvas.getAllByText('Postcode')[0]); const patternInput = await canvas.findByLabelText('Regular expression for postcode'); - expect(patternInput).toBeVisible(); + await waitFor(() => { + expect(patternInput).toBeVisible(); + }); expect(patternInput).toHaveValue('1017 [A-Za-z]{2}'); expect(await canvas.findByDisplayValue('pattern')).toBeVisible(); @@ -142,7 +148,9 @@ export const CityValidationTabWithConfiguration: Story = { await userEvent.click(canvas.getAllByText('City')[0]); const patternInput = await canvas.findByLabelText('Regular expression for city'); - expect(patternInput).toBeVisible(); + await waitFor(() => { + expect(patternInput).toBeVisible(); + }); expect(patternInput).toHaveValue('Amsterdam'); expect(await canvas.findByDisplayValue('pattern')).toBeVisible();