From 2c488ea02231b717511b1801faa44ecd21630f2e Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Fri, 20 Oct 2023 12:59:41 +0200
Subject: [PATCH] :white_check_mark: [#571] Set up interaction test for
 validation styling

* Validation error styling for a utrecht-form-field and utrecht-form-fieldset
* Content component customClass styling
---
 src/formio/components/composite.stories.js | 75 ++++++++++++++++++++++
 1 file changed, 75 insertions(+)
 create mode 100644 src/formio/components/composite.stories.js

diff --git a/src/formio/components/composite.stories.js b/src/formio/components/composite.stories.js
new file mode 100644
index 000000000..afaa57ca8
--- /dev/null
+++ b/src/formio/components/composite.stories.js
@@ -0,0 +1,75 @@
+import {userEvent, within} from '@storybook/testing-library';
+
+import {withUtrechtDocument} from 'story-utils/decorators';
+import {sleep} from 'utils';
+
+import {MultipleFormioComponents} from './story-util';
+
+export default {
+  title: 'Form.io components / Composite',
+  decorators: [withUtrechtDocument],
+  args: {
+    components: [
+      {
+        type: 'textfield',
+        key: 'textfield',
+        label: 'Required text field',
+        validate: {
+          required: true,
+          pattern: '^\\d+',
+        },
+      },
+      {
+        type: 'radio',
+        key: 'radio',
+        label: 'Required radio',
+        validate: {
+          required: true,
+        },
+        values: [
+          {value: 'a', label: 'Option A'},
+          {value: 'b', label: 'Option B'},
+        ],
+      },
+      {
+        type: 'content',
+        key: 'content',
+        label: 'Content',
+        html: '<p>Some WYSIWYG content</p>',
+        customClass: 'info',
+      },
+      {
+        label: 'Submit',
+        showValidations: false,
+        key: 'submit1',
+        type: 'button',
+        input: true,
+      },
+    ],
+    evalContext: {},
+  },
+  argTypes: {
+    components: {table: {disable: true}},
+    evalContext: {table: {disable: true}},
+  },
+  parameters: {
+    controls: {sort: 'requiredFirst'},
+  },
+};
+
+export const WithValidationErrors = {
+  render: args => (
+    <form onSubmit={e => e.preventDefault()}>
+      <MultipleFormioComponents {...args} />
+    </form>
+  ),
+
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+
+    // just form.io things...
+    await sleep(100);
+
+    await userEvent.click(canvas.getByRole('button'));
+  },
+};