feat(tests): add tests for mobile explorer rename

toeverything · Oct 31, 2024 · acf575b · acf575b
1 parent 7a52a71
commit acf575b
Show file tree

Hide file tree

Showing 19 changed files with 267 additions and 23 deletions.
diff --git a/packages/frontend/component/src/components/member-components/invite-modal.tsx b/packages/frontend/component/src/components/member-components/invite-modal.tsx
@@ -61,7 +61,7 @@ export const InviteModal = ({
       confirmButtonOptions={{
         loading: isMutating,
         variant: 'primary',
-        ['data-testid' as string]: 'confirm-enable-affine-cloud-button',
+        'data-testid': 'confirm-enable-affine-cloud-button',
       }}
       onConfirm={handleConfirm}
     >

diff --git a/packages/frontend/component/src/ui/button/button.tsx b/packages/frontend/component/src/ui/button/button.tsx
@@ -70,6 +70,7 @@ export interface ButtonProps
   tooltip?: TooltipProps['content'];
   tooltipShortcut?: TooltipProps['shortcut'];
   tooltipOptions?: Partial<Omit<TooltipProps, 'content' | 'shortcut'>>;
+  [key: `data-${string}`]: string;
 }
 
 const IconSlot = ({

diff --git a/packages/frontend/component/src/ui/input/row-input.tsx b/packages/frontend/component/src/ui/input/row-input.tsx
@@ -20,6 +20,7 @@ export type RowInputProps = {
   type?: HTMLInputElement['type'];
   style?: CSSProperties;
   onEnter?: () => void;
+  [key: `data-${string}`]: string;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size' | 'onBlur'>;
 
 // RowInput component that is used in the selector layout for search input

diff --git a/packages/frontend/component/src/ui/menu/menu.types.ts b/packages/frontend/component/src/ui/menu/menu.types.ts
@@ -36,7 +36,9 @@ export interface MenuItemProps
 export interface MenuSubProps {
   children: ReactNode;
   items: ReactNode;
-  triggerOptions?: Omit<MenuItemProps, 'onSelect' | 'children'>;
+  triggerOptions?: Omit<MenuItemProps, 'onSelect' | 'children'> & {
+    [key: `data-${string}`]: string;
+  };
   portalOptions?: Omit<DropdownMenuPortalProps, 'children'>;
   subOptions?: Omit<DropdownMenuSubProps, 'children'>;
   subContentOptions?: Omit<DropdownMenuSubContentProps, 'children'>;

diff --git a/...al/workspace-setting/new-workspace-setting-detail/delete-leave-workspace/delete/index.tsx b/...al/workspace-setting/new-workspace-setting-detail/delete-leave-workspace/delete/index.tsx
@@ -40,7 +40,7 @@ export const WorkspaceDeleteModal = ({
       confirmButtonOptions={{
         variant: 'error',
         disabled: !allowDelete,
-        ['data-testid' as string]: 'delete-workspace-confirm-button',
+        'data-testid': 'delete-workspace-confirm-button',
       }}
       {...props}
     >

diff --git a/packages/frontend/core/src/components/page-list/operation-menu-items/export.tsx b/packages/frontend/core/src/components/page-list/operation-menu-items/export.tsx
@@ -127,7 +127,7 @@ export const Export = ({ exportHandler, className, pageMode }: ExportProps) => {
       triggerOptions={{
         className: transitionStyle,
         prefixIcon: <ExportIcon />,
-        ['data-testid' as string]: 'export-menu',
+        'data-testid': 'export-menu',
       }}
       subOptions={{
         onOpenChange: handleExportMenuOpenChange,

diff --git a/packages/frontend/core/src/mobile/components/explorer/nodes/folder/index.tsx b/packages/frontend/core/src/mobile/components/explorer/nodes/folder/index.tsx
@@ -174,14 +174,14 @@ const ExplorerFolderNodeFolder = ({
     setCollapsed(false);
   }, [createPage, node]);
 
-  const handleCreateSubfolder = useCallback(() => {
-    node.createFolder(
-      t['com.affine.rootAppSidebar.organize.new-folders'](),
-      node.indexAt('before')
-    );
-    track.$.navigationPanel.organize.createOrganizeItem({ type: 'folder' });
-    setCollapsed(false);
-  }, [node, t]);
+  const handleCreateSubfolder = useCallback(
+    (name: string) => {
+      node.createFolder(name, node.indexAt('before'));
+      track.$.navigationPanel.organize.createOrganizeItem({ type: 'folder' });
+      setCollapsed(false);
+    },
+    [node]
+  );
 
   const handleAddToFolder = useCallback(
     (type: 'doc' | 'collection' | 'tag') => {
@@ -255,7 +255,13 @@ const ExplorerFolderNodeFolder = ({
       {
         index: 98,
         view: (
-          <FolderRenameSubMenu initialName={name} onConfirm={handleRename} />
+          <FolderRenameSubMenu
+            initialName={name}
+            onConfirm={handleRename}
+            menuProps={{
+              triggerOptions: { 'data-testid': 'rename-folder' },
+            }}
+          />
         ),
       },
       {
@@ -275,6 +281,9 @@ const ExplorerFolderNodeFolder = ({
             onConfirm={handleCreateSubfolder}
             descRenderer={createSubTipRenderer}
             icon={<FolderIcon />}
+            menuProps={{
+              triggerOptions: { 'data-testid': 'create-subfolder' },
+            }}
           />
         ),
       },
@@ -404,6 +413,8 @@ const ExplorerFolderNodeFolder = ({
       setCollapsed={handleCollapsedChange}
       operations={finalOperations}
       data-testid={`explorer-folder-${node.id}`}
+      aria-label={name}
+      data-role="explorer-folder"
     >
       {children.map(child => (
         <ExplorerFolderNode
@@ -415,6 +426,7 @@ const ExplorerFolderNodeFolder = ({
       <AddItemPlaceholder
         label={t['com.affine.rootAppSidebar.organize.folder.add-docs']()}
         onClick={() => handleAddToFolder('doc')}
+        data-testid="new-folder-in-folder-button"
       />
     </ExplorerTreeNode>
   );

diff --git a/packages/frontend/core/src/mobile/components/explorer/nodes/tag/dialog.tsx b/packages/frontend/core/src/mobile/components/explorer/nodes/tag/dialog.tsx
@@ -1,4 +1,4 @@
-import { useMobileMenuController } from '@affine/component';
+import { type MenuSubProps, useMobileMenuController } from '@affine/component';
 import { TagService } from '@affine/core/modules/tag';
 import { useI18n } from '@affine/i18n';
 import { useLiveData, useService } from '@toeverything/infra';
@@ -37,6 +37,7 @@ const ColorPickerTrigger = () => {
   const { color, show, setShow } = useContext(TagColorContext);
   return (
     <div
+      data-testid="tag-color-picker-trigger"
       className={styles.colorTrigger}
       style={{ color }}
       data-active={show}
@@ -58,17 +59,19 @@ const ColorPickerSelect = () => {
 
   return (
     <div
+      data-testid="tag-color-picker-select"
       className={styles.colorsRow}
       data-active={show}
       data-enable-fold={enableAnimation || undefined}
     >
       {colors.map(color => (
         <div
+          key={color}
           aria-checked={color === current}
           onClick={() => setColor(color)}
-          key={color}
           className={styles.colorDot}
           style={{ color }}
+          data-color={color}
         />
       ))}
     </div>
@@ -153,12 +156,14 @@ interface TagRenameSubMenuProps {
   icon?: ReactNode;
   text?: string;
   onConfirm?: (name: string, color: string) => void;
+  menuProps?: Partial<MenuSubProps>;
 }
 export const TagRenameSubMenu = ({
   tagId,
   title,
   icon,
   text,
+  menuProps,
   onConfirm,
 }: TagRenameSubMenuProps) => {
   const t = useI18n();
@@ -181,6 +186,7 @@ export const TagRenameSubMenu = ({
       title={title ?? t['com.affine.m.explorer.tag.rename-menu-title']()}
       icon={icon}
       text={text}
+      menuProps={menuProps}
     >
       <TagRenameContent
         initialName={tagName}

diff --git a/packages/frontend/core/src/mobile/components/explorer/nodes/tag/index.tsx b/packages/frontend/core/src/mobile/components/explorer/nodes/tag/index.tsx
@@ -44,6 +44,7 @@ export const ExplorerTagNode = ({
       return (
         <div className={clsx(styles.tagIconContainer, className)}>
           <div
+            data-testid="explorer-tag-icon-dot"
             className={styles.tagIcon}
             style={{
               backgroundColor: tagColor,
@@ -85,6 +86,8 @@ export const ExplorerTagNode = ({
       active={active}
       operations={finalOperations}
       data-testid={`explorer-tag-${tagId}`}
+      aria-label={tagName}
+      data-role="explorer-tag"
     >
       <ExplorerTagNodeDocs tag={tagRecord} onNewDoc={handleNewDoc} />
     </ExplorerTreeNode>

diff --git a/packages/frontend/core/src/mobile/components/explorer/nodes/tag/operations.tsx b/packages/frontend/core/src/mobile/components/explorer/nodes/tag/operations.tsx
@@ -173,7 +173,11 @@ export const useExplorerTagNodeOperationsMenu = (
       {
         index: 10,
         view: (
-          <TagRenameSubMenu onConfirm={handleChangeNameOrColor} tagId={tagId} />
+          <TagRenameSubMenu
+            onConfirm={handleChangeNameOrColor}
+            tagId={tagId}
+            menuProps={{ triggerOptions: { 'data-testid': 'rename-tag' } }}
+          />
         ),
       },
       ...(BUILD_CONFIG.isElectron && enableMultiView

diff --git a/packages/frontend/core/src/mobile/components/explorer/sections/tags/index.tsx b/packages/frontend/core/src/mobile/components/explorer/sections/tags/index.tsx
@@ -50,7 +50,7 @@ export const ExplorerTags = () => {
           <ExplorerTagNode key={tag.id} tagId={tag.id} />
         ))}
         <AddItemPlaceholder
-          data-testid="explorer-bar-add-favorite-button"
+          data-testid="explorer-add-tag-button"
           onClick={() => setShowNewTagDialog(true)}
           label={t[
             'com.affine.rootAppSidebar.explorer.tag-section-add-tooltip'

diff --git a/packages/frontend/core/src/mobile/components/explorer/tree/node.tsx b/packages/frontend/core/src/mobile/components/explorer/tree/node.tsx
@@ -120,7 +120,7 @@ export const ExplorerTreeNode = ({
                 <Fragment key={index}>{view}</Fragment>
               ))}
             >
-              <div className={styles.iconContainer}>
+              <div className={styles.iconContainer} data-testid="menu-trigger">
                 {emoji ?? (Icon && <Icon collapsed={collapsed} />)}
               </div>
             </MobileMenu>

diff --git a/packages/frontend/core/src/mobile/components/rename/content.tsx b/packages/frontend/core/src/mobile/components/rename/content.tsx
@@ -1,12 +1,15 @@
 import { Button, RowInput } from '@affine/component';
 import { useI18n } from '@affine/i18n';
+import clsx from 'clsx';
 import { useCallback, useState } from 'react';
 
 import * as styles from './content.css';
 import type { RenameContentProps } from './type';
 
 export const RenameContent = ({
   initialName = '',
+  inputProps,
+  confirmButtonProps,
   inputPrefixRenderer: InputPrefixRenderer,
   inputBelowRenderer: InputBelowRenderer,
   descRenderer: DescRenderer,
@@ -16,6 +19,10 @@ export const RenameContent = ({
   const t = useI18n();
   const [value, setValue] = useState(initialName);
 
+  const { className: inputClassName, ...restInputProps } = inputProps ?? {};
+  const { className: confirmButtonClassName, ...restConfirmButtonProps } =
+    confirmButtonProps ?? {};
+
   const handleDone = useCallback(() => {
     onConfirm?.(value);
   }, [onConfirm, value]);
@@ -26,9 +33,11 @@ export const RenameContent = ({
         {InputPrefixRenderer ? <InputPrefixRenderer input={value} /> : null}
         <RowInput
           autoFocus
-          className={styles.input}
+          className={clsx(styles.input, inputClassName)}
           value={value}
           onChange={setValue}
+          data-testid="rename-input"
+          {...restInputProps}
         />
       </div>
       {}
@@ -42,11 +51,13 @@ export const RenameContent = ({
       </div>
       <div className={styles.doneWrapper}>
         <Button
-          className={styles.done}
+          className={clsx(styles.done, confirmButtonClassName)}
           onClick={handleDone}
           disabled={!value}
           variant="primary"
           size="extraLarge"
+          data-testid="rename-confirm"
+          {...restConfirmButtonProps}
         >
           {confirmText}
         </Button>

diff --git a/packages/frontend/core/src/mobile/components/rename/sub-menu.tsx b/packages/frontend/core/src/mobile/components/rename/sub-menu.tsx
@@ -12,6 +12,7 @@ export const RenameSubMenu = ({
   icon,
   text,
   children,
+  menuProps,
   onConfirm,
   ...props
 }: RenameSubMenuProps) => {
@@ -26,9 +27,14 @@ export const RenameSubMenu = ({
     [close, onConfirm]
   );
 
+  const { triggerOptions, ...otherMenuProps } = menuProps ?? {};
   return (
     <MobileMenuSub
-      triggerOptions={{ prefixIcon: icon ?? <EditIcon />, suffixIcon: null }}
+      triggerOptions={{
+        prefixIcon: icon ?? <EditIcon />,
+        suffixIcon: null,
+        ...triggerOptions,
+      }}
       items={
         children ?? (
           <RenameContent
@@ -39,6 +45,7 @@ export const RenameSubMenu = ({
         )
       }
       title={title}
+      {...otherMenuProps}
     >
       {text ?? t['com.affine.m.explorer.folder.rename']()}
     </MobileMenuSub>

diff --git a/packages/frontend/core/src/mobile/components/rename/type.ts b/packages/frontend/core/src/mobile/components/rename/type.ts
@@ -1,3 +1,8 @@
+import type {
+  ButtonProps,
+  MenuSubProps,
+  RowInputProps,
+} from '@affine/component';
 import type { PropsWithChildren, ReactNode } from 'react';
 
 export interface RenameBaseProps {
@@ -6,6 +11,8 @@ export interface RenameBaseProps {
 }
 
 export interface RenameContentProps extends RenameBaseProps {
+  inputProps?: Omit<RowInputProps, 'value' | 'onChange'>;
+  confirmButtonProps?: Omit<ButtonProps, 'onClick' | 'children'>;
   confirmText?: string;
   inputPrefixRenderer?: (props: { input: string }) => ReactNode;
   descRenderer?: (props: { input: string }) => ReactNode;
@@ -20,6 +27,7 @@ export interface RenameSubMenuProps
   icon?: ReactNode;
   /** MenuItem.text */
   text?: string;
+  menuProps?: Partial<MenuSubProps>;
 }
 
 export interface RenameDialogProps

diff --git a/packages/frontend/core/src/modules/create-workspace/views/dialog.tsx b/packages/frontend/core/src/modules/create-workspace/views/dialog.tsx
@@ -95,7 +95,7 @@ const NameWorkspaceContent = ({
         variant: 'primary',
         loading,
         disabled: !workspaceName,
-        ['data-testid' as string]: 'create-workspace-create-button',
+        'data-testid': 'create-workspace-create-button',
       }}
       closeButtonOptions={{
         ['data-testid' as string]: 'create-workspace-close-button',