feat(core): new template doc property (#9538)

close AF-2045, AF-2047, AF-2065

tests/affine-local/e2e/page-properties.spec.ts

@@ -1,4 +1,3 @@
-/* eslint-disable unicorn/prefer-dom-node-dataset */
 import { test } from '@affine-test/kit/playwright';
 import {
   openHomePage,
@@ -126,6 +125,7 @@ test('property table reordering', async ({ page }) => {
     'Tags',
     'Doc mode',
     'Journal',
+    'Template',
     'Created',
     'Updated',
     'Created by',
@@ -171,6 +171,7 @@ test('page info show more will show all properties', async ({ page }) => {
     'Tags',
     'Doc mode',
     'Journal',
+    'Template',
     'Created',
     'Updated',
     'Created by',

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

@@ -0,0 +1,94 @@
+import { test } from '@affine-test/kit/playwright';
+import { openHomePage } from '@affine-test/kit/utils/load-page';
+import { waitForEditorLoad } from '@affine-test/kit/utils/page-logic';
+import { expect, type Locator, type Page } from '@playwright/test';
+
+function getTemplateRow(page: Page) {
+  return page.locator(
+    '[data-testid="doc-property-row"][data-info-id="template"]'
+  );
+}
+
+async function toggleTemplate(row: Locator, value: boolean) {
+  const checkbox = row.locator('input[type="checkbox"]');
+  const state = await checkbox.inputValue();
+  const checked = state === 'on';
+  if (checked !== value) {
+    await checkbox.click();
+    const newState = await checkbox.inputValue();
+    const newChecked = newState === 'on';
+    expect(newChecked).toBe(value);
+  }
+}
+
+const createDocAndMarkAsTemplate = async (
+  page: Page,
+  title?: string,
+  onCreated?: () => Promise<void>
+) => {
+  await page.getByTestId('sidebar-new-page-button').click();
+  await waitForEditorLoad(page);
+
+  if (title) {
+    await page.keyboard.type(title);
+  }
+
+  const collapse = page.getByTestId('page-info-collapse');
+  const open = await collapse.getAttribute('aria-expanded');
+  if (open?.toLowerCase() !== 'true') {
+    await collapse.click();
+  }
+
+  // add if not exists
+  if ((await getTemplateRow(page).count()) === 0) {
+    const addPropertyButton = page.getByTestId('add-property-button');
+    if (!(await addPropertyButton.isVisible())) {
+      await page.getByTestId('property-collapsible-button').click();
+    }
+    await addPropertyButton.click();
+    await page
+      .locator('[role="menuitem"][data-property-type="journal"]')
+      .click();
+    await page.keyboard.press('Escape');
+  }
+  // expand if collapsed
+  else if (!(await getTemplateRow(page).isVisible())) {
+    await page.getByTestId('property-collapsible-button').click();
+  }
+
+  const templateRow = getTemplateRow(page);
+  await expect(templateRow).toBeVisible();
+  await toggleTemplate(templateRow, true);
+
+  // focus editor
+  await page.locator('affine-note').first().click();
+  await onCreated?.();
+};
+
+test('create a doc and mark it as template', 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');
+  });
+});
+
+test('create a doc, and initialize it from template', 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');
+  });
+
+  await page.getByTestId('sidebar-new-page-button').click();
+  await waitForEditorLoad(page);
+  await page.getByTestId('template-docs-badge').click();
+  await page.keyboard.press('ArrowDown');
+  await page.keyboard.press('Enter');
+  await expect(page.getByText('This is a template doc')).toBeVisible();
+
+  // the starter bar should be hidden
+  await expect(page.getByTestId('template-docs-badge')).not.toBeVisible();
+});

tests/kit/src/utils/setting.ts

@@ -1,4 +1,4 @@
-import type { Page } from '@playwright/test';
+import { type Page } from '@playwright/test';
 
 export async function clickCollaborationPanel(page: Page) {
   await page.click('[data-tab-key="collaboration"]');