Merge pull request #1012 from internxt/feature/add-tests-id

[_] feature/Add data cy to edit item name dialog and drive list items
internxt · Feb 1, 2024 · 8211946 · 8211946
2 parents fb876fd + fa22712
commit 8211946
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 9 deletions.
diff --git a/src/app/drive/components/EditItemNameDialog/EditItemNameDialog.tsx b/src/app/drive/components/EditItemNameDialog/EditItemNameDialog.tsx
@@ -54,7 +54,7 @@ const EditItemNameDialog: FC<EditItemNameDialogProps> = ({ item, isOpen, resourc
           setIsLoading(false);
         });
     } else {
-      setError(translate('error.folderCannotBeEmpty') as string);
+      setError(translate('error.folderCannotBeEmpty'));
     }
   };
 
@@ -68,13 +68,17 @@ const EditItemNameDialog: FC<EditItemNameDialogProps> = ({ item, isOpen, resourc
 
   return (
     <Modal maxWidth="max-w-sm" isOpen={isOpen} onClose={handleOnClose}>
-      <form className="flex flex-col space-y-5" onSubmit={onRenameButtonClicked}>
-        <p className="text-2xl font-medium text-gray-100">{translate('modals.renameItemDialog.title')}</p>
+      <form className="flex flex-col space-y-5" data-cy="editItemNameDialog" onSubmit={onRenameButtonClicked}>
+        <p className="text-2xl font-medium text-gray-100" data-cy="editItemNameDialogTitle">
+          {translate('modals.renameItemDialog.title')}
+        </p>
 
         <Input
           disabled={isLoading}
           className={`${error !== '' ? 'error' : ''}`}
-          label={translate('modals.renameItemDialog.label') as string}
+          labelDataCy="editItemNameDialogInputTitle"
+          inputDataCy="editItemNameDialogInput"
+          label={translate('modals.renameItemDialog.label')}
           value={newItemName}
           placeholder={newItemName}
           onChange={(name) => {
@@ -87,10 +91,22 @@ const EditItemNameDialog: FC<EditItemNameDialogProps> = ({ item, isOpen, resourc
         />
 
         <div className="flex flex-row items-center justify-end space-x-2">
-          <Button disabled={isLoading} variant="secondary" onClick={handleOnClose}>
+          <Button
+            disabled={isLoading}
+            variant="secondary"
+            onClick={handleOnClose}
+            buttonDataCy="editItemNameDialogCancelButton"
+            buttonChildrenDataCy="editItemNameDialogCancelButtonText"
+          >
             {translate('actions.cancel')}
           </Button>
-          <Button type="submit" loading={isLoading} variant="primary">
+          <Button
+            type="submit"
+            loading={isLoading}
+            variant="primary"
+            buttonDataCy="editItemNameDialogAcceptButton"
+            buttonChildrenDataCy="editItemNameDialogAcceptButtonText"
+          >
             {translate('actions.rename')}
           </Button>
         </div>

diff --git a/src/app/shared/components/Button/Button.tsx b/src/app/shared/components/Button/Button.tsx
@@ -13,6 +13,7 @@ export default function Button({
   dataTest,
   autofocus,
   buttonDataCy,
+  buttonChildrenDataCy,
 }: {
   variant?: 'primary' | 'accent' | 'secondary' | 'tertiary';
   type?: 'button' | 'submit';
@@ -25,6 +26,7 @@ export default function Button({
   dataTest?: string;
   autofocus?: boolean;
   buttonDataCy?: string;
+  buttonChildrenDataCy?: string;
 }): JSX.Element {
   let styles = '';
 
@@ -59,7 +61,9 @@ export default function Button({
       } relative flex shrink-0 select-none flex-row items-center justify-center space-x-2 whitespace-nowrap rounded-lg text-base font-medium outline-none ring-2 ring-primary/0 ring-offset-2 ring-offset-transparent transition-all duration-100 ease-in-out focus-visible:ring-primary/50 ${styles} ${className}`}
     >
       {loading && <Spinner size={18} />}
-      <div className="flex items-center justify-center space-x-2">{children}</div>
+      <div className="flex items-center justify-center space-x-2" data-cy={buttonChildrenDataCy}>
+        {children}
+      </div>
     </button>
   );
 }
diff --git a/src/app/shared/components/Input/index.tsx b/src/app/shared/components/Input/index.tsx
@@ -19,6 +19,8 @@ export default function Input({
   dataTest,
   name,
   required = false,
+  labelDataCy,
+  inputDataCy,
 }: {
   className?: string;
   label?: string;
@@ -37,6 +39,8 @@ export default function Input({
   dataTest?: string;
   name?: string;
   required?: boolean;
+  labelDataCy?: string;
+  inputDataCy?: string;
 }): JSX.Element {
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -104,6 +108,7 @@ export default function Input({
         autoComplete={autoComplete}
         value={value}
         data-test={dataTest}
+        data-cy={inputDataCy}
         name={name}
         required={required}
       />
@@ -167,7 +172,9 @@ export default function Input({
     <div className={`${className}`}>
       {label ? (
         <label>
-          <span className={`text-sm ${disabled ? 'text-gray-40' : 'text-gray-80'}`}>{label}</span>
+          <span data-cy={labelDataCy} className={`text-sm ${disabled ? 'text-gray-40' : 'text-gray-80'}`}>
+            {label}
+          </span>
           {input}
         </label>
       ) : (

diff --git a/src/app/shared/components/List/ListItem.tsx b/src/app/shared/components/List/ListItem.tsx
@@ -21,6 +21,7 @@ export type ListItemMenu<T> = Array<
 
 interface ItemProps<T> {
   item: T;
+  listIndex: number;
   itemComposition: Array<(props: T) => JSX.Element>;
   selected: boolean;
   columnsWidth: Array<string>;
@@ -88,6 +89,7 @@ const MenuItemList = ({
 
 export default function ListItem<T extends { id: string }>({
   item,
+  listIndex,
   itemComposition,
   selected,
   columnsWidth,
@@ -171,6 +173,7 @@ export default function ListItem<T extends { id: string }>({
             onSelectedChanged(!selected);
           }}
           checked={selected}
+          checkboxDataCy={`driveListItemCheckbox${listIndex}`}
         />
       </div>
       {disableItemCompositionStyles ? (
@@ -243,6 +246,7 @@ export default function ListItem<T extends { id: string }>({
                       : 'text-gray-60 hover:bg-gray-10 focus-visible:bg-gray-10'
                   }`}
                   onClick={() => onThreeDotsButtonPressed?.(item)}
+                  data-cy={`driveListThreeDotsMenuButton${listIndex}`}
                 >
                   <DotsThree size={24} weight="bold" />
                 </Menu.Button>

diff --git a/src/app/shared/components/List/index.tsx b/src/app/shared/components/List/index.tsx
@@ -296,10 +296,11 @@ ListProps<T, F>): JSX.Element {
             className="h-full"
             style={{ overflow: 'visible' }}
           >
-            {items.map((item) => (
+            {items.map((item, index) => (
               <ListItem<T>
                 key={item.id}
                 item={item}
+                listIndex={index}
                 itemComposition={itemComposition}
                 selected={isItemSelected(item)}
                 onDoubleClick={onDoubleClick && (() => onDoubleClick(item))}