diff --git a/src/components/ComponentConfiguration.stories.tsx b/src/components/ComponentConfiguration.stories.tsx index 2f9396d..6c2e0b7 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(); @@ -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 index 65b6137..3452c4a 100644 --- 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 index 89ab87e..e883827 100644 --- a/src/registry/radio/radio-validation.stories.ts +++ b/src/registry/radio/radio-validation.stories.ts @@ -52,18 +52,19 @@ 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')); @@ -71,16 +72,16 @@ export const TranslationsArentRequired: 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(); }); }, }; diff --git a/src/registry/select/select-validation.spec.tsx b/src/registry/select/select-validation.spec.tsx index 54a5619..2068cd3 100644 --- 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 index a8cd344..75223e2 100644 --- 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'));