test(core): add basic tests for template doc setting (#9702)

close AF-2112, AF-2114, AF-2115

packages/frontend/core/src/components/root-app-sidebar/template-doc-entrance.tsx

@@ -37,7 +37,11 @@ export const TemplateDocEntrance = () => {
   }
 
   return (
-    <SidebarMenuItem icon={<TemplateOutlineIcon />} onClick={toggleMenu}>
+    <SidebarMenuItem
+      data-testid="sidebar-template-doc-entrance"
+      icon={<TemplateOutlineIcon />}
+      onClick={toggleMenu}
+    >
       <Menu
         rootOptions={{ open: menuOpen, onOpenChange: setMenuOpen }}
         contentOptions={{
@@ -79,6 +83,7 @@ const CreateNewTemplateMenuItem = () => {
 
   return (
     <MenuItem
+      data-testid="template-doc-item-create"
       prefixIcon={<TemplateIcon />}
       onClick={createNewTemplate}
       onAuxClick={createNewTemplate}

packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/general.tsx

@@ -332,7 +332,7 @@ const NewDocDefaultModeSettings = () => {
         },
         {
           value: 'ask',
-          label: 'Ask every time',
+          label: t['com.affine.settings.editorSettings.ask-me-every-time'](),
           testId: 'ask-every-time-trigger',
         },
       ] as const,
@@ -361,13 +361,17 @@ const NewDocDefaultModeSettings = () => {
               key={item.value}
               selected={item.value === settings.newDocDefaultMode}
               onSelect={() => updateNewDocDefaultMode(item.value)}
+              data-testid={item.testId}
             >
               {item.label}
             </MenuItem>
           );
         })}
       >
-        <MenuTrigger className={styles.menuTrigger}>
+        <MenuTrigger
+          className={styles.menuTrigger}
+          data-testid="new-doc-default-mode-trigger"
+        >
           {items.find(item => item.value === settings.newDocDefaultMode)?.label}
         </MenuTrigger>
       </Menu>

packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/new-workspace-setting-detail/template.tsx

@@ -64,6 +64,7 @@ export const TemplateDocSetting = () => {
         desc={t['com.affine.settings.workspace.template.journal-desc']()}
       >
         <TemplateSelector
+          testId="journal-template-selector"
           current={journalTemplateDocId}
           onChange={updateJournalTemplate}
         />
@@ -72,7 +73,11 @@ export const TemplateDocSetting = () => {
         name={t['com.affine.settings.workspace.template.page']()}
         desc={t['com.affine.settings.workspace.template.page-desc']()}
       >
-        <Switch checked={enablePageTemplate} onChange={togglePageTemplate} />
+        <Switch
+          data-testid="page-template-switch"
+          checked={enablePageTemplate}
+          onChange={togglePageTemplate}
+        />
       </SettingRow>
       {enablePageTemplate ? (
         <SettingRow
@@ -80,6 +85,7 @@ export const TemplateDocSetting = () => {
           desc={t['com.affine.settings.workspace.template.journal-desc']()}
         >
           <TemplateSelector
+            testId="page-template-selector"
             current={pageTemplateDocId}
             onChange={updatePageTemplate}
           />
@@ -91,9 +97,14 @@ export const TemplateDocSetting = () => {
 
 interface TemplateSelectorProps {
   current?: string;
+  testId?: string;
   onChange?: (id?: string) => void;
 }
-const TemplateSelector = ({ current, onChange }: TemplateSelectorProps) => {
+const TemplateSelector = ({
+  current,
+  testId,
+  onChange,
+}: TemplateSelectorProps) => {
   const t = useI18n();
   const docsService = useService(DocsService);
   const docDisplayService = useService(DocDisplayMetaService);
@@ -112,13 +123,14 @@ const TemplateSelector = ({ current, onChange }: TemplateSelectorProps) => {
             prefixIcon={<DeleteIcon className={styles.menuItemIcon} />}
             onClick={() => onChange?.()}
             type="danger"
+            data-testid="template-doc-item-remove"
           >
             {t['com.affine.settings.workspace.template.remove']()}
           </MenuItem>
         </>
       }
     >
-      <MenuTrigger className={styles.menuTrigger}>
+      <MenuTrigger className={styles.menuTrigger} data-testid={testId}>
         {/* TODO: in trash design */}
         {title ?? t['com.affine.settings.workspace.template.keep-empty']()}
       </MenuTrigger>

packages/frontend/core/src/modules/app-sidebar/views/add-page-button/index.tsx

@@ -161,7 +161,7 @@ function AddPageWithAsk({ className, style }: AddPageButtonProps) {
       <Button
         tooltip={t['New Page']()}
         tooltipOptions={sideBottom}
-        data-testid="sidebar-new-page-button"
+        data-testid="sidebar-new-page-with-ask-button"
         className={clsx([styles.withAskRoot, className])}
         style={style}
       >

packages/frontend/core/src/modules/template-doc/view/template-list-menu.tsx

@@ -27,7 +27,11 @@ const DocItem = ({ doc, onSelect }: DocItemProps) => {
   }, [doc.id, onSelect]);
 
   return (
-    <MenuItem prefixIcon={<Icon />} onClick={onClick}>
+    <MenuItem
+      prefixIcon={<Icon />}
+      onClick={onClick}
+      data-testid={`template-doc-item-${doc.id}`}
+    >
       {title}
     </MenuItem>
   );