Modify dataTesId to be unique

Author: Kubit

src/components/inputDropdown/__tests__/inputDropdown.test.tsx

@@ -220,7 +220,7 @@ describe('New Input Dropdown Component', () => {
     const listOptions = screen.getByRole(ROLES.LISTBOX);
     expect(listOptions).toBeInTheDocument();
 
-    const inputOption = screen.getByTestId('testidOptionsListOption0');
+    const inputOption = screen.getByTestId('testidOptionsListOption0option1');
     expect(inputOption).toHaveFocus();
   });
 
@@ -252,7 +252,9 @@ describe('New Input Dropdown Component', () => {
       fireEvent.keyDown(inputDropdown, ARROW_DOWN);
     });
 
-    const inputOption = screen.getByTestId('testidOptionsListOption0');
+    const inputOption = screen.getByTestId(
+      'testidOptionsListOption0option1LastNoHightlightedLabel'
+    );
 
     await act(async () => {
       fireEvent.keyDown(inputOption, {

src/components/inputSearch/__tests__/inputSearch.test.tsx

@@ -208,12 +208,12 @@ describe('New Input Search Component', () => {
   });
 
   it('Should focus second option with arrow down', async () => {
-    renderProvider(
+    const { debug } = renderProvider(
       <InputSearch
         {...mockProps}
         optionList={[
           {
-            options: ['option1', 'option'],
+            options: ['option1', 'option2'],
           },
         ]}
         value=""
@@ -230,15 +230,15 @@ describe('New Input Search Component', () => {
     const listOptions = screen.getByRole(ROLES.LISTBOX);
     expect(listOptions).toBeInTheDocument();
 
-    const inputOption1 = screen.getByTestId('testidOptionsList0Option1');
-    const inputOption2 = screen.getByTestId('testidOptionsList0Option2');
+    const inputOption1 = screen.getByTestId('testidOptionsList0Option1option1');
+    const inputOption2 = screen.getByTestId('testidOptionsList0Option2option2');
 
     fireEvent.keyDown(inputOption1, ARROW_DOWN);
     fireEvent.keyUp(inputOption2, ARROW_DOWN);
     fireEvent.keyDown(inputOption1, ARROW_DOWN);
 
+    debug();
     expect(inputOption2).toHaveFocus();
-
     fireEvent.keyDown(inputOption2, ARROW_UP);
     expect(inputOption1).toHaveFocus();
   });

src/components/listOptions/listOptionsStandAlone.tsx

@@ -79,13 +79,16 @@ export const ListOptionsStandAlone = React.forwardRef(
                 props.multiSelect,
                 props.caseSensitive
               );
+              const title = props.title?.content || '';
+              const dataTestIdOption = `${dataTestId}${title}Option${index}${option.label}`;
+
               const optionComponent = (
                 <Option
                   key={`${id}Option${index}`}
                   aria-selected={isSelection ? selected : undefined}
                   as={isNavigation ? 'div' : 'li'}
                   checkedIcon={props.checkedIcon}
-                  dataTestId={`${dataTestId}Option${index}`}
+                  dataTestId={dataTestIdOption}
                   focus={focus === index}
                   labelCharsHighlighted={props.charsHighlighted}
                   multiSelect={props.multiSelect}