✅ [open-formulieren/open-forms#4637] Fixed some storybook tests and p…

…rettified code 🎨 [#4637] Prettified code :white_check_mark: [#4637] Fixed some storybook test with waitFor :fire: [#4637] Removed unnecessary awaits from storybook tests
open-formulieren · Sep 24, 2024 · 883f5a6 · 883f5a6
1 parent b2597b7
commit 883f5a6
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 15 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();
@@ -1209,16 +1211,16 @@ export const SelectBoxes: Story = {
       const inputs = editForm.getAllByRole('textbox');
       for (let input of inputs) {
         await userEvent.type(input, 'manualTranslation');
-        await expect(input).toHaveValue('manualTranslation');
+        expect(input).toHaveValue('manualTranslation');
         await userEvent.clear(input);
-        await expect(input).toHaveValue('');
+        expect(input).toHaveValue('');
       }
 
       // Removing focus from the last input
       await userEvent.click(canvas.getByRole('tab', {name: 'Translations'}));
 
       // Check that none of the inputs have a Required error message
-      await expect(await editForm.queryByText('Required')).toBeNull();
+      expect(await editForm.queryByText('Required')).toBeNull();
     });
 
     await step('Set up itemsExpression for options', async () => {

diff --git a/src/registry/addressNL/edit.stories.ts b/src/registry/addressNL/edit.stories.ts
@@ -35,10 +35,12 @@ 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();
+
       const errorMessageInput = await canvas.findByLabelText('Error message for "pattern"');
       expect(errorMessageInput).toHaveDisplayValue('');
     });
@@ -53,10 +55,12 @@ 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();
+
       const errorMessageInput = await canvas.findByLabelText('Error message for "pattern"');
       expect(errorMessageInput).toHaveDisplayValue('');
     });
@@ -93,6 +97,7 @@ 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}');
 
@@ -136,6 +141,7 @@ 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');
 

diff --git a/src/registry/radio/radio-validation.stories.ts b/src/registry/radio/radio-validation.stories.ts
@@ -52,35 +52,36 @@ 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();
+
+      expect(await canvas.findByText('The option label is a required field.')).toBeVisible();
+      expect(await canvas.findByText('The option value is a required field.')).toBeVisible();
     });
   },
 };
 
 export const TranslationsArentRequired: Story = {
-  name: 'Translations: translations aren\'t required fields',
+  name: "Translations: translations aren't required fields",
   play: async ({canvasElement, step}) => {
     const canvas = within(canvasElement);
 
-    await step('Translations aren\'t required fields', async () => {
+    await step("Translations aren't required fields", async () => {
       await userEvent.click(canvas.getByRole('tab', {name: 'Translations'}));
       const editForm = within(canvas.getByTestId('componentEditForm'));
 
       // Check that all translations can be filled
       const inputs = editForm.getAllByRole('textbox');
       for (let input of inputs) {
         await userEvent.type(input, 'manualTranslation');
-        await expect(input).toHaveValue('manualTranslation');
+        expect(input).toHaveValue('manualTranslation');
         await userEvent.clear(input);
-        await expect(input).toHaveValue('');
+        expect(input).toHaveValue('');
       }
 
       // Removing focus from the last input
       await userEvent.click(canvas.getByRole('tab', {name: 'Translations'}));
 
       // Check that none of the inputs have a Required error message
-      await expect(await editForm.queryByText('Required')).toBeNull();
+      expect(await editForm.queryByText('Required')).toBeNull();
     });
   },
 };
diff --git a/src/registry/select/select-validation.spec.tsx b/src/registry/select/select-validation.spec.tsx
@@ -1,9 +1,9 @@
 import {SelectComponentSchema} from '@open-formulieren/types';
+import {expect, within} from '@storybook/test';
 import userEvent from '@testing-library/user-event';
 
 import ComponentEditForm from '@/components/ComponentEditForm';
 import {contextRender, screen} from '@/tests/test-utils';
-import {expect, within} from '@storybook/test';
 
 beforeAll(() => {
   jest.useFakeTimers();

diff --git a/src/registry/selectboxes/selectboxes-validation.stories.ts b/src/registry/selectboxes/selectboxes-validation.stories.ts
@@ -73,11 +73,11 @@ export const ManualMinimumOneValue: Story = {
 };
 
 export const TranslationsArentRequired: Story = {
-  name: 'Translations: translations aren\'t required fields',
+  name: "Translations: translations aren't required fields",
   play: async ({canvasElement, step}) => {
     const canvas = within(canvasElement);
 
-    await step('Translations aren\'t required fields', async () => {
+    await step("Translations aren't required fields", async () => {
       await userEvent.click(canvas.getByRole('tab', {name: 'Translations'}));
       const editForm = within(canvas.getByTestId('componentEditForm'));