feat(tests): add tests for mobile explorer rename

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 = ({

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

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'>;

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>
   );

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}

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>

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

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'

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>

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>

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>

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

tests/affine-mobile/e2e/explorer-folder.spec.ts

@@ -0,0 +1,76 @@
+import { test } from '@affine-test/kit/mobile';
+import { expect, type Locator, type Page } from '@playwright/test';
+
+import {
+  expandCollapsibleSection,
+  getAttrOfActiveElement,
+  openExplorerNodeMenu,
+} from './utils';
+
+const locateFolder = async (scope: Page | Locator, name: string) => {
+  return scope.locator(`[data-role="explorer-folder"][aria-label="${name}"]`);
+};
+
+/**
+ * Check rename input is focused
+ */
+const isRenameInputFocused = async (page: Page) => {
+  const focusElTestid = await getAttrOfActiveElement(page);
+  expect(focusElTestid).toEqual('rename-input');
+};
+
+const createRootFolder = async (page: Page, name: string) => {
+  const section = await expandCollapsibleSection(page, 'organize');
+  await section.getByTestId('explorer-bar-add-organize-button').tap();
+  const dialog = page.getByRole('dialog');
+  await expect(dialog).toBeVisible();
+  await isRenameInputFocused(page);
+  await page.keyboard.type(name);
+  await dialog.getByTestId('rename-confirm').tap();
+  await expect(dialog).not.toBeVisible();
+  const node = await locateFolder(section, name);
+  return node;
+};
+
+const createSubFolder = async (page: Page, parent: Locator, name: string) => {
+  const menu = await openExplorerNodeMenu(page, parent);
+  await menu.getByTestId('create-subfolder').tap();
+
+  const dialog = page.getByRole('dialog');
+  await expect(dialog).toBeVisible();
+  await isRenameInputFocused(page);
+  await page.keyboard.type(name);
+  await dialog.getByTestId('folder-rename-confirm').tap();
+  await expect(dialog).not.toBeVisible();
+  const node = await locateFolder(parent, name);
+  return node;
+};
+
+test('create a folder', async ({ page }) => {
+  const node = await createRootFolder(page, 'Test Folder');
+  await expect(node).toBeVisible();
+});
+
+test('create a sub folder', async ({ page }) => {
+  const parent = await createRootFolder(page, 'Parent Folder');
+  await expect(parent).toBeVisible();
+  await parent.tap();
+  const child = await createSubFolder(page, parent, 'Child Folder');
+  await expect(child).toBeVisible();
+});
+
+test('create a folder and rename it', async ({ page }) => {
+  const originalName = 'Test Folder';
+  const appendedName = ' Renamed';
+
+  const folder = await createRootFolder(page, originalName);
+  const menu = await openExplorerNodeMenu(page, folder);
+  await menu.getByTestId('rename-folder').tap();
+  await isRenameInputFocused(page);
+  await page.keyboard.type(appendedName);
+  await menu.getByTestId('folder-rename-confirm').tap();
+
+  const renamedFolder = await locateFolder(page, originalName + appendedName);
+  await expect(folder).not.toBeVisible();
+  await expect(renamedFolder).toBeVisible();
+});