From 15c731c0b44d98d611ea4d71c3eab431a0523a0a Mon Sep 17 00:00:00 2001 From: Steven Bal Date: Mon, 12 Aug 2024 10:41:18 +0200 Subject: [PATCH] :white_check_mark: [open-formulieren/open-forms#4420] Stories for AddressNL validation --- .../ComponentConfiguration.stories.tsx | 18 +- src/registry/addressNL/edit.stories.ts | 160 ++++++++++++++++++ 2 files changed, 170 insertions(+), 8 deletions(-) create mode 100644 src/registry/addressNL/edit.stories.ts diff --git a/src/components/ComponentConfiguration.stories.tsx b/src/components/ComponentConfiguration.stories.tsx index 8c815f28..bc37e99f 100644 --- a/src/components/ComponentConfiguration.stories.tsx +++ b/src/components/ComponentConfiguration.stories.tsx @@ -2222,14 +2222,16 @@ export const AddressNL: Story = { }, deriveAddress: false, layout: 'singleColumn', - ofComponents: { - postcode: { - validate: {pattern: '1015 [a-zA-Z]{2}'}, - translatedErrors: {}, - }, - city: { - validate: {pattern: 'Amsterdam'}, - translatedErrors: {}, + openForms: { + components: { + postcode: { + validate: {pattern: '1015 [a-zA-Z]{2}'}, + translatedErrors: {}, + }, + city: { + validate: {pattern: 'Amsterdam'}, + translatedErrors: {}, + }, }, }, }, diff --git a/src/registry/addressNL/edit.stories.ts b/src/registry/addressNL/edit.stories.ts new file mode 100644 index 00000000..8355648d --- /dev/null +++ b/src/registry/addressNL/edit.stories.ts @@ -0,0 +1,160 @@ +import {Meta, StoryObj} from '@storybook/react'; +import {expect, userEvent, waitFor, within} from '@storybook/test'; + +import ComponentEditForm from '@/components/ComponentEditForm'; + +export default { + title: 'Builder components/AddressNL', + component: ComponentEditForm, + parameters: {}, + args: { + isNew: true, + component: { + id: 'wekruya', + type: 'addressNL', + key: 'address', + label: 'An address field', + }, + builderInfo: { + title: 'Address NL', + icon: 'home', + group: 'basic', + weight: 10, + schema: {}, + }, + }, +} as Meta; + +type Story = StoryObj; + +export const PostcodeValidationTabWithoutConfiguration: Story = { + name: 'AddressNL postcode validation tab (no prior configuration)', + play: async ({canvasElement, step}) => { + const canvas = within(canvasElement); + + 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]); + await waitFor(async () => { + expect(await canvas.findByText('Regular expression for postcode')).toBeVisible(); + expect(await canvas.findByText('NL')).toBeVisible(); + expect(await canvas.findByText('EN')).toBeVisible(); + expect(await canvas.findByText('Error code')).toBeVisible(); + expect(await canvas.findByDisplayValue('pattern')).toBeVisible(); + }); + }); + }, +}; + +export const CityValidationTabWithoutConfiguration: Story = { + name: 'AddressNL city validation tab (no prior configuration)', + play: async ({canvasElement, step}) => { + const canvas = within(canvasElement); + + 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]); + await waitFor(async () => { + expect(await canvas.findByText('Regular expression for city')).toBeVisible(); + expect(await canvas.findByText('NL')).toBeVisible(); + expect(await canvas.findByText('EN')).toBeVisible(); + expect(await canvas.findByText('Error code')).toBeVisible(); + expect(await canvas.findByDisplayValue('pattern')).toBeVisible(); + }); + }); + }, +}; + +export const PostcodeValidationTabWithConfiguration: Story = { + name: 'AddressNL postcode validation tab (with prior configuration)', + args: { + component: { + id: 'wekruya', + type: 'addressNL', + key: 'address', + label: 'An address field', + openForms: { + components: { + postcode: { + validate: { + pattern: '1017 [A-Za-z]{2}', + }, + translatedErrors: { + nl: {pattern: 'Postcode moet 1017 XX zijn'}, + en: {pattern: 'Postal code must be 1017 XX'}, + }, + }, + }, + }, + }, + }, + play: async ({canvasElement, step}) => { + const canvas = within(canvasElement); + + 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]); + await waitFor(async () => { + const patternInput = canvas.getByLabelText( + 'Regular expression for postcode' + ) as HTMLInputElement; + expect(patternInput).toBeVisible(); + expect(patternInput.value).toBe('1017 [A-Za-z]{2}'); + + expect(await canvas.findByDisplayValue('pattern')).toBeVisible(); + expect(await canvas.findByDisplayValue('Postcode moet 1017 XX zijn')).toBeVisible(); + + await userEvent.click(await canvas.findByText('EN')); + expect(await canvas.findByDisplayValue('pattern')).toBeVisible(); + expect(await canvas.findByDisplayValue('Postal code must be 1017 XX')).toBeVisible(); + }); + }); + }, +}; + +export const CityValidationTabWithConfiguration: Story = { + name: 'AddressNL postcode validation tab (with prior configuration)', + args: { + component: { + id: 'wekruya', + type: 'addressNL', + key: 'address', + label: 'An address field', + openForms: { + components: { + city: { + validate: { + pattern: 'Amsterdam', + }, + translatedErrors: { + nl: {pattern: 'De stad moet Amsterdam zijn'}, + en: {pattern: 'The city must be Amsterdam'}, + }, + }, + }, + }, + }, + }, + play: async ({canvasElement, step}) => { + const canvas = within(canvasElement); + + 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]); + await waitFor(async () => { + const patternInput = canvas.getByLabelText( + 'Regular expression for city' + ) as HTMLInputElement; + expect(patternInput).toBeVisible(); + expect(patternInput.value).toBe('Amsterdam'); + + expect(await canvas.findByDisplayValue('pattern')).toBeVisible(); + expect(await canvas.findByDisplayValue('De stad moet Amsterdam zijn')).toBeVisible(); + + await userEvent.click(await canvas.findByText('EN')); + expect(await canvas.findByDisplayValue('pattern')).toBeVisible(); + expect(await canvas.findByDisplayValue('The city must be Amsterdam')).toBeVisible(); + }); + }); + }, +};