Add testing identifier to elements

tdrive/frontend/src/app/atoms/button/button.tsx

@@ -12,6 +12,7 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   loading?: boolean;
   disabled?: boolean;
   children?: React.ReactNode;
+  testClassId?: string;
 }
 
 export const Button = (props: ButtonProps) => {
@@ -65,10 +66,12 @@ export const Button = (props: ButtonProps) => {
         ' inline-flex items-center px-4 py-2 border font-medium rounded-md focus:outline-none ' +
         className +
         ' ' +
-        props.className
+        props.className +
+        ' ' +
+        `testid:${props.testClassId}`
       }
       disabled={disabled}
-      {..._.omit(props, 'loading', 'children', 'className', 'icon', 'iconSize')}
+      {..._.omit(props, 'loading', 'children', 'className', 'icon', 'iconSize', 'testClassId')}
     >
       {props.loading && (
         <>

tdrive/frontend/src/app/atoms/input/input-checkbox-slider.tsx

@@ -1,9 +1,11 @@
+import _ from "lodash";
 import { isUndefined } from "lodash";
 
 interface CheckboxSliderProps extends React.InputHTMLAttributes<HTMLInputElement> {
   checked?: boolean;
   disabled?: boolean;
   noFocusBorder?: boolean;
+  testClassId?: string;
 }
 /** Just classes up a checkbox to look like a slider. Deviates from onChange etc for
  * compatibility with `InputHTMLAttributes<HTMLInputElement>`, to expose eg. id to use with htmlFor.
@@ -15,13 +17,17 @@ export const CheckboxSlider = (props: CheckboxSliderProps) => {
 
   return (
     <input
-      {...props}
+      {..._.omit(props, 'testClassId')}
       type="checkbox"
       role="switch"
       style={styles}
       // @author https://tw-elements.com/docs/react/forms/switch/
-      className="!bg-none mr-2 mt-[0.3rem] h-7 w-14 appearance-none rounded-[0.9rem] bg-neutral-300 before:pointer-events-none before:absolute before:h-7 before:w-5 before:rounded-full before:bg-transparent before:content-[''] after:absolute after:z-[2] after:mt-[0.2rem] after:ml-[0.2rem] after:h-5 after:w-5 after:rounded-full after:border-none after:bg-neutral-100 after:shadow-[0_0px_3px_0_rgb(0_0_0_/_7%),_0_2px_2px_0_rgb(0_0_0_/_4%)] after:transition-[background-color_0.2s,transform_0.2s] after:content-[''] checked:bg-primary checked:after:absolute checked:after:z-[2] checked:after:ml-[1.9625rem] checked:after:w-5 checked:after:rounded-full checked:after:border-none checked:after:bg-primary checked:after:shadow-[0_3px_1px_-2px_rgba(0,0,0,0.2),_0_2px_2px_0_rgba(0,0,0,0.14),_0_1px_5px_0_rgba(0,0,0,0.12)] checked:after:transition-[background-color_0.2s,transform_0.2s] checked:after:content-[''] hover:cursor-pointer dark:bg-neutral-600 dark:after:bg-white dark:checked:bg-primary dark:checked:after:bg-primary disabled:cursor-default disabled:opacity-25 !focus:shadow-none"
+      className={[
+        "!bg-none mr-2 mt-[0.3rem] h-7 w-14 appearance-none rounded-[0.9rem] bg-neutral-300 before:pointer-events-none before:absolute before:h-7 before:w-5 before:rounded-full before:bg-transparent before:content-[''] after:absolute after:z-[2] after:mt-[0.2rem] after:ml-[0.2rem] after:h-5 after:w-5 after:rounded-full after:border-none after:bg-neutral-100 after:shadow-[0_0px_3px_0_rgb(0_0_0_/_7%),_0_2px_2px_0_rgb(0_0_0_/_4%)] after:transition-[background-color_0.2s,transform_0.2s] after:content-[''] checked:bg-primary checked:after:absolute checked:after:z-[2] checked:after:ml-[1.9625rem] checked:after:w-5 checked:after:rounded-full checked:after:border-none checked:after:bg-primary checked:after:shadow-[0_3px_1px_-2px_rgba(0,0,0,0.2),_0_2px_2px_0_rgba(0,0,0,0.14),_0_1px_5px_0_rgba(0,0,0,0.12)] checked:after:transition-[background-color_0.2s,transform_0.2s] checked:after:content-[''] hover:cursor-pointer dark:bg-neutral-600 dark:after:bg-white dark:checked:bg-primary dark:checked:after:bg-primary disabled:cursor-default disabled:opacity-25 !focus:shadow-none",
+        `testid:${props.testClassId}`
+      ].join(' ')}
       checked={!!props.checked}
       disabled={props.disabled}
+      data-checkbox-id={props.testClassId}
     />)
 }

tdrive/frontend/src/app/atoms/input/input-text.tsx

@@ -17,6 +17,7 @@ interface InputProps
   inputClassName?: string;
   className?: string;
   inputRef?: React.Ref<HTMLInputElement | HTMLTextAreaElement>;
+  testClassId?: string;
 }
 
 export type ThemeName = 'plain' | 'outline' | 'blue' | 'rose';
@@ -66,7 +67,8 @@ export const Input = (props: InputProps) => {
           <textarea
             ref={props.inputRef as React.Ref<HTMLTextAreaElement>}
             className={inputClassName + ' ' + props.inputClassName + ' ' + props.className}
-            {..._.omit(props as any, 'label', 'inputClassName', 'inputRef', 'className', 'value', 'size')}
+            {..._.omit(props as any, 'label', 'inputClassName', 'inputRef', 'className', 'value', 'size', 'testClassId')}
+            data-input-id={props.testClassId}
           >
             {props.value}
           </textarea>
@@ -74,8 +76,8 @@ export const Input = (props: InputProps) => {
           <input
             ref={props.inputRef as React.Ref<HTMLInputElement>}
             type="text"
-            className={inputClassName + ' ' + props.inputClassName + ' ' + props.className}
+            className={`${inputClassName} ${props.inputClassName} ${props.className} testid:${props.testClassId}`}
-            {..._.omit(props, 'label', 'inputClassName', 'inputRef', 'className', 'size')}
+            {..._.omit(props, 'label', 'inputClassName', 'inputRef', 'className', 'size', 'testClassId')}
           />
         ))}
     </>

tdrive/frontend/src/app/atoms/link/index.tsx

@@ -8,6 +8,7 @@ export default function A(
     href?: string;
     children: React.ReactNode;
     noColor?: boolean;
+    testClassId?: string;
   },
 ) {
   const colors = props.noColor ? '' : 'hover:text-blue-700 active:text-blue-800 text-blue-500';
@@ -27,8 +28,8 @@ export default function A(
   return (
     <a
       href={(props.href || '#').replace(/^javascript:/, '')}
-      className={colors + ' ' + (props.className || '')}
+      className={colors + ' ' + (props.className || '') + ' ' + `testid:${props.testClassId}`}
-      {..._.omit(props, 'children', 'className', 'noColor')}
+      {..._.omit(props, 'children', 'className', 'noColor', 'testClassId')}
     >
       {props.children}
     </a>

tdrive/frontend/src/app/atoms/modal/confirm.tsx

@@ -42,13 +42,15 @@ export const ConfirmModal = (props: ConfirmModalProps) => {
               className="ml-2"
               theme={props.buttonOkTheme || "danger"}
               onClick={dialogCloseHandler(true)}
-              >
+              testClassId="confirm-modal-button-confirm"
+            >
               {Languages.t(props.buttonOkLabel)}
             </Button>
             <Button
               theme='default'
               onClick={dialogCloseHandler(false)}
-              >
+              testClassId="confirm-modal-button-cancel"
+            >
               {Languages.t(props.buttonCancelLabel || "general.cancel")}
             </Button>
           </>

tdrive/frontend/src/app/components/buttons/button-with-timeout.jsx

@@ -62,6 +62,7 @@ export default class ButtonWithTimeout extends React.Component {
             (this.props.className ? this.props.className : '')
           }
           onClick={this.props.onClick}
+          testClassId={this.props.testClassId}
         >
           {this.props.value}
         </Button>

tdrive/frontend/src/app/components/buttons/button.jsx

@@ -27,7 +27,7 @@ export default class Button extends React.Component {
       <button
         ref={this.props.refButton}
         {...this.props}
-        className={'button no-tw ' + className}
+        className={'button no-tw ' + className + ` testid:${this.props.testClassId}`}
         onClick={evt => {
           evt.target.blur();
           this.props.onClick && this.props.onClick(evt);

tdrive/frontend/src/app/components/inputs/input.jsx

@@ -76,7 +76,7 @@ export default class Input extends Component {
           }
           this.onKeyDown(evt);
         }}
-        className={'input ' + (className || '')}
+        className={'input ' + (className || '') + ` testid:${this.props.testClassId}`}
         onBlur={this.props.onBlur}
         onChange={this.props.onChange}
       />

tdrive/frontend/src/app/components/menus/menu-component.jsx

@@ -57,7 +57,8 @@ export default class MenuComponent extends React.Component {
       <div
         ref={node => (this.original_menu = node)}
         className={
-          'menu-list ' + (this.props.withFrame ? 'as_frame text-black bg-white dark:bg-zinc-900 dark:text-white rounded-lg ' : '') + this.props.animationClass
+          'menu-list ' + (this.props.withFrame ? 'as_frame text-black bg-white dark:bg-zinc-900 dark:text-white rounded-lg ' : '') + this.props.animationClass + ' ' +
+          `testid:${this.props.testClassId}`
         }
       >
         {(this.props.menu || [])

tdrive/frontend/src/app/components/menus/menu.jsx

@@ -63,6 +63,8 @@ export default class Menu extends React.Component {
         this.props.menu,
         elementRect,
         this.props.position,
+        {},
+        this.props.testClassId
       );
       this.setState({ isMenuOpen: true }, () => this.open = true);
       this.open = true;

tdrive/frontend/src/app/components/menus/menus-body-layer.jsx

@@ -210,6 +210,7 @@ export default class MenusBodyLayer extends React.Component {
                           : 'skew_in_right_nobounce'
                         : 'fade_in'
                     }
+                    testClassId={item.dataMenuId}
                   />
                 </div>
               </OutsideClickHandler>

tdrive/frontend/src/app/components/menus/menus-manager.jsx

@@ -57,7 +57,7 @@ class MenusManager extends Observable {
 
     this.notify();
   }
-  async openMenu(menu, domRect, positionType, options) {
+  async openMenu(menu, domRect, positionType, options, dataMenuId) {
     this.isOpen = 1;
     if(typeof menu === 'function') {
       menu = await menu();
@@ -85,6 +85,7 @@ class MenusManager extends Observable {
       level: 0,
       id: Number.unid(),
       allowClickOut: options.allowClickOut !== undefined ? options.allowClickOut : true,
+      dataMenuId,
     });
     this.last_opened_id = Number.unid();
     this.notify();

tdrive/frontend/src/app/components/uploads/upload-zone.tsx

@@ -191,7 +191,7 @@ export default class UploadZone extends React.Component<PropsType, StateType> {
       <div
         ref={node => node && (this.node = node)}
         style={this.props.style}
-        className={classNames('upload_drop_zone', this.props.className)}
+        className={classNames('upload_drop_zone', this.props.className, `testid:${this.props.testClassId}`)}
         onClick={() => {
           if (!this.props.disableClick) {
             this.open();

tdrive/frontend/src/app/views/client/body/drive/browser.tsx

@@ -232,10 +232,10 @@ export default memo(
         inPublicSharing,
       };
       return isMobile ? (
-        <DocumentRow {...commonProps} />
+        <DocumentRow {...commonProps} testClassId="browser-document-row" />
       ) : (
         <Draggable id={index} key={index}>
-          <DocumentRow {...commonProps} />
+          <DocumentRow {...commonProps} testClassId="browser-document-row" />
         </Draggable>
       );
     }
@@ -339,6 +339,7 @@ export default memo(
             onDragOver={handleDragOver}
             onDrop={handleDrop}
             disabled={inTrash || access === 'read'}
+            testClassId="browser-upload-zone"
           >
             {role == 'admin' && <UsersModal />}
             <VersionsModal />
@@ -374,8 +375,11 @@ export default memo(
                               buildFileTypeContextMenu(),
                               { x: evt.clientX, y: evt.clientY },
                               'center',
+                              {},
+                              "browser-share-with-me-menu-file-type"
                             );
                           }}
+                          testClassId="browser-share-with-me-button-file-type"
                         >
                           <span>
                             {filter.mimeType.key && filter.mimeType.key != 'All'
@@ -394,8 +398,11 @@ export default memo(
                               buildPeopleContextMen(),
                               { x: evt.clientX, y: evt.clientY },
                               'center',
+                              {},
+                              "browser-share-with-me-menu-people"
                             );
                           }}
+                          testClassId="browser-share-with-me-button-people"
                         >
                           <span>{Languages.t('scenes.app.shared_with_me.people')}</span>
                           <ChevronDownIcon className="h-4 w-4 ml-2 -mr-1" />
@@ -411,8 +418,11 @@ export default memo(
                               buildDateContextMenu(),
                               { x: evt.clientX, y: evt.clientY },
                               'center',
+                              {},
+                              "browser-share-with-me-menu-last-modified"
                             );
                           }}
+                          testClassId="browser-share-with-me-button-last-modified"
                         >
                           <span>
                             {filter.date.key && filter.date.key != 'All'
@@ -440,9 +450,9 @@ export default memo(
                   </BaseSmall>
                 )}
 
-                <Menu menu={() => onBuildSortContextMenu()} sortData={sortLabel}>
+                <Menu menu={() => onBuildSortContextMenu()} sortData={sortLabel} testClassId="browser-menu-sorting">
                   {' '}
-                  <Button theme="outline" className="ml-4 flex flex-row items-center">
+                  <Button theme="outline" className="ml-4 flex flex-row items-center" testClassId="browser-button-sorting">
                     <SortIcon
                       className={`h-4 w-4 mr-2 -ml-1 ${
                         sortLabel.order === 'asc' ? 'transform rotate-180' : ''
@@ -455,9 +465,9 @@ export default memo(
                   </Button>
                 </Menu>
                 {viewId !== 'shared_with_me' && (
-                  <Menu menu={() => onBuildContextMenu(details)}>
+                  <Menu menu={() => onBuildContextMenu(details)} testClassId="browser-menu-context">
                     {' '}
-                    <Button theme="secondary" className="ml-4 flex flex-row items-center">
+                    <Button theme="secondary" className="ml-4 flex flex-row items-center" testClassId="browser-button-context">
                       <span>
                         {selectedCount > 1
                           ? `${selectedCount} items`
@@ -485,6 +495,7 @@ export default memo(
                             onClick={() => uploadItemModal()}
                             theme="primary"
                             className="mt-4"
+                            testClassId="browser-button-add-doc"
                           >
                             {Languages.t('scenes.app.drive.add_doc')}
                           </Button>
@@ -514,6 +525,7 @@ export default memo(
                             setChecked(_.pickBy({ ...checked, [child.id]: v }, _.identity))
                           }
                           onBuildContextMenu={() => onBuildContextMenu(details, child)}
+                          testClassId="browser-folder-row"
                         />
                       </Droppable>
                     ) : (

tdrive/frontend/src/app/views/client/body/drive/components/access-level-dropdown.tsx

@@ -26,6 +26,7 @@ export const AccessLevelDropdown = ({
   className,
   size,
   noRedWhenLevelNone,
+  testClassId,
 }: {
   disabled?: boolean;
   level: DriveFileAccessLevel | null;
@@ -35,6 +36,7 @@ export const AccessLevelDropdown = ({
   hiddenLevels?: DriveFileAccessLevelOrRemove[] | string[];
   size?: SelectSize,
   noRedWhenLevelNone?: boolean,
+  testClassId?: string,
 }) => {
   const createOption = (level: DriveFileAccessLevelOrRemove) =>
     !hiddenLevels?.includes(level) && <option value={level}>{(labelOverrides || {})[level] || translateAccessLevel(level)}</option>;
@@ -42,7 +44,7 @@ export const AccessLevelDropdown = ({
     <Select
       disabled={disabled}
       size={size}
-      className={className + ' w-auto'}
+      className={className + ' w-auto' + ` testid:${testClassId}`}
       theme={(!noRedWhenLevelNone && level === 'none') ? 'rose' : 'outline'}
       value={level || 'none'}
       onChange={e => onChange(e.target.value as DriveFileAccessLevel & 'remove')}

tdrive/frontend/src/app/views/client/body/drive/documents/common.tsx

@@ -9,6 +9,7 @@ export type DriveItemProps = {
   checked: boolean;
   onClick?: () => void;
   onBuildContextMenu: () => Promise<any[]>;
+  testClassId?: string;
 };
 
 export type DriveItemOverlayProps = {

tdrive/frontend/src/app/views/client/body/drive/documents/document-row.tsx

@@ -1,6 +1,5 @@
 import {
   DotsHorizontalIcon,
-  ShieldCheckIcon,
   ShieldExclamationIcon,
   BanIcon,
 } from '@heroicons/react/outline';
@@ -32,6 +31,7 @@ export const DocumentRow = ({
   checked,
   onClick,
   onBuildContextMenu,
+  testClassId,
 }: DriveItemProps) => {
   const history = useHistory();
   const [hover, setHover] = useState(false);
@@ -52,7 +52,8 @@ export const DocumentRow = ({
         (checked
           ? (notSafe ? 'bg-rose-500' : 'bg-blue-500') + ' bg-opacity-10 hover:bg-opacity-25'
           : 'hover:bg-zinc-500 hover:bg-opacity-10 ') +
-        (className || '')
+        (className || '') +
+        ` testid:${testClassId}`
       }
       id={`DR-${item.id}`}
       onMouseEnter={() => setHover(true)}
@@ -102,12 +103,13 @@ export const DocumentRow = ({
         </div>
       )}
       <div className="shrink-0 ml-auto md:ml-4">
-        <Menu menu={onBuildContextMenu}>
+        <Menu menu={onBuildContextMenu} testClassId="document-row-menu">
           <Button
             theme={'secondary'}
             size="sm"
             className={'!rounded-full '}
             icon={DotsHorizontalIcon}
+            testClassId="document-row-button-open-menu"
           />
         </Menu>
       </div>

tdrive/frontend/src/app/views/client/body/drive/documents/folder-row.tsx

@@ -17,6 +17,7 @@ export const FolderRow = ({
   checked,
   onClick,
   onBuildContextMenu,
+  testClassId,
 }: DriveItemProps) => {
   const [hover, setHover] = useState(false);
 
@@ -28,7 +29,8 @@ export const FolderRow = ({
         (checked
           ? 'bg-blue-500 bg-opacity-10 hover:bg-opacity-25 '
           : 'hover:bg-zinc-500 hover:bg-opacity-10 ') +
-        (className || '')
+        (className || '') +
+        ` testid:${testClassId}`
       }
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
@@ -58,12 +60,13 @@ export const FolderRow = ({
         <BaseSmall>{formatBytes(item.size)}</BaseSmall>
       </div>
       <div className="shrink-0 ml-4">
-        <Menu menu={onBuildContextMenu}>
+        <Menu menu={onBuildContextMenu} testClassId="folder-row-menu">
           <Button
             theme={'secondary'}
             size="sm"
             className={'!rounded-full '}
             icon={DotsHorizontalIcon}
+            testClassId="folder-row-button-open-menu"
           />
         </Menu>
       </div>

tdrive/frontend/src/app/views/client/body/drive/header-path.tsx

@@ -74,7 +74,7 @@ export const PathRender = ({
   const pathLength = (pathToRender || []).reduce((acc, curr) => acc + curr.name.length, 0);
 
   return (
-    <nav className="overflow-hidden whitespace-nowrap mr-2 pl-px inline-flex md:max-w-[50%] sm:max-w-[20%]">
+    <nav className="overflow-hidden whitespace-nowrap mr-2 pl-px inline-flex md:max-w-[50%] sm:max-w-[20%] testid:header-path">
       {pathLength < 70 ? (
         (pathToRender || [])?.map((a, i) => (
           <PathItem
@@ -136,7 +136,7 @@ const PathItem = ({
     <div className={`flex items-center ${!first ? 'overflow-hidden' : ''}`}>
       <a
         href="#"
-        className={`text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white ${!first ? 'overflow-hidden' : ''}`}
+        className={`text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white ${!first ? 'overflow-hidden' : ''} testid:header-path-item`}
         onClick={evt => {
           evt.preventDefault();
 

tdrive/frontend/src/app/views/client/body/drive/modals/confirm-delete/index.tsx

@@ -71,6 +71,7 @@ const ConfirmDeleteModalContent = ({ items }: { items: DriveItem[] }) => {
           setSelected({});
           setState({ ...state, open: false });
         }}
+        testClassId="confirm-delete-modal-button-delete"
       >
         Delete
       </Button>

tdrive/frontend/src/app/views/client/body/drive/modals/confirm-move/index.tsx

@@ -52,6 +52,7 @@ const ConfirmModalContent = () => {
         theme="primary"
         className="float-right"
         onClick={handleClose}
+        testClassId="confirm-modal-button-move"
       >
         <>{Languages.t('components.SelectorModalContent_move_to')} '{selected[0]?.name}'</>
       </Button>

tdrive/frontend/src/app/views/client/body/drive/modals/confirm-trash/index.tsx

@@ -74,6 +74,7 @@ const ConfirmTrashModalContent = ({ items }: { items: DriveItem[] }) => {
           await refresh("trash");
           setState({ ...state, open: false });
         }}
+        testClassId="cofirm-trash-modal-button-remove"
       >
         {Languages.t('components.ConfirmTrashModalContent_move_to_trash')}
       </Button>

tdrive/frontend/src/app/views/client/body/drive/modals/create/create-folder.tsx

@@ -43,6 +43,7 @@ export const CreateFolder = () => {
             }
           }}
           onChange={(e: any) => setName(e.target.value)}
+          testClassId="create-folder-input"
         />
       </div>
       <Button
@@ -50,6 +51,7 @@ export const CreateFolder = () => {
         loading={loading}
         className="mt-4 float-right"
         onClick={createFolderHandler}
+        testClassId="create-folder-button"
       >
         Create
       </Button>

tdrive/frontend/src/app/views/client/body/drive/modals/create/create-link.tsx

@@ -53,6 +53,7 @@ export const CreateLink = () => {
         placeholder={ Languages.t('components.create_link_modal.hint')}
         className="w-full mt-4"
         onChange={e => setName(e.target.value)}
+        testClassId="create-link-name-input"
       />
 
       <Input
@@ -60,6 +61,7 @@ export const CreateLink = () => {
         placeholder="https://example.com"
         className="w-full mt-4"
         onChange={e => setLink(e.target.value)}
+        testClassId="create-link-input"
       />
 
       <Button
@@ -70,6 +72,7 @@ export const CreateLink = () => {
           await createLink();
           setState({ ...state, open: false });
         }}
+        testClassId="create-link-button"
       >
         { Languages.t('components.create_link_modal.button')}
       </Button>

tdrive/frontend/src/app/views/client/body/drive/modals/create/index.tsx

@@ -82,11 +82,13 @@ export const CreateModal = ({
                 icon={<FolderAddIcon className="w-5 h-5" />}
                 text={Languages.t('components.create_modal.create_folder')}
                 onClick={() => setState({ ...state, type: 'folder' })}
+                testClassId="create-folder-option"
               />
               <CreateModalOption
                 icon={<LinkIcon className="w-5 h-5" />}
                 text={Languages.t('components.create_modal.create_link')}
                 onClick={() => setState({ ...state, type: 'link' })}
+                testClassId="create-link-option"
               />
 
               {(applications || [])
@@ -132,6 +134,7 @@ export const CreateModal = ({
                       onClick={() =>
                         addFromUrl(app.emptyFile.url, app.emptyFile.filename || app.emptyFile.name)
                       }
+                      testClassId={app.emptyFile.name}
                     />
                   );
                 })}
@@ -167,11 +170,11 @@ export const CreateModal = ({
   );
 };
 
-const CreateModalOption = (props: { icon: ReactNode; text: string; onClick: () => void }) => {
+const CreateModalOption = (props: { testClassId?: string; icon: ReactNode; text: string; onClick: () => void }) => {
   return (
     <div
       onClick={props.onClick}
-      className="flex flex-row p-4 dark:bg-zinc-900 dark:text-white bg-zinc-100 hover:bg-opacity-75 cursor-pointer rounded-md m-2"
+      className={`flex flex-row p-4 dark:bg-zinc-900 dark:text-white bg-zinc-100 hover:bg-opacity-75 cursor-pointer rounded-md m-2 testid:${props.testClassId}`}
     >
       <div className="flex items-center justify-center">{props.icon}</div>
       <div className="grow flex items-center ml-2">

tdrive/frontend/src/app/views/client/body/drive/modals/properties/index.tsx

@@ -105,6 +105,7 @@ const PropertiesModalContent = ({ id, onClose, inPublicSharing }: { id: string;
               }
             }}
             placeholder={Languages.t('components.PropertiesModalContent_place_holder')}
+            testClassId="properties-modal-input-update-name"
           />
         }
       />
@@ -115,6 +116,7 @@ const PropertiesModalContent = ({ id, onClose, inPublicSharing }: { id: string;
         theme="primary"
         loading={loading}
         onClick={doSave}
+        testClassId="properties-modal-button-update-name"
       >
         {Languages.t('components.PropertiesModalContent_update_button')}
       </Button>

tdrive/frontend/src/app/views/client/body/drive/modals/public-link/copy-link-button.tsx

@@ -26,7 +26,8 @@ export const CopyLinkButton = (props: {
       disabled={!haveTextToCopy}
       theme={didJustCompleteACopy ? "green" : "primary"}
       className="justify-center w-64"
-      >
+      testClassId="copy-link-button"
+    >
       { didJustCompleteACopy
         ? <CheckCircleIcon className="w-5 mr-2" />
         : <LinkIcon className="w-5 mr-2" />

tdrive/frontend/src/app/views/client/body/drive/modals/public-link/expiry-editor-row.tsx

@@ -130,6 +130,7 @@ export const ExpiryEditorRow = (props: {
                 else if (e.key == 'Enter')
                   confirmSaveExpiry(currentEditedValue);
               }}
+              testClassId="expiry-editor-row-expired-date"
             />
             <Button
               disabled={disabled}
@@ -137,7 +138,8 @@ export const ExpiryEditorRow = (props: {
               size="sm"
               className="max-w-xs mr-2 mt-1"
               onClick={() => confirmSaveExpiry(currentEditedValue)}
-              >
+              testClassId="expiry-editor-row-button-confirm"
+            >
               {Languages.t('components.public-link-security_field_confirm_edit')}
             </Button>
           </>
@@ -153,7 +155,8 @@ export const ExpiryEditorRow = (props: {
               } else
                 confirmSaveExpiry(0);
             }}
-            />
+            testClassId="expiry-editor-row-checkbox"
+          />
       }
       />
     <ConfirmModal

tdrive/frontend/src/app/views/client/body/drive/modals/public-link/index.tsx

@@ -78,7 +78,8 @@ const ChangePublicLinkAccessLevelRow = (props: {
           level={props.level}
           hiddenLevels={['remove']}
           onChange={props.onChange}
-          />
+          testClassId="public-link-access-level-dropdown"
+        />
       }
       />
   );
@@ -101,7 +102,8 @@ const SwitchToAdvancedSettingsRow = (props: {
           if (!props.disabled)
             props.onShowAdvancedScreen(true);
         }}
-        >
+        testClassId="public-link-access-advance-switcher"
+      >
         {Languages.t("components.public-link-security-change")}
       </A>
     }
@@ -126,58 +128,58 @@ const PublicLinkModalContent = (props: {
   return (
     <ModalContent
       title={
-          <>
+        <>
-            {Languages.t('components.public-link-security-title') + ' '}
+          {Languages.t('components.public-link-security-title') + ' '}
-            <strong>{item?.name}</strong>
+          <strong>{item?.name}</strong>
-          </>
+        </>
-        }
+      }
-      >
+    >
-        <div className="rounded-md border dark:border-zinc-700 my-5 mb-8">
+      <div className="rounded-md border dark:border-zinc-700 my-5 mb-8">
-          <ChangePublicLinkAccessLevelRow
+        <ChangePublicLinkAccessLevelRow
-            disabled={loading}
+          disabled={loading}
-            level={item?.access_info?.public?.level || 'none'}
+          level={item?.access_info?.public?.level || 'none'}
-            onChange={level => {
+          onChange={level => {
-              item && update(changePublicLink(item, { level }));
+            item && update(changePublicLink(item, { level }));
-            }}
+          }}
-            />
-          <SwitchToAdvancedSettingsRow
-              disabled={!havePublicLink}
-              onShowAdvancedScreen={props.onShowAdvancedScreen}
           />
-        </div>
+        <SwitchToAdvancedSettingsRow
+          disabled={!havePublicLink}
+          onShowAdvancedScreen={props.onShowAdvancedScreen}
+        />
+      </div>
 
-        <div className="flex flex-row place-content-end my-4">
+      <div className="flex flex-row place-content-end my-4">
-          <CopyLinkButton textToCopy={havePublicLink && publicLink} />
+        <CopyLinkButton textToCopy={havePublicLink && publicLink} />
-        </div>
+      </div>
 
-        <Modal
+      <Modal
-          open={props.isOnAdvancedScreen}
+        open={props.isOnAdvancedScreen}
-          onClose={() => { props.onShowAdvancedScreen(false); }}
+        onClose={() => { props.onShowAdvancedScreen(false); }}
-          >
+      >
-          <ModalContent
+        <ModalContent
-            title={
+          title={
-              <>
+            <>
-                {Languages.t('components.public-link-security-title') + ' '}
+              {Languages.t('components.public-link-security-title') + ' '}
-                <strong>{item?.name}</strong>
+              <strong>{item?.name}</strong>
-              </>
+            </>
-            }
+          }
-            >
+        >
-              <div className='my-4'><Subtitle>{Languages.t('components.public-link-security')}</Subtitle></div>
+          <div className='my-4'><Subtitle>{Languages.t('components.public-link-security')}</Subtitle></div>
-              <div className={Styles.RoundedBorderSection}>
+          <div className={Styles.RoundedBorderSection}>
-                <PublicLinkAccessOptions
+            <PublicLinkAccessOptions
-                  disabled={loading || access !== 'manage'}
+              disabled={loading || access !== 'manage'}
-                  password={item?.access_info?.public?.password}
+              password={item?.access_info?.public?.password}
-                  expiration={item?.access_info?.public?.expiration}
+              expiration={item?.access_info?.public?.expiration}
-                  onChangePassword={async (password: string) => {
+              onChangePassword={async (password: string) => {
-                    item && await update(changePublicLink(item, { password: password || '' }));
+                item && await update(changePublicLink(item, { password: password || '' }));
-                  }}
+              }}
-                  onChangeExpiration={async (expiration: number) => {
+              onChangeExpiration={async (expiration: number) => {
-                    item && await update(changePublicLink(item, { expiration }));
+                item && await update(changePublicLink(item, { expiration }));
-                  }}
+              }}
-                  />
+            />
-              </div>
+          </div>
-            </ModalContent>
+        </ModalContent>
-        </Modal>
+      </Modal>
-      </ModalContent>
+    </ModalContent>
   );
 }

tdrive/frontend/src/app/views/client/body/drive/modals/public-link/password-editor-row.tsx

@@ -112,6 +112,7 @@ return <>
                 else if (e.key == 'Enter')
                   confirmSavePassword(currentEditedPassword);
               }}
+              testClassId="pasword-editor-row-editting-password"
             />
             <Button
               disabled={disabled}
@@ -119,7 +120,8 @@ return <>
               size="sm"
               className="max-w-xs mr-2 mt-1"
               onClick={() => confirmSavePassword(currentEditedPassword)}
-              >
+              testClassId="password-editor-row-button-confirm"
+            >
               {Languages.t('components.public-link-security_field_confirm_edit')}
             </Button>
           </>
@@ -135,7 +137,8 @@ return <>
               } else
                 confirmSavePassword("");
             }}
-            />
+            testClassId="password-editor-row-checkbox"
+          />
       }
       />
 
@@ -145,9 +148,8 @@ return <>
       text={Languages.t("components.public-link-security_password_removal_body")}
       buttonOkTheme='primary'
       buttonOkLabel='components.public-link-security_password_removal_confirm'
-
       onClose={() => setIsConfirmingPasswordRemoval(false)}
       onOk={() => savePassword("")}
-      />
+    />
   </>;
 }

tdrive/frontend/src/app/views/client/body/drive/modals/public-link/public-link-access-options.tsx

@@ -14,13 +14,13 @@ export const PublicLinkAccessOptions = (props: {
       password={props.password}
       onChangePassword={props.onChangePassword}
       isLinkExpired={!!props.expiration && props.expiration < Date.now()}
-      />
+    />
     <ExpiryEditorRow
       disabled={props.disabled}
       value={props.expiration ?? 0}
       onChange={props.onChangeExpiration}
       isLinkPasswordProtected={!!props.password?.length}
-      />
+    />
   </>
 );
 

tdrive/frontend/src/app/views/client/body/drive/modals/selector/index.tsx

@@ -138,6 +138,7 @@ const SelectorModalContent = (key: any) => {
           setState({ ...state, open: false });
           setLoading(false);
         }}
+        testClassId="selector-modal-button"
       >
         {selected.length === 0 ? (
           <>{Languages.t('components.SelectorModalContent_no_items')}</>

tdrive/frontend/src/app/views/client/body/drive/modals/update-access/internal-users-access.tsx

@@ -113,6 +113,7 @@ export const InternalUsersAccessManager = ({
                   }}
                   value={searchString}
                   inputRef={inputElement}
+                  testClassId="access-management-search-users"
                 />
               )}
             />
@@ -125,6 +126,7 @@ export const InternalUsersAccessManager = ({
               hiddenLevels={['remove']}
               level={level}
               onChange={level => setLevel(level)}
+              testClassId="access-management-dropdown"
             />
           </div>
         </div>
@@ -179,7 +181,8 @@ export const InternalUsersAccessManager = ({
           size="sm"
           className='text-center'
           onClick={onCloseModal}
-          >
+          testClassId="access-management-public-link-security-field-confirm-edit"
+        >
           {Languages.t('components.public-link-security_field_confirm_edit')}
         </Button>
       </div>
@@ -209,7 +212,8 @@ const UserAccessLevel = (props: {
         ? <Button
             disabled={loading || props.disabled || user?.id === currentUser?.id}
             size="sm"
-            >
+            testClassId={`user-access-button-${props.isSearchResultAdd}`}
+          >
             {Languages.t('components.user_picker.modal.result_add.' + props.isSearchResultAdd)}
           </Button>
 
@@ -218,7 +222,8 @@ const UserAccessLevel = (props: {
             noRedWhenLevelNone={true}
             level={(item && getUserAccessLevel(item, props.userId)) || "none"}
             onChange={level => item && update(changeUserAccess(item, props.userId, level === 'remove' ? false : level))}
-            />
+            testClassId="user-access-dropdown"
+          />
       }
     />
   );

tdrive/frontend/src/app/views/client/body/drive/modals/upload/index.tsx

@@ -74,11 +74,13 @@ export const UploadModal = ({
                       icon={<DocumentDownloadIcon className="w-5 h-5" />}
                       text={Languages.t('components.create_modal.upload_files')}
                       onClick={() => selectFromDevice()}
+                      testClassId="upload-file-from-device"
                   />
                   <CreateModalOption
                       icon={<FolderDownloadIcon className="w-5 h-5" />}
                       text={Languages.t('components.create_modal.upload_folders')}
                       onClick={() => selectFolderFromDevice()}
+                      testClassId="upload-folder-from-device"
                   />
                 </div>
           </Transition>
@@ -88,11 +90,11 @@ export const UploadModal = ({
   );
 };
 
-const CreateModalOption = (props: { icon: ReactNode; text: string; onClick: () => void }) => {
+const CreateModalOption = (props: { icon: ReactNode; text: string; onClick: () => void; testClassId?: string; }) => {
   return (
     <div
       onClick={props.onClick}
-      className="flex flex-row p-4 dark:bg-zinc-900 dark:text-white bg-zinc-100 hover:bg-opacity-75 cursor-pointer rounded-md m-2"
+      className={`flex flex-row p-4 dark:bg-zinc-900 dark:text-white bg-zinc-100 hover:bg-opacity-75 cursor-pointer rounded-md m-2 testid:${props.testClassId}`}
     >
       <div className="flex items-center justify-center">{props.icon}</div>
       <div className="grow flex items-center ml-2">

tdrive/frontend/src/app/views/client/body/drive/modals/versions/index.tsx

@@ -64,6 +64,7 @@ const VersionModalContent = ({ id }: { id: string }) => {
           await uploadVersion(file);
           await refresh(id);
         }}
+        testClassId="version-modal-upload-zone"
       >
         {access !== 'read' && (
           <div
@@ -80,6 +81,7 @@ const VersionModalContent = ({ id }: { id: string }) => {
                   theme="primary"
                   onClick={() => uploadZoneRef.current?.open()}
                   loading={loading}
+                  testClassId="button-create-version"
                 >
                   {Languages.t('components.VersionModalContent_create')}
                 </Button>
@@ -113,6 +115,7 @@ const VersionModalContent = ({ id }: { id: string }) => {
               <Button
                 theme="outline"
                 onClick={() => download(id, item.av_status === 'malicious', version.id)}
+                testClassId="button-download-version"
               >
                 {Languages.t('components.VersionModalContent_donwload')}
               </Button>

tdrive/frontend/src/app/views/client/common/search.tsx

@@ -44,6 +44,7 @@ export default (): JSX.Element => {
               readOnly
               placeholder={Languages.t('scenes.client.main_view.main_header.search_input')}
               onClick={() => setOpen()}
+              testClassId="header-search-input"
             />
           )}
         />

tdrive/frontend/src/app/views/client/side-bar/actions.tsx

@@ -33,6 +33,7 @@ export const CreateModalWithUploadZones = ({ initialParentId }: { initialParentI
       <UploadZone
         overClassName={'!hidden'}
         className="hidden"
+        testClassId="create-modal-upload-file-zone"
         disableClick
         parent={''}
         multiple={true}
@@ -51,6 +52,7 @@ export const CreateModalWithUploadZones = ({ initialParentId }: { initialParentI
       <UploadZone
         overClassName={'!hidden'}
         className="hidden"
+        testClassId="create-modal-upload-folder-zone"
         disableClick
         parent={''}
         multiple={true}
@@ -135,6 +137,7 @@ export default () => {
                 theme="danger"
                 className="w-full mb-2 justify-center"
                 disabled={!(trashChildren.length > 0)}
+                testClassId="create-modal-in-trash-button-empty-trash"
               >
                 <TruckIcon className="w-5 h-5 mr-2" /> { Languages.t('components.side_menu.buttons.empty_trash') }
               </Button>
@@ -158,6 +161,7 @@ export default () => {
                     parentId,
                   });
                 }}
+                testClassId="sidebar-action-upload-zone"
               />
 
               <Button
@@ -166,6 +170,7 @@ export default () => {
                 theme="primary"
                 className="w-full mb-2 justify-center"
                 style={{ boxShadow: '0 0 10px 0 rgba(0, 122, 255, 0.5)' }}
+                testClassId="sidebar-action-button-empty-trash"
               >
                 <UploadIcon className="w-5 h-5 mr-2" /> {Languages.t('components.side_menu.buttons.upload')}
               </Button>
@@ -174,6 +179,7 @@ export default () => {
                 size="lg"
                 theme="secondary"
                 className="w-full mb-2 justify-center"
+                testClassId="sidebar-action-button-open-modal"
               >
                 <PlusIcon className="w-5 h-5 mr-2" /> {Languages.t('components.side_menu.buttons.create')}
               </Button>

tdrive/frontend/src/app/views/client/viewer/drive-preview.tsx

@@ -161,6 +161,7 @@ export const DrivePreview: React.FC<DrivePreviewProps> = ({ items }) => {
                   size="lg"
                   icon={ArrowLeftIcon}
                   onClick={ handleSwitchLeft }
+                  testClassId="drive-preview-button-switch-left"
                 />
                 <Button
                   iconSize="lg"
@@ -169,6 +170,7 @@ export const DrivePreview: React.FC<DrivePreviewProps> = ({ items }) => {
                   size="lg"
                   icon={ArrowRightIcon}
                   onClick={ handleSwitchRight }
+                  testClassId="drive-preview-button-switch-right"
                 />
               </>
             }
@@ -181,6 +183,7 @@ export const DrivePreview: React.FC<DrivePreviewProps> = ({ items }) => {
               onClick= {() => {
                 download && (window.location.href = download);
               }}
+              testClassId="drive-preview-button-download"
             />
           </div>
         </div>

tdrive/frontend/src/app/views/client/viewer/images/controls.tsx

@@ -12,6 +12,7 @@ export default () => {
         size="lg"
         icon={ZoomOutIcon}
         onClick={() => getImageControls().zoomOut()}
+        testClassId="image-control-button-zoom-out"
       />
       <Button
         iconSize="lg"
@@ -20,6 +21,7 @@ export default () => {
         size="lg"
         icon={ZoomInIcon}
         onClick={() => getImageControls().zoomIn()}
+        testClassId="image-control-button-zoom-in"
       />
       <Button
         iconSize="lg"
@@ -28,6 +30,7 @@ export default () => {
         size="lg"
         icon={RotateCwIcon}
         onClick={() => getImageControls().rotateCw()}
+        testClassId="image-control-button-rotate"
       />
     </>
   );

tdrive/frontend/src/app/views/client/viewer/other/controls.tsx

@@ -43,6 +43,7 @@ export default () => {
               );
             }
           }}
+          testClassId="other-control-button-edit"
         >
           {Languages.t('scenes.apps.drive.viewer.edit_with_button', [
             candidates[0].app?.identity.name,
@@ -74,6 +75,7 @@ export default () => {
               { margin: 0 },
             );
           }}
+          testClassId="other-control-button-open"
         >
           {Languages.t('scenes.apps.drive.viewer.open_with_button')}
         </Button>

tdrive/frontend/src/app/views/join/index.tsx

@@ -124,6 +124,7 @@ export default (): JSX.Element => {
                   loading={busy}
                   type="primary"
                   onClick={onCreateCompanyBtnClick}
+                  className="testid:button-create-company"
                 >
                   {Languages.t('scenes.join.create_the_company_button')}
                 </Button>
@@ -163,6 +164,7 @@ export default (): JSX.Element => {
                         loading={busy}
                         type="primary"
                         onClick={onJoinAccountBtnClick}
+                        className="testid:button-login-first"
                       >
                         {Languages.t('scenes.join.login_first_button')}
                       </Button>
@@ -172,6 +174,7 @@ export default (): JSX.Element => {
                         loading={busy}
                         type="primary"
                         onClick={onJoinAccountBtnClick}
+                        className="testid:button-join-team"
                       >
                         {Languages.t('scenes.join.join_the_team_button')}
                       </Button>

tdrive/frontend/src/app/views/login/internal/login-view/login-view.jsx

@@ -80,6 +80,7 @@ export default class LoginView extends Component {
                   }
                 }}
                 onChange={evt => this.setState({ form_login: evt.target.value })}
+                testClassId="login-input-username"
               />
 
               <Input
@@ -100,6 +101,7 @@ export default class LoginView extends Component {
                   }
                 }}
                 onChange={evt => this.setState({ form_password: evt.target.value })}
+                testClassId="login-input-password"
               />
 
               {this.state.login.login_error && (
@@ -121,6 +123,7 @@ export default class LoginView extends Component {
                     remember_me: true,
                   })
                 }
+                testClassId="login-button-submit"
               >
                 {this.state.i18n.t('scenes.login.home.login_btn')}
               </Button>

tdrive/frontend/src/app/views/login/internal/signin/signin.jsx

@@ -63,12 +63,12 @@ export default class Signin extends Component {
           </div>
 
           {this.state.login.error_subscribe_username && this.state.username && (
-            <div className={'error text bottom-margin'}>
+            <div className={'error text bottom-margin testid:signin-username-exist-text'}>
               {this.state.i18n.t('scenes.login.create_account.username_already_exist')}
             </div>
           )}
           {this.state.username && this.state.errorUsername && (
-            <div className={'text error bottom-margin'}>
+            <div className={'text error bottom-margin testid:signin-fill-in-username'}>
               {this.state.i18n.t('scenes.login.create_account.fill_in_username', [])}
             </div>
           )}
@@ -91,6 +91,7 @@ export default class Signin extends Component {
             )}
             value={this.state.firstName}
             onChange={evt => this.setState({ firstName: evt.target.value })}
+            testClassId="signin-input-first-name"
           />
           <Input
             id="last_name_create"
@@ -107,18 +108,19 @@ export default class Signin extends Component {
             )}
             value={this.state.lastName}
             onChange={evt => this.setState({ lastName: evt.target.value })}
+            testClassId="signin-input-last-name"
           />
 
           <br />
           <br />
 
           {this.state.login.error_subscribe_mailalreadyused && this.state.email && (
-            <div className="text error bottom-margin">
+            <div className="text error bottom-margin testid:signin-email-used-text">
               {this.state.i18n.t('scenes.login.create_account.email_used')}
             </div>
           )}
           {this.state.errorMail && (
-            <div className={'text error bottom-margin'}>
+            <div className={'text error bottom-margin testid:signin-fill-in-email-text'}>
               {this.state.i18n.t('scenes.login.create_account.fill_in_email')}
             </div>
           )}
@@ -137,6 +139,7 @@ export default class Signin extends Component {
             placeholder={this.state.i18n.t('scenes.login.create_account.email')}
             value={this.state.email}
             onChange={evt => this.setState({ email: evt.target.value })}
+            testClassId="signin-input-email"
           />
 
           {this.state.errorPassword && (
@@ -159,6 +162,7 @@ export default class Signin extends Component {
             placeholder={this.state.i18n.t('scenes.login.create_account.password')}
             value={this.state.password}
             onChange={evt => this.setState({ password: evt.target.value })}
+            testClassId="signin-input-password"
           />
           <div className="bottom">
             {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
@@ -173,6 +177,7 @@ export default class Signin extends Component {
               value={this.state.i18n.t('general.continue')}
               loading={this.state.login.login_loading}
               loadingTimeout={2000}
+              testClassId="signin-button-continue"
             />
           </div>
         </div>
@@ -207,6 +212,7 @@ export default class Signin extends Component {
             value={'Send again'}
             loading={this.state.login.login_loading}
             loadingTimeout={2000}
+            testClassId="signin-button-subscribe-mail"
           />
         </div>
       );