🎨 [element-identifier]: Update test id convention

linagora · Dec 18, 2024 · 80423d9 · 80423d9
1 parent 101ffd1
commit 80423d9
Show file tree

Hide file tree

Showing 52 changed files with 220 additions and 180 deletions.
diff --git a/tdrive/frontend/src/app/atoms/avatar/index.tsx b/tdrive/frontend/src/app/atoms/avatar/index.tsx
@@ -40,7 +40,8 @@ export default function Avatar(props: AvatarProps) {
   const fontSize = fontSizes[props.size || 'md'];
   const addedClassName = props.className || '';
   const avatarTitle = props.title || '';
-  const restProps = _.omit(props, 'size', 'type', 'avatar', 'title', 'className', 'icon');
+  const testClassId = props.testClassId;
+  const restProps = _.omit(props, 'size', 'type', 'avatar', 'title', 'className', 'icon', 'testClassId');
 
   let className = `w-${avatarSize} h-${avatarSize} ${
     avatarType === 'circle' ? 'rounded-full' : 'rounded-sm'
@@ -65,17 +66,19 @@ export default function Avatar(props: AvatarProps) {
     ? {}
     : { backgroundImage: `url('${getGradient(props.title || '')}')` };
 
+  const testId = testClassId ? `testid:${testClassId}` : ''
+
   if (props.icon) {
     className += ' ';
     return (
       <div
-        {..._.omit(restProps, 'testClassId')}
+        {...restProps}
         style={style}
         className={
           className +
           ' text-white overflow-hidden flex items-center justify-center ' +
           addedClassName + ' ' +
-          (props.testClassId ? `testid:${props.testClassId}` : '')
+          testId
         }
       >
         {props.icon}
@@ -85,18 +88,18 @@ export default function Avatar(props: AvatarProps) {
 
   if (props.avatar) {
     return (
-      <div {..._.omit(restProps, 'testClassId')}>
+      <div {...restProps}>
         <img
           alt={props.title}
           src={props.avatar}
-          className={className + ' object-cover ' + addedClassName + ' ' + (props.testClassId ? `testid:${props.testClassId}` : '')}
+          className={className + ' object-cover ' + addedClassName + ' ' + testId}
         />
       </div>
     );
   }
 
   return (
-    <div className={className + ' ' + addedClassName + ' ' + (props.testClassId ? `testid:${props.testClassId}` : '')} {..._.omit(restProps, 'testClassId')} style={style}>
+    <div className={className + ' ' + addedClassName + ' ' + testId} {...restProps} style={style}>
       <div className={lettersClass}>{letters.toUpperCase()}</div>
     </div>
   );

diff --git a/tdrive/frontend/src/app/atoms/input/input-checkbox.tsx b/tdrive/frontend/src/app/atoms/input/input-checkbox.tsx
@@ -8,10 +8,13 @@ export const Checkbox = (props: {
   value?: boolean;
   className?: string;
   disabled?: boolean;
+  testClassId?: string;
 }) => {
   const renderSwitch = () => {
     const className = props.className || '';
 
+    const testId = props.testClassId ? `testid:${props.testClassId}` : '';
+
     return (
       <div
         className={
@@ -22,7 +25,8 @@ export const Checkbox = (props: {
           ' ' +
           (props.disabled ? 'opacity-50' : 'cursor-pointer') +
           ' ' +
-          (className || '')
+          (className || '') + ' ' +
+          testId
         }
         onClick={() =>
           !props.label && !props.disabled && props.onChange && props.onChange(!props.value)

diff --git a/tdrive/frontend/src/app/atoms/loader/index.tsx b/tdrive/frontend/src/app/atoms/loader/index.tsx
@@ -1,7 +1,7 @@
 export const Loader = (props: { className?: string }) => {
   return (
     <svg
-      className={'animate-spin text-gray-400 inline ' + (props.className || '')}
+      className={'animate-spin text-gray-400 inline ' + (props.className || '') + ' testid:loader'}
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"

diff --git a/tdrive/frontend/src/app/atoms/modal/confirm.tsx b/tdrive/frontend/src/app/atoms/modal/confirm.tsx
@@ -30,7 +30,7 @@ export const ConfirmModal = (props: ConfirmModalProps) => {
     };
   }
   return <>
-    <Modal open={props.open} onClose={dialogCloseHandler()}>
+    <Modal className="testid:confirm-modal" open={props.open} onClose={dialogCloseHandler()}>
       <ModalContent
         title={props.title}
         text={props.text}
@@ -42,14 +42,14 @@ export const ConfirmModal = (props: ConfirmModalProps) => {
               className="ml-2"
               theme={props.buttonOkTheme || "danger"}
               onClick={dialogCloseHandler(true)}
-              testClassId="confirm-modal-button-confirm"
+              testClassId="button-confirm"
             >
               {Languages.t(props.buttonOkLabel)}
             </Button>
             <Button
               theme='default'
               onClick={dialogCloseHandler(false)}
-              testClassId="confirm-modal-button-cancel"
+              testClassId="button-cancel"
             >
               {Languages.t(props.buttonCancelLabel || "general.cancel")}
             </Button>

diff --git a/tdrive/frontend/src/app/components/banner/banner.tsx b/tdrive/frontend/src/app/components/banner/banner.tsx
@@ -15,6 +15,7 @@ type PropsType = {
   contentColumnStyle?: CSSProperties;
   className?: string;
   children?: JSX.Element | JSX.Element[];
+  testClassId?: string;
 };
 
 const Banner: FC<PropsType> = ({
@@ -27,20 +28,23 @@ const Banner: FC<PropsType> = ({
   style,
   contentColumnStyle,
   className,
+  testClassId,
 }) => {
   const headerStyle = {
     height: height ? height : 68,
     lineHeight: height ? `${height}px` : '68px',
     ...style,
   };
 
+  const testId = testClassId ? `testid:${testClassId}` : ''
+
   return (
-    <Layout.Header className={`banner-container ${type} ${className || ''}`} style={headerStyle}>
+    <Layout.Header className={`banner-container ${type} ${className || ''} ${testId}`} style={headerStyle}>
       <Row align="middle" justify="space-between" gutter={[0, 0]} style={headerStyle}>
         <Col /* ghost column */></Col>
         <Col style={contentColumnStyle}>{content || children || ''}</Col>
         <Col className="banner-col-icon">
-          {closable && <X size={16} className="icon" onClick={onClose} />}
+          {closable && <X size={16} className="icon testid:button-close" onClick={onClose} />}
         </Col>
       </Row>
     </Layout.Header>

diff --git a/tdrive/frontend/src/app/components/connection-indicator/connection-indicator.tsx b/tdrive/frontend/src/app/components/connection-indicator/connection-indicator.tsx
@@ -12,19 +12,19 @@ export default () => {
   const [{ connected, reconnecting }] = useRecoilState(ConnectedState);
 
   return (
-    <div className={'connection_indicator ' + (connected === false ? 'visible' : '')}>
+    <div className={'connection_indicator ' + (connected === false ? 'visible' : '') + ' testid:connection-indicator'}>
       {connected === false && reconnecting !== true && (
-        <div>
+        <div className="testid:disconnected-status">
           <ErrorOutlinedIcon /> <span>{Languages.t('general.connexion_status.disconnected')}</span>
         </div>
       )}
       {connected === false && reconnecting === true && (
-        <div>
+        <div className="testid:reconnect-status">
           <HourglassEmpty /> <span>{Languages.t('general.connexion_status.connecting')}</span>
         </div>
       )}
       {connected === true && (
-        <div>
+        <div className="testid:connected-status">
           <CheckCircleIcon /> <span>{Languages.t('general.connexion_status.connected')}</span>
         </div>
       )}

diff --git a/tdrive/frontend/src/app/components/file-uploads/pending-file-components/pending-file-row.tsx b/tdrive/frontend/src/app/components/file-uploads/pending-file-components/pending-file-row.tsx
@@ -76,7 +76,7 @@ export default ({ pendingFileState, pendingFile }: PropsType) => {
                   maxWidth: isPendingFileStatusPause(pendingFile.status) ? 130 : 160,
                   verticalAlign: 'middle',
                 }}
-                className="testid:pending-file-name"
+                className="testid:file-name"
               >
                 {capitalize(pendingFile?.originalFile.name)}
               </Text>
@@ -100,6 +100,7 @@ export default ({ pendingFileState, pendingFile }: PropsType) => {
           {pendingFile?.label ? (
             <Row justify="start" align="middle" wrap={false}>
               <Text
+                className="testid:file-label"
                 ellipsis
                 style={{
                   maxWidth: isPendingFileStatusPause(pendingFile.status) ? 130 : 160,
@@ -140,6 +141,7 @@ export default ({ pendingFileState, pendingFile }: PropsType) => {
                     ? Languages.t('general.resume')
                     : Languages.t('general.pause')
                 }
+                className="pending-file-row-tooltip-file-status"
               >
                 <Button
                   type="link"
@@ -158,7 +160,7 @@ export default ({ pendingFileState, pendingFile }: PropsType) => {
                     alignItems: 'center',
                     justifyContent: 'center',
                   }}
-                  className="testid:pending-file-button-status"
+                  className="testid:button-toggle-tooltip-status"
                 />
               </Tooltip>
             ) : (
@@ -187,22 +189,22 @@ export default ({ pendingFileState, pendingFile }: PropsType) => {
         >
           {!isPendingFileStatusSuccess(pendingFileState.status) &&
           !isPendingFileStatusError(pendingFileState.status) ? (
-            <Tooltip title={Languages.t('general.cancel')} placement="top">
+            <Tooltip title={Languages.t('general.cancel')} placement="top" className="testid:pending-file-row-tooltip-cancel">
               <Button
                 type="link"
                 shape="circle"
                 icon={<Trash2 size={16} color={'var(--black)'} />}
                 onClick={() => cancelUpload(pendingFileState.id)}
                 style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
-                className="testid:pending-file-button-cancel"
+                className="testid:button-toggle-tooltip-cancel"
               />
             </Tooltip>
           ) : (
             <div style={{ width: 32 }} />
           )}
         </Col>
       </Row>
-      <div className="file-progress-bar-container testid:pending-file-progress-bar">
+      <div className="file-progress-bar-container testid:progress-bar">
         <Progress
           type="line"
           className="file-progress-bar"

diff --git a/...e/frontend/src/app/components/file-uploads/pending-file-components/pending-files-list.tsx b/...e/frontend/src/app/components/file-uploads/pending-file-components/pending-files-list.tsx
@@ -49,7 +49,7 @@ export default ({ pendingFilesState, visible }: PropsType) => {
   }, [getOnePendingFile, pendingFilesState]);
 
   return pendingFilesState.length > 0 ? (
-    <Layout className={'pending-files-list-layout ' + (visible ? 'visible' : '')}>
+    <Layout className={'pending-files-list-layout ' + (visible ? 'visible' : '') + ' testid:pending-file-list'}>
       <Header
         className={classNames('pending-files-list-header')}
         onClick={() => setHiddenPendingFiles(!hiddenPendingFiles)}

diff --git a/tdrive/frontend/src/app/components/modal/modal-component.tsx b/tdrive/frontend/src/app/components/modal/modal-component.tsx
@@ -44,6 +44,7 @@ export default () => {
       footer={null}
       destroyOnClose={true}
       width={ModalManager.getPosition()?.size?.width || '700px'}
+      className={`testid:${ModalManager.getModalTestClassId()}`}
     >
       {component}
     </Modal>

diff --git a/tdrive/frontend/src/app/components/modal/modal-manager.ts b/tdrive/frontend/src/app/components/modal/modal-manager.ts
@@ -20,7 +20,7 @@ class ModalManagerService extends Observable {
     this.notify();
   }
 
-  open(component: any, position: any, canClose?: boolean, clearState?: any) {
+  open(component: any, position: any, canClose?: boolean, clearState?: any, modalTestClassId?: string) {
     this.close();
 
     this.mountedComponent = null;
@@ -33,7 +33,7 @@ class ModalManagerService extends Observable {
       if (clearState) {
         delete this.popupStates[clearState];
       }
-      this.component.push({ component: component, canClose: canClose !== false });
+      this.component.push({ component: component, canClose: canClose !== false, modalTestClassId });
       this.notify();
     }, 100);
   }
@@ -76,6 +76,9 @@ class ModalManagerService extends Observable {
   getComponent() {
     return this.component[this.component.length - 1]?.component || '';
   }
+  getModalTestClassId() {
+    return this.component[this.component.length - 1]?.modalTestClassId || '';
+  }
 }
 
 const ModalManager = ModalManagerService.service;

diff --git a/tdrive/frontend/src/app/components/new-version/new-version-component.tsx b/tdrive/frontend/src/app/components/new-version/new-version-component.tsx
@@ -57,6 +57,8 @@ const NewVersionComponent = (): JSX.Element => {
             size: { width: '600px' },
           },
           false,
+          undefined,
+          'modal-new-version'
         );
       }
 
@@ -80,9 +82,10 @@ const NewVersionComponent = (): JSX.Element => {
         <Banner
           height={32}
           type="primary"
+          testClassId="new-version-banner"
           content={
             <Row align="middle" gutter={[8, 0]}>
-              <Col>
+              <Col className="testid:new-version-text">
                 <b>{Languages.t('components.newversion.new_version_component.row.part_1')}</b>,{' '}
                 {Languages.t('components.newversion.new_version_component.row.part_2')}{' '}
                 <Emojione type="rocket" />
@@ -92,6 +95,7 @@ const NewVersionComponent = (): JSX.Element => {
                   style={{ color: 'var(--white)' }}
                   underline
                   onClick={() => window.location.reload()}
+                  className="testid:button-reload"
                 >
                   {Languages.t('components.newversion.new_version_component.link')}
                 </Typography.Link>

diff --git a/tdrive/frontend/src/app/components/new-version/new-version-modal.tsx b/tdrive/frontend/src/app/components/new-version/new-version-modal.tsx
@@ -17,7 +17,7 @@ const NewVersionModal = () => {
         </>
       }
       footer={
-        <Button type="primary" onClick={onClickBtn}>
+        <Button type="primary" onClick={onClickBtn} className="testid:button-reload">
           {Languages.t('scenes.app.header.disconnected.reload')}
         </Button>
       }

diff --git a/tdrive/frontend/src/app/components/object-modal/object-modal.tsx b/tdrive/frontend/src/app/components/object-modal/object-modal.tsx
@@ -38,7 +38,7 @@ const ObjectModal: FC<PropsType> = (props: PropsType) => {
       hasSider={false}
       style={props.style || {}}
     >
-      <Header className="modal-layout-header" style={props.headerStyle || {}}>
+      <Header className="modal-layout-header testid:modal-header" style={props.headerStyle || {}}>
         <Row justify="space-between" align="middle" className="modal-layout-row" wrap={false}>
           {props.titleCenter && <Col style={{ width: 32 }}></Col>}
           {props.title && (
@@ -62,7 +62,7 @@ const ObjectModal: FC<PropsType> = (props: PropsType) => {
                 type="times"
                 className={`m-icon-small square-button ${
                   props.headerStyle?.backgroundColor ? 'red' : ''
-                }`}
+                } testid:button-close-modal`}
                 onClick={() => (props?.onClose ? props.onClose() : ModalManager.closeAll())}
               />
             </Col>
