From a3e619ca1e199ecbbaf457e6d051cf664e591c98 Mon Sep 17 00:00:00 2001
From: Matthias GOUPIL <matthiasgoup@gmail.com>
Date: Tue, 1 Oct 2024 14:41:13 +0200
Subject: [PATCH 1/2] feat(#1304624): add data-test-id for e2e tests

---
 .../atoms/backToLastPage/BackToLastPage.tsx   |  1 +
 .../atoms/breadcrumb/Breadcrumbs.tsx          |  1 +
 .../__snapshots__/BreadCrumb.test.tsx.snap    |  1 +
 .../atoms/form/CheckboxWithoutError.tsx       |  3 +
 .../atoms/form/DatePickerWithoutError.tsx     |  4 +-
 .../form/DoubleDatePickerWithoutError.tsx     |  9 ++-
 .../atoms/form/DropDownWithoutError.tsx       | 31 ++++++-
 .../src/components/atoms/form/Form.tsx        |  6 +-
 .../atoms/form/InputTextWithoutError.tsx      | 11 ++-
 .../atoms/form/RangeWithoutError.tsx          | 19 ++++-
 .../src/components/atoms/form/RequestType.tsx |  4 +
 .../components/atoms/form/RequestTypeItem.tsx |  6 ++
 .../src/components/atoms/form/Slider.tsx      |  3 +
 .../atoms/form/TextFieldTagsMultiple.tsx      |  4 +
 .../atoms/form/TextFieldTagsWithoutError.tsx  |  4 +
 .../DoubleDatePicker.test.tsx.snap            |  2 +
 .../src/components/atoms/help/Help.tsx        |  1 +
 .../src/components/atoms/help/HelpOver.tsx    |  2 +-
 .../help/__snapshots__/Help.test.tsx.snap     |  2 +
 .../src/components/atoms/menu/MenuItem.tsx    |  7 +-
 .../components/atoms/menu/MenuItemIcon.tsx    | 11 ++-
 .../__snapshots__/MenuItemIcon.test.tsx.snap  |  1 +
 .../components/atoms/userMenu/UserMenu.tsx    |  6 +-
 .../atoms/userMenu/UserMenuShow.tsx           |  6 +-
 .../__snapshots__/UserMenu.test.tsx.snap      |  5 ++
 .../components/molecules/layout/Menu/Menu.tsx |  6 +-
 .../molecules/layout/Sidebar/Sidebar.tsx      |  1 +
 .../__snapshots__/Sidebar.test.tsx.snap       | 80 ++++++++++++++++++-
 .../molecules/layout/appBar/AppBar.tsx        |  2 +-
 .../appBar/__snapshots__/AppBar.test.tsx.snap | 29 +++++++
 .../user/__snapshots__/User.test.tsx.snap     |  7 ++
 .../__snapshots__/CustomTable.test.tsx.snap   |  3 +
 .../stateful-layout/Layout/Layout.tsx         |  5 +-
 .../components/stateful-pages/Grid/Grid.tsx   |  2 +-
 .../ResourceForm/ResourceForm.tsx             |  2 +
 .../FieldGuesser/EditableDropDownGuesser.tsx  |  3 +
 .../FieldGuesser/EditableFieldGuesser.tsx     |  6 ++
 .../FieldGuesser/EditableModelConfig.tsx      |  2 +-
 .../RequestTypeManager/RequestTypeManager.tsx | 11 ++-
 packages/components/src/pages/Login.tsx       |  4 +-
 40 files changed, 282 insertions(+), 31 deletions(-)

diff --git a/packages/components/src/components/atoms/backToLastPage/BackToLastPage.tsx b/packages/components/src/components/atoms/backToLastPage/BackToLastPage.tsx
index 4b0b2249..199b4321 100644
--- a/packages/components/src/components/atoms/backToLastPage/BackToLastPage.tsx
+++ b/packages/components/src/components/atoms/backToLastPage/BackToLastPage.tsx
@@ -26,6 +26,7 @@ function BackToLastPage(props: IProps): JSX.Element {
     <Button
       display="tertiary"
       color="info"
+      data-testid="backButton"
       startIcon={<ion-icon name="arrow-back-outline" />}
       {...btnProps}
       onClick={handleRedirection}
diff --git a/packages/components/src/components/atoms/breadcrumb/Breadcrumbs.tsx b/packages/components/src/components/atoms/breadcrumb/Breadcrumbs.tsx
index c10c7083..4883828a 100644
--- a/packages/components/src/components/atoms/breadcrumb/Breadcrumbs.tsx
+++ b/packages/components/src/components/atoms/breadcrumb/Breadcrumbs.tsx
@@ -32,6 +32,7 @@ function Breadcrumbs(props: IProps): JSX.Element {
     <MuiBreadcrumbs
       aria-label="breadcrumb"
       sx={{ color: 'colors.neutral.500' }}
+      data-testid="breadcrumbs"
     >
       {breadcrumbProps.map(({ key, ...props }) => (
         <Breadcrumb key={key} {...props} />
diff --git a/packages/components/src/components/atoms/breadcrumb/__snapshots__/BreadCrumb.test.tsx.snap b/packages/components/src/components/atoms/breadcrumb/__snapshots__/BreadCrumb.test.tsx.snap
index 94cf36a9..2af669a1 100644
--- a/packages/components/src/components/atoms/breadcrumb/__snapshots__/BreadCrumb.test.tsx.snap
+++ b/packages/components/src/components/atoms/breadcrumb/__snapshots__/BreadCrumb.test.tsx.snap
@@ -5,6 +5,7 @@ exports[`Breadcrumbs match snapshot 1`] = `
   <nav
     aria-label="breadcrumb"
     class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-ayvqor-MuiTypography-root-MuiBreadcrumbs-root"
+    data-testid="breadcrumbs"
   >
     <ol
       class="MuiBreadcrumbs-ol css-4pdmu4-MuiBreadcrumbs-ol"
diff --git a/packages/components/src/components/atoms/form/CheckboxWithoutError.tsx b/packages/components/src/components/atoms/form/CheckboxWithoutError.tsx
index 6b5b6113..a8fa456e 100644
--- a/packages/components/src/components/atoms/form/CheckboxWithoutError.tsx
+++ b/packages/components/src/components/atoms/form/CheckboxWithoutError.tsx
@@ -23,6 +23,7 @@ export interface ICheckboxWithoutErrorProps
   helperIcon?: string
   helperText?: ReactNode
   error?: boolean
+  dataTestId?: string
 }
 
 function CheckboxWithoutError(
@@ -39,6 +40,7 @@ function CheckboxWithoutError(
     onChange,
     onClick,
     small,
+    dataTestId,
     ...checkboxProps
   } = props
 
@@ -93,6 +95,7 @@ function CheckboxWithoutError(
           marginLeft: '-6px',
         }),
       }}
+      {...(dataTestId && { 'data-testid': dataTestId })}
     />
   )
 }
diff --git a/packages/components/src/components/atoms/form/DatePickerWithoutError.tsx b/packages/components/src/components/atoms/form/DatePickerWithoutError.tsx
index 161a55f5..983dbff5 100644
--- a/packages/components/src/components/atoms/form/DatePickerWithoutError.tsx
+++ b/packages/components/src/components/atoms/form/DatePickerWithoutError.tsx
@@ -41,6 +41,7 @@ export interface IDatePickerProps
   value: Date | string | null
   onChange: (value: Date | string | null) => void
   onError?: (reason: DateValidationError, value: Date) => void
+  dataTestId?: string
 }
 
 function EndIcon(): JSX.Element {
@@ -63,7 +64,7 @@ function DatePickerWithoutError(
   ref?: ForwardedRef<HTMLInputElement>
 ): JSX.Element {
   const { t } = useTranslation('common')
-  const { value, onChange, onError, ...args } = props
+  const { value, onChange, onError, dataTestId, ...args } = props
 
   function onChangeDatePicker(date: Date | string): void {
     let utcDate = date
@@ -110,6 +111,7 @@ function DatePickerWithoutError(
             ref={params.ref as Ref<HTMLDivElement>}
             type={type}
             value={value}
+            dataTestId={dataTestId}
           />
         )
       }}
diff --git a/packages/components/src/components/atoms/form/DoubleDatePickerWithoutError.tsx b/packages/components/src/components/atoms/form/DoubleDatePickerWithoutError.tsx
index db00758d..01a7fb4b 100644
--- a/packages/components/src/components/atoms/form/DoubleDatePickerWithoutError.tsx
+++ b/packages/components/src/components/atoms/form/DoubleDatePickerWithoutError.tsx
@@ -42,6 +42,7 @@ export interface IDoubleDatePickerProps
   margin?: 'none' | 'dense' | 'normal'
   helperText?: ReactNode
   helperIcon?: string
+  dataTestId?: string
 }
 
 function DoubleDatePickerWithoutError(
@@ -63,6 +64,7 @@ function DoubleDatePickerWithoutError(
     onChange,
     onError,
     required,
+    dataTestId,
     ...args
   } = props
   const { t } = useTranslation('common')
@@ -113,6 +115,7 @@ function DoubleDatePickerWithoutError(
             onChange={onChangeFrom}
             onError={onErrorFrom}
             ref={ref}
+            dataTestId={`${dataTestId}Start`}
           />
         </Grid>
         <CustomBox sx={{ paddingRight: '20px', paddingLeft: '20px' }}>
@@ -128,11 +131,15 @@ function DoubleDatePickerWithoutError(
             value={value?.toDate}
             onChange={onChangeTo}
             onError={onErrorTo}
+            dataTestId={`${dataTestId}End`}
           />
         </Grid>
       </Grid>
       {Boolean(helperText) && (
-        <FormHelperText error={error}>
+        <FormHelperText
+          error={error}
+          {...(dataTestId && { 'data-testid': `${dataTestId}ErrorMessage` })}
+        >
           {Boolean(helperIcon) && (
             <IonIcon
               name={helperIcon}
diff --git a/packages/components/src/components/atoms/form/DropDownWithoutError.tsx b/packages/components/src/components/atoms/form/DropDownWithoutError.tsx
index 23ad2496..1a4131bf 100644
--- a/packages/components/src/components/atoms/form/DropDownWithoutError.tsx
+++ b/packages/components/src/components/atoms/form/DropDownWithoutError.tsx
@@ -12,6 +12,7 @@ import {
   Autocomplete,
   AutocompleteRenderOptionState,
   FormControl,
+  ListSubheader,
 } from '@mui/material'
 import { useTranslation } from 'next-i18next'
 
@@ -35,6 +36,7 @@ export interface IDropDownProps<T>
   value?: T | T[] | object | object[]
   useGroups?: boolean
   objectKeyValue?: string
+  dataTestId?: string
 }
 
 function DropDownWithoutError<T>(
@@ -52,6 +54,7 @@ function DropDownWithoutError<T>(
     value,
     useGroups,
     objectKeyValue,
+    dataTestId,
     ...otherProps
   } = props
   const { required, small } = otherProps
@@ -112,6 +115,7 @@ function DropDownWithoutError<T>(
       { label }: IOption<T>,
       { selected }: AutocompleteRenderOptionState
     ): ReactNode => {
+      // data-testid={`option-${otherProps.inputProps["data-testid"]}`}
       return (
         <li {...props}>
           <CheckboxWithoutError
@@ -119,6 +123,7 @@ function DropDownWithoutError<T>(
             label={label}
             list
             onClick={(e): void => e.preventDefault()}
+            dataTestId={dataTestId ? `${dataTestId}Checkbox` : null}
           />
         </li>
       )
@@ -133,6 +138,9 @@ function DropDownWithoutError<T>(
             label={option.label}
             size={small ? 'small' : 'medium'}
             {...getTagProps({ index })}
+            {...(dataTestId && {
+              'data-testid': `${dataTestId}Tag`,
+            })}
           />
         ))
   }
@@ -164,9 +172,29 @@ function DropDownWithoutError<T>(
         getOptionLabel={
           useGroups ? (options: IOption<T>): string => options.label : undefined
         }
-        popupIcon={<IonIcon name="chevron-down" />}
+        popupIcon={
+          <IonIcon
+            {...(dataTestId && {
+              'data-testid': `${dataTestId}Button`,
+            })}
+            name="chevron-down"
+          />
+        }
+        renderGroup={(params): JSX.Element => (
+          <li key={params.key}>
+            <ListSubheader
+              {...(dataTestId && {
+                'data-testid': `${dataTestId}GroupTitle`,
+              })}
+            >
+              {params.group}
+            </ListSubheader>
+            <ul style={{ padding: 0 }}>{params.children}</ul>
+          </li>
+        )}
         renderInput={(params): JSX.Element => {
           const { InputLabelProps, InputProps, ...inputProps } = params
+
           return (
             <InputTextWithoutError
               {...{ ...otherProps, required: false }}
@@ -175,6 +203,7 @@ function DropDownWithoutError<T>(
               fullWidth={fullWidth}
               inputRef={ref || inputRef}
               requiredLabel={required}
+              dataTestId={dataTestId ? `${dataTestId}InputText` : null}
             />
           )
         }}
diff --git a/packages/components/src/components/atoms/form/Form.tsx b/packages/components/src/components/atoms/form/Form.tsx
index 4e5dfa5d..05d055e8 100644
--- a/packages/components/src/components/atoms/form/Form.tsx
+++ b/packages/components/src/components/atoms/form/Form.tsx
@@ -29,7 +29,11 @@ function Form({
       {children}
 
       {submitButtonText !== undefined && (
-        <Button style={{ marginTop: '8px' }} type="submit">
+        <Button
+          style={{ marginTop: '8px' }}
+          type="submit"
+          data-testid="submitButton"
+        >
           {submitButtonText}
         </Button>
       )}
diff --git a/packages/components/src/components/atoms/form/InputTextWithoutError.tsx b/packages/components/src/components/atoms/form/InputTextWithoutError.tsx
index 34d509cf..6d8d5de3 100644
--- a/packages/components/src/components/atoms/form/InputTextWithoutError.tsx
+++ b/packages/components/src/components/atoms/form/InputTextWithoutError.tsx
@@ -42,6 +42,7 @@ export interface IInputTextProps
   onChange?: (value: string | number, event: SyntheticEvent) => void
   suffix?: ReactNode
   requiredLabel?: boolean
+  dataTestId?: string
 }
 
 function InputTextWithoutError(
@@ -62,6 +63,8 @@ function InputTextWithoutError(
     suffix,
     value,
     requiredLabel,
+    dataTestId,
+    inputProps,
     ...InputProps
   } = props
 
@@ -94,12 +97,18 @@ function InputTextWithoutError(
           required={required}
           ref={ref}
           value={(value ?? '').toString()}
+          inputProps={{
+            ...inputProps,
+            ...(dataTestId && { 'data-testid': dataTestId }),
+          }}
           {...InputProps}
         />
         {Boolean(suffix) && <Suffix>{suffix}</Suffix>}
       </Wrapper>
       {Boolean(helperText) && (
-        <FormHelperText>
+        <FormHelperText
+          {...(dataTestId && { 'data-testid': `${dataTestId}ErrorMessage` })}
+        >
           {Boolean(helperIcon) && (
             <IonIcon
               name={helperIcon}
diff --git a/packages/components/src/components/atoms/form/RangeWithoutError.tsx b/packages/components/src/components/atoms/form/RangeWithoutError.tsx
index 921a22ed..0d8a1fe3 100644
--- a/packages/components/src/components/atoms/form/RangeWithoutError.tsx
+++ b/packages/components/src/components/atoms/form/RangeWithoutError.tsx
@@ -35,6 +35,7 @@ export interface IRangeProps
   onChange?: (value: (string | number)[], event: SyntheticEvent) => void
   suffix?: ReactNode
   value: (string | number | null)[]
+  dataTestId?: string
 }
 
 function RangeWithoutError(
@@ -58,6 +59,7 @@ function RangeWithoutError(
     suffix,
     value,
     type = 'number',
+    dataTestId,
     ...InputProps
   } = props
   const [placeholderFrom, placeholderTo] = placeholder
@@ -98,7 +100,11 @@ function RangeWithoutError(
           required={required}
           {...InputProps}
           type={type}
-          inputProps={{ ...inputProps, max: valueTo }}
+          inputProps={{
+            ...inputProps,
+            max: valueTo,
+            ...(dataTestId && { 'data-testid': `${dataTestId}First` }),
+          }}
           placeholder={placeholderFrom}
           value={valueFrom ? String(valueFrom) : ''}
           inputRef={ref}
@@ -110,14 +116,21 @@ function RangeWithoutError(
           required={required}
           {...InputProps}
           type={type}
-          inputProps={{ ...inputProps, min: valueFrom }}
+          inputProps={{
+            ...inputProps,
+            min: valueFrom,
+            ...(dataTestId && { 'data-testid': `${dataTestId}Second` }),
+          }}
           placeholder={placeholderTo}
           value={valueTo ? String(valueTo) : ''}
         />
         {Boolean(suffix) && <Suffix>{suffix}</Suffix>}
       </Wrapper>
       {Boolean(helperText) && (
-        <FormHelperText error={error}>
+        <FormHelperText
+          error={error}
+          {...(dataTestId && { 'data-testid': `${dataTestId}ErrorMessage` })}
+        >
           {Boolean(helperIcon) && (
             <IonIcon
               name={helperIcon}
diff --git a/packages/components/src/components/atoms/form/RequestType.tsx b/packages/components/src/components/atoms/form/RequestType.tsx
index 31b84fe3..5aadcfc0 100644
--- a/packages/components/src/components/atoms/form/RequestType.tsx
+++ b/packages/components/src/components/atoms/form/RequestType.tsx
@@ -33,6 +33,7 @@ export interface IProps {
   helperText?: string | string[]
   helperIcon?: string
   showError?: boolean
+  dataTestId?: string
 }
 
 function RequestType(props: IProps): JSX.Element {
@@ -53,6 +54,7 @@ function RequestType(props: IProps): JSX.Element {
     helperText,
     helperIcon,
     showError,
+    dataTestId,
   } = props
   function updateSelectedDropDown(list: string[] | string): void {
     const newData = (list as string[]).map((item) => {
@@ -110,6 +112,7 @@ function RequestType(props: IProps): JSX.Element {
           onChange={updateSelectedDropDown}
           value={value.requestTypes.map((item) => item.requestType)}
           options={requestTypesOptions}
+          dataTestId={dataTestId ? `${dataTestId}Dropdown` : null}
         />
         <RequestTypeItem
           value={value}
@@ -119,6 +122,7 @@ function RequestType(props: IProps): JSX.Element {
           options={options}
           requestTypesOptions={requestTypesOptions}
           categoriesList={categoriesList}
+          dataTestId={dataTestId ? `${dataTestId}Item` : null}
         />
       </CustomRoot>
       {Boolean(helperText) && (
diff --git a/packages/components/src/components/atoms/form/RequestTypeItem.tsx b/packages/components/src/components/atoms/form/RequestTypeItem.tsx
index b8a794f0..bd961f4c 100644
--- a/packages/components/src/components/atoms/form/RequestTypeItem.tsx
+++ b/packages/components/src/components/atoms/form/RequestTypeItem.tsx
@@ -56,6 +56,7 @@ export interface IRequestTypeItem {
   requestTypesOptions: IRequestTypesOptions[]
   categoriesList: ITreeItem[]
   showError?: boolean
+  dataTestId?: string
 }
 
 interface IPropsComponent {
@@ -72,6 +73,7 @@ function RequestTypeItem(props: IRequestTypeItem): JSX.Element {
     requestTypesOptions,
     categoriesList,
     showError,
+    dataTestId,
   } = props
   const { t } = useTranslation('common')
 
@@ -200,6 +202,7 @@ function RequestTypeItem(props: IRequestTypeItem): JSX.Element {
                   onChange={(val: boolean): void =>
                     onChangeApplyToAll(requestTypeOption, val)
                   }
+                  dataTestId={dataTestId ? `${dataTestId}Checkbox` : null}
                 />
               </div>
               <CustomDataLimitations>
@@ -210,6 +213,9 @@ function RequestTypeItem(props: IRequestTypeItem): JSX.Element {
                     disabledValue={t(item.labelAll)}
                     options={options}
                     value={limitationsData as ISearchLimitations[]}
+                    dataTestId={
+                      dataTestId ? `${dataTestId}TextFieldTagsMultiple` : null
+                    }
                   />
                 )}
 
diff --git a/packages/components/src/components/atoms/form/Slider.tsx b/packages/components/src/components/atoms/form/Slider.tsx
index fe6d1a63..3704b2b1 100644
--- a/packages/components/src/components/atoms/form/Slider.tsx
+++ b/packages/components/src/components/atoms/form/Slider.tsx
@@ -21,6 +21,7 @@ export interface ISliderProps
   value: number
   width?: number
   required?: boolean
+  dataTestId?: string
 }
 
 const indicatorNumber = [-99, 0, 100]
@@ -38,6 +39,7 @@ function Slider(props: ISliderProps): JSX.Element {
     required,
     value,
     width,
+    dataTestId,
   } = props
 
   function handleChange(_: Event, value: number): void {
@@ -81,6 +83,7 @@ function Slider(props: ISliderProps): JSX.Element {
               },
             },
           }}
+          {...(dataTestId && { 'data-testid': dataTestId })}
         />
       </Box>
       {Boolean(helperText) && (
diff --git a/packages/components/src/components/atoms/form/TextFieldTagsMultiple.tsx b/packages/components/src/components/atoms/form/TextFieldTagsMultiple.tsx
index 6d0fb88d..336540a2 100644
--- a/packages/components/src/components/atoms/form/TextFieldTagsMultiple.tsx
+++ b/packages/components/src/components/atoms/form/TextFieldTagsMultiple.tsx
@@ -34,6 +34,7 @@ export interface ITextFieldTagsMultipleProps
   value: ISearchLimitations[]
   onChange?: (value: ISearchLimitations[]) => void
   showError?: boolean
+  dataTestId?: string
 }
 
 function TextFieldTagsMultiple(
@@ -54,6 +55,7 @@ function TextFieldTagsMultiple(
     infoTooltip,
     options,
     showError,
+    dataTestId,
   } = props
 
   const { t } = useTranslation('common')
@@ -191,6 +193,7 @@ function TextFieldTagsMultiple(
                     value={option?.value}
                     options={newOptionsList}
                     sx={{ marginBottom: 1 }}
+                    dataTestId={dataTestId ? `${dataTestId}DropDown` : null}
                   />
                   <TextFieldTags
                     required
@@ -227,6 +230,7 @@ function TextFieldTagsMultiple(
                 )
               }
               endIcon={<IonIcon name="add" style={{ fontSize: 24 }} />}
+              {...(dataTestId && { 'data-testid': `${dataTestId}AddButton` })}
             >
               {t('Add')}
             </Button>
diff --git a/packages/components/src/components/atoms/form/TextFieldTagsWithoutError.tsx b/packages/components/src/components/atoms/form/TextFieldTagsWithoutError.tsx
index e3f7500d..ccd5de0c 100644
--- a/packages/components/src/components/atoms/form/TextFieldTagsWithoutError.tsx
+++ b/packages/components/src/components/atoms/form/TextFieldTagsWithoutError.tsx
@@ -112,6 +112,7 @@ export interface ITextFieldTag extends Omit<ITextFieldTagsForm, 'options'> {
   withCleanButton?: boolean
   onChange?: (value: string[]) => void
   onRemoveItem?: () => void
+  dataTestId?: string
 }
 
 function TextFieldTagsWithoutError(
@@ -135,6 +136,7 @@ function TextFieldTagsWithoutError(
     size,
     disabledValue,
     withCleanButton,
+    dataTestId,
   } = props
 
   const { t } = useTranslation('common')
@@ -183,6 +185,7 @@ function TextFieldTagsWithoutError(
     <div style={{ position: 'relative' }}>
       {withCleanButton === true && (
         <CustomCloseTagsByOperator
+          {...(dataTestId && { 'data-testid': `${dataTestId}CleanButton` })}
           onClick={(): void => {
             if (value.length > 0) {
               onChange([])
@@ -251,6 +254,7 @@ function TextFieldTagsWithoutError(
                     if (event.code === 'Enter') manageTags(undefined, event)
                   }}
                   inputRef={ref}
+                  dataTestId={dataTestId ? `${dataTestId}InputText` : null}
                 />
               </CustomFormTextFieldTags>
             )}
diff --git a/packages/components/src/components/atoms/form/__snapshots__/DoubleDatePicker.test.tsx.snap b/packages/components/src/components/atoms/form/__snapshots__/DoubleDatePicker.test.tsx.snap
index 2df4451a..65836d70 100644
--- a/packages/components/src/components/atoms/form/__snapshots__/DoubleDatePicker.test.tsx.snap
+++ b/packages/components/src/components/atoms/form/__snapshots__/DoubleDatePicker.test.tsx.snap
@@ -36,6 +36,7 @@ exports[`DoubleDatePicker sould match snapshot 1`] = `
               <input
                 aria-invalid="false"
                 class="MuiInputBase-input MuiInputBase-inputAdornedEnd css-ngazp5-MuiInputBase-input"
+                data-testid="undefinedStart"
                 placeholder="date.placeholder"
                 type="tel"
                 value="04/12/2024"
@@ -82,6 +83,7 @@ exports[`DoubleDatePicker sould match snapshot 1`] = `
               <input
                 aria-invalid="false"
                 class="MuiInputBase-input MuiInputBase-inputAdornedEnd css-ngazp5-MuiInputBase-input"
+                data-testid="undefinedEnd"
                 placeholder="date.placeholder"
                 type="tel"
                 value="04/12/2024"
diff --git a/packages/components/src/components/atoms/help/Help.tsx b/packages/components/src/components/atoms/help/Help.tsx
index b1035478..2c137711 100644
--- a/packages/components/src/components/atoms/help/Help.tsx
+++ b/packages/components/src/components/atoms/help/Help.tsx
@@ -47,6 +47,7 @@ function Help(): JSX.Element {
 
   return (
     <Box
+      data-testid="helpToolTip"
       onMouseOver={(): void => setHelpVisible(true)}
       onMouseLeave={(): void => setHelpVisible(false)}
       onFocus={(): void => setHelpVisible(true)}
diff --git a/packages/components/src/components/atoms/help/HelpOver.tsx b/packages/components/src/components/atoms/help/HelpOver.tsx
index 9869055e..d2a7e5f0 100644
--- a/packages/components/src/components/atoms/help/HelpOver.tsx
+++ b/packages/components/src/components/atoms/help/HelpOver.tsx
@@ -24,7 +24,7 @@ const CustomA = styled('a')({
 
 function HelpOver(): JSX.Element {
   return (
-    <CustomRoot>
+    <CustomRoot data-testid="helpOver">
       <Link href="https://elasticsuite.zendesk.com" legacyBehavior passHref>
         <CustomA>Helpdesk</CustomA>
       </Link>
diff --git a/packages/components/src/components/atoms/help/__snapshots__/Help.test.tsx.snap b/packages/components/src/components/atoms/help/__snapshots__/Help.test.tsx.snap
index 27b9c53a..08830056 100644
--- a/packages/components/src/components/atoms/help/__snapshots__/Help.test.tsx.snap
+++ b/packages/components/src/components/atoms/help/__snapshots__/Help.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`Help match snapshot Help simple 1`] = `
 <div>
   <div
     class="MuiBox-root css-0"
+    data-testid="helpToolTip"
   >
     <div
       class="css-b5pm8o"
@@ -31,6 +32,7 @@ exports[`Help match snapshot Help simple 1`] = `
             >
               <div
                 class="css-r0i2lt"
+                data-testid="helpOver"
               >
                 <a
                   class="css-ytumd6"
diff --git a/packages/components/src/components/atoms/menu/MenuItem.tsx b/packages/components/src/components/atoms/menu/MenuItem.tsx
index b2945399..11db1b6f 100644
--- a/packages/components/src/components/atoms/menu/MenuItem.tsx
+++ b/packages/components/src/components/atoms/menu/MenuItem.tsx
@@ -205,9 +205,12 @@ function MenuItem(props: IProps): JSX.Element {
   return (
     <CustomRoot>
       <Root>
-        <CustomLinePadding style={{ position: 'relative' }}>
+        <CustomLinePadding
+          style={{ position: 'relative' }}
+          {...(menuChildren && { 'data-testid': 'subGroupMenu' })}
+        >
           {!menuChildren && (
-            <Line>
+            <Line data-testid="menuLinkItem">
               <Link href={`/admin/${href}`} legacyBehavior passHref>
                 <CustomLineAHref>{label}</CustomLineAHref>
               </Link>
diff --git a/packages/components/src/components/atoms/menu/MenuItemIcon.tsx b/packages/components/src/components/atoms/menu/MenuItemIcon.tsx
index 00d647be..a9bec650 100644
--- a/packages/components/src/components/atoms/menu/MenuItemIcon.tsx
+++ b/packages/components/src/components/atoms/menu/MenuItemIcon.tsx
@@ -188,7 +188,10 @@ function MenuItemIcon(props: IProps): JSX.Element {
    */
   if (childPadding) {
     return (
-      <CustomClassNameStyleRoot lightStyle={!lightStyle}>
+      <CustomClassNameStyleRoot
+        lightStyle={!lightStyle}
+        data-testid="menuItemIcon"
+      >
         <IonIcon
           name={code}
           style={{
@@ -206,7 +209,11 @@ function MenuItemIcon(props: IProps): JSX.Element {
     )
   }
   return (
-    <CustomClassNameStyle lightStyle={!lightStyle} isActive={isActive}>
+    <CustomClassNameStyle
+      lightStyle={!lightStyle}
+      isActive={isActive}
+      data-testid="menuItemIcon"
+    >
       <Link href={`/admin/${href}`} legacyBehavior passHref>
         <CustomNoChildHover sidebarState={sidebarState}>
           <IonIcon
diff --git a/packages/components/src/components/atoms/menu/__snapshots__/MenuItemIcon.test.tsx.snap b/packages/components/src/components/atoms/menu/__snapshots__/MenuItemIcon.test.tsx.snap
index 065b82d4..e7d6c7ab 100644
--- a/packages/components/src/components/atoms/menu/__snapshots__/MenuItemIcon.test.tsx.snap
+++ b/packages/components/src/components/atoms/menu/__snapshots__/MenuItemIcon.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`MenuItemIcon match snapshot 1`] = `
 <div>
   <div
     class="css-jbglvz"
+    data-testid="menuItemIcon"
   >
     <ion-icon
       name="analytics"
diff --git a/packages/components/src/components/atoms/userMenu/UserMenu.tsx b/packages/components/src/components/atoms/userMenu/UserMenu.tsx
index dbf07b9c..df7e33df 100644
--- a/packages/components/src/components/atoms/userMenu/UserMenu.tsx
+++ b/packages/components/src/components/atoms/userMenu/UserMenu.tsx
@@ -65,13 +65,13 @@ function UserMenu(): JSX.Element {
 
   return (
     <>
-      <Box>
+      <Box data-testid="userMenu">
         <CustomUser onClick={(): void => setOpenUserMenu(!openUserMenu)}>
           <IonIcon
             name="person-outline"
             style={{ fontSize: '15px', color: '#8187B9' }}
           />
-          <CustomUserName>
+          <CustomUserName data-testid="username">
             <FormatText name={user?.username} toolTip firstLetterUpp />
           </CustomUserName>
           <CustomArrow
@@ -85,7 +85,7 @@ function UserMenu(): JSX.Element {
         </CustomUser>
         <Box sx={{ position: 'relative' }}>
           <Collapse in={openUserMenu} sx={{ position: 'absolute', right: 0 }}>
-            <CustomUserMenu>
+            <CustomUserMenu data-testid="userMenuContent">
               <UserMenuShow user={user} />
             </CustomUserMenu>
           </Collapse>
diff --git a/packages/components/src/components/atoms/userMenu/UserMenuShow.tsx b/packages/components/src/components/atoms/userMenu/UserMenuShow.tsx
index bd9a0ce7..be01b2ae 100644
--- a/packages/components/src/components/atoms/userMenu/UserMenuShow.tsx
+++ b/packages/components/src/components/atoms/userMenu/UserMenuShow.tsx
@@ -56,11 +56,13 @@ function UserMenuShow({ user }: IProps): JSX.Element {
 
   return (
     <CustomTypoTexte>
-      <CustomTypoEmail>
+      <CustomTypoEmail data-testid="userEmail">
         <FormatText name={user.username} toolTip firstLetterUpp />
       </CustomTypoEmail>
       <CustomHr />
-      <CustomTypoBasic onClick={handleLogOut}>{t('log.out')}</CustomTypoBasic>
+      <CustomTypoBasic onClick={handleLogOut} data-testid="logOutButton">
+        {t('log.out')}
+      </CustomTypoBasic>
     </CustomTypoTexte>
   )
 }
diff --git a/packages/components/src/components/atoms/userMenu/__snapshots__/UserMenu.test.tsx.snap b/packages/components/src/components/atoms/userMenu/__snapshots__/UserMenu.test.tsx.snap
index b26b5b42..5fb00af7 100644
--- a/packages/components/src/components/atoms/userMenu/__snapshots__/UserMenu.test.tsx.snap
+++ b/packages/components/src/components/atoms/userMenu/__snapshots__/UserMenu.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`UserMenu match snapshot UserMenu 1`] = `
 <div>
   <div
     class="MuiBox-root css-0"
+    data-testid="userMenu"
   >
     <div
       class="css-1gbhtbv"
@@ -14,6 +15,7 @@ exports[`UserMenu match snapshot UserMenu 1`] = `
       />
       <div
         class="css-14i4ulh"
+        data-testid="username"
       >
         Admin@example.com
       </div>
@@ -41,12 +43,14 @@ exports[`UserMenu match snapshot UserMenu 1`] = `
           >
             <div
               class="css-1vcaigq"
+              data-testid="userMenuContent"
             >
               <div
                 class="css-7hkggi"
               >
                 <div
                   class="css-3lsmy"
+                  data-testid="userEmail"
                 >
                   Admin@example.com
                 </div>
@@ -55,6 +59,7 @@ exports[`UserMenu match snapshot UserMenu 1`] = `
                 />
                 <div
                   class="css-9vgysh"
+                  data-testid="logOutButton"
                 >
                   log.out
                 </div>
diff --git a/packages/components/src/components/molecules/layout/Menu/Menu.tsx b/packages/components/src/components/molecules/layout/Menu/Menu.tsx
index 4bb074ea..d0f665ec 100644
--- a/packages/components/src/components/molecules/layout/Menu/Menu.tsx
+++ b/packages/components/src/components/molecules/layout/Menu/Menu.tsx
@@ -70,7 +70,7 @@ function Menu(props: IProps): JSX.Element {
 
           if (!itemRouterTabs[item.code]) {
             return (
-              <CustomBoldStyle key={item.code}>
+              <CustomBoldStyle key={item.code} data-testid="menuGroup">
                 <MenuItemIcon
                   code={item.code}
                   href={path ?? slugify(item.code, 0)}
@@ -82,7 +82,7 @@ function Menu(props: IProps): JSX.Element {
                   sidebarState={sidebarState}
                   sidebarStateTimeout={sidebarStateTimeout}
                 />
-                <CustomSecondItems>
+                <CustomSecondItems data-testid="menuGroupLinks">
                   {item.children?.map((item: IMenuChild) => {
                     path = removeFirstCharIfExist('/', item?.path)
 
@@ -113,7 +113,7 @@ function Menu(props: IProps): JSX.Element {
             )
           }
           return (
-            <div key={item.code}>
+            <div key={item.code} data-testid="menuGroup">
               <MenuItemIcon
                 code={item.code}
                 href={path ?? slugify(item.code, 0)}
diff --git a/packages/components/src/components/molecules/layout/Sidebar/Sidebar.tsx b/packages/components/src/components/molecules/layout/Sidebar/Sidebar.tsx
index af51a7d2..033a6345 100644
--- a/packages/components/src/components/molecules/layout/Sidebar/Sidebar.tsx
+++ b/packages/components/src/components/molecules/layout/Sidebar/Sidebar.tsx
@@ -87,6 +87,7 @@ function Sidebar(props: IProps): JSX.Element {
       orientation="horizontal"
       collapsedSize={sidebarState ? 278 : 66}
       timeout={sidebarState ? 0 : 200}
+      data-testid="sidebarMenu"
     >
       <CustomRoot style={sidebarState ? {} : { width: 'inherit' }}>
         <Link href="/admin/settings/scope/catalogs">
diff --git a/packages/components/src/components/molecules/layout/Sidebar/__snapshots__/Sidebar.test.tsx.snap b/packages/components/src/components/molecules/layout/Sidebar/__snapshots__/Sidebar.test.tsx.snap
index 70b098b2..a227dd3e 100644
--- a/packages/components/src/components/molecules/layout/Sidebar/__snapshots__/Sidebar.test.tsx.snap
+++ b/packages/components/src/components/molecules/layout/Sidebar/__snapshots__/Sidebar.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`SideBar match snapshot SideBarStateFalse 1`] = `
 <div>
   <div
     class="MuiCollapse-root MuiCollapse-horizontal css-gvgdin-MuiCollapse-root"
+    data-testid="sidebarMenu"
     style="min-width: 66px;"
   >
     <div
@@ -61,9 +62,11 @@ exports[`SideBar match snapshot SideBarStateFalse 1`] = `
             >
               <div
                 class="css-hshm0p"
+                data-testid="menuGroup"
               >
                 <div
                   class="css-tfem9q"
+                  data-testid="menuItemIcon"
                 >
                   <a
                     class="css-11ylqoy"
@@ -82,13 +85,16 @@ exports[`SideBar match snapshot SideBarStateFalse 1`] = `
                 </div>
                 <div
                   class="css-dsnyvo"
+                  data-testid="menuGroupLinks"
                 />
               </div>
               <div
                 class="css-hshm0p"
+                data-testid="menuGroup"
               >
                 <div
                   class="css-jbglvz"
+                  data-testid="menuItemIcon"
                 >
                   <ion-icon
                     name="analytics"
@@ -102,6 +108,7 @@ exports[`SideBar match snapshot SideBarStateFalse 1`] = `
                 </div>
                 <div
                   class="css-dsnyvo"
+                  data-testid="menuGroupLinks"
                 >
                   <div>
                     <div
@@ -116,6 +123,7 @@ exports[`SideBar match snapshot SideBarStateFalse 1`] = `
                         >
                           <div
                             class="css-1ooj8e9"
+                            data-testid="menuLinkItem"
                           >
                             <a
                               class="css-1hn3xib"
@@ -144,6 +152,7 @@ exports[`SideBar match snapshot SideBarStateFalse 1`] = `
                         >
                           <div
                             class="css-1ylhpt2"
+                            data-testid="menuLinkItem"
                           >
                             <a
                               class="css-1hn3xib"
@@ -169,6 +178,7 @@ exports[`SideBar match snapshot SideBarStateFalse 1`] = `
                         >
                           <div
                             class="css-1ylhpt2"
+                            data-testid="menuLinkItem"
                           >
                             <a
                               class="css-1hn3xib"
@@ -185,9 +195,11 @@ exports[`SideBar match snapshot SideBarStateFalse 1`] = `
               </div>
               <div
                 class="css-hshm0p"
+                data-testid="menuGroup"
               >
                 <div
                   class="css-jbglvz"
+                  data-testid="menuItemIcon"
                 >
                   <ion-icon
                     name="funnel-outline"
@@ -201,6 +213,7 @@ exports[`SideBar match snapshot SideBarStateFalse 1`] = `
                 </div>
                 <div
                   class="css-dsnyvo"
+                  data-testid="menuGroupLinks"
                 >
                   <div>
                     <div
@@ -215,6 +228,7 @@ exports[`SideBar match snapshot SideBarStateFalse 1`] = `
                         >
                           <div
                             class="css-1ylhpt2"
+                            data-testid="menuLinkItem"
                           >
                             <a
                               class="css-1hn3xib"
@@ -240,6 +254,7 @@ exports[`SideBar match snapshot SideBarStateFalse 1`] = `
                         >
                           <div
                             class="css-1ylhpt2"
+                            data-testid="menuLinkItem"
                           >
                             <a
                               class="css-1hn3xib"
@@ -261,6 +276,7 @@ exports[`SideBar match snapshot SideBarStateFalse 1`] = `
                       >
                         <div
                           class="css-1oksv39"
+                          data-testid="subGroupMenu"
                           style="position: relative;"
                         >
                           <button
@@ -296,6 +312,7 @@ exports[`SideBar match snapshot SideBarStateFalse 1`] = `
                                   >
                                     <div
                                       class="css-1ylhpt2"
+                                      data-testid="menuLinkItem"
                                     >
                                       <a
                                         class="css-1hn3xib"
@@ -319,6 +336,7 @@ exports[`SideBar match snapshot SideBarStateFalse 1`] = `
                                   >
                                     <div
                                       class="css-1ylhpt2"
+                                      data-testid="menuLinkItem"
                                     >
                                       <a
                                         class="css-1hn3xib"
@@ -342,6 +360,7 @@ exports[`SideBar match snapshot SideBarStateFalse 1`] = `
                                   >
                                     <div
                                       class="css-1ylhpt2"
+                                      data-testid="menuLinkItem"
                                     >
                                       <a
                                         class="css-1hn3xib"
@@ -365,6 +384,7 @@ exports[`SideBar match snapshot SideBarStateFalse 1`] = `
                                   >
                                     <div
                                       class="css-1ylhpt2"
+                                      data-testid="menuLinkItem"
                                     >
                                       <a
                                         class="css-1hn3xib"
@@ -395,6 +415,7 @@ exports[`SideBar match snapshot SideBarStateFalse 1`] = `
                         >
                           <div
                             class="css-1ylhpt2"
+                            data-testid="menuLinkItem"
                           >
                             <a
                               class="css-1hn3xib"
@@ -411,9 +432,11 @@ exports[`SideBar match snapshot SideBarStateFalse 1`] = `
               </div>
               <div
                 class="css-hshm0p"
+                data-testid="menuGroup"
               >
                 <div
                   class="css-jbglvz"
+                  data-testid="menuItemIcon"
                 >
                   <ion-icon
                     name="search"
@@ -427,6 +450,7 @@ exports[`SideBar match snapshot SideBarStateFalse 1`] = `
                 </div>
                 <div
                   class="css-dsnyvo"
+                  data-testid="menuGroupLinks"
                 >
                   <div>
                     <div
@@ -437,6 +461,7 @@ exports[`SideBar match snapshot SideBarStateFalse 1`] = `
                       >
                         <div
                           class="css-1oksv39"
+                          data-testid="subGroupMenu"
                           style="position: relative;"
                         >
                           <button
@@ -472,6 +497,7 @@ exports[`SideBar match snapshot SideBarStateFalse 1`] = `
                                   >
                                     <div
                                       class="css-1ylhpt2"
+                                      data-testid="menuLinkItem"
                                     >
                                       <a
                                         class="css-1hn3xib"
@@ -495,6 +521,7 @@ exports[`SideBar match snapshot SideBarStateFalse 1`] = `
                                   >
                                     <div
                                       class="css-1ylhpt2"
+                                      data-testid="menuLinkItem"
                                     >
                                       <a
                                         class="css-1hn3xib"
@@ -518,6 +545,7 @@ exports[`SideBar match snapshot SideBarStateFalse 1`] = `
                                   >
                                     <div
                                       class="css-1ylhpt2"
+                                      data-testid="menuLinkItem"
                                     >
                                       <a
                                         class="css-1hn3xib"
@@ -548,6 +576,7 @@ exports[`SideBar match snapshot SideBarStateFalse 1`] = `
                         >
                           <div
                             class="css-1ylhpt2"
+                            data-testid="menuLinkItem"
                           >
                             <a
                               class="css-1hn3xib"
@@ -573,6 +602,7 @@ exports[`SideBar match snapshot SideBarStateFalse 1`] = `
                         >
                           <div
                             class="css-1ylhpt2"
+                            data-testid="menuLinkItem"
                           >
                             <a
                               class="css-1hn3xib"
@@ -587,9 +617,12 @@ exports[`SideBar match snapshot SideBarStateFalse 1`] = `
                   </div>
                 </div>
               </div>
-              <div>
+              <div
+                data-testid="menuGroup"
+              >
                 <div
                   class="css-19kw05j"
+                  data-testid="menuItemIcon"
                 >
                   <a
                     class="css-11ylqoy"
@@ -607,9 +640,12 @@ exports[`SideBar match snapshot SideBarStateFalse 1`] = `
                   </a>
                 </div>
               </div>
-              <div>
+              <div
+                data-testid="menuGroup"
+              >
                 <div
                   class="css-19kw05j"
+                  data-testid="menuItemIcon"
                 >
                   <a
                     class="css-11ylqoy"
@@ -640,6 +676,7 @@ exports[`SideBar match snapshot SideBarStateTrue 1`] = `
 <div>
   <div
     class="MuiCollapse-root MuiCollapse-horizontal MuiCollapse-entered css-r09iak-MuiCollapse-root"
+    data-testid="sidebarMenu"
     style="min-width: 278px;"
   >
     <div
@@ -696,9 +733,11 @@ exports[`SideBar match snapshot SideBarStateTrue 1`] = `
             >
               <div
                 class="css-hshm0p"
+                data-testid="menuGroup"
               >
                 <div
                   class="css-tfem9q"
+                  data-testid="menuItemIcon"
                 >
                   <a
                     class="css-bq1l1q"
@@ -717,13 +756,16 @@ exports[`SideBar match snapshot SideBarStateTrue 1`] = `
                 </div>
                 <div
                   class="css-dsnyvo"
+                  data-testid="menuGroupLinks"
                 />
               </div>
               <div
                 class="css-hshm0p"
+                data-testid="menuGroup"
               >
                 <div
                   class="css-jbglvz"
+                  data-testid="menuItemIcon"
                 >
                   <ion-icon
                     name="analytics"
@@ -737,6 +779,7 @@ exports[`SideBar match snapshot SideBarStateTrue 1`] = `
                 </div>
                 <div
                   class="css-dsnyvo"
+                  data-testid="menuGroupLinks"
                 >
                   <div>
                     <div
@@ -751,6 +794,7 @@ exports[`SideBar match snapshot SideBarStateTrue 1`] = `
                         >
                           <div
                             class="css-1ooj8e9"
+                            data-testid="menuLinkItem"
                           >
                             <a
                               class="css-1hn3xib"
@@ -779,6 +823,7 @@ exports[`SideBar match snapshot SideBarStateTrue 1`] = `
                         >
                           <div
                             class="css-1ylhpt2"
+                            data-testid="menuLinkItem"
                           >
                             <a
                               class="css-1hn3xib"
@@ -804,6 +849,7 @@ exports[`SideBar match snapshot SideBarStateTrue 1`] = `
                         >
                           <div
                             class="css-1ylhpt2"
+                            data-testid="menuLinkItem"
                           >
                             <a
                               class="css-1hn3xib"
@@ -820,9 +866,11 @@ exports[`SideBar match snapshot SideBarStateTrue 1`] = `
               </div>
               <div
                 class="css-hshm0p"
+                data-testid="menuGroup"
               >
                 <div
                   class="css-jbglvz"
+                  data-testid="menuItemIcon"
                 >
                   <ion-icon
                     name="funnel-outline"
@@ -836,6 +884,7 @@ exports[`SideBar match snapshot SideBarStateTrue 1`] = `
                 </div>
                 <div
                   class="css-dsnyvo"
+                  data-testid="menuGroupLinks"
                 >
                   <div>
                     <div
@@ -850,6 +899,7 @@ exports[`SideBar match snapshot SideBarStateTrue 1`] = `
                         >
                           <div
                             class="css-1ylhpt2"
+                            data-testid="menuLinkItem"
                           >
                             <a
                               class="css-1hn3xib"
@@ -875,6 +925,7 @@ exports[`SideBar match snapshot SideBarStateTrue 1`] = `
                         >
                           <div
                             class="css-1ylhpt2"
+                            data-testid="menuLinkItem"
                           >
                             <a
                               class="css-1hn3xib"
@@ -896,6 +947,7 @@ exports[`SideBar match snapshot SideBarStateTrue 1`] = `
                       >
                         <div
                           class="css-1oksv39"
+                          data-testid="subGroupMenu"
                           style="position: relative;"
                         >
                           <button
@@ -931,6 +983,7 @@ exports[`SideBar match snapshot SideBarStateTrue 1`] = `
                                   >
                                     <div
                                       class="css-1ylhpt2"
+                                      data-testid="menuLinkItem"
                                     >
                                       <a
                                         class="css-1hn3xib"
@@ -954,6 +1007,7 @@ exports[`SideBar match snapshot SideBarStateTrue 1`] = `
                                   >
                                     <div
                                       class="css-1ylhpt2"
+                                      data-testid="menuLinkItem"
                                     >
                                       <a
                                         class="css-1hn3xib"
@@ -977,6 +1031,7 @@ exports[`SideBar match snapshot SideBarStateTrue 1`] = `
                                   >
                                     <div
                                       class="css-1ylhpt2"
+                                      data-testid="menuLinkItem"
                                     >
                                       <a
                                         class="css-1hn3xib"
@@ -1000,6 +1055,7 @@ exports[`SideBar match snapshot SideBarStateTrue 1`] = `
                                   >
                                     <div
                                       class="css-1ylhpt2"
+                                      data-testid="menuLinkItem"
                                     >
                                       <a
                                         class="css-1hn3xib"
@@ -1030,6 +1086,7 @@ exports[`SideBar match snapshot SideBarStateTrue 1`] = `
                         >
                           <div
                             class="css-1ylhpt2"
+                            data-testid="menuLinkItem"
                           >
                             <a
                               class="css-1hn3xib"
@@ -1046,9 +1103,11 @@ exports[`SideBar match snapshot SideBarStateTrue 1`] = `
               </div>
               <div
                 class="css-hshm0p"
+                data-testid="menuGroup"
               >
                 <div
                   class="css-jbglvz"
+                  data-testid="menuItemIcon"
                 >
                   <ion-icon
                     name="search"
@@ -1062,6 +1121,7 @@ exports[`SideBar match snapshot SideBarStateTrue 1`] = `
                 </div>
                 <div
                   class="css-dsnyvo"
+                  data-testid="menuGroupLinks"
                 >
                   <div>
                     <div
@@ -1072,6 +1132,7 @@ exports[`SideBar match snapshot SideBarStateTrue 1`] = `
                       >
                         <div
                           class="css-1oksv39"
+                          data-testid="subGroupMenu"
                           style="position: relative;"
                         >
                           <button
@@ -1107,6 +1168,7 @@ exports[`SideBar match snapshot SideBarStateTrue 1`] = `
                                   >
                                     <div
                                       class="css-1ylhpt2"
+                                      data-testid="menuLinkItem"
                                     >
                                       <a
                                         class="css-1hn3xib"
@@ -1130,6 +1192,7 @@ exports[`SideBar match snapshot SideBarStateTrue 1`] = `
                                   >
                                     <div
                                       class="css-1ylhpt2"
+                                      data-testid="menuLinkItem"
                                     >
                                       <a
                                         class="css-1hn3xib"
@@ -1153,6 +1216,7 @@ exports[`SideBar match snapshot SideBarStateTrue 1`] = `
                                   >
                                     <div
                                       class="css-1ylhpt2"
+                                      data-testid="menuLinkItem"
                                     >
                                       <a
                                         class="css-1hn3xib"
@@ -1183,6 +1247,7 @@ exports[`SideBar match snapshot SideBarStateTrue 1`] = `
                         >
                           <div
                             class="css-1ylhpt2"
+                            data-testid="menuLinkItem"
                           >
                             <a
                               class="css-1hn3xib"
@@ -1208,6 +1273,7 @@ exports[`SideBar match snapshot SideBarStateTrue 1`] = `
                         >
                           <div
                             class="css-1ylhpt2"
+                            data-testid="menuLinkItem"
                           >
                             <a
                               class="css-1hn3xib"
@@ -1222,9 +1288,12 @@ exports[`SideBar match snapshot SideBarStateTrue 1`] = `
                   </div>
                 </div>
               </div>
-              <div>
+              <div
+                data-testid="menuGroup"
+              >
                 <div
                   class="css-19kw05j"
+                  data-testid="menuItemIcon"
                 >
                   <a
                     class="css-bq1l1q"
@@ -1242,9 +1311,12 @@ exports[`SideBar match snapshot SideBarStateTrue 1`] = `
                   </a>
                 </div>
               </div>
-              <div>
+              <div
+                data-testid="menuGroup"
+              >
                 <div
                   class="css-19kw05j"
+                  data-testid="menuItemIcon"
                 >
                   <a
                     class="css-bq1l1q"
diff --git a/packages/components/src/components/molecules/layout/appBar/AppBar.tsx b/packages/components/src/components/molecules/layout/appBar/AppBar.tsx
index 22d618da..3c7d0616 100644
--- a/packages/components/src/components/molecules/layout/appBar/AppBar.tsx
+++ b/packages/components/src/components/molecules/layout/appBar/AppBar.tsx
@@ -39,7 +39,7 @@ interface IProps {
 
 function AppBar({ slug, menu, isConnected }: IProps): JSX.Element {
   return (
-    <CustomRoot>
+    <CustomRoot data-testid="appBar">
       <Breadcrumbs slug={slug} menu={menu} />
       <User isConnected={isConnected} />
     </CustomRoot>
diff --git a/packages/components/src/components/molecules/layout/appBar/__snapshots__/AppBar.test.tsx.snap b/packages/components/src/components/molecules/layout/appBar/__snapshots__/AppBar.test.tsx.snap
index df19c278..3cf8c679 100644
--- a/packages/components/src/components/molecules/layout/appBar/__snapshots__/AppBar.test.tsx.snap
+++ b/packages/components/src/components/molecules/layout/appBar/__snapshots__/AppBar.test.tsx.snap
@@ -4,10 +4,12 @@ exports[`AppBar match snapshot AppBar simple 1`] = `
 <div>
   <div
     class="css-19ii7w2"
+    data-testid="appBar"
   >
     <nav
       aria-label="breadcrumb"
       class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-ayvqor-MuiTypography-root-MuiBreadcrumbs-root"
+      data-testid="breadcrumbs"
     >
       <ol
         class="MuiBreadcrumbs-ol css-4pdmu4-MuiBreadcrumbs-ol"
@@ -32,6 +34,7 @@ exports[`AppBar match snapshot AppBar simple 1`] = `
     >
       <div
         class="MuiBox-root css-0"
+        data-testid="helpToolTip"
       >
         <div
           class="css-b5pm8o"
@@ -59,6 +62,7 @@ exports[`AppBar match snapshot AppBar simple 1`] = `
                 >
                   <div
                     class="css-r0i2lt"
+                    data-testid="helpOver"
                   >
                     <a
                       class="css-ytumd6"
@@ -81,6 +85,7 @@ exports[`AppBar match snapshot AppBar simple 1`] = `
       </div>
       <div
         class="MuiBox-root css-0"
+        data-testid="userMenu"
       >
         <div
           class="css-1gbhtbv"
@@ -91,6 +96,7 @@ exports[`AppBar match snapshot AppBar simple 1`] = `
           />
           <div
             class="css-14i4ulh"
+            data-testid="username"
           >
             Admin@example.com
           </div>
@@ -118,12 +124,14 @@ exports[`AppBar match snapshot AppBar simple 1`] = `
               >
                 <div
                   class="css-1vcaigq"
+                  data-testid="userMenuContent"
                 >
                   <div
                     class="css-7hkggi"
                   >
                     <div
                       class="css-3lsmy"
+                      data-testid="userEmail"
                     >
                       Admin@example.com
                     </div>
@@ -132,6 +140,7 @@ exports[`AppBar match snapshot AppBar simple 1`] = `
                     />
                     <div
                       class="css-9vgysh"
+                      data-testid="logOutButton"
                     >
                       log.out
                     </div>
@@ -151,10 +160,12 @@ exports[`AppBar match snapshot AppBarThreeSlug 1`] = `
 <div>
   <div
     class="css-19ii7w2"
+    data-testid="appBar"
   >
     <nav
       aria-label="breadcrumb"
       class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-ayvqor-MuiTypography-root-MuiBreadcrumbs-root"
+      data-testid="breadcrumbs"
     >
       <ol
         class="MuiBreadcrumbs-ol css-4pdmu4-MuiBreadcrumbs-ol"
@@ -217,6 +228,7 @@ exports[`AppBar match snapshot AppBarThreeSlug 1`] = `
     >
       <div
         class="MuiBox-root css-0"
+        data-testid="helpToolTip"
       >
         <div
           class="css-b5pm8o"
@@ -244,6 +256,7 @@ exports[`AppBar match snapshot AppBarThreeSlug 1`] = `
                 >
                   <div
                     class="css-r0i2lt"
+                    data-testid="helpOver"
                   >
                     <a
                       class="css-ytumd6"
@@ -266,6 +279,7 @@ exports[`AppBar match snapshot AppBarThreeSlug 1`] = `
       </div>
       <div
         class="MuiBox-root css-0"
+        data-testid="userMenu"
       >
         <div
           class="css-1gbhtbv"
@@ -276,6 +290,7 @@ exports[`AppBar match snapshot AppBarThreeSlug 1`] = `
           />
           <div
             class="css-14i4ulh"
+            data-testid="username"
           >
             Admin@example.com
           </div>
@@ -303,12 +318,14 @@ exports[`AppBar match snapshot AppBarThreeSlug 1`] = `
               >
                 <div
                   class="css-1vcaigq"
+                  data-testid="userMenuContent"
                 >
                   <div
                     class="css-7hkggi"
                   >
                     <div
                       class="css-3lsmy"
+                      data-testid="userEmail"
                     >
                       Admin@example.com
                     </div>
@@ -317,6 +334,7 @@ exports[`AppBar match snapshot AppBarThreeSlug 1`] = `
                     />
                     <div
                       class="css-9vgysh"
+                      data-testid="logOutButton"
                     >
                       log.out
                     </div>
@@ -336,10 +354,12 @@ exports[`AppBar match snapshot AppBarThreeSlug not connected 1`] = `
 <div>
   <div
     class="css-19ii7w2"
+    data-testid="appBar"
   >
     <nav
       aria-label="breadcrumb"
       class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-ayvqor-MuiTypography-root-MuiBreadcrumbs-root"
+      data-testid="breadcrumbs"
     >
       <ol
         class="MuiBreadcrumbs-ol css-4pdmu4-MuiBreadcrumbs-ol"
@@ -405,10 +425,12 @@ exports[`AppBar match snapshot AppBarTwoSlug 1`] = `
 <div>
   <div
     class="css-19ii7w2"
+    data-testid="appBar"
   >
     <nav
       aria-label="breadcrumb"
       class="MuiTypography-root MuiTypography-body1 MuiBreadcrumbs-root css-ayvqor-MuiTypography-root-MuiBreadcrumbs-root"
+      data-testid="breadcrumbs"
     >
       <ol
         class="MuiBreadcrumbs-ol css-4pdmu4-MuiBreadcrumbs-ol"
@@ -452,6 +474,7 @@ exports[`AppBar match snapshot AppBarTwoSlug 1`] = `
     >
       <div
         class="MuiBox-root css-0"
+        data-testid="helpToolTip"
       >
         <div
           class="css-b5pm8o"
@@ -479,6 +502,7 @@ exports[`AppBar match snapshot AppBarTwoSlug 1`] = `
                 >
                   <div
                     class="css-r0i2lt"
+                    data-testid="helpOver"
                   >
                     <a
                       class="css-ytumd6"
@@ -501,6 +525,7 @@ exports[`AppBar match snapshot AppBarTwoSlug 1`] = `
       </div>
       <div
         class="MuiBox-root css-0"
+        data-testid="userMenu"
       >
         <div
           class="css-1gbhtbv"
@@ -511,6 +536,7 @@ exports[`AppBar match snapshot AppBarTwoSlug 1`] = `
           />
           <div
             class="css-14i4ulh"
+            data-testid="username"
           >
             Admin@example.com
           </div>
@@ -538,12 +564,14 @@ exports[`AppBar match snapshot AppBarTwoSlug 1`] = `
               >
                 <div
                   class="css-1vcaigq"
+                  data-testid="userMenuContent"
                 >
                   <div
                     class="css-7hkggi"
                   >
                     <div
                       class="css-3lsmy"
+                      data-testid="userEmail"
                     >
                       Admin@example.com
                     </div>
@@ -552,6 +580,7 @@ exports[`AppBar match snapshot AppBarTwoSlug 1`] = `
                     />
                     <div
                       class="css-9vgysh"
+                      data-testid="logOutButton"
                     >
                       log.out
                     </div>
diff --git a/packages/components/src/components/molecules/layout/user/__snapshots__/User.test.tsx.snap b/packages/components/src/components/molecules/layout/user/__snapshots__/User.test.tsx.snap
index 505d46cf..9f12bf71 100644
--- a/packages/components/src/components/molecules/layout/user/__snapshots__/User.test.tsx.snap
+++ b/packages/components/src/components/molecules/layout/user/__snapshots__/User.test.tsx.snap
@@ -7,6 +7,7 @@ exports[`User match snapshot connected 1`] = `
   >
     <div
       class="MuiBox-root css-0"
+      data-testid="helpToolTip"
     >
       <div
         class="css-b5pm8o"
@@ -34,6 +35,7 @@ exports[`User match snapshot connected 1`] = `
               >
                 <div
                   class="css-r0i2lt"
+                  data-testid="helpOver"
                 >
                   <a
                     class="css-ytumd6"
@@ -56,6 +58,7 @@ exports[`User match snapshot connected 1`] = `
     </div>
     <div
       class="MuiBox-root css-0"
+      data-testid="userMenu"
     >
       <div
         class="css-1gbhtbv"
@@ -66,6 +69,7 @@ exports[`User match snapshot connected 1`] = `
         />
         <div
           class="css-14i4ulh"
+          data-testid="username"
         >
           Admin@example.com
         </div>
@@ -93,12 +97,14 @@ exports[`User match snapshot connected 1`] = `
             >
               <div
                 class="css-1vcaigq"
+                data-testid="userMenuContent"
               >
                 <div
                   class="css-7hkggi"
                 >
                   <div
                     class="css-3lsmy"
+                    data-testid="userEmail"
                   >
                     Admin@example.com
                   </div>
@@ -107,6 +113,7 @@ exports[`User match snapshot connected 1`] = `
                   />
                   <div
                     class="css-9vgysh"
+                    data-testid="logOutButton"
                   >
                     log.out
                   </div>
diff --git a/packages/components/src/components/organisms/CustomTable/__snapshots__/CustomTable.test.tsx.snap b/packages/components/src/components/organisms/CustomTable/__snapshots__/CustomTable.test.tsx.snap
index 1def8881..3ccab1d8 100644
--- a/packages/components/src/components/organisms/CustomTable/__snapshots__/CustomTable.test.tsx.snap
+++ b/packages/components/src/components/organisms/CustomTable/__snapshots__/CustomTable.test.tsx.snap
@@ -72,6 +72,7 @@ exports[`CustomTable match snapshot with editable content 1`] = `
               >
                 <span
                   class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary Mui-checked PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary Mui-checked Mui-checked css-1vk7jze-MuiButtonBase-root-MuiSwitch-switchBase"
+                  data-testid="field"
                 >
                   <input
                     checked=""
@@ -116,6 +117,7 @@ exports[`CustomTable match snapshot with editable content 1`] = `
                         autocapitalize="none"
                         autocomplete="off"
                         class="MuiInputBase-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-ngazp5-MuiInputBase-input"
+                        data-testid="field2InputText"
                         id=":r0:"
                         role="combobox"
                         spellcheck="false"
@@ -133,6 +135,7 @@ exports[`CustomTable match snapshot with editable content 1`] = `
                           type="button"
                         >
                           <ion-icon
+                            data-testid="field2Button"
                             name="chevron-down"
                           />
                           <span
diff --git a/packages/components/src/components/stateful-layout/Layout/Layout.tsx b/packages/components/src/components/stateful-layout/Layout/Layout.tsx
index b04d56cc..c24142c6 100644
--- a/packages/components/src/components/stateful-layout/Layout/Layout.tsx
+++ b/packages/components/src/components/stateful-layout/Layout/Layout.tsx
@@ -180,7 +180,10 @@ function Layout({ children }: IProps): JSX.Element {
             left: sidebarState ? '279px' : '67px',
           }}
         >
-          <Collapse onClick={collapseSidebar}>
+          <Collapse
+            onClick={collapseSidebar}
+            data-testid="sidebarMenuCollapseButton"
+          >
             <IonIcon name="code-outline" style={{ width: 18, height: 18 }} />
           </Collapse>
           <AppBar slug={breadcrumb} menu={menu} isConnected={isConnected} />
diff --git a/packages/components/src/components/stateful-pages/Grid/Grid.tsx b/packages/components/src/components/stateful-pages/Grid/Grid.tsx
index c036404d..e92bfb84 100644
--- a/packages/components/src/components/stateful-pages/Grid/Grid.tsx
+++ b/packages/components/src/components/stateful-pages/Grid/Grid.tsx
@@ -50,7 +50,7 @@ function Grid(props: IProps): JSX.Element {
     <>
       <PageTitle title={title ?? t(resourceName)}>
         {hasNewLink ? (
-          <Button {...propsButton}>
+          <Button {...propsButton} data-testid="createButtonResourceGrid">
             <CustomAHref
               href={newLink ?? './create'}
               isIconInButton={Boolean(propsButton?.endIcon)}
diff --git a/packages/components/src/components/stateful-pages/ResourceForm/ResourceForm.tsx b/packages/components/src/components/stateful-pages/ResourceForm/ResourceForm.tsx
index 7b401baf..5b6d1ca6 100644
--- a/packages/components/src/components/stateful-pages/ResourceForm/ResourceForm.tsx
+++ b/packages/components/src/components/stateful-pages/ResourceForm/ResourceForm.tsx
@@ -200,6 +200,7 @@ function ResourceForm(props: IProps): JSX.Element {
                     <Button
                       display="secondary"
                       disabled={isLoading}
+                      data-testid="deleteButtonResourceForm"
                       endIcon={<ion-icon name="trash-outline" />}
                     >
                       {t('delete')}
@@ -211,6 +212,7 @@ function ResourceForm(props: IProps): JSX.Element {
               <Box>
                 <Button
                   type="submit"
+                  data-testid="submitButtonResourceForm"
                   loading={isLoading}
                   endIcon={
                     id ? (
diff --git a/packages/components/src/components/stateful/FieldGuesser/EditableDropDownGuesser.tsx b/packages/components/src/components/stateful/FieldGuesser/EditableDropDownGuesser.tsx
index 725b42b2..7ab25451 100644
--- a/packages/components/src/components/stateful/FieldGuesser/EditableDropDownGuesser.tsx
+++ b/packages/components/src/components/stateful/FieldGuesser/EditableDropDownGuesser.tsx
@@ -19,6 +19,7 @@ interface IProps extends Omit<IFieldGuesserProps, 'onChange'> {
   error?: boolean
   helperText?: string
   helperIcon?: string
+  dataTestId?: string
 }
 
 function EditableDropDownGuesser(props: IProps): JSX.Element {
@@ -40,6 +41,7 @@ function EditableDropDownGuesser(props: IProps): JSX.Element {
     helperIcon,
     showError,
     replacementErrorsMessages,
+    dataTestId,
   } = props
 
   const { t } = useTranslation('common')
@@ -96,6 +98,7 @@ function EditableDropDownGuesser(props: IProps): JSX.Element {
       objectKeyValue={field?.gally?.options?.objectKeyValue}
       sx={{ minWidth: '230.667px' }}
       replacementErrorsMessages={replacementErrorsMessages}
+      dataTestId={dataTestId}
     />
   )
 }
diff --git a/packages/components/src/components/stateful/FieldGuesser/EditableFieldGuesser.tsx b/packages/components/src/components/stateful/FieldGuesser/EditableFieldGuesser.tsx
index 57c9667d..c0f33daf 100644
--- a/packages/components/src/components/stateful/FieldGuesser/EditableFieldGuesser.tsx
+++ b/packages/components/src/components/stateful/FieldGuesser/EditableFieldGuesser.tsx
@@ -113,6 +113,7 @@ function EditableFieldGuesser(props: IFieldGuesserProps): JSX.Element {
               : helperText
           }
           inputProps={validation}
+          dataTestId={name}
           label={label}
           onChange={handleChange}
           required={required}
@@ -157,6 +158,7 @@ function EditableFieldGuesser(props: IFieldGuesserProps): JSX.Element {
           value={Number(value)}
           onChange={handleChange}
           helperText={helperText}
+          dataTestId={name}
         />
       )
     }
@@ -180,6 +182,7 @@ function EditableFieldGuesser(props: IFieldGuesserProps): JSX.Element {
             error={error}
             helperText={helperText}
             label={label}
+            dataTestId={name}
           />
         </Box>
       )
@@ -216,6 +219,7 @@ function EditableFieldGuesser(props: IFieldGuesserProps): JSX.Element {
           error={error}
           helperText={helperText}
           showError={showError}
+          dataTestId={name}
         />
       )
     }
@@ -278,6 +282,7 @@ function EditableFieldGuesser(props: IFieldGuesserProps): JSX.Element {
           error={error}
           helperText={helperText}
           replacementErrorsMessages={replacementErrorsMessages}
+          dataTestId={name}
         />
       )
     }
@@ -327,6 +332,7 @@ function EditableFieldGuesser(props: IFieldGuesserProps): JSX.Element {
           required={required}
           label={label}
           placeholder={placeholder}
+          data-testid={name}
         />
       )
     }
diff --git a/packages/components/src/components/stateful/FieldGuesser/EditableModelConfig.tsx b/packages/components/src/components/stateful/FieldGuesser/EditableModelConfig.tsx
index cae0383c..3a44440e 100644
--- a/packages/components/src/components/stateful/FieldGuesser/EditableModelConfig.tsx
+++ b/packages/components/src/components/stateful/FieldGuesser/EditableModelConfig.tsx
@@ -33,7 +33,7 @@ function EditableModelConfig(props: IProps): JSX.Element {
     error,
     helperText,
   } = props
-
+  // console.log(props)
   function handleChange(optionConfig: IOption<string>, data?: unknown): void {
     return onChange(initOrUpdateModelConfigValue(optionConfig, data))
   }
diff --git a/packages/components/src/components/stateful/RequestTypeManager/RequestTypeManager.tsx b/packages/components/src/components/stateful/RequestTypeManager/RequestTypeManager.tsx
index be5374a9..03ad787c 100644
--- a/packages/components/src/components/stateful/RequestTypeManager/RequestTypeManager.tsx
+++ b/packages/components/src/components/stateful/RequestTypeManager/RequestTypeManager.tsx
@@ -26,10 +26,18 @@ interface IProps {
   helperText?: string
   helperIcon?: string
   showError?: boolean
+  dataTestId?: string
 }
 
 function RequestTypeManager(props: IProps): JSX.Element | null {
-  const { data, value, onChange, requestTypeConfigurations, ...args } = props
+  const {
+    data,
+    value,
+    onChange,
+    requestTypeConfigurations,
+    dataTestId,
+    ...args
+  } = props
 
   const { t: tApi } = useTranslation('api')
 
@@ -77,6 +85,7 @@ function RequestTypeManager(props: IProps): JSX.Element | null {
       limitationsTypes={limitationTypeOptions}
       requestTypesOptions={requestTypeOptions}
       categoriesList={categoriesList}
+      dataTestId={dataTestId}
     />
   )
 }
diff --git a/packages/components/src/pages/Login.tsx b/packages/components/src/pages/Login.tsx
index fd619d3b..bca1ec24 100644
--- a/packages/components/src/pages/Login.tsx
+++ b/packages/components/src/pages/Login.tsx
@@ -120,8 +120,9 @@ function Login(): JSX.Element {
               return ''
             }}
             replacementErrorsMessages={{
-              typeMismatch: 'typeMismatchEmail',
+              typeMismatch: 'emailInput',
             }}
+            dataTestId="emailInput"
           />
           <InputText
             autoComplete="current-password"
@@ -135,6 +136,7 @@ function Login(): JSX.Element {
             additionalValidator={(value: string): string => {
               return !value ? 'valueMissing' : ''
             }}
+            dataTestId="passwordInput"
           />
         </Form>
       </CustomBloc>

From 19011da82185720a9dd1ed3d75b162c9114889c0 Mon Sep 17 00:00:00 2001
From: Matthias GOUPIL <matthiasgoup@gmail.com>
Date: Mon, 20 Jan 2025 11:06:52 +0100
Subject: [PATCH 2/2] fix(#1304624): resolve feedbacks

---
 .../components/atoms/form/CheckboxWithoutError.tsx  |  2 +-
 .../atoms/form/DoubleDatePickerWithoutError.tsx     |  6 +++---
 .../components/atoms/form/DropDownWithoutError.tsx  | 13 +++----------
 .../components/atoms/form/InputTextWithoutError.tsx |  4 ++--
 .../src/components/atoms/form/RangeWithoutError.tsx |  6 +++---
 .../components/src/components/atoms/form/Slider.tsx |  2 +-
 .../components/atoms/form/TextFieldTagsMultiple.tsx |  2 +-
 .../atoms/form/TextFieldTagsWithoutError.tsx        |  2 +-
 .../__snapshots__/DoubleDatePicker.test.tsx.snap    |  2 --
 .../stateful/FieldGuesser/EditableModelConfig.tsx   |  1 -
 10 files changed, 15 insertions(+), 25 deletions(-)

diff --git a/packages/components/src/components/atoms/form/CheckboxWithoutError.tsx b/packages/components/src/components/atoms/form/CheckboxWithoutError.tsx
index a8fa456e..3f8acc1a 100644
--- a/packages/components/src/components/atoms/form/CheckboxWithoutError.tsx
+++ b/packages/components/src/components/atoms/form/CheckboxWithoutError.tsx
@@ -95,7 +95,7 @@ function CheckboxWithoutError(
           marginLeft: '-6px',
         }),
       }}
-      {...(dataTestId && { 'data-testid': dataTestId })}
+      data-testid={dataTestId}
     />
   )
 }
diff --git a/packages/components/src/components/atoms/form/DoubleDatePickerWithoutError.tsx b/packages/components/src/components/atoms/form/DoubleDatePickerWithoutError.tsx
index 01a7fb4b..4a7cd77e 100644
--- a/packages/components/src/components/atoms/form/DoubleDatePickerWithoutError.tsx
+++ b/packages/components/src/components/atoms/form/DoubleDatePickerWithoutError.tsx
@@ -115,7 +115,7 @@ function DoubleDatePickerWithoutError(
             onChange={onChangeFrom}
             onError={onErrorFrom}
             ref={ref}
-            dataTestId={`${dataTestId}Start`}
+            dataTestId={dataTestId ? `${dataTestId}Start` : null}
           />
         </Grid>
         <CustomBox sx={{ paddingRight: '20px', paddingLeft: '20px' }}>
@@ -131,14 +131,14 @@ function DoubleDatePickerWithoutError(
             value={value?.toDate}
             onChange={onChangeTo}
             onError={onErrorTo}
-            dataTestId={`${dataTestId}End`}
+            dataTestId={dataTestId ? `${dataTestId}End` : null}
           />
         </Grid>
       </Grid>
       {Boolean(helperText) && (
         <FormHelperText
           error={error}
-          {...(dataTestId && { 'data-testid': `${dataTestId}ErrorMessage` })}
+          data-testid={dataTestId ? `${dataTestId}ErrorMessage` : null}
         >
           {Boolean(helperIcon) && (
             <IonIcon
diff --git a/packages/components/src/components/atoms/form/DropDownWithoutError.tsx b/packages/components/src/components/atoms/form/DropDownWithoutError.tsx
index 1a4131bf..8ec29b08 100644
--- a/packages/components/src/components/atoms/form/DropDownWithoutError.tsx
+++ b/packages/components/src/components/atoms/form/DropDownWithoutError.tsx
@@ -115,7 +115,6 @@ function DropDownWithoutError<T>(
       { label }: IOption<T>,
       { selected }: AutocompleteRenderOptionState
     ): ReactNode => {
-      // data-testid={`option-${otherProps.inputProps["data-testid"]}`}
       return (
         <li {...props}>
           <CheckboxWithoutError
@@ -137,10 +136,8 @@ function DropDownWithoutError<T>(
             key={option.id ?? String(option.value)}
             label={option.label}
             size={small ? 'small' : 'medium'}
+            data-testid={dataTestId ? `${dataTestId}Tag` : null}
             {...getTagProps({ index })}
-            {...(dataTestId && {
-              'data-testid': `${dataTestId}Tag`,
-            })}
           />
         ))
   }
@@ -174,18 +171,14 @@ function DropDownWithoutError<T>(
         }
         popupIcon={
           <IonIcon
-            {...(dataTestId && {
-              'data-testid': `${dataTestId}Button`,
-            })}
+            data-testid={dataTestId ? `${dataTestId}Button` : null}
             name="chevron-down"
           />
         }
         renderGroup={(params): JSX.Element => (
           <li key={params.key}>
             <ListSubheader
-              {...(dataTestId && {
-                'data-testid': `${dataTestId}GroupTitle`,
-              })}
+              data-testid={dataTestId ? `${dataTestId}GroupTitle` : null}
             >
               {params.group}
             </ListSubheader>
diff --git a/packages/components/src/components/atoms/form/InputTextWithoutError.tsx b/packages/components/src/components/atoms/form/InputTextWithoutError.tsx
index 6d8d5de3..d989457e 100644
--- a/packages/components/src/components/atoms/form/InputTextWithoutError.tsx
+++ b/packages/components/src/components/atoms/form/InputTextWithoutError.tsx
@@ -99,7 +99,7 @@ function InputTextWithoutError(
           value={(value ?? '').toString()}
           inputProps={{
             ...inputProps,
-            ...(dataTestId && { 'data-testid': dataTestId }),
+            'data-testid': dataTestId,
           }}
           {...InputProps}
         />
@@ -107,7 +107,7 @@ function InputTextWithoutError(
       </Wrapper>
       {Boolean(helperText) && (
         <FormHelperText
-          {...(dataTestId && { 'data-testid': `${dataTestId}ErrorMessage` })}
+          data-testid={dataTestId ? `${dataTestId}ErrorMessage` : null}
         >
           {Boolean(helperIcon) && (
             <IonIcon
diff --git a/packages/components/src/components/atoms/form/RangeWithoutError.tsx b/packages/components/src/components/atoms/form/RangeWithoutError.tsx
index 0d8a1fe3..2d3c86da 100644
--- a/packages/components/src/components/atoms/form/RangeWithoutError.tsx
+++ b/packages/components/src/components/atoms/form/RangeWithoutError.tsx
@@ -103,7 +103,7 @@ function RangeWithoutError(
           inputProps={{
             ...inputProps,
             max: valueTo,
-            ...(dataTestId && { 'data-testid': `${dataTestId}First` }),
+            'data-testid': dataTestId ? `${dataTestId}First` : null,
           }}
           placeholder={placeholderFrom}
           value={valueFrom ? String(valueFrom) : ''}
@@ -119,7 +119,7 @@ function RangeWithoutError(
           inputProps={{
             ...inputProps,
             min: valueFrom,
-            ...(dataTestId && { 'data-testid': `${dataTestId}Second` }),
+            'data-testid': dataTestId ? `${dataTestId}Second` : null,
           }}
           placeholder={placeholderTo}
           value={valueTo ? String(valueTo) : ''}
@@ -129,7 +129,7 @@ function RangeWithoutError(
       {Boolean(helperText) && (
         <FormHelperText
           error={error}
-          {...(dataTestId && { 'data-testid': `${dataTestId}ErrorMessage` })}
+          data-testid={dataTestId ? `${dataTestId}ErrorMessage` : null}
         >
           {Boolean(helperIcon) && (
             <IonIcon
diff --git a/packages/components/src/components/atoms/form/Slider.tsx b/packages/components/src/components/atoms/form/Slider.tsx
index 3704b2b1..38d187e0 100644
--- a/packages/components/src/components/atoms/form/Slider.tsx
+++ b/packages/components/src/components/atoms/form/Slider.tsx
@@ -83,7 +83,7 @@ function Slider(props: ISliderProps): JSX.Element {
               },
             },
           }}
-          {...(dataTestId && { 'data-testid': dataTestId })}
+          data-testid={dataTestId}
         />
       </Box>
       {Boolean(helperText) && (
diff --git a/packages/components/src/components/atoms/form/TextFieldTagsMultiple.tsx b/packages/components/src/components/atoms/form/TextFieldTagsMultiple.tsx
index 336540a2..f715d149 100644
--- a/packages/components/src/components/atoms/form/TextFieldTagsMultiple.tsx
+++ b/packages/components/src/components/atoms/form/TextFieldTagsMultiple.tsx
@@ -230,7 +230,7 @@ function TextFieldTagsMultiple(
                 )
               }
               endIcon={<IonIcon name="add" style={{ fontSize: 24 }} />}
-              {...(dataTestId && { 'data-testid': `${dataTestId}AddButton` })}
+              data-testid={dataTestId ? `${dataTestId}AddButton` : null}
             >
               {t('Add')}
             </Button>
diff --git a/packages/components/src/components/atoms/form/TextFieldTagsWithoutError.tsx b/packages/components/src/components/atoms/form/TextFieldTagsWithoutError.tsx
index ccd5de0c..fc32065b 100644
--- a/packages/components/src/components/atoms/form/TextFieldTagsWithoutError.tsx
+++ b/packages/components/src/components/atoms/form/TextFieldTagsWithoutError.tsx
@@ -185,7 +185,7 @@ function TextFieldTagsWithoutError(
     <div style={{ position: 'relative' }}>
       {withCleanButton === true && (
         <CustomCloseTagsByOperator
-          {...(dataTestId && { 'data-testid': `${dataTestId}CleanButton` })}
+          data-testid={dataTestId ? `${dataTestId}CleanButton` : null}
           onClick={(): void => {
             if (value.length > 0) {
               onChange([])
diff --git a/packages/components/src/components/atoms/form/__snapshots__/DoubleDatePicker.test.tsx.snap b/packages/components/src/components/atoms/form/__snapshots__/DoubleDatePicker.test.tsx.snap
index 65836d70..2df4451a 100644
--- a/packages/components/src/components/atoms/form/__snapshots__/DoubleDatePicker.test.tsx.snap
+++ b/packages/components/src/components/atoms/form/__snapshots__/DoubleDatePicker.test.tsx.snap
@@ -36,7 +36,6 @@ exports[`DoubleDatePicker sould match snapshot 1`] = `
               <input
                 aria-invalid="false"
                 class="MuiInputBase-input MuiInputBase-inputAdornedEnd css-ngazp5-MuiInputBase-input"
-                data-testid="undefinedStart"
                 placeholder="date.placeholder"
                 type="tel"
                 value="04/12/2024"
@@ -83,7 +82,6 @@ exports[`DoubleDatePicker sould match snapshot 1`] = `
               <input
                 aria-invalid="false"
                 class="MuiInputBase-input MuiInputBase-inputAdornedEnd css-ngazp5-MuiInputBase-input"
-                data-testid="undefinedEnd"
                 placeholder="date.placeholder"
                 type="tel"
                 value="04/12/2024"
diff --git a/packages/components/src/components/stateful/FieldGuesser/EditableModelConfig.tsx b/packages/components/src/components/stateful/FieldGuesser/EditableModelConfig.tsx
index 3a44440e..b4a63b50 100644
--- a/packages/components/src/components/stateful/FieldGuesser/EditableModelConfig.tsx
+++ b/packages/components/src/components/stateful/FieldGuesser/EditableModelConfig.tsx
@@ -33,7 +33,6 @@ function EditableModelConfig(props: IProps): JSX.Element {
     error,
     helperText,
   } = props
-  // console.log(props)
   function handleChange(optionConfig: IOption<string>, data?: unknown): void {
     return onChange(initOrUpdateModelConfigValue(optionConfig, data))
   }