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');
+});