From c1ef2f96568d1fbfeb77ab1ac4b5b11f99c45339 Mon Sep 17 00:00:00 2001 From: Steven Bal Date: Tue, 4 Feb 2025 12:19:52 +0100 Subject: [PATCH] :ok_hand: [open-formulieren/open-forms#5016] PR feedback --- .../builder/values/referentielijsten/code.tsx | 16 +- .../values/referentielijsten/service.tsx | 46 ++--- .../builder/values/values-config.stories.tsx | 2 - src/registry/radio/edit-validation.ts | 2 + src/registry/radio/helpers.ts | 11 +- .../radio/radio-referentielijsten.stories.ts | 151 ++++++++-------- src/registry/select/edit-validation.ts | 2 + src/registry/select/helpers.ts | 2 - .../select-referentielijsten.stories.ts | 162 +++++++++--------- src/registry/selectboxes/edit-validation.ts | 2 + src/registry/selectboxes/helpers.ts | 2 - .../selectboxes-referentielijsten.stories.ts | 146 ++++++++-------- src/utils/storybookTestHelpers.d.ts | 17 -- 13 files changed, 257 insertions(+), 304 deletions(-) delete mode 100644 src/utils/storybookTestHelpers.d.ts diff --git a/src/components/builder/values/referentielijsten/code.tsx b/src/components/builder/values/referentielijsten/code.tsx index 62ff468f..6c3a09b3 100644 --- a/src/components/builder/values/referentielijsten/code.tsx +++ b/src/components/builder/values/referentielijsten/code.tsx @@ -19,20 +19,26 @@ function isTabelOptions( } function transformItems(items: ReferentielijstenTabelOption[]) { + const intl = useIntl(); return items.map(item => { const {code, naam, isGeldig} = item; return { value: code, - label: !isGeldig ? `${naam} (niet meer geldig)` : naam, + label: !isGeldig + ? `${naam} ${intl.formatMessage({ + description: 'Message to indicate that Referentielijsten tabel is expired', + defaultMessage: '(niet meer geldig)', + })}` + : naam, }; }); } -interface ComponentWithReferentielijsten { +export interface ComponentWithReferentielijsten { openForms?: { dataSrc: 'referentielijsten'; - service?: string; - code?: string; + service: string; + code: string; }; } @@ -63,7 +69,7 @@ export const ReferentielijstenTabelCode: React.FC = () => { return ( { defaultMessage: `The identifier of the Referentielijsten service from which the options will be retrieved.`, })} isLoading={loading} - options={transformedOptions} + valueProperty="slug" + options={options} required /> ); diff --git a/src/components/builder/values/values-config.stories.tsx b/src/components/builder/values/values-config.stories.tsx index e11601f5..536b55e4 100644 --- a/src/components/builder/values/values-config.stories.tsx +++ b/src/components/builder/values/values-config.stories.tsx @@ -7,10 +7,8 @@ import {Meta, StoryObj} from '@storybook/react'; import {expect, fireEvent, fn, userEvent, waitFor, within} from '@storybook/test'; import {Form, Formik} from 'formik'; -import selectboxes from '@/registry/selectboxes'; import {BuilderContextDecorator} from '@/sb-decorators'; import {withFormik} from '@/sb-decorators'; -import {DEFAULT_SERVICES} from '@/tests/sharedUtils'; import ValuesConfig from './values-config'; diff --git a/src/registry/radio/edit-validation.ts b/src/registry/radio/edit-validation.ts index 0af4bc7b..6f9739d5 100644 --- a/src/registry/radio/edit-validation.ts +++ b/src/registry/radio/edit-validation.ts @@ -21,6 +21,8 @@ const buildValuesSchema = (intl: IntlShape) => ]), // TODO: wire up infernologic type checking itemsExpression: jsonSchema.optional(), + service: z.string().optional(), + code: z.string().optional(), }), }); diff --git a/src/registry/radio/helpers.ts b/src/registry/radio/helpers.ts index 531773b5..4ac4acd6 100644 --- a/src/registry/radio/helpers.ts +++ b/src/registry/radio/helpers.ts @@ -2,6 +2,8 @@ import {RadioComponentSchema} from '@open-formulieren/types'; import {Option} from '@open-formulieren/types/lib/formio/common'; import {JSONObject} from '@open-formulieren/types/lib/types'; +import {ComponentWithReferentielijsten} from '@/components/builder/values/referentielijsten/code'; + // A type guard is needed because TS cannot figure out it's a discriminated union // when the discriminator is nested. // See https://github.com/microsoft/TypeScript/issues/18758 @@ -16,10 +18,10 @@ export const checkIsManualOptions = ( // See https://github.com/microsoft/TypeScript/issues/18758 export const checkIsReferentielijstenOptions = ( component: RadioComponentSchema -): component is RadioComponentSchema & { - data: {values: Option[] | undefined}; - openForms: {code: string; service: string}; -} => { +): component is RadioComponentSchema & + ComponentWithReferentielijsten & { + openForms: {code: string; service: string}; + } => { return component.openForms.dataSrc === 'referentielijsten'; }; @@ -29,7 +31,6 @@ export const checkIsReferentielijstenOptions = ( export const checkIsVariableOptions = ( component: RadioComponentSchema ): component is RadioComponentSchema & { - data: {values: Option[] | undefined}; openForms: {itemsExpression: string | JSONObject}; } => { return component.openForms.dataSrc === 'variable'; diff --git a/src/registry/radio/radio-referentielijsten.stories.ts b/src/registry/radio/radio-referentielijsten.stories.ts index 622c40b9..eb55f8fa 100644 --- a/src/registry/radio/radio-referentielijsten.stories.ts +++ b/src/registry/radio/radio-referentielijsten.stories.ts @@ -25,7 +25,6 @@ export default { dataSrc: 'manual', translations: {}, }, - data: {values: [{value: '', label: ''}]}, values: [{value: '', label: ''}], defaultValue: '', }, @@ -49,30 +48,28 @@ export const StoreValuesInComponent: Story = { play: async ({canvasElement, step, args}) => { const canvas = within(canvasElement); - await step('Fill in options', async () => { - const dataSourceInput = canvas.getByLabelText('Data source'); - await rsSelect(canvas, dataSourceInput, 'Referentielijsten API'); + const dataSourceInput = canvas.getByLabelText('Data source'); + await rsSelect(canvas, dataSourceInput, 'Referentielijsten API'); - const serviceInput = canvas.getByLabelText('Referentielijsten service'); - await rsSelect(canvas, serviceInput, 'Referentielijsten'); + const serviceInput = canvas.getByLabelText('Referentielijsten service'); + await rsSelect(canvas, serviceInput, 'Referentielijsten'); - const codeInput = canvas.getByLabelText('Referentielijsten table code'); - await rsSelect(canvas, codeInput, 'Tabel 2 (niet meer geldig)'); + const codeInput = canvas.getByLabelText('Referentielijsten table code'); + await rsSelect(canvas, codeInput, 'Tabel 2 (niet meer geldig)'); - await userEvent.click(canvas.getByRole('button', {name: 'Save'})); + await userEvent.click(canvas.getByRole('button', {name: 'Save'})); - expect(args.onSubmit).toHaveBeenCalledWith( - expect.objectContaining({ - openForms: { - code: 'tabel2', - dataSrc: 'referentielijsten', - service: 'referentielijsten', - translations: {}, - }, - type: 'radio', - }) - ); - }); + expect(args.onSubmit).toHaveBeenCalledWith( + expect.objectContaining({ + openForms: { + code: 'tabel2', + dataSrc: 'referentielijsten', + service: 'referentielijsten', + translations: {}, + }, + type: 'radio', + }) + ); }, }; @@ -81,35 +78,33 @@ export const SwitchToVariableResetOptions: Story = { play: async ({canvasElement, step, args}) => { const canvas = within(canvasElement); - await step('Fill in options', async () => { - const dataSourceInput = canvas.getByLabelText('Data source'); - await rsSelect(canvas, dataSourceInput, 'Referentielijsten API'); + const dataSourceInput = canvas.getByLabelText('Data source'); + await rsSelect(canvas, dataSourceInput, 'Referentielijsten API'); - const serviceInput = canvas.getByLabelText('Referentielijsten service'); - await rsSelect(canvas, serviceInput, 'Referentielijsten'); + const serviceInput = canvas.getByLabelText('Referentielijsten service'); + await rsSelect(canvas, serviceInput, 'Referentielijsten'); - const codeInput = canvas.getByLabelText('Referentielijsten table code'); - await rsSelect(canvas, codeInput, 'Tabel 2 (niet meer geldig)'); + const codeInput = canvas.getByLabelText('Referentielijsten table code'); + await rsSelect(canvas, codeInput, 'Tabel 2 (niet meer geldig)'); - await rsSelect(canvas, dataSourceInput, 'From variable'); + await rsSelect(canvas, dataSourceInput, 'From variable'); - const itemsExpressionInput = canvas.getByTestId('jsonEdit'); - await userEvent.clear(itemsExpressionInput); - await userEvent.type(itemsExpressionInput, '"foo"'); + const itemsExpressionInput = canvas.getByTestId('jsonEdit'); + await userEvent.clear(itemsExpressionInput); + await userEvent.type(itemsExpressionInput, '"foo"'); - await userEvent.click(canvas.getByRole('button', {name: 'Save'})); + await userEvent.click(canvas.getByRole('button', {name: 'Save'})); - expect(args.onSubmit).toHaveBeenCalledWith( - expect.objectContaining({ - openForms: { - dataSrc: 'variable', - itemsExpression: 'foo', - translations: {}, - }, - type: 'radio', - }) - ); - }); + expect(args.onSubmit).toHaveBeenCalledWith( + expect.objectContaining({ + openForms: { + dataSrc: 'variable', + itemsExpression: 'foo', + translations: {}, + }, + type: 'radio', + }) + ); }, }; @@ -118,42 +113,40 @@ export const SwitchToManualResetOptions: Story = { play: async ({canvasElement, step, args}) => { const canvas = within(canvasElement); - await step('Fill in options', async () => { - const dataSourceInput = canvas.getByLabelText('Data source'); - await rsSelect(canvas, dataSourceInput, 'Referentielijsten API'); + const dataSourceInput = canvas.getByLabelText('Data source'); + await rsSelect(canvas, dataSourceInput, 'Referentielijsten API'); - const serviceInput = canvas.getByLabelText('Referentielijsten service'); - await rsSelect(canvas, serviceInput, 'Referentielijsten'); + const serviceInput = canvas.getByLabelText('Referentielijsten service'); + await rsSelect(canvas, serviceInput, 'Referentielijsten'); - const codeInput = canvas.getByLabelText('Referentielijsten table code'); - await rsSelect(canvas, codeInput, 'Tabel 2 (niet meer geldig)'); + const codeInput = canvas.getByLabelText('Referentielijsten table code'); + await rsSelect(canvas, codeInput, 'Tabel 2 (niet meer geldig)'); - await rsSelect(canvas, dataSourceInput, 'Manually fill in'); + await rsSelect(canvas, dataSourceInput, 'Manually fill in'); - const labelInput = canvas.getByTestId('input-values[0].label'); - await userEvent.type(labelInput, 'Foo'); + const labelInput = canvas.getByTestId('input-values[0].label'); + await userEvent.type(labelInput, 'Foo'); - await userEvent.click(canvas.getByRole('button', {name: 'Save'})); + await userEvent.click(canvas.getByRole('button', {name: 'Save'})); - expect(args.onSubmit).toHaveBeenCalledWith( - expect.objectContaining({ - openForms: { - dataSrc: 'manual', - translations: {}, - }, - type: 'radio', - values: [ - { - label: 'Foo', - value: 'foo', - openForms: { - translations: {}, - }, + expect(args.onSubmit).toHaveBeenCalledWith( + expect.objectContaining({ + openForms: { + dataSrc: 'manual', + translations: {}, + }, + type: 'radio', + values: [ + { + label: 'Foo', + value: 'foo', + openForms: { + translations: {}, }, - ], - }) - ); - }); + }, + ], + }) + ); }, }; @@ -176,15 +169,13 @@ export const AutoSelectIfOnlyOneReferentielijstenService: Story = { play: async ({canvasElement, step, args}) => { const canvas = within(canvasElement); - await step('Fill in options', async () => { - const dataSourceInput = canvas.getByLabelText('Data source'); - await rsSelect(canvas, dataSourceInput, 'Referentielijsten API'); + const dataSourceInput = canvas.getByLabelText('Data source'); + await rsSelect(canvas, dataSourceInput, 'Referentielijsten API'); - const serviceInput = canvas.getByLabelText('Referentielijsten service'); + const serviceInput = canvas.getByLabelText('Referentielijsten service'); - await waitFor(async () => { - expect(serviceInput.parentElement?.parentElement).toHaveTextContent('Referentielijsten'); - }); + await waitFor(() => { + expect(serviceInput.parentElement?.parentElement).toHaveTextContent('Referentielijsten'); }); }, }; diff --git a/src/registry/select/edit-validation.ts b/src/registry/select/edit-validation.ts index 83d4085b..07e2bfc5 100644 --- a/src/registry/select/edit-validation.ts +++ b/src/registry/select/edit-validation.ts @@ -25,6 +25,8 @@ const buildValuesSchema = (intl: IntlShape) => ]), // TODO: wire up infernologic type checking itemsExpression: jsonSchema.optional(), + service: z.string().optional(), + code: z.string().optional(), }), }); diff --git a/src/registry/select/helpers.ts b/src/registry/select/helpers.ts index b56e5e68..b5d4d3d3 100644 --- a/src/registry/select/helpers.ts +++ b/src/registry/select/helpers.ts @@ -17,7 +17,6 @@ export const checkIsManualOptions = ( export const checkIsReferentielijstenOptions = ( component: SelectComponentSchema ): component is SelectComponentSchema & { - data: {values: Option[] | undefined}; openForms: {code: string; service: string}; } => { return component.openForms.dataSrc === 'referentielijsten'; @@ -29,7 +28,6 @@ export const checkIsReferentielijstenOptions = ( export const checkIsVariableOptions = ( component: SelectComponentSchema ): component is SelectComponentSchema & { - data: {values: Option[] | undefined}; openForms: {itemsExpression: string | JSONObject}; } => { return component.openForms.dataSrc === 'variable'; diff --git a/src/registry/select/select-referentielijsten.stories.ts b/src/registry/select/select-referentielijsten.stories.ts index 233dec93..b905344f 100644 --- a/src/registry/select/select-referentielijsten.stories.ts +++ b/src/registry/select/select-referentielijsten.stories.ts @@ -49,30 +49,28 @@ export const StoreValuesInComponent: Story = { play: async ({canvasElement, step, args}) => { const canvas = within(canvasElement); - await step('Fill in options', async () => { - const dataSourceInput = canvas.getByLabelText('Data source'); - await rsSelect(canvas, dataSourceInput, 'Referentielijsten API'); - - const serviceInput = canvas.getByLabelText('Referentielijsten service'); - await rsSelect(canvas, serviceInput, 'Referentielijsten'); - - const codeInput = canvas.getByLabelText('Referentielijsten table code'); - await rsSelect(canvas, codeInput, 'Tabel 2 (niet meer geldig)'); - - await userEvent.click(canvas.getByRole('button', {name: 'Save'})); - - expect(args.onSubmit).toHaveBeenCalledWith( - expect.objectContaining({ - openForms: { - code: 'tabel2', - dataSrc: 'referentielijsten', - service: 'referentielijsten', - translations: {}, - }, - type: 'select', - }) - ); - }); + const dataSourceInput = canvas.getByLabelText('Data source'); + await rsSelect(canvas, dataSourceInput, 'Referentielijsten API'); + + const serviceInput = canvas.getByLabelText('Referentielijsten service'); + await rsSelect(canvas, serviceInput, 'Referentielijsten'); + + const codeInput = canvas.getByLabelText('Referentielijsten table code'); + await rsSelect(canvas, codeInput, 'Tabel 2 (niet meer geldig)'); + + await userEvent.click(canvas.getByRole('button', {name: 'Save'})); + + expect(args.onSubmit).toHaveBeenCalledWith( + expect.objectContaining({ + openForms: { + code: 'tabel2', + dataSrc: 'referentielijsten', + service: 'referentielijsten', + translations: {}, + }, + type: 'select', + }) + ); }, }; @@ -81,35 +79,33 @@ export const SwitchToVariableResetOptions: Story = { play: async ({canvasElement, step, args}) => { const canvas = within(canvasElement); - await step('Fill in options', async () => { - const dataSourceInput = canvas.getByLabelText('Data source'); - await rsSelect(canvas, dataSourceInput, 'Referentielijsten API'); + const dataSourceInput = canvas.getByLabelText('Data source'); + await rsSelect(canvas, dataSourceInput, 'Referentielijsten API'); - const serviceInput = canvas.getByLabelText('Referentielijsten service'); - await rsSelect(canvas, serviceInput, 'Referentielijsten'); + const serviceInput = canvas.getByLabelText('Referentielijsten service'); + await rsSelect(canvas, serviceInput, 'Referentielijsten'); - const codeInput = canvas.getByLabelText('Referentielijsten table code'); - await rsSelect(canvas, codeInput, 'Tabel 2 (niet meer geldig)'); + const codeInput = canvas.getByLabelText('Referentielijsten table code'); + await rsSelect(canvas, codeInput, 'Tabel 2 (niet meer geldig)'); - await rsSelect(canvas, dataSourceInput, 'From variable'); + await rsSelect(canvas, dataSourceInput, 'From variable'); - const itemsExpressionInput = canvas.getByTestId('jsonEdit'); - await userEvent.clear(itemsExpressionInput); - await userEvent.type(itemsExpressionInput, '"foo"'); + const itemsExpressionInput = canvas.getByTestId('jsonEdit'); + await userEvent.clear(itemsExpressionInput); + await userEvent.type(itemsExpressionInput, '"foo"'); - await userEvent.click(canvas.getByRole('button', {name: 'Save'})); + await userEvent.click(canvas.getByRole('button', {name: 'Save'})); - expect(args.onSubmit).toHaveBeenCalledWith( - expect.objectContaining({ - openForms: { - dataSrc: 'variable', - itemsExpression: 'foo', - translations: {}, - }, - type: 'select', - }) - ); - }); + expect(args.onSubmit).toHaveBeenCalledWith( + expect.objectContaining({ + openForms: { + dataSrc: 'variable', + itemsExpression: 'foo', + translations: {}, + }, + type: 'select', + }) + ); }, }; @@ -118,43 +114,41 @@ export const SwitchToManualResetOptions: Story = { play: async ({canvasElement, step, args}) => { const canvas = within(canvasElement); - await step('Fill in options', async () => { - const dataSourceInput = canvas.getByLabelText('Data source'); - await rsSelect(canvas, dataSourceInput, 'Referentielijsten API'); - - const serviceInput = canvas.getByLabelText('Referentielijsten service'); - await rsSelect(canvas, serviceInput, 'Referentielijsten'); - - const codeInput = canvas.getByLabelText('Referentielijsten table code'); - await rsSelect(canvas, codeInput, 'Tabel 2 (niet meer geldig)'); - - await rsSelect(canvas, dataSourceInput, 'Manually fill in'); - - const labelInput = canvas.getByTestId('input-data.values[0].label'); - await userEvent.type(labelInput, 'Foo'); - - await userEvent.click(canvas.getByRole('button', {name: 'Save'})); - - expect(args.onSubmit).toHaveBeenCalledWith( - expect.objectContaining({ - openForms: { - dataSrc: 'manual', - translations: {}, - }, - type: 'select', - data: { - values: [ - { - label: 'Foo', - value: 'foo', - openForms: { - translations: {}, - }, + const dataSourceInput = canvas.getByLabelText('Data source'); + await rsSelect(canvas, dataSourceInput, 'Referentielijsten API'); + + const serviceInput = canvas.getByLabelText('Referentielijsten service'); + await rsSelect(canvas, serviceInput, 'Referentielijsten'); + + const codeInput = canvas.getByLabelText('Referentielijsten table code'); + await rsSelect(canvas, codeInput, 'Tabel 2 (niet meer geldig)'); + + await rsSelect(canvas, dataSourceInput, 'Manually fill in'); + + const labelInput = canvas.getByTestId('input-data.values[0].label'); + await userEvent.type(labelInput, 'Foo'); + + await userEvent.click(canvas.getByRole('button', {name: 'Save'})); + + expect(args.onSubmit).toHaveBeenCalledWith( + expect.objectContaining({ + openForms: { + dataSrc: 'manual', + translations: {}, + }, + type: 'select', + data: { + values: [ + { + label: 'Foo', + value: 'foo', + openForms: { + translations: {}, }, - ], - }, - }) - ); - }); + }, + ], + }, + }) + ); }, }; diff --git a/src/registry/selectboxes/edit-validation.ts b/src/registry/selectboxes/edit-validation.ts index 402ac6f1..e487b028 100644 --- a/src/registry/selectboxes/edit-validation.ts +++ b/src/registry/selectboxes/edit-validation.ts @@ -21,6 +21,8 @@ const buildValuesSchema = (intl: IntlShape) => ]), // TODO: wire up infernologic type checking itemsExpression: jsonSchema.optional(), + service: z.string().optional(), + code: z.string().optional(), }), validate: z.object({ minSelectedCount: z.null().or(z.number().int().gte(0)).optional(), diff --git a/src/registry/selectboxes/helpers.ts b/src/registry/selectboxes/helpers.ts index 71dd2089..1573e0bb 100644 --- a/src/registry/selectboxes/helpers.ts +++ b/src/registry/selectboxes/helpers.ts @@ -17,7 +17,6 @@ export const checkIsManualOptions = ( export const checkIsReferentielijstenOptions = ( component: SelectboxesComponentSchema ): component is SelectboxesComponentSchema & { - data: {values: Option[] | undefined}; openForms: {code: string; service: string}; } => { return component.openForms.dataSrc === 'referentielijsten'; @@ -29,7 +28,6 @@ export const checkIsReferentielijstenOptions = ( export const checkIsVariableOptions = ( component: SelectboxesComponentSchema ): component is SelectboxesComponentSchema & { - data: {values: Option[] | undefined}; openForms: {itemsExpression: string | JSONObject}; } => { return component.openForms.dataSrc === 'variable'; diff --git a/src/registry/selectboxes/selectboxes-referentielijsten.stories.ts b/src/registry/selectboxes/selectboxes-referentielijsten.stories.ts index e6f9f95f..06c2ee1d 100644 --- a/src/registry/selectboxes/selectboxes-referentielijsten.stories.ts +++ b/src/registry/selectboxes/selectboxes-referentielijsten.stories.ts @@ -46,30 +46,28 @@ export const StoreValuesInComponent: Story = { play: async ({canvasElement, step, args}) => { const canvas = within(canvasElement); - await step('Fill in options', async () => { - const dataSourceInput = canvas.getByLabelText('Data source'); - await rsSelect(canvas, dataSourceInput, 'Referentielijsten API'); - - const serviceInput = canvas.getByLabelText('Referentielijsten service'); - await rsSelect(canvas, serviceInput, 'Referentielijsten'); - - const codeInput = canvas.getByLabelText('Referentielijsten table code'); - await rsSelect(canvas, codeInput, 'Tabel 2 (niet meer geldig)'); - - await userEvent.click(canvas.getByRole('button', {name: 'Save'})); - - expect(args.onSubmit).toHaveBeenCalledWith( - expect.objectContaining({ - openForms: { - code: 'tabel2', - dataSrc: 'referentielijsten', - service: 'referentielijsten', - translations: {}, - }, - type: 'selectboxes', - }) - ); - }); + const dataSourceInput = canvas.getByLabelText('Data source'); + await rsSelect(canvas, dataSourceInput, 'Referentielijsten API'); + + const serviceInput = canvas.getByLabelText('Referentielijsten service'); + await rsSelect(canvas, serviceInput, 'Referentielijsten'); + + const codeInput = canvas.getByLabelText('Referentielijsten table code'); + await rsSelect(canvas, codeInput, 'Tabel 2 (niet meer geldig)'); + + await userEvent.click(canvas.getByRole('button', {name: 'Save'})); + + expect(args.onSubmit).toHaveBeenCalledWith( + expect.objectContaining({ + openForms: { + code: 'tabel2', + dataSrc: 'referentielijsten', + service: 'referentielijsten', + translations: {}, + }, + type: 'selectboxes', + }) + ); }, }; @@ -78,35 +76,33 @@ export const SwitchToVariableResetOptions: Story = { play: async ({canvasElement, step, args}) => { const canvas = within(canvasElement); - await step('Fill in options', async () => { - const dataSourceInput = canvas.getByLabelText('Data source'); - await rsSelect(canvas, dataSourceInput, 'Referentielijsten API'); + const dataSourceInput = canvas.getByLabelText('Data source'); + await rsSelect(canvas, dataSourceInput, 'Referentielijsten API'); - const serviceInput = canvas.getByLabelText('Referentielijsten service'); - await rsSelect(canvas, serviceInput, 'Referentielijsten'); + const serviceInput = canvas.getByLabelText('Referentielijsten service'); + await rsSelect(canvas, serviceInput, 'Referentielijsten'); - const codeInput = canvas.getByLabelText('Referentielijsten table code'); - await rsSelect(canvas, codeInput, 'Tabel 2 (niet meer geldig)'); + const codeInput = canvas.getByLabelText('Referentielijsten table code'); + await rsSelect(canvas, codeInput, 'Tabel 2 (niet meer geldig)'); - await rsSelect(canvas, dataSourceInput, 'From variable'); + await rsSelect(canvas, dataSourceInput, 'From variable'); - const itemsExpressionInput = canvas.getByTestId('jsonEdit'); - await userEvent.clear(itemsExpressionInput); - await userEvent.type(itemsExpressionInput, '"foo"'); + const itemsExpressionInput = canvas.getByTestId('jsonEdit'); + await userEvent.clear(itemsExpressionInput); + await userEvent.type(itemsExpressionInput, '"foo"'); - await userEvent.click(canvas.getByRole('button', {name: 'Save'})); + await userEvent.click(canvas.getByRole('button', {name: 'Save'})); - expect(args.onSubmit).toHaveBeenCalledWith( - expect.objectContaining({ - openForms: { - dataSrc: 'variable', - itemsExpression: 'foo', - translations: {}, - }, - type: 'selectboxes', - }) - ); - }); + expect(args.onSubmit).toHaveBeenCalledWith( + expect.objectContaining({ + openForms: { + dataSrc: 'variable', + itemsExpression: 'foo', + translations: {}, + }, + type: 'selectboxes', + }) + ); }, }; @@ -115,41 +111,39 @@ export const SwitchToManualResetOptions: Story = { play: async ({canvasElement, step, args}) => { const canvas = within(canvasElement); - await step('Fill in options', async () => { - const dataSourceInput = canvas.getByLabelText('Data source'); - await rsSelect(canvas, dataSourceInput, 'Referentielijsten API'); + const dataSourceInput = canvas.getByLabelText('Data source'); + await rsSelect(canvas, dataSourceInput, 'Referentielijsten API'); - const serviceInput = canvas.getByLabelText('Referentielijsten service'); - await rsSelect(canvas, serviceInput, 'Referentielijsten'); + const serviceInput = canvas.getByLabelText('Referentielijsten service'); + await rsSelect(canvas, serviceInput, 'Referentielijsten'); - const codeInput = canvas.getByLabelText('Referentielijsten table code'); - await rsSelect(canvas, codeInput, 'Tabel 2 (niet meer geldig)'); + const codeInput = canvas.getByLabelText('Referentielijsten table code'); + await rsSelect(canvas, codeInput, 'Tabel 2 (niet meer geldig)'); - await rsSelect(canvas, dataSourceInput, 'Manually fill in'); + await rsSelect(canvas, dataSourceInput, 'Manually fill in'); - const labelInput = canvas.getByTestId('input-values[0].label'); - await userEvent.type(labelInput, 'Foo'); + const labelInput = canvas.getByTestId('input-values[0].label'); + await userEvent.type(labelInput, 'Foo'); - await userEvent.click(canvas.getByRole('button', {name: 'Save'})); + await userEvent.click(canvas.getByRole('button', {name: 'Save'})); - expect(args.onSubmit).toHaveBeenCalledWith( - expect.objectContaining({ - openForms: { - dataSrc: 'manual', - translations: {}, - }, - type: 'selectboxes', - values: [ - { - label: 'Foo', - value: 'foo', - openForms: { - translations: {}, - }, + expect(args.onSubmit).toHaveBeenCalledWith( + expect.objectContaining({ + openForms: { + dataSrc: 'manual', + translations: {}, + }, + type: 'selectboxes', + values: [ + { + label: 'Foo', + value: 'foo', + openForms: { + translations: {}, }, - ], - }) - ); - }); + }, + ], + }) + ); }, }; diff --git a/src/utils/storybookTestHelpers.d.ts b/src/utils/storybookTestHelpers.d.ts deleted file mode 100644 index 09f1934b..00000000 --- a/src/utils/storybookTestHelpers.d.ts +++ /dev/null @@ -1,17 +0,0 @@ -declare module '@/utils/storybookTestHelpers' { - import {within} from '@storybook/test'; - - /** - * Wrapper around selectEvent.select to ensure the portal option is used. - * - * @param canvas - The canvas where the input is present. - * @param input - The input element associated with the react-select component. - * @param optionOrOptions - The option or options to select. - * @returns A promise that resolves when the select event is triggered. - */ - export function rsSelect( - canvas: ReturnType, - input: HTMLElement, - optionOrOptions: string | string[] - ): Promise; -}