Merge pull request #222 from Elastic-Suite/feat-1304624-tests-e2e-pla…

…ywright feat(1304624): add data-test-id for e2e tests
Elastic-Suite · Jan 20, 2025 · 274f2b7 · 274f2b7
2 parents 5b5d1f6 + 19011da
commit 274f2b7
Show file tree

Hide file tree

Showing 39 changed files with 272 additions and 31 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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',
         }),
       }}
+      data-testid={dataTestId}
     />
   )
 }

diff --git 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
@@ -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 ? `${dataTestId}Start` : null}
           />
         </Grid>
         <CustomBox sx={{ paddingRight: '20px', paddingLeft: '20px' }}>
@@ -128,11 +131,15 @@ function DoubleDatePickerWithoutError(
             value={value?.toDate}
             onChange={onChangeTo}
             onError={onErrorTo}
+            dataTestId={dataTestId ? `${dataTestId}End` : null}
           />
         </Grid>
       </Grid>
       {Boolean(helperText) && (
-        <FormHelperText error={error}>
+        <FormHelperText
+          error={error}
+          data-testid={dataTestId ? `${dataTestId}ErrorMessage` : null}
+        >
           {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
@@ -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
@@ -119,6 +122,7 @@ function DropDownWithoutError<T>(
             label={label}
             list
             onClick={(e): void => e.preventDefault()}
+            dataTestId={dataTestId ? `${dataTestId}Checkbox` : null}
           />
         </li>
       )
@@ -132,6 +136,7 @@ function DropDownWithoutError<T>(
             key={option.id ?? String(option.value)}
             label={option.label}
             size={small ? 'small' : 'medium'}
+            data-testid={dataTestId ? `${dataTestId}Tag` : null}
             {...getTagProps({ index })}
           />
         ))
@@ -164,9 +169,25 @@ function DropDownWithoutError<T>(
         getOptionLabel={
           useGroups ? (options: IOption<T>): string => options.label : undefined
         }
-        popupIcon={<IonIcon name="chevron-down" />}
+        popupIcon={
+          <IonIcon
+            data-testid={dataTestId ? `${dataTestId}Button` : null}
+            name="chevron-down"
+          />
+        }
+        renderGroup={(params): JSX.Element => (
+          <li key={params.key}>
+            <ListSubheader
+              data-testid={dataTestId ? `${dataTestId}GroupTitle` : null}
+            >
+              {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 +196,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
@@ -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
@@ -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,
+            'data-testid': dataTestId,
+          }}
           {...InputProps}
         />
         {Boolean(suffix) && <Suffix>{suffix}</Suffix>}
       </Wrapper>
       {Boolean(helperText) && (
-        <FormHelperText>
+        <FormHelperText
+          data-testid={dataTestId ? `${dataTestId}ErrorMessage` : null}
+        >
           {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
@@ -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,
+            'data-testid': dataTestId ? `${dataTestId}First` : null,
+          }}
           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,
+            'data-testid': dataTestId ? `${dataTestId}Second` : null,
+          }}
           placeholder={placeholderTo}
           value={valueTo ? String(valueTo) : ''}
         />
         {Boolean(suffix) && <Suffix>{suffix}</Suffix>}
       </Wrapper>
       {Boolean(helperText) && (
-        <FormHelperText error={error}>
+        <FormHelperText
+          error={error}
+          data-testid={dataTestId ? `${dataTestId}ErrorMessage` : null}
+        >
           {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
@@ -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
@@ -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
@@ -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 {
               },
             },
           }}
+          data-testid={dataTestId}
         />
       </Box>
       {Boolean(helperText) && (