🎨 [element-identifier]: Update test id convention

2024-12-12 13:33:58 +07:00
parent 6d3be1fa28
commit c59545aff1
52 changed files with 220 additions and 180 deletions
@@ -15,6 +15,7 @@ type PropsType = {
  contentColumnStyle?: CSSProperties;
  className?: string;
  children?: JSX.Element | JSX.Element[];
+  testClassId?: string;
 };

 const Banner: FC<PropsType> = ({
@@ -27,6 +28,7 @@ const Banner: FC<PropsType> = ({
  style,
  contentColumnStyle,
  className,
+  testClassId,
 }) => {
  const headerStyle = {
    height: height ? height : 68,
@@ -34,13 +36,15 @@ const Banner: FC<PropsType> = ({
    ...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>
@@ -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>
      )}
@@ -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,14 +189,14 @@ 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>
          ) : (
@@ -202,7 +204,7 @@ export default ({ pendingFileState, pendingFile }: PropsType) => {
          )}
        </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"
@@ -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)}
@@ -44,6 +44,7 @@ export default () => {
      footer={null}
      destroyOnClose={true}
      width={ModalManager.getPosition()?.size?.width || '700px'}
+      className={`testid:${ModalManager.getModalTestClassId()}`}
    >
      {component}
    </Modal>
@@ -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;
@@ -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>
@@ -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>
      }
@@ -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} />
          )}
@@ -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>
  );
@@ -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"
          />
        )}
      />