chore(data-cy): require data-cy attributes [EE-6880] (#11453)

app/react/components/form-components/InputList/InputList.stories.tsx

@@ -22,6 +22,7 @@ function Defaults() {
       label="default example"
       value={values}
       onChange={(value) => setValues(value)}
+      data-cy="input-list-default-example"
     />
   );
 }
@@ -37,6 +38,7 @@ function ListWithUndoDeletion() {
       value={values}
       onChange={(value) => setValues(value)}
       canUndoDelete
+      data-cy="input-list-with-undo-deletion"
     />
   );
 }
@@ -71,6 +73,7 @@ function ListWithInputAndSelect({
       movable={movable}
       itemBuilder={() => ({ value: 0, select: '', id: values.length })}
       tooltip={tooltip}
+      data-cy="input-list-with-select-and-input"
     />
   );
 }
@@ -96,9 +99,11 @@ function SelectAndInputItem({
         onChange={(e) =>
           onChange({ ...item, value: parseInt(e.target.value, 10) })
         }
+        data-cy="input"
       />
       <Select
         onChange={(e) => onChange({ ...item, select: e.target.value })}
+        data-cy="select"
         options={[
           { label: 'option1', value: 'option1' },
           { label: 'option2', value: 'option2' },

app/react/components/form-components/InputList/InputList.tsx

@@ -3,6 +3,8 @@ import { FormikErrors } from 'formik';
 import { ArrowDown, ArrowUp, Plus, RotateCw, Trash2 } from 'lucide-react';
 import clsx from 'clsx';
 
+import { AutomationTestingProps } from '@/types';
+
 import { Button } from '@@/buttons';
 import { Tooltip } from '@@/Tip/Tooltip';
 import { TextTip } from '@@/Tip/TextTip';
@@ -53,10 +55,11 @@ type RenderItemFunction<T> = (
   item: T,
   onChange: (value: T) => void,
   index: number,
+  dataCy: string,
   error?: ItemError<T>
 ) => React.ReactNode;
 
-interface Props<T> {
+interface Props<T> extends AutomationTestingProps {
   label?: string;
   value: T[];
   onChange(value: T[], e: OnChangeEvent<T>): void;
@@ -71,9 +74,7 @@ interface Props<T> {
   errors?: ArrayError<T[]>;
   textTip?: string;
   isAddButtonHidden?: boolean;
-  addButtonDataCy?: string;
   isDeleteButtonHidden?: boolean;
-  deleteButtonDataCy?: string;
   disabled?: boolean;
   addButtonError?: string;
   readOnly?: boolean;
@@ -95,9 +96,8 @@ export function InputList<T = DefaultType>({
   errors,
   textTip,
   isAddButtonHidden = false,
-  addButtonDataCy,
   isDeleteButtonHidden = false,
-  deleteButtonDataCy,
+  'data-cy': dataCy,
   disabled,
   addButtonError,
   readOnly,
@@ -161,6 +161,7 @@ export function InputList<T = DefaultType>({
                     item,
                     (value: T) => handleChangeItem(key, value),
                     index,
+                    dataCy,
                     error
                   )
                 )}
@@ -173,6 +174,7 @@ export function InputList<T = DefaultType>({
                         onClick={() => handleMoveUp(index)}
                         className="vertical-center btn-only-icon"
                         icon={ArrowUp}
+                        data-cy={`${dataCy}-move-up_${index}`}
                       />
                       <Button
                         size="medium"
@@ -181,6 +183,7 @@ export function InputList<T = DefaultType>({
                         onClick={() => handleMoveDown(index)}
                         className="vertical-center btn-only-icon"
                         icon={ArrowDown}
+                        data-cy={`${dataCy}-move-down_${index}`}
                       />
                     </>
                   )}
@@ -190,7 +193,7 @@ export function InputList<T = DefaultType>({
                       size="medium"
                       onClick={() => handleRemoveItem(key, item)}
                       className="vertical-center btn-only-icon"
-                      data-cy={`${deleteButtonDataCy}_${index}`}
+                      data-cy={`${dataCy}RemoveButton_${index}`}
                       icon={Trash2}
                     />
                   )}
@@ -203,7 +206,7 @@ export function InputList<T = DefaultType>({
                         initialItemsCount={initialItemsCount.current}
                         handleRemoveItem={handleRemoveItem}
                         handleToggleNeedsDeletion={toggleNeedsDeletion}
-                        dataCy={`${deleteButtonDataCy}_${index}`}
+                        dataCy={`${dataCy}RemoveButton_${index}`}
                       />
                     )}
                 </div>
@@ -224,7 +227,7 @@ export function InputList<T = DefaultType>({
               className="!ml-0"
               size="small"
               icon={Plus}
-              data-cy={addButtonDataCy}
+              data-cy={`${dataCy}AddButton`}
             >
               {addLabel}
             </Button>
@@ -332,7 +335,9 @@ function DefaultItem({
   error,
   disabled,
   readOnly,
-}: ItemProps<DefaultType>) {
+  index,
+  'data-cy': dataCy,
+}: ItemProps<DefaultType> & AutomationTestingProps) {
   return (
     <>
       <Input
@@ -341,6 +346,7 @@ function DefaultItem({
         className={clsx('!w-full', item.needsDeletion && 'striked')}
         disabled={disabled || item.needsDeletion}
         readOnly={readOnly}
+        data-cy={`${dataCy}RemoveButton_${index}`}
       />
       {error && <FormError>{error}</FormError>}
     </>
@@ -351,10 +357,17 @@ function renderDefaultItem(
   item: DefaultType,
   onChange: (value: DefaultType) => void,
   index: number,
+  dataCy: string,
   error?: ItemError<DefaultType>
 ) {
   return (
-    <DefaultItem item={item} onChange={onChange} error={error} index={index} />
+    <DefaultItem
+      item={item}
+      onChange={onChange}
+      error={error}
+      index={index}
+      data-cy={dataCy}
+    />
   );
 }