test(mobile): basic e2e tests (#8031)

fix AF-1289

1. tested on 'webkit'
2. a few baseline test cases

packages/frontend/mobile/src/components/app-tabs/index.tsx

@@ -40,7 +40,7 @@ export const AppTabs = () => {
   const location = useLiveData(workbench.location$);
 
   return (
-    <ul className={styles.appTabs} id="app-tabs">
+    <ul className={styles.appTabs} id="app-tabs" role="tablist">
       {routes.map(route => {
         const Link = route.LinkComponent || WorkbenchLink;
 
@@ -53,6 +53,8 @@ export const AppTabs = () => {
             to={route.to}
             key={route.to}
             className={styles.tabItem}
+            role="tab"
+            aria-label={route.to.slice(1)}
           >
             <li>
               <route.Icon />

packages/frontend/mobile/src/components/doc-card/index.tsx

@@ -1,6 +1,7 @@
 import { IconButton } from '@affine/component';
 import { PagePreview } from '@affine/core/components/page-list/page-content-preview';
 import { IsFavoriteIcon } from '@affine/core/components/pure/icons';
+import { useCatchEventCallback } from '@affine/core/hooks/use-catch-event-hook';
 import { CompatibleFavoriteItemsAdapter } from '@affine/core/modules/properties';
 import {
   WorkbenchLink,
@@ -9,7 +10,7 @@ import {
 import type { DocMeta } from '@blocksuite/store';
 import { useLiveData, useService, WorkspaceService } from '@toeverything/infra';
 import clsx from 'clsx';
-import { forwardRef, type ReactNode, useCallback } from 'react';
+import { forwardRef, type ReactNode } from 'react';
 
 import * as styles from './styles.css';
 import { DocCardTags } from './tag';
@@ -29,8 +30,11 @@ export const DocCard = forwardRef<HTMLAnchorElement, DocCardProps>(
 
     const favorited = useLiveData(favAdapter.isFavorite$(meta.id, 'doc'));
 
-    const toggleFavorite = useCallback(
-      () => favAdapter.toggle(meta.id, 'doc'),
+    const toggleFavorite = useCatchEventCallback(
+      (e: React.MouseEvent) => {
+        e.preventDefault();
+        favAdapter.toggle(meta.id, 'doc');
+      },
       [favAdapter, meta.id]
     );
 
@@ -39,13 +43,15 @@ export const DocCard = forwardRef<HTMLAnchorElement, DocCardProps>(
         to={`/${meta.id}`}
         ref={ref}
         className={clsx(styles.card, className)}
+        data-testid="doc-card"
         {...attrs}
       >
-        <header className={styles.head}>
+        <header className={styles.head} data-testid="doc-card-header">
           <h3 className={styles.title}>
             {meta.title || <span className={styles.untitled}>Untitled</span>}
           </h3>
           <IconButton
+            aria-label="favorite"
             icon={
               <IsFavoriteIcon onClick={toggleFavorite} favorite={favorited} />
             }

packages/frontend/mobile/src/components/page-header/index.tsx

@@ -60,7 +60,12 @@ export const PageHeader = forwardRef<HTMLHeadElement, PageHeaderProps>(
     }, []);
 
     return (
-      <header ref={ref} className={clsx(styles.root, className)} {...attrs}>
+      <header
+        data-testid="mobile-page-header"
+        ref={ref}
+        className={clsx(styles.root, className)}
+        {...attrs}
+      >
         <section
           className={clsx(styles.prefix, prefixClassName)}
           style={prefixStyle}

packages/frontend/mobile/src/pages/workspace/detail/page-header-more-button.tsx

@@ -78,7 +78,7 @@ export const PageHeaderMenuButton = ({ docId }: PageMenuProps) => {
     <>
       <MobileMenuItem
         prefixIcon={currentMode === 'page' ? <EdgelessIcon /> : <PageIcon />}
-        data-testid="editor-option-menu-edgeless"
+        data-testid="editor-option-menu-mode-switch"
         onSelect={handleSwitchMode}
       >
         {t['Convert to ']()}
@@ -133,7 +133,7 @@ export const PageHeaderMenuButton = ({ docId }: PageMenuProps) => {
     >
       <IconButton
         size={24}
-        data-testid="header-dropDownButton"
+        data-testid="detail-page-header-more-button"
         className={styles.iconButton}
       >
         <MoreHorizontalIcon />

packages/frontend/mobile/src/pages/workspace/search.tsx

@@ -133,7 +133,7 @@ export const Component = () => {
 
   return (
     <>
-      <div className={styles.searchHeader}>
+      <div className={styles.searchHeader} data-testid="search-header">
         <SearchInput
           debounce={300}
           autoFocus={!searchInput}

packages/frontend/mobile/src/views/recent-docs/index.tsx

@@ -22,8 +22,9 @@ export const RecentDocs = ({ max = 5 }: { max?: number }) => {
       title="Recent"
       headerClassName={styles.header}
       className={styles.recentSection}
+      testId="recent-docs"
     >
-      <div className={styles.scroll}>
+      <div className={styles.scroll} data-testid="recent-docs-list">
         <ul className={styles.list}>
           {cardMetas.map((doc, index) => (
             <li key={index} className={styles.cardWrapper}>