From 26451bafbda0598730b01f0cc17ebb5f11820675 Mon Sep 17 00:00:00 2001 From: robinvandermolen Date: Thu, 19 Sep 2024 15:28:11 +0200 Subject: [PATCH] :white_check_mark: [#4637] Fixed some storybook test with waitFor --- .../ComponentConfiguration.stories.tsx | 6 ++- src/registry/addressNL/edit.stories.ts | 40 +++++++++++++------ .../radio/radio-validation.stories.ts | 13 ++++-- 3 files changed, 41 insertions(+), 18 deletions(-) diff --git a/src/components/ComponentConfiguration.stories.tsx b/src/components/ComponentConfiguration.stories.tsx index 2f9396d..d4718dd 100644 --- a/src/components/ComponentConfiguration.stories.tsx +++ b/src/components/ComponentConfiguration.stories.tsx @@ -974,8 +974,10 @@ export const FileUpload: Story = { await step('File tab', async () => { await userEvent.click(canvas.getByRole('link', {name: 'File'})); - await expect(canvas.getByLabelText('Maximum file size')).toHaveDisplayValue('10MB'); - await expect(canvas.getByText('Note that the server upload limit is 50MB.')).toBeVisible(); + await waitFor(async () => { + await expect(canvas.getByLabelText('Maximum file size')).toHaveDisplayValue('10MB'); + await expect(canvas.getByText('Note that the server upload limit is 50MB.')).toBeVisible(); + }); // check that the file types are visible canvas.getByLabelText('File types').focus(); diff --git a/src/registry/addressNL/edit.stories.ts b/src/registry/addressNL/edit.stories.ts index 65b6137..4118090 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'; @@ -35,10 +35,14 @@ export const PostcodeValidationTabWithoutConfiguration: Story = { await step('Navigate to validation tab and open Postcode validation', async () => { await userEvent.click(canvas.getByRole('link', {name: 'Validation'})); await userEvent.click(canvas.getAllByText('Postcode')[0]); - expect(await canvas.findByLabelText('Regular expression for postcode')).toBeVisible(); - expect(await canvas.findByText('NL')).toBeVisible(); - expect(await canvas.findByText('EN')).toBeVisible(); - expect(await canvas.findByText('Error code')).toBeVisible(); + + await waitFor(async () => { + await expect(await canvas.findByLabelText('Regular expression for postcode')).toBeVisible(); + await expect(await canvas.findByText('NL')).toBeVisible(); + await expect(await canvas.findByText('EN')).toBeVisible(); + await expect(await canvas.findByText('Error code')).toBeVisible(); + }); + const errorMessageInput = await canvas.findByLabelText('Error message for "pattern"'); expect(errorMessageInput).toHaveDisplayValue(''); }); @@ -53,10 +57,14 @@ export const CityValidationTabWithoutConfiguration: Story = { await step('Navigate to validation tab and open City validation', async () => { await userEvent.click(canvas.getByRole('link', {name: 'Validation'})); await userEvent.click(canvas.getAllByText('City')[0]); - expect(await canvas.findByLabelText('Regular expression for city')).toBeVisible(); - expect(await canvas.findByText('NL')).toBeVisible(); - expect(await canvas.findByText('EN')).toBeVisible(); - expect(await canvas.findByText('Error code')).toBeVisible(); + + await waitFor(async () => { + await expect(await canvas.findByLabelText('Regular expression for city')).toBeVisible(); + await expect(await canvas.findByText('NL')).toBeVisible(); + await expect(await canvas.findByText('EN')).toBeVisible(); + await expect(await canvas.findByText('Error code')).toBeVisible(); + }); + const errorMessageInput = await canvas.findByLabelText('Error message for "pattern"'); expect(errorMessageInput).toHaveDisplayValue(''); }); @@ -93,8 +101,11 @@ export const PostcodeValidationTabWithConfiguration: Story = { await userEvent.click(canvas.getByRole('link', {name: 'Validation'})); await userEvent.click(canvas.getAllByText('Postcode')[0]); const patternInput = await canvas.findByLabelText('Regular expression for postcode'); - expect(patternInput).toBeVisible(); - expect(patternInput).toHaveValue('1017 [A-Za-z]{2}'); + + await waitFor(async () => { + await expect(patternInput).toBeVisible(); + await expect(patternInput).toHaveValue('1017 [A-Za-z]{2}'); + }); expect(await canvas.findByDisplayValue('pattern')).toBeVisible(); expect(await canvas.findByDisplayValue('Postcode moet 1017 XX zijn')).toBeVisible(); @@ -136,8 +147,11 @@ export const CityValidationTabWithConfiguration: Story = { await userEvent.click(canvas.getByRole('link', {name: 'Validation'})); await userEvent.click(canvas.getAllByText('City')[0]); const patternInput = await canvas.findByLabelText('Regular expression for city'); - expect(patternInput).toBeVisible(); - expect(patternInput).toHaveValue('Amsterdam'); + + await waitFor(async () => { + await expect(patternInput).toBeVisible(); + await expect(patternInput).toHaveValue('Amsterdam'); + }); expect(await canvas.findByDisplayValue('pattern')).toBeVisible(); expect(await canvas.findByDisplayValue('De stad moet Amsterdam zijn')).toBeVisible(); diff --git a/src/registry/radio/radio-validation.stories.ts b/src/registry/radio/radio-validation.stories.ts index 2d15cfe..10b4ad2 100644 --- a/src/registry/radio/radio-validation.stories.ts +++ b/src/registry/radio/radio-validation.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'; import {BuilderContextDecorator} from '@/sb-decorators'; @@ -52,8 +52,15 @@ export const ManualMinimumOneValue: Story = { await userEvent.type(labelInput, 'Foo'); await userEvent.clear(labelInput); await userEvent.keyboard('[Tab]'); - await expect(await canvas.findByText('The option label is a required field.')).toBeVisible(); - await expect(await canvas.findByText('The option value is a required field.')).toBeVisible(); + + await waitFor(async () => { + await expect( + await canvas.findByText('The option label is a required field.') + ).toBeVisible(); + await expect( + await canvas.findByText('The option value is a required field.') + ).toBeVisible(); + }); }); }, };