@@ -71,7 +71,7 @@ const ObjectModal: FC<PropsType> = (props: PropsType) => {
       </Header>
       {props.children && <Content style={props.contentStyle}>{props.children}</Content>}
       {props.footer && (
-        <Footer className="modal-layout-footer">
+        <Footer className="modal-layout-footer testid:modal-footer">
           {!props.hideFooterDivider && (
             <Divider className="y-margin" style={props.footerDividerStyle} />
           )}

diff --git a/tdrive/frontend/src/app/components/search-popup/parts/drive-item-result.tsx b/tdrive/frontend/src/app/components/search-popup/parts/drive-item-result.tsx
@@ -69,7 +69,7 @@ export default (props: { driveItem: DriveItem & { user?: UserType }}) => {
             theme="outline"
             className="w-9 !p-0 flex items-center justify-center ml-2 rounded-full border-none"
             onClick={() => onDriveItemDownloadClick(file)}
-            testClassId="drive-item-button-download"
+            testClassId="button-download"
           >
             <DownloadIcon className="text-blue-500 w-6 h-6" />
           </Button>
@@ -96,21 +96,21 @@ export const FileResultMedia = (props: {
 
   if (file.is_directory) {
     return (
-      <div className={'relative flex bg-blue-100 rounded-md ' + (props.className || '')}>
-        <FolderIcon className="w-10 h-10 m-auto text-blue-500" />
+      <div className={'relative flex bg-blue-100 rounded-md ' + (props.className || '') + ' testid:folder-result-media'}>
+        <FolderIcon className="w-10 h-10 m-auto text-blue-500 testid:folder-icon" />
       </div>
     );
   }
 
   return (
-    <div className={'relative flex bg-zinc-200 rounded-md ' + (props.className || '')}>
+    <div className={'relative flex bg-zinc-200 rounded-md ' + (props.className || '') + ' testid:file-result-media'}>
       <Media
         size={props.size || 'md'}
         url={url}
         duration={type === 'video' ? extension : undefined}
       />
       {(!['image', 'video'].includes(type) || !url) && (
-          <DocumentIcon item={file} fileType={type} className={iconClassName} />
+        <DocumentIcon item={file} fileType={type} className={iconClassName} />
       )}
     </div>
   );

diff --git a/tdrive/frontend/src/app/components/search-popup/search-input.tsx b/tdrive/frontend/src/app/components/search-popup/search-input.tsx
@@ -38,7 +38,7 @@ export const SearchInput = () => {
             value={input.query}
             className={className}
             placeholder={Languages.t('scenes.app.mainview.quick_search_placeholder')}
-            testClassId="search-input-quick-search"
+            testClassId="input-quick-search"
           />
         )}
       />