fix(uniform): fix FieldArray testId + refactor lastElementNotRemovable

fuf-stack · Jan 28, 2025 · 15785d3 · 15785d3
1 parent 041d249
commit 15785d3
Show file tree

Hide file tree

Showing 5 changed files with 198 additions and 280 deletions.
diff --git a/packages/uniform/src/FieldArray/FieldArray.stories.tsx b/packages/uniform/src/FieldArray/FieldArray.stories.tsx
@@ -158,12 +158,12 @@ export const Invalid: Story = {
     const appendButton = canvas.getByTestId('arrayfield_append_button');
     appendButton.click();
 
-    const input = canvas.getByTestId('arrayfield_0_name');
+    const input = canvas.getByTestId('arrayfield0_name');
     await userEvent.type(input, 'invälid', {
       delay: 100,
     });
 
-    const inputTwo = canvas.getByTestId('arrayfield_1_name');
+    const inputTwo = canvas.getByTestId('arrayfield1_name');
     await userEvent.type(inputTwo, 'invälid', {
       delay: 100,
     });
@@ -186,15 +186,15 @@ export const Invalid: Story = {
     );
     await expect(errorGlobal).toBeInTheDocument();
 
-    const elementZero = canvas.getByTestId('arrayfield_0');
+    const elementZero = canvas.getByTestId('arrayfield0');
     await expect(elementZero).toContainHTML(
       'Must only contain alphanumeric characters and spaces.',
     );
     await expect(elementZero).toContainHTML(
       'String must contain at least 8 character(s)',
     );
 
-    const elementOne = canvas.getByTestId('arrayfield_1');
+    const elementOne = canvas.getByTestId('arrayfield1');
     await expect(elementOne).toContainHTML(
       'Must only contain alphanumeric characters and spaces.',
     );
@@ -212,18 +212,18 @@ export const Invalid: Story = {
   },
 };
 
-export const AllowDeleteAllElements: Story = {
+export const LastElementNotRemovable: Story = {
   parameters: {
     formProps: {
-      initialValues: { arrayField: [{}] },
+      initialValues: {},
     },
   },
   args: {
     name: 'arrayField',
     children: ({ name, index }) => (
       <Input name={`${name}.name`} label={`name ${index}`} />
     ),
-    lastElementNotDeletable: false,
+    lastElementNotRemovable: true,
   },
 };
 
@@ -312,8 +312,8 @@ export const Sortable: Story = {
   // play: async ({ canvasElement }) => {
   //   const user = userEvent.setup();
   //   const canvas = within(canvasElement);
-  //   // const fieldArrayItemButton = canvas.getByTestId('arrayfield_1_movebutton');
-  //   // const fieldArray = canvas.getByTestId('arrayfield_0_movebutton');
+  //   // const fieldArrayItemButton = canvas.getByTestId('arrayfield1_movebutton');
+  //   // const fieldArray = canvas.getByTestId('arrayfield0_movebutton');
 
   //   // await fieldArrayItemButton.dispatchEvent(new MouseEvent('mousedown'));
   //   // await new Promise((resolve) => setTimeout(resolve, 2000));
@@ -328,10 +328,10 @@ export const Sortable: Story = {
   //   //   delay: 500,
   //   // });
   //   // const canvas = within(canvasElement);
-  //   // const dropTarget = canvas.getByTestId('arrayfield_1_movebutton');
+  //   // const dropTarget = canvas.getByTestId('arrayfield1_movebutton');
 
   //   await new Promise((resolve) => setTimeout(resolve, 2000));
-  //   const draggable = canvas.getByTestId('arrayfield_0_movebutton');
+  //   const draggable = canvas.getByTestId('arrayfield0_movebutton');
   //   const dropTarget = canvas.getByText('Add');
 
   //   // user.

diff --git a/packages/uniform/src/FieldArray/FieldArray.tsx b/packages/uniform/src/FieldArray/FieldArray.tsx
@@ -27,7 +27,7 @@ export const fieldArrayVariants = tv({
 });
 
 /**
- * FieldArray component using TODO
+ * FieldArray component based in [RHF useFieldArray](https://react-hook-form.com/docs/usefieldarray)
  */
 const FieldArray = ({
   appendButtonText = 'Add Element',
@@ -37,7 +37,7 @@ const FieldArray = ({
   elementInitialValue: _elementInitialValue = null,
   insertAfter = false,
   label: _label = undefined,
-  lastElementNotDeletable = true,
+  lastElementNotRemovable = false,
   name,
   sortable = false,
   testId: _testId = undefined,
@@ -77,7 +77,9 @@ const FieldArray = ({
   // TODO: add info
   const elementInitialValue = toNullishString(_elementInitialValue);
 
-  if (lastElementNotDeletable && fields.length === 0) {
+  // When lastElementNotRemovable is set and the field array is empty,
+  // add an initial element to ensure there's always at least one visible element
+  if (lastElementNotRemovable && fields.length === 0) {
     append(elementInitialValue);
   }
 
@@ -113,8 +115,11 @@ const FieldArray = ({
         )}
 
         {fields.map((field, index) => {
+          const elementName = `${name}.${index}`;
+          const elementTestId = `${testId}${index}`;
+
           // create methods for element
-          const methods: FieldArrayElementMethods = {
+          const elementMethods: FieldArrayElementMethods = {
             append: () => append(elementInitialValue),
             duplicate: () => {
               const values = getValues(name);
@@ -126,25 +131,25 @@ const FieldArray = ({
 
           return (
             <FieldArrayElement
+              arrayFieldName={name}
               className={className}
               fields={fields}
               id={field.id}
               index={index}
               duplicate={duplicate}
               insertAfter={insertAfter}
               key={field.id}
-              lastNotDeletable={lastElementNotDeletable}
-              methods={methods}
-              name={name}
+              lastNotDeletable={lastElementNotRemovable}
+              methods={elementMethods}
               sortable={sortable}
-              testId={`${testId}_${index}`}
+              testId={elementTestId}
             >
               {children({
                 index,
                 length: fields.length,
-                methods,
-                name: `${name}.${index}`,
-                testId: `${testId}_${index}`,
+                methods: elementMethods,
+                name: elementName,
+                testId: elementTestId,
               })}
             </FieldArrayElement>
           );