chore(SLB-218): update storybook and use play functions

packages/ui/src/components/Molecules/ContactForm.stories.tsx

@@ -0,0 +1,79 @@
+import { CreateSubmissionMutation, OperationResult, registerExecutor } from '@custom/schema';
+import { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/test';
+import React from 'react';
+
+import { ContactForm } from './ContactForm';
+
+type ContactFormExecutor = () => Promise<OperationResult<typeof CreateSubmissionMutation>>;
+
+export default {
+  title: 'Components/Molecules/ContactForm',
+  render: (args) => {
+    registerExecutor(CreateSubmissionMutation, args.exec);
+    return <ContactForm />;
+  },
+} satisfies Meta<{ exec: ContactFormExecutor }>;
+
+export const Empty = {} satisfies StoryObj<typeof ContactForm>;
+
+export const FilledForm: StoryObj<typeof ContactForm> = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const nameInput = canvas.getByPlaceholderText('Name');
+    await userEvent.type(nameInput, 'John doe', {
+      delay: 5,
+    });
+    const emailInput = canvas.getByPlaceholderText('Email');
+    await userEvent.type(emailInput, '[email protected]', {
+      delay: 5,
+    });
+    const subjectInput = canvas.getByPlaceholderText('Subject');
+    await userEvent.type(subjectInput, 'Lorem ipsum', {
+      delay: 5,
+    });
+    const messageInput = canvas.getByPlaceholderText('Message');
+    await userEvent.type(messageInput, 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', {
+      delay: 5,
+    });
+  },
+}
+
+export const WithValidationErrors: StoryObj<{ exec: ContactFormExecutor }> = {
+  args: {
+    exec: async () => {
+      return {
+        createWebformSubmission: {
+          errors: [
+            {
+              key: 'invalid_field_email',
+              field: 'email',
+              message: "The email address <em class=\"placeholder\">invalid_mail</em> is not valid. Use the format [email protected]."
+            }
+          ]
+        }
+      };
+    }
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const nameInput = canvas.getByPlaceholderText('Name');
+    await userEvent.type(nameInput, 'John doe', {
+      delay: 5,
+    });
+    const emailInput = canvas.getByPlaceholderText('Email');
+    await userEvent.type(emailInput, 'invalid_mail', {
+      delay: 5,
+    });
+    const subjectInput = canvas.getByPlaceholderText('Subject');
+    await userEvent.type(subjectInput, 'Lorem ipsum', {
+      delay: 5,
+    });
+    const messageInput = canvas.getByPlaceholderText('Message');
+    await userEvent.type(messageInput, 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', {
+      delay: 5,
+    });
+    const submitButton = canvas.getByRole('button');
+    await userEvent.click(submitButton);
+  },
+}