✅ [#4637] Fixed some storybook test with waitFor

open-formulieren · Sep 19, 2024 · 26451ba · 26451ba
1 parent 1c21e58
commit 26451ba
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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();
+      });
     });
   },
 };