✅ [open-formulieren/open-forms#4772] Add story for select component i…

…nt values
open-formulieren · Nov 12, 2024 · f3f74d7 · f3f74d7
1 parent 00d5a05
commit f3f74d7
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 1 deletion.
diff --git a/src/formio/components/Select.stories.js b/src/formio/components/Select.stories.js
@@ -1,3 +1,4 @@
+import {expect, jest} from '@storybook/jest';
 import {userEvent, within} from '@storybook/test';
 
 import {withUtrechtDocument} from 'story-utils/decorators';
@@ -131,3 +132,57 @@ export const MultilineOptions = {
     },
   },
 };
+
+export const WithIntegerValues = {
+  render: MultipleFormioComponents,
+  args: {
+    onSubmit: jest.fn(),
+    components: [
+      {
+        type: 'select',
+        key: 'selectWithInt',
+        label: 'Select with integer values',
+        data: {
+          values: [
+            {
+              label: 'Optie 1',
+              value: '1',
+            },
+            {
+              label: 'Optie 2',
+              value: '2',
+            },
+          ],
+        },
+        validate: {
+          required: true,
+        },
+      },
+      {
+        label: 'Submit',
+        showValidations: true,
+        key: 'submit1',
+        type: 'button',
+        input: false,
+        action: 'submit',
+      },
+    ],
+  },
+
+  play: async ({canvasElement, args}) => {
+    args.onSubmit.mockClear();
+
+    const canvas = within(canvasElement);
+    const select = await canvas.findByLabelText('Select with integer values');
+    await userEvent.click(select);
+
+    const option = await canvas.findByText('Optie 1');
+    await userEvent.click(option);
+
+    await userEvent.click(canvas.getByText('Submit'));
+
+    expect(args.onSubmit).toHaveBeenCalledTimes(1);
+    const submittedData = args.onSubmit.mock.calls[0][0];
+    expect(submittedData.data).toEqual({selectWithInt: '1'});
+  },
+};
diff --git a/src/formio/components/story-util.js b/src/formio/components/story-util.js
@@ -11,6 +11,7 @@ const RenderFormioForm = ({
   submissionData = {},
   evalContext = {},
   ofContext = {},
+  onSubmit = () => {},
 }) => {
   const config = useContext(ConfigContext);
   const formioTranslations = useContext(FormioTranslations);
@@ -20,6 +21,7 @@ const RenderFormioForm = ({
     <Form
       form={configuration}
       submission={{data: submissionData}}
+      onSubmit={onSubmit}
       options={{
         noAlerts: true,
         baseUrl: config.baseUrl,
@@ -50,6 +52,7 @@ export const SingleFormioComponent = ({
   submissionData = {},
   evalContext = {},
   ofContext = {},
+  onSubmit = () => {},
 }) => {
   // in case this is used as a react component, allow using an alias, because React
   // reserves the key 'prop'
@@ -61,14 +64,21 @@ export const SingleFormioComponent = ({
       submissionData={submissionData}
       evalContext={evalContext}
       ofContext={ofContext}
+      onSubmit={onSubmit}
     />
   );
 };
 
-export const MultipleFormioComponents = ({components, evalContext = {}, ofContext = {}}) => (
+export const MultipleFormioComponents = ({
+  components,
+  evalContext = {},
+  ofContext = {},
+  onSubmit = () => {},
+}) => (
   <RenderFormioForm
     configuration={{type: 'form', components: components}}
     evalContext={evalContext}
     ofContext={ofContext}
+    onSubmit={onSubmit}
   />
 );