test(core): add tests for page info ui (#5769)

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/64419f79-46e8-4171-b853-5908841f827a.png)

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

@@ -106,7 +106,7 @@ test('use monthpicker to modify the month of datepicker', async ({ page }) => {
   await checkDatePickerMonth(page, nextMonth);
 });
 
-test.skip('allow creation of filters by tags', async ({ page }) => {
+test('allow creation of filters by tags', async ({ page }) => {
   await openHomePage(page);
   await waitForEditorLoad(page);
   await clickSideBarAllPageButton(page);

tests/affine-local/e2e/local-first-collections-items.spec.ts

@@ -137,27 +137,6 @@ test('edit collection and change filter date', async ({ page }) => {
   expect(await first.textContent()).toBe('123');
 });
 
-test.skip('create temporary filter by click tag', async ({ page }) => {
-  await clickNewPageButton(page);
-  await getBlockSuiteEditorTitle(page).click();
-  await getBlockSuiteEditorTitle(page).fill('test page');
-  await page.locator('page-meta-tags').click();
-  await page.locator('.add-tag').click();
-  await page.keyboard.type('TODO Tag');
-  await page.keyboard.press('Enter');
-  await page.keyboard.press('Escape');
-  await page.locator('.tag', { hasText: 'TODO Tag' }).click();
-  const cell = page.getByTestId('page-list-item-title').getByText('test page');
-  await expect(cell).toBeVisible();
-  expect(await page.getByTestId('page-list-item').count()).toBe(1);
-  await page.getByTestId('filter-arg').click();
-
-  await page.getByTestId('multi-select-TODO Tag').click();
-  expect(
-    await page.getByTestId('page-list-item').count()
-  ).toBeGreaterThanOrEqual(2);
-});
-
 test('add collection from sidebar', async ({ page }) => {
   await removeOnboardingPages(page);
   await clickNewPageButton(page);

tests/affine-local/e2e/local-first-delete-page.spec.ts

@@ -48,6 +48,7 @@ test('page delete -> create new page -> refresh page -> new page should be appea
   page,
   workspace,
 }) => {
+  test.slow();
   await openHomePage(page);
   await waitForEditorLoad(page);
   await clickNewPageButton(page);

tests/affine-local/e2e/local-first-favorites-items.spec.ts

@@ -1,4 +1,5 @@
 import { test } from '@affine-test/kit/playwright';
+import { clickPageModeButton } from '@affine-test/kit/utils/editor';
 import { openHomePage } from '@affine-test/kit/utils/load-page';
 import {
   clickNewPageButton,
@@ -135,8 +136,9 @@ test("Deleted page's reference will not be shown in sidebar", async ({
 test('Add new favorite page via sidebar', async ({ page }) => {
   await openHomePage(page);
   await waitForEditorLoad(page);
-  await clickNewPageButton(page);
+
   await page.getByTestId('slider-bar-add-favorite-button').first().click();
+  await clickPageModeButton(page);
   await waitForEmptyEditor(page);
 
   // enter random page title

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

@@ -0,0 +1,243 @@
+/* eslint-disable unicorn/prefer-dom-node-dataset */
+import { test } from '@affine-test/kit/playwright';
+import { clickPageModeButton } from '@affine-test/kit/utils/editor';
+import { openHomePage } from '@affine-test/kit/utils/load-page';
+import { dragTo, waitForEditorLoad } from '@affine-test/kit/utils/page-logic';
+import {
+  addCustomProperty,
+  changePropertyVisibility,
+  clickPropertyValue,
+  closeTagsEditor,
+  expectTagsVisible,
+  getPropertyValueLocator,
+  openTagsEditor,
+  openWorkspaceProperties,
+  removeSelectedTag,
+  searchAndCreateTag,
+} from '@affine-test/kit/utils/properties';
+import { expect } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await openHomePage(page);
+  await clickPageModeButton(page);
+  await waitForEditorLoad(page);
+});
+
+test('allow create tag', async ({ page }) => {
+  await openTagsEditor(page);
+  await searchAndCreateTag(page, 'Test1');
+  await searchAndCreateTag(page, 'Test2');
+  await closeTagsEditor(page);
+  await expectTagsVisible(page, ['Test1', 'Test2']);
+
+  await openTagsEditor(page);
+  await removeSelectedTag(page, 'Test1');
+  await closeTagsEditor(page);
+  await expectTagsVisible(page, ['Test2']);
+});
+
+test('add custom property', async ({ page }) => {
+  await addCustomProperty(page, 'Text');
+  await addCustomProperty(page, 'Number');
+  await addCustomProperty(page, 'Date');
+  await addCustomProperty(page, 'Checkbox');
+});
+
+test('add custom property & edit', async ({ page }) => {
+  await addCustomProperty(page, 'Checkbox');
+  await expect(
+    getPropertyValueLocator(page, 'Checkbox').locator('input')
+  ).not.toBeChecked();
+  await clickPropertyValue(page, 'Checkbox');
+  await expect(
+    getPropertyValueLocator(page, 'Checkbox').locator('input')
+  ).toBeChecked();
+});
+
+test('property table reordering', async ({ page }) => {
+  await addCustomProperty(page, 'Text');
+  await addCustomProperty(page, 'Number');
+  await addCustomProperty(page, 'Date');
+  await addCustomProperty(page, 'Checkbox');
+
+  await dragTo(
+    page,
+    page.locator('[data-testid="page-property-row-name"]:has-text("Text")'),
+    page.locator(
+      '[data-testid="page-property-row-name"]:has-text("Checkbox") + div'
+    )
+  );
+
+  // new order should be (Tags), Number, Date, Checkbox, Text
+  for (const [index, property] of [
+    'Tags',
+    'Number',
+    'Date',
+    'Checkbox',
+    'Text',
+  ].entries()) {
+    await expect(
+      page
+        .getByTestId('page-property-row')
+        .nth(index)
+        .getByTestId('page-property-row-name')
+    ).toHaveText(property);
+  }
+});
+
+test('page info show more will not should by default when there is no properties', async ({
+  page,
+}) => {
+  // by default page info show more should not show
+  await expect(page.getByTestId('page-info-show-more')).not.toBeVisible();
+});
+
+test('page info show more will show all properties', async ({ page }) => {
+  await addCustomProperty(page, 'Text');
+  await addCustomProperty(page, 'Number');
+  await addCustomProperty(page, 'Date');
+  await addCustomProperty(page, 'Checkbox');
+
+  await expect(page.getByTestId('page-info-show-more')).toBeVisible();
+  await page.click('[data-testid="page-info-show-more"]');
+  await expect(
+    page.getByRole('heading', {
+      name: 'customize properties',
+    })
+  ).toBeVisible();
+
+  // new order should be (Tags), Number, Date, Checkbox, Text
+  for (const [index, property] of [
+    'Text',
+    'Number',
+    'Date',
+    'Checkbox',
+  ].entries()) {
+    await expect(
+      page
+        .getByTestId('page-properties-settings-menu-item')
+        .nth(index)
+        .getByTestId('page-property-setting-row-name')
+    ).toHaveText(property);
+  }
+});
+
+test('change page properties visibility', async ({ page }) => {
+  await addCustomProperty(page, 'Text');
+  await addCustomProperty(page, 'Number');
+  await addCustomProperty(page, 'Date');
+  await addCustomProperty(page, 'Checkbox');
+
+  // add some number to number property
+  await clickPropertyValue(page, 'Number');
+  await page.locator('input[type=number]').fill('123');
+
+  await changePropertyVisibility(page, 'Text', 'Hide in view');
+  await changePropertyVisibility(page, 'Number', 'Hide in view when empty');
+
+  // text property should not be visible
+  await expect(
+    page.locator('[data-testid="page-property-row-name"]:has-text("Text")')
+  ).not.toBeVisible();
+
+  // number property should be visible
+  await expect(
+    page.locator('[data-testid="page-property-row-name"]:has-text("Number")')
+  ).toBeVisible();
+});
+
+test('check if added property is also in workspace settings', async ({
+  page,
+}) => {
+  await addCustomProperty(page, 'Text');
+  await openWorkspaceProperties(page);
+  await expect(
+    page.locator('[data-testid=custom-property-row]:has-text("Text")')
+  ).toBeVisible();
+});
+
+test('edit property name', async ({ page }) => {
+  await addCustomProperty(page, 'Text');
+  await page
+    .locator('[data-testid="page-property-row-name"]:has-text("Text")')
+    .click();
+  await expect(page.locator('[data-radix-menu-content]')).toBeVisible();
+  await expect(page.locator('[data-radix-menu-content] input')).toHaveValue(
+    'Text'
+  );
+  await page.locator('[data-radix-menu-content] input').fill('New Text');
+  await page.keyboard.press('Enter');
+  await expect(page.locator('[data-radix-menu-content] input')).toHaveValue(
+    'New Text'
+  );
+  await page.keyboard.press('Escape');
+
+  // check if the property name is also updated in workspace settings
+  await openWorkspaceProperties(page);
+  await expect(
+    page.locator('[data-testid=custom-property-row]:has-text("New Text")')
+  ).toBeVisible();
+});
+
+test('delete property via property popup', async ({ page }) => {
+  await addCustomProperty(page, 'Text');
+  await page
+    .locator('[data-testid="page-property-row-name"]:has-text("Text")')
+    .click();
+  await expect(page.locator('[data-radix-menu-content]')).toBeVisible();
+  await page
+    .locator('[data-radix-menu-content]')
+    .getByRole('menuitem', {
+      name: 'Remove property',
+    })
+    .click();
+  // confirm delete dialog should show
+  await expect(page.getByRole('dialog')).toContainText(
+    `The "Text" property will be remove from 1 doc(s). This action cannot be undone.`
+  );
+  await page
+    .getByRole('button', {
+      name: 'Confirm',
+    })
+    .click();
+  // check if the property is removed
+  await expect(
+    page.locator('[data-testid="page-property-row-name"]:has-text("Text")')
+  ).not.toBeVisible();
+});
+
+test('create a required property', async ({ page }) => {
+  await openWorkspaceProperties(page);
+  await addCustomProperty(page, 'Text', true);
+
+  await page
+    .locator('[data-testid="custom-property-row"]:has-text("Text")')
+    .getByRole('button')
+    .click();
+
+  await page
+    .getByRole('menuitem', {
+      name: 'Set as required property',
+    })
+    .click();
+
+  await expect(
+    page.locator('[data-testid="custom-property-row"]:has-text("Text")')
+  ).toContainText('Required');
+
+  // close workspace settings
+  await page.keyboard.press('Escape');
+
+  // check if the property is also required in page properties
+  await expect(
+    page.locator('[data-testid="page-property-row-name"]:has-text("Text")')
+  ).toBeVisible();
+
+  // check if the required property is also listed in the show more menu
+  await page.click('[data-testid="page-info-show-more"]');
+  await expect(
+    page.locator(
+      '[data-testid="page-properties-settings-menu-item"]:has-text("Text")'
+    )
+  ).toContainText('Required');
+});

tests/kit/utils/filter.ts

@@ -126,8 +126,9 @@ export const createPageWithTag = async (
   await clickNewPageButton(page);
   await getBlockSuiteEditorTitle(page).click();
   await getBlockSuiteEditorTitle(page).fill('test page');
-  await page.locator('page-meta-tags').click();
-  await page.locator('.add-tag').click();
+  await page
+    .locator('[data-testid="page-property-row"][data-property="tags"]')
+    .click();
   for (const name of options.tags) {
     await createTag(page, name);
   }

tests/kit/utils/page-logic.ts

@@ -26,7 +26,6 @@ export async function clickNewPageButton(page: Page) {
   await page.getByTestId('sidebar-new-page-button').click({
     delay: 100,
   });
-  await expect(page.locator('.doc-title-container-empty')).toBeVisible();
   await waitForEmptyEditor(page);
 }
 

tests/kit/utils/properties.ts

@@ -0,0 +1,178 @@
+import { expect, type Page } from '@playwright/test';
+
+export const getPropertyValueLocator = (page: Page, property: string) => {
+  return page.locator(
+    `[data-testid="page-property-row-name"]:has-text("${property}") + *`
+  );
+};
+
+export const clickPropertyValue = async (page: Page, property: string) => {
+  await getPropertyValueLocator(page, property).click();
+};
+
+export const openTagsEditor = async (page: Page) => {
+  await clickPropertyValue(page, 'tags');
+  await expect(page.getByTestId('tags-editor-popup')).toBeVisible();
+};
+
+export const closeTagsEditor = async (page: Page) => {
+  await page.keyboard.press('Escape');
+  await expect(page.getByTestId('tags-editor-popup')).not.toBeVisible();
+};
+
+export const clickTagFromSelector = async (page: Page, name: string) => {
+  // assume that the tags editor is already open
+  await page
+    .locator(`[data-testid="tag-selector-item"][data-tag-value="${name}"]`)
+    .click();
+};
+
+export const removeSelectedTag = async (page: Page, name: string) => {
+  await page
+    .locator(
+      `[data-testid="tags-editor-popup"] [data-testid="inline-tags-list"] [data-tag-value="${name}"] [data-testid="remove-tag-button"]`
+    )
+    .click();
+};
+
+export const filterTags = async (page: Page, filter: string) => {
+  await page
+    .locator(
+      '[data-testid="tags-editor-popup"] [data-testid="inline-tags-list"] input'
+    )
+    .fill(filter);
+};
+
+export const searchAndCreateTag = async (page: Page, name: string) => {
+  await filterTags(page, name);
+  await page
+    .locator(
+      '[data-testid="tags-editor-popup"] [data-testid="tag-selector-item"]:has-text("Create ")'
+    )
+    .click();
+};
+
+export const expectTagsVisible = async (page: Page, tags: string[]) => {
+  const tagListPanel = page
+    .getByTestId('page-property-row')
+    .getByTestId('inline-tags-list');
+
+  expect(await tagListPanel.locator('[data-tag-value]').count()).toBe(
+    tags.length
+  );
+
+  for (const tag of tags) {
+    await expect(
+      tagListPanel.locator(`[data-tag-value="${tag}"]`)
+    ).toBeVisible();
+  }
+};
+
+export const clickAddPropertyButton = async (page: Page) => {
+  await page
+    .getByRole('button', {
+      name: 'Add property',
+    })
+    .click();
+};
+
+export const addCustomProperty = async (
+  page: Page,
+  type: string,
+  inSettings?: boolean
+) => {
+  await clickAddPropertyButton(page);
+  if (!inSettings) {
+    await expect(
+      page.getByRole('heading', {
+        name: 'Properties',
+      })
+    ).toBeVisible();
+    await page
+      .getByRole('menuitem', {
+        name: 'Create property',
+      })
+      .click();
+  }
+  await expect(
+    page.getByRole('heading', {
+      name: 'Type',
+    })
+  ).toBeVisible();
+  await page
+    .getByRole('menuitem', {
+      name: type,
+    })
+    .click();
+  if (!inSettings) {
+    await expect(
+      page
+        .getByRole('menuitem', {
+          name: type,
+        })
+        .locator('.selected')
+    ).toBeVisible();
+    await page.keyboard.press('Escape', {
+      delay: 100,
+    });
+  }
+};
+
+export const expectPropertyOrdering = async (
+  page: Page,
+  properties: string[]
+) => {
+  for (let i = 0; i < properties.length; i++) {
+    await expect(
+      page.locator(`[data-testid="page-property-row-name"])`).nth(i)
+    ).toHaveText(properties[i]);
+  }
+};
+
+export const openWorkspaceProperties = async (page: Page) => {
+  await page.getByTestId('slider-bar-workspace-setting-button').click();
+  await page
+    .locator('[data-testid="workspace-list-item"] .setting-name')
+    .click();
+  await page.getByTestId('workspace-list-item-properties').click();
+};
+
+export const selectVisibilitySelector = async (
+  page: Page,
+  name: string,
+  option: string
+) => {
+  await page
+    .getByRole('menu')
+    .locator(
+      `[data-testid="page-properties-settings-menu-item"]:has-text("${name}")`
+    )
+    .getByRole('button')
+    .click();
+
+  await page
+    .getByRole('menu')
+    .last()
+    .getByRole('menuitem', {
+      name: option,
+      exact: true,
+    })
+    .click();
+
+  await page.keyboard.press('Escape');
+};
+
+export const changePropertyVisibility = async (
+  page: Page,
+  name: string,
+  option: string
+) => {
+  await expect(page.getByTestId('page-info-show-more')).toBeVisible();
+  await page.click('[data-testid="page-info-show-more"]');
+  await expect(
+    page.getByRole('heading', {
+      name: 'customize properties',
+    })
+  ).toBeVisible();
+  await selectVisibilitySelector(page, name, option);
+};