From ff085d84fc33bc1de77b07864c24c519a274c14c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Herv=C3=A9=20Dombya?=
 <135591453+hervedombya@users.noreply.github.com>
Date: Tue, 19 Dec 2023 16:07:04 +0100
Subject: [PATCH] Update input buttons and input list component

---
 src/lib/components/inputlist/InputButtons.tsx |   4 +-
 .../inputlist/InputList.component.tsx         |  51 ++++-----
 .../components/inputlist/InputList.test.tsx   | 102 ++++++++++++++++++
 3 files changed, 130 insertions(+), 27 deletions(-)
 create mode 100644 src/lib/components/inputlist/InputList.test.tsx

diff --git a/src/lib/components/inputlist/InputButtons.tsx b/src/lib/components/inputlist/InputButtons.tsx
index 50e8a49ef9..6179c773ad 100644
--- a/src/lib/components/inputlist/InputButtons.tsx
+++ b/src/lib/components/inputlist/InputButtons.tsx
@@ -62,7 +62,7 @@ export const AddButton = ({
         name={`addbtn${index}`}
         id={`addbtn${index}`}
         onClick={onClickFn}
-        aria-label="Add"
+        aria-label={`Add${index}`}
         tooltip={{
           overlay: 'Add',
           placement: 'top',
@@ -97,7 +97,7 @@ export const SubButton = ({
       variant="danger"
       type="button"
       disabled={isDisabled}
-      aria-label="Remove"
+      aria-label={`Remove${index}`}
       name={`delbtn${index}`}
       id={`delbtn${index}`}
       onClick={() => deleteEntry(index)}
diff --git a/src/lib/components/inputlist/InputList.component.tsx b/src/lib/components/inputlist/InputList.component.tsx
index 21b08e1567..a453fb9e08 100644
--- a/src/lib/components/inputlist/InputList.component.tsx
+++ b/src/lib/components/inputlist/InputList.component.tsx
@@ -19,22 +19,24 @@ export type InputListProps<T> = HTMLProps<HTMLInputElement> & {
 
 function InternalInputList<
   T extends string | number | readonly string[] | undefined,
->({
-  onChange,
-  onBlur,
-  ref,
-  min,
-  max,
-  maxLength,
-  minLength,
-  pattern,
-  required,
-  disabled,
-  maxItems,
-  id,
-  value,
-  ...rest
-}: InputListProps<T>) {
+>(
+  {
+    onChange,
+    onBlur,
+    min,
+    max,
+    maxLength,
+    minLength,
+    pattern,
+    required,
+    disabled,
+    maxItems,
+    value,
+    name,
+    ...rest
+  }: InputListProps<T>,
+  _,
+) {
   const isMaxItemsReached =
     maxItems !== undefined && maxItems !== null && value.length === maxItems;
 
@@ -47,13 +49,11 @@ function InternalInputList<
   };
 
   const deleteEntry = (entryIndex: number) => {
-    let tempValues = [...value];
-    tempValues.splice(entryIndex, 1);
-    if (tempValues.length === 0) {
-      tempValues = [''] as T[];
-    }
+    const newValues = value.filter((_, index) => index !== entryIndex);
+    const updatedValues = newValues.length === 0 ? ([''] as T[]) : newValues;
+
     onChange?.({
-      target: { value: tempValues },
+      target: { value: updatedValues },
     } as unknown as React.ChangeEvent<HTMLInputElement>);
   };
 
@@ -62,7 +62,8 @@ function InternalInputList<
       {value.map((val, index) => (
         <Box display="flex" gap="0.25rem" alignItems="center" key={index}>
           <Input
-            id={`${id}[${index}]`}
+            id={`${name}[${index}]`}
+            aria-label={`${name}${index}`}
             inputSize={'1/2'}
             value={val}
             onChange={(evt) => {
@@ -76,14 +77,14 @@ function InternalInputList<
           />
           <SubButton
             index={index}
-            key={`${id}-delete-${value.join(',') + index}`}
+            key={`${name}-delete-${value.join(',') + index}`}
             deleteEntry={deleteEntry}
             items={value}
             disabled={value.length === 1 && value[0] === ''}
           />
           <AddButton
             index={index}
-            key={`${id}-add-${value.join(',') + index}`}
+            key={`${name}-add-${value.join(',') + index}`}
             insertEntry={insertEntry}
             items={value}
             disabled={val === '' || isMaxItemsReached}
diff --git a/src/lib/components/inputlist/InputList.test.tsx b/src/lib/components/inputlist/InputList.test.tsx
new file mode 100644
index 0000000000..02a1c71d34
--- /dev/null
+++ b/src/lib/components/inputlist/InputList.test.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { InputList, InputListProps } from './InputList.component';
+import { FormSection } from '../form/Form.component';
+import { QueryClient, QueryClientProvider } from 'react-query';
+
+describe('InputList', () => {
+  const onChangeMock = jest.fn();
+
+  const renderInputList = (props: InputListProps<string[]>) => {
+    render(
+      <QueryClientProvider client={new QueryClient()}>
+        <FormSection>
+          <InputList
+            placeholder="Input list Test"
+            onChange={onChangeMock}
+            value={props.value}
+            name="inputListTest"
+          />
+        </FormSection>
+      </QueryClientProvider>,
+    );
+  };
+
+  beforeEach(() => {
+    onChangeMock.mockClear();
+  });
+
+  it('should render an empty input list', () => {
+    renderInputList({
+      value: [''],
+    });
+
+    expect(screen.getByLabelText('inputListTest0')).toHaveValue('');
+  });
+
+  it('should render an input list with initial values', () => {
+    const initialValues = ['Value 1', 'Value 2', 'Value 3'];
+
+    renderInputList({
+      value: initialValues,
+    });
+
+    const inputElements = screen.getAllByRole('textbox');
+
+    expect(inputElements).toHaveLength(initialValues.length);
+
+    inputElements.forEach((input, index) => {
+      expect(input).toHaveValue(initialValues[index]);
+    });
+  });
+
+  it('should add a new input when clicking the add button', () => {
+    const initialValues = ['Value 1', 'Value 2'];
+
+    renderInputList({
+      value: initialValues,
+    });
+
+    const addButton = screen.getByLabelText('Add1');
+
+    fireEvent.click(addButton);
+
+    expect(onChangeMock).toHaveBeenCalledWith({
+      target: { value: [...initialValues, ''] },
+    });
+  });
+
+  it('should delete an input when clicking the delete button', () => {
+    const initialValues = ['Value 1', 'Value 2', 'Value 3'];
+
+    renderInputList({
+      value: initialValues,
+    });
+
+    const deleteButton = screen.getByLabelText('Remove1');
+
+    fireEvent.click(deleteButton);
+
+    expect(onChangeMock).toHaveBeenCalledWith({
+      target: { value: ['Value 1', 'Value 3'] },
+    });
+  });
+
+  it('should update the value of an input', () => {
+    const initialValues = ['Value 1', 'Value 2', 'Value 3'];
+
+    renderInputList({
+      value: initialValues,
+    });
+
+    const inputElements = screen.getAllByRole('textbox');
+
+    const newValue = 'New Value';
+
+    fireEvent.change(inputElements[1], { target: { value: newValue } });
+
+    expect(onChangeMock).toHaveBeenCalledWith({
+      target: { value: ['Value 1', newValue, 'Value 3'] },
+    });
+  });
+});