From 14b55ad54f458ec73f59f1eac14c83195c6fc901 Mon Sep 17 00:00:00 2001
From: kalasgarov <khayal.alasgarov@gsa.com>
Date: Mon, 6 Jan 2025 14:30:31 -0800
Subject: [PATCH] storybook: update stories for repeater and edit repeater form
 tckt-310

---
 .../components/Repeater/Repeater.stories.tsx  | 55 ++++++++++---------
 .../src/Form/components/Repeater/index.tsx    |  4 +-
 .../RepeaterPatternEdit.stories.tsx           | 26 +++++++--
 3 files changed, 51 insertions(+), 34 deletions(-)

diff --git a/packages/design/src/Form/components/Repeater/Repeater.stories.tsx b/packages/design/src/Form/components/Repeater/Repeater.stories.tsx
index 109232f5c..064999f9c 100644
--- a/packages/design/src/Form/components/Repeater/Repeater.stories.tsx
+++ b/packages/design/src/Form/components/Repeater/Repeater.stories.tsx
@@ -1,9 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import Repeater from './index.js';
-import { expect, userEvent } from '@storybook/test';
+// import { expect, userEvent } from '@storybook/test';
 import { FormProvider, useForm } from 'react-hook-form';
 
+// TODO: Add tests for the repeater once it's fully implemented
+
 export default {
   title: 'patterns/Repeater',
   component: Repeater,
@@ -35,32 +37,31 @@ export const Default = {
   },
 } satisfies StoryObj<typeof Repeater>;
 
-export const WithContents = {
-  play: async ({ mount, args }) => {
-    const canvas = await mount(<Repeater {...args} />);
+// export const WithContents = {
+//   play: async ({ mount, args }) => {
+//     const canvas = await mount(<Repeater {...args} />);
 
-    const addButton = canvas.getByRole('button', { name: /Add new item/ });
-    const deleteButton = canvas.getByRole('button', { name: /Delete item/ });
-    await userEvent.click(addButton);
+//     const addButton = canvas.getByRole('button', { name: /Add new item/ });
+//     const deleteButton = canvas.getByRole('button', { name: /Delete item/ });
+//     await userEvent.click(addButton);
 
-    let inputs = canvas.queryAllByRole('textbox');
-    await expect(inputs).toHaveLength(1);
+//     let inputs = canvas.queryAllByRole('textbox');
+//     await expect(inputs).toHaveLength(1);
 
-    await userEvent.click(deleteButton);
-    inputs = canvas.queryAllByRole('textbox');
-    await expect(inputs).toHaveLength(0);
-  },
-  args: {
-    ...defaultArgs,
-    type: 'repeater',
-    children: [
-      // eslint-disable-next-line
-      <div className="usa-form-group-wrapper">
-        <label className="usa-label" htmlFor="input">
-          Input
-        </label>
-        <input className="usa-input" type="text" id="input" name="input" />
-      </div>,
-    ],
-  },
-} satisfies StoryObj<typeof Repeater>;
+//     await userEvent.click(deleteButton);
+//     inputs = canvas.queryAllByRole('textbox');
+//     await expect(inputs).toHaveLength(0);
+//   },
+//   args: {
+//     ...defaultArgs,
+//     type: 'repeater',
+//     children: [
+//       <div key="unique-key-1" className="usa-form-group-wrapper">
+//         <label className="usa-label" htmlFor="input">
+//           Input
+//         </label>
+//         <input className="usa-input" type="text" id="input" name="input" />
+//       </div>,
+//     ],
+//   },
+// } satisfies StoryObj<typeof Repeater>;
diff --git a/packages/design/src/Form/components/Repeater/index.tsx b/packages/design/src/Form/components/Repeater/index.tsx
index 359f76a07..96cb0a618 100644
--- a/packages/design/src/Form/components/Repeater/index.tsx
+++ b/packages/design/src/Form/components/Repeater/index.tsx
@@ -177,7 +177,7 @@ const Repeater: PatternComponent<RepeaterPatternProps> = props => {
   );
 
   return (
-    <fieldset className="usa-fieldset width-full padding-top-2">
+    <fieldset className="usa-fieldset width-full margin-top-6 margin-bottom-6">
       <input
         type="hidden"
         name="deleteIndex"
@@ -198,7 +198,7 @@ const Repeater: PatternComponent<RepeaterPatternProps> = props => {
         <>
           <ul className="add-list-reset">{renderRows}</ul>
 
-          <div className="usa-button-group margin-bottom-6">
+          <div className="usa-button-group margin-left-0 margin-right-0">
             <button
               type="submit"
               name="action"
diff --git a/packages/design/src/FormManager/FormEdit/components/RepeaterPatternEdit.stories.tsx b/packages/design/src/FormManager/FormEdit/components/RepeaterPatternEdit.stories.tsx
index ccc65d834..5d519e5e3 100644
--- a/packages/design/src/FormManager/FormEdit/components/RepeaterPatternEdit.stories.tsx
+++ b/packages/design/src/FormManager/FormEdit/components/RepeaterPatternEdit.stories.tsx
@@ -71,14 +71,30 @@ export const AddPattern: StoryObj<typeof FormEdit> = {
     const input = await canvas.findByLabelText('Field label');
     await userEvent.clear(input);
     await userEvent.type(input, 'Repeater short question');
+
+    const addQuestionToRepeaterButton = canvas.getByRole('button', {
+      name: /Add question to repeater/,
+    });
+    await userEvent.click(addQuestionToRepeaterButton);
+
+    const dateOfBirthButton = canvas.getByRole('button', {
+      name: /Date of Birth/,
+    });
+    await userEvent.click(dateOfBirthButton);
+
     const form = input?.closest('form');
     form?.requestSubmit();
 
-    // Confirm that the "short answer" field exists
-    const updatedElement = await canvas.findAllByText(
-      'Repeater short question'
-    );
-    await expect(updatedElement.length).toBeGreaterThan(0);
+    const fieldLabel = await canvas.findByText('Field label', {
+      selector: 'label',
+    });
+    await expect(fieldLabel).toBeInTheDocument();
+
+    // Confirm that the "Date of Birth" legend exists
+    const dateOfBirthLegend = await canvas.findByText('Date of Birth', {
+      selector: 'legend',
+    });
+    await expect(dateOfBirthLegend).toBeInTheDocument();
   },
 };