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

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

packages/frontend/component/src/ui/date-picker/week-date-picker.tsx

@@ -162,7 +162,7 @@ export const WeekDatePicker = memo(function WeekDatePicker({
 
   return (
     <div className={clsx(styles.weekDatePicker, className)} {...attrs}>
-      <IconButton onClick={onPrev}>
+      <IconButton onClick={onPrev} data-testid="week-picker-prev">
         <ArrowLeftSmallIcon />
       </IconButton>
 
@@ -179,7 +179,7 @@ export const WeekDatePicker = memo(function WeekDatePicker({
         ))}
       </div>
 
-      <IconButton onClick={onNext}>
+      <IconButton onClick={onNext} data-testid="week-picker-next">
         <ArrowRightSmallIcon />
       </IconButton>
     </div>
@@ -204,6 +204,7 @@ const Cell = ({ day, dense, value, cursor, onClick }: CellProps) => {
   return (
     <button
       tabIndex={cursor.isSame(day, 'day') ? 0 : -1}
+      data-testid="week-picker-day"
       aria-label={day.format(format)}
       data-active={isActive}
       data-curr-month={isCurrentMonth}

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

packages/frontend/i18n/src/resources/en.json

@@ -1251,6 +1251,7 @@
   "com.affine.settings.editorSettings.preferences.import.title": "Import Settings",
   "com.affine.settings.editorSettings.subtitle": "Configure your own editor",
   "com.affine.settings.editorSettings.title": "Editor settings",
+  "com.affine.settings.editorSettings.ask-me-every-time": "Ask me every time",
   "com.affine.settings.email": "Email",
   "com.affine.settings.email.action": "Change email",
   "com.affine.settings.email.action.change": "Change email",

tests/affine-local/e2e/template.spec.ts

@@ -65,6 +65,23 @@ const createDocAndMarkAsTemplate = async (
   await onCreated?.();
 };
 
+const getDocId = async (page: Page) => {
+  const docId = await page.evaluate(() => {
+    const url = window.location.href;
+    const id = url.split('/').pop()?.split('?')[0];
+    return id;
+  });
+  return docId;
+};
+
+const enableAskMeEveryTime = async (page: Page) => {
+  await page.getByTestId('slider-bar-workspace-setting-button').click();
+  await page.getByTestId('editor-panel-trigger').click();
+  await page.getByTestId('new-doc-default-mode-trigger').click();
+  await page.getByTestId('ask-every-time-trigger').click();
+  await page.keyboard.press('Escape');
+};
+
 test('create a doc and mark it as template', async ({ page }) => {
   await openHomePage(page);
   await createDocAndMarkAsTemplate(page, 'Test Template', async () => {
@@ -92,3 +109,145 @@ test('create a doc, and initialize it from template', async ({ page }) => {
   // the starter bar should be hidden
   await expect(page.getByTestId('template-docs-badge')).not.toBeVisible();
 });
+
+test('enable ask me every time for new doc', async ({ page }) => {
+  const withAskButton = page.getByTestId('sidebar-new-page-with-ask-button');
+  const withoutAskButton = page.getByTestId('sidebar-new-page-button');
+
+  await openHomePage(page);
+  await expect(withAskButton).not.toBeVisible();
+  await expect(withoutAskButton).toBeVisible();
+
+  await enableAskMeEveryTime(page);
+  await expect(withAskButton).toBeVisible();
+  await expect(withoutAskButton).not.toBeVisible();
+});
+
+test('set default template for page', async ({ page }) => {
+  await openHomePage(page);
+  await createDocAndMarkAsTemplate(page, 'Test Template', async () => {
+    await page.keyboard.type('# Template');
+    await page.keyboard.press('Enter');
+    await page.keyboard.type('This is a template doc');
+  });
+  const templateDocId = await getDocId(page);
+
+  // create a new page, should not inherit template
+  await page.getByTestId('sidebar-new-page-button').click();
+  await waitForEditorLoad(page);
+  await expect(page.getByText('This is a template doc')).not.toBeVisible();
+
+  // enable page template and set a template
+  await page.getByTestId('slider-bar-workspace-setting-button').click();
+  await page.getByTestId('workspace-setting:preference').click();
+  const pageTemplateSwitch = page.getByTestId('page-template-switch');
+  await pageTemplateSwitch.click();
+  const pageTemplateSelector = page.getByTestId('page-template-selector');
+  await expect(pageTemplateSelector).toBeVisible();
+  await pageTemplateSelector.click();
+  await page.getByTestId(`template-doc-item-${templateDocId}`).click();
+
+  // close setting, create a new page from sidebar
+  await page.getByTestId('modal-close-button').click();
+  await page.getByTestId('sidebar-new-page-button').click();
+  await waitForEditorLoad(page);
+  await expect(page.getByText('This is a template doc')).toBeVisible();
+
+  // remove template
+  await page.getByTestId('slider-bar-workspace-setting-button').click();
+  await page.getByTestId('workspace-setting:preference').click();
+  await page.getByTestId('page-template-selector').click();
+  await page.getByTestId('template-doc-item-remove').click();
+
+  // close setting, create a new page from sidebar
+  await page.getByTestId('modal-close-button').click();
+  await page.getByTestId('sidebar-new-page-button').click();
+  await waitForEditorLoad(page);
+  await expect(page.getByText('This is a template doc')).not.toBeVisible();
+});
+
+test('set default template for journal', async ({ page }) => {
+  await openHomePage(page);
+  await createDocAndMarkAsTemplate(page, 'Page Template', async () => {
+    await page.keyboard.type('# Page Template');
+    await page.keyboard.press('Enter');
+    await page.keyboard.type('This is a page template doc');
+  });
+  const pageTemplateDocId = await getDocId(page);
+  await createDocAndMarkAsTemplate(page, 'Journal Template', async () => {
+    await page.keyboard.type('# Journal Template');
+    await page.keyboard.press('Enter');
+    await page.keyboard.type('This is a journal template doc');
+  });
+  const journalTemplateDocId = await getDocId(page);
+
+  // by default create a journal, should not use template
+  await page.getByTestId('slider-bar-journals-button').click();
+  await waitForEditorLoad(page);
+  await expect(
+    page.getByText('This is a journal template doc')
+  ).not.toBeVisible();
+  await expect(page.getByText('This is a page template doc')).not.toBeVisible();
+
+  // enable page template, new journal should use page template
+  await page.getByTestId('slider-bar-workspace-setting-button').click();
+  await page.getByTestId('workspace-setting:preference').click();
+  await page.getByTestId('page-template-switch').click();
+  await page.getByTestId('page-template-selector').click();
+  await page.getByTestId(`template-doc-item-${pageTemplateDocId}`).click();
+  await page.getByTestId('modal-close-button').click();
+  // create a new journal
+  const prevWeekButton = page.getByTestId('week-picker-prev');
+  await prevWeekButton.click();
+  await page.getByTestId('week-picker-day').first().click();
+  await waitForEditorLoad(page);
+  await expect(page.getByText('This is a page template doc')).toBeVisible();
+
+  // set journal template, new journal should use journal template
+  await page.getByTestId('slider-bar-workspace-setting-button').click();
+  await page.getByTestId('workspace-setting:preference').click();
+  await page.getByTestId('journal-template-selector').click();
+  await page.getByTestId(`template-doc-item-${journalTemplateDocId}`).click();
+  await page.getByTestId('modal-close-button').click();
+  // create a new journal
+  await prevWeekButton.click();
+  await page.getByTestId('week-picker-day').first().click();
+  await waitForEditorLoad(page);
+  await expect(page.getByText('This is a journal template doc')).toBeVisible();
+});
+
+test('create doc from template via sidebar entrance', async ({ page }) => {
+  await openHomePage(page);
+  await createDocAndMarkAsTemplate(page, 'Test Template', async () => {
+    await page.keyboard.type('# Template');
+    await page.keyboard.press('Enter');
+    await page.keyboard.type('This is a template doc');
+  });
+  const templateDocId = await getDocId(page);
+
+  await page.getByTestId('sidebar-new-page-button').click();
+  await waitForEditorLoad(page);
+  await expect(page.getByText('This is a template doc')).not.toBeVisible();
+
+  await page.getByTestId('sidebar-template-doc-entrance').click();
+  await page.getByTestId(`template-doc-item-${templateDocId}`).click();
+  await waitForEditorLoad(page);
+  await expect(page.getByText('This is a template doc')).toBeVisible();
+});
+
+test('create template from sidebar template entrance', async ({ page }) => {
+  await openHomePage(page);
+  await page.getByTestId('sidebar-template-doc-entrance').click();
+  await page.getByTestId('template-doc-item-create').click();
+  await waitForEditorLoad(page);
+
+  await page.locator('affine-note').first().click();
+  await page.keyboard.press('Backspace');
+  await page.keyboard.type('Template');
+  const templateDocId = await getDocId(page);
+
+  await page.getByTestId('sidebar-template-doc-entrance').click();
+  await expect(
+    page.getByTestId(`template-doc-item-${templateDocId}`)
+  ).toBeVisible();
+});