From 275202160c25cdcc609d60b2293c3aac3be2d2fd 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 | 8 +- .../values/referentielijsten/service.tsx | 46 ++--- .../builder/values/values-config.stories.tsx | 20 +-- 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, 256 insertions(+), 315 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..3f685867 100644 --- a/src/components/builder/values/referentielijsten/code.tsx +++ b/src/components/builder/values/referentielijsten/code.tsx @@ -28,11 +28,11 @@ function transformItems(items: ReferentielijstenTabelOption[]) { }); } -interface ComponentWithReferentielijsten { +export interface ComponentWithReferentielijsten { openForms?: { dataSrc: 'referentielijsten'; - service?: string; - code?: string; + service: string; + code: string; }; } @@ -63,7 +63,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..e566717e 100644 --- a/src/components/builder/values/values-config.stories.tsx +++ b/src/components/builder/values/values-config.stories.tsx @@ -17,6 +17,7 @@ import ValuesConfig from './values-config'; export default { title: 'Formio/Builder/Values/ValuesConfig', component: ValuesConfig, + decorators: [withFormik], parameters: { controls: {hideNoControlsWarning: true}, modal: {noModal: true}, @@ -44,12 +45,9 @@ type SelectStory = StoryObj>; /** * Variant pinned to the `SelectboxesComponentSchema` component type. */ -export const SelectBoxes: SelectboxesStory = { - decorators: [withFormik], -}; +export const SelectBoxes: SelectboxesStory = {}; export const SelectBoxesManual: SelectboxesStory = { - decorators: [withFormik], parameters: { formik: { initialValues: { @@ -72,7 +70,6 @@ export const SelectBoxesManual: SelectboxesStory = { }; export const SelectBoxesVariable: SelectboxesStory = { - decorators: [withFormik], parameters: { formik: { initialValues: { @@ -211,12 +208,9 @@ export const SelectBoxesResetState: StoryObj<{ /** * Variant pinned to the `RadioComponentSchema` component type. */ -export const Radio: RadioStory = { - decorators: [withFormik], -}; +export const Radio: RadioStory = {}; export const RadioManual: RadioStory = { - decorators: [withFormik], parameters: { formik: { initialValues: { @@ -239,7 +233,6 @@ export const RadioManual: RadioStory = { }; export const RadioVariable: RadioStory = { - decorators: [withFormik], parameters: { formik: { initialValues: { @@ -256,7 +249,6 @@ export const RadioVariable: RadioStory = { * Variant pinned to the `SelectComponentSchema` component type. */ export const Select: SelectStory = { - decorators: [withFormik], args: { name: 'data.values', }, @@ -307,7 +299,7 @@ export const SelectVariable: SelectStory = { export const SelectReferentielijsten: SelectStory = { ...Select, - decorators: [withFormik, BuilderContextDecorator], + decorators: [BuilderContextDecorator], parameters: { formik: { initialValues: { @@ -325,7 +317,7 @@ export const SelectReferentielijsten: SelectStory = { export const SelectboxesReferentielijsten: SelectboxesStory = { ...SelectBoxes, - decorators: [withFormik, BuilderContextDecorator], + decorators: [BuilderContextDecorator], parameters: { formik: { initialValues: { @@ -343,7 +335,7 @@ export const SelectboxesReferentielijsten: SelectboxesStory = { export const RadioReferentielijsten: RadioStory = { ...Radio, - decorators: [withFormik, BuilderContextDecorator], + decorators: [BuilderContextDecorator], parameters: { formik: { initialValues: { 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; -}