refactor: move test utils to package (#3206)

tests/kit/utils/editor.ts

@@ -0,0 +1,12 @@
+import type { Page } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+export async function checkBlockHub(page: Page) {
+  const box = await page.locator('affine-block-hub').boundingBox();
+  if (!box) throw new Error('block-hub not found');
+  await page.getByTestId('block-hub').click();
+  await page.waitForTimeout(500);
+  const box2 = await page.locator('affine-block-hub').boundingBox();
+  if (!box2) throw new Error('block-hub not found');
+  expect(box2.height).toBeGreaterThan(box.height);
+}

tests/kit/utils/filter.ts

@@ -0,0 +1,219 @@
+import type { Page } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+import { getBlockSuiteEditorTitle, newPage } from './page-logic';
+
+const monthNames = [
+  'Jan',
+  'Feb',
+  'Mar',
+  'Apr',
+  'May',
+  'Jun',
+  'Jul',
+  'Aug',
+  'Sep',
+  'Oct',
+  'Nov',
+  'Dec',
+];
+
+export const createFirstFilter = async (page: Page, name: string) => {
+  await page
+    .locator('[data-testid="editor-header-items"]')
+    .locator('button', { hasText: 'Filter' })
+    .click();
+  await page
+    .locator('[data-testid="variable-select-item"]', { hasText: name })
+    .click();
+};
+
+export const checkFilterName = async (page: Page, name: string) => {
+  const filterName = await page
+    .locator('[data-testid="filter-name"]')
+    .textContent();
+  expect(filterName).toBe(name);
+};
+
+const dateFormat = (date: Date) => {
+  const month = monthNames[date.getMonth()];
+  const day = date.getDate().toString().padStart(2, '0');
+  return `${month} ${day}`;
+};
+
+export const checkPagesCount = async (page: Page, count: number) => {
+  expect((await page.locator('[data-testid="title"]').all()).length).toBe(
+    count
+  );
+};
+
+export const checkDatePicker = async (page: Page, date: Date) => {
+  expect(
+    await page
+      .locator('[data-testid="filter-arg"]')
+      .locator('input')
+      .inputValue()
+  ).toBe(dateFormat(date));
+};
+
+export const clickDatePicker = async (page: Page) => {
+  await page.locator('[data-testid="filter-arg"]').locator('input').click();
+};
+
+const clickMonthPicker = async (page: Page) => {
+  await page.locator('[data-testid="month-picker-button"]').click();
+};
+
+export const fillDatePicker = async (page: Page, date: Date) => {
+  await page
+    .locator('[data-testid="filter-arg"]')
+    .locator('input')
+    .fill(dateFormat(date));
+};
+
+const checkIsLastMonth = (date: Date): boolean => {
+  const targetMonth = date.getMonth();
+  const currentMonth = new Date().getMonth();
+  const lastMonth = currentMonth === 0 ? 11 : currentMonth - 1;
+  return targetMonth === lastMonth;
+};
+
+const checkIsNextMonth = (date: Date): boolean => {
+  const targetMonth = date.getMonth();
+  const currentMonth = new Date().getMonth();
+  const nextMonth = currentMonth === 11 ? 0 : currentMonth + 1;
+  return targetMonth === nextMonth;
+};
+
+export const selectDateFromDatePicker = async (page: Page, date: Date) => {
+  const datePickerPopup = page.locator('.react-datepicker-popper');
+  const day = date.getDate();
+  const month = date.toLocaleString('en-US', { month: 'long' });
+  const weekday = date.toLocaleString('en-US', { weekday: 'long' });
+  const year = date.getFullYear().toString();
+  const nth = function (d: number) {
+    if (d > 3 && d < 21) return 'th';
+    switch (d % 10) {
+      case 1:
+        return 'st';
+      case 2:
+        return 'nd';
+      case 3:
+        return 'rd';
+      default:
+        return 'th';
+    }
+  };
+  const daySuffix = nth(day);
+  // Open the date picker popup
+  await clickDatePicker(page);
+  const selectDate = async (): Promise<void> => {
+    if (checkIsLastMonth(date)) {
+      const lastMonthButton = page.locator(
+        '[data-testid="date-picker-prev-button"]'
+      );
+      await lastMonthButton.click();
+    } else if (checkIsNextMonth(date)) {
+      const nextMonthButton = page.locator(
+        '[data-testid="date-picker-next-button"]'
+      );
+      await nextMonthButton.click();
+    }
+    // Click on the day cell
+    const dateCell = page.locator(
+      `[aria-disabled="false"][aria-label="Choose ${weekday}, ${month} ${day}${daySuffix}, ${year}"]`
+    );
+    await dateCell.click();
+  };
+  await selectDate();
+
+  // Wait for the date picker popup to close
+  await datePickerPopup.waitFor({ state: 'hidden' });
+};
+
+const checkIsLastYear = (date: Date): boolean => {
+  const targetYear = date.getFullYear();
+  const currentYear = new Date().getFullYear();
+  const lastYear = currentYear - 1;
+  return targetYear === lastYear;
+};
+
+const checkIsNextYear = (date: Date): boolean => {
+  const targetYear = date.getFullYear();
+  const currentYear = new Date().getFullYear();
+  const nextYear = currentYear + 1;
+  return targetYear === nextYear;
+};
+
+export const selectMonthFromMonthPicker = async (page: Page, date: Date) => {
+  const month = date.toLocaleString('en-US', { month: 'long' });
+  const year = date.getFullYear().toString();
+  // Open the month picker popup
+  await clickMonthPicker(page);
+  const selectMonth = async (): Promise<void> => {
+    if (checkIsLastYear(date)) {
+      const lastYearButton = page.locator(
+        '[data-testid="month-picker-prev-button"]'
+      );
+      await lastYearButton.click();
+    } else if (checkIsNextYear(date)) {
+      const nextYearButton = page.locator(
+        '[data-testid="month-picker-next-button"]'
+      );
+      await nextYearButton.click();
+    }
+    // Click on the day cell
+    const monthCell = page.locator(`[aria-label="Choose ${month} ${year}"]`);
+    await monthCell.click();
+  };
+  await selectMonth();
+};
+
+export const checkDatePickerMonth = async (page: Page, date: Date) => {
+  expect(
+    await page.locator('[data-testid="date-picker-current-month"]').innerText()
+  ).toBe(date.toLocaleString('en-US', { month: 'long' }));
+};
+
+const createTag = async (page: Page, name: string) => {
+  await page.keyboard.type(name);
+  await page.keyboard.press('ArrowUp');
+  await page.keyboard.press('Enter');
+};
+
+export const createPageWithTag = async (
+  page: Page,
+  options: {
+    title: string;
+    tags: string[];
+  }
+) => {
+  await page.getByTestId('all-pages').click();
+  await newPage(page);
+  await getBlockSuiteEditorTitle(page).click();
+  await getBlockSuiteEditorTitle(page).fill('test page');
+  await page.locator('affine-page-meta-data').click();
+  await page.locator('.add-tag').click();
+  for (const name of options.tags) {
+    await createTag(page, name);
+  }
+  await page.keyboard.press('Escape');
+};
+
+export const changeFilter = async (page: Page, to: string | RegExp) => {
+  await page.getByTestId('filter-name').click();
+  await page
+    .getByTestId('filter-name-select')
+    .locator('button', { hasText: to })
+    .click();
+};
+
+export async function selectTag(page: Page, name: string | RegExp) {
+  await page.getByTestId('filter-arg').click();
+  await page
+    .getByTestId('multi-select')
+    .getByTestId('select-option')
+    .getByText(name)
+    .click();
+  await page.getByTestId('filter-arg').click();
+}

tests/kit/utils/keyboard.ts

@@ -0,0 +1,65 @@
+import type { Page } from '@playwright/test';
+
+const IS_MAC = process.platform === 'darwin';
+
+async function keyDownCtrlOrMeta(page: Page) {
+  if (IS_MAC) {
+    await page.keyboard.down('Meta');
+  } else {
+    await page.keyboard.down('Control');
+  }
+}
+
+async function keyUpCtrlOrMeta(page: Page) {
+  if (IS_MAC) {
+    await page.keyboard.up('Meta');
+  } else {
+    await page.keyboard.up('Control');
+  }
+}
+
+// It's not good enough, but better than calling keyDownCtrlOrMeta and keyUpCtrlOrMeta separately
+export const withCtrlOrMeta = async (page: Page, fn: () => Promise<void>) => {
+  await keyDownCtrlOrMeta(page);
+  await fn();
+  await keyUpCtrlOrMeta(page);
+};
+
+export async function pressEnter(page: Page) {
+  // avoid flaky test by simulate real user input
+  await page.keyboard.press('Enter', { delay: 50 });
+}
+
+export async function pressTab(page: Page) {
+  await page.keyboard.press('Tab', { delay: 50 });
+}
+
+export async function pressShiftTab(page: Page) {
+  await page.keyboard.down('Shift');
+  await page.keyboard.press('Tab', { delay: 50 });
+  await page.keyboard.up('Shift');
+}
+
+export async function pressShiftEnter(page: Page) {
+  await page.keyboard.down('Shift');
+  await page.keyboard.press('Enter', { delay: 50 });
+  await page.keyboard.up('Shift');
+}
+
+export async function copyByKeyboard(page: Page) {
+  await keyDownCtrlOrMeta(page);
+  await page.keyboard.press('c', { delay: 50 });
+  await keyUpCtrlOrMeta(page);
+}
+
+export async function cutByKeyboard(page: Page) {
+  await keyDownCtrlOrMeta(page);
+  await page.keyboard.press('x', { delay: 50 });
+  await keyUpCtrlOrMeta(page);
+}
+
+export async function pasteByKeyboard(page: Page) {
+  await keyDownCtrlOrMeta(page);
+  await page.keyboard.press('v', { delay: 50 });
+  await keyUpCtrlOrMeta(page);
+}

tests/kit/utils/load-page.ts

@@ -0,0 +1,7 @@
+import type { Page } from '@playwright/test';
+
+export const webUrl = 'http://localhost:8080';
+
+export async function openHomePage(page: Page) {
+  await page.goto(webUrl);
+}

tests/kit/utils/page-logic.ts

@@ -0,0 +1,57 @@
+import type { Page } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+export async function waitEditorLoad(page: Page) {
+  await page.waitForSelector('v-line', {
+    timeout: 10000,
+  });
+}
+
+export async function newPage(page: Page) {
+  // fixme(himself65): if too fast, the page will crash
+  await page.getByTestId('new-page-button').click({
+    delay: 100,
+  });
+  await waitEditorLoad(page);
+}
+
+export function getBlockSuiteEditorTitle(page: Page) {
+  return page.locator('v-line').nth(0);
+}
+
+export async function type(page: Page, content: string, delay = 50) {
+  await page.keyboard.type(content, { delay });
+}
+
+export async function pressEnter(page: Page) {
+  // avoid flaky test by simulate real user input
+  await page.keyboard.press('Enter', { delay: 50 });
+}
+
+export const createLinkedPage = async (page: Page, pageName?: string) => {
+  await page.keyboard.type('@', { delay: 50 });
+  const linkedPagePopover = page.locator('.linked-page-popover');
+  await expect(linkedPagePopover).toBeVisible();
+  if (pageName) {
+    await type(page, pageName);
+  } else {
+    pageName = 'Untitled';
+  }
+
+  await page.keyboard.press('ArrowUp');
+  await page.keyboard.press('ArrowUp');
+  await page.keyboard.press('Enter', { delay: 50 });
+};
+
+export async function clickPageMoreActions(page: Page) {
+  return page
+    .getByTestId('editor-header-items')
+    .getByTestId('editor-option-menu')
+    .click();
+}
+
+export const closeDownloadTip = async (page: Page) => {
+  await page
+    .locator('[data-testid="download-client-tip-close-button"]')
+    .click();
+};

tests/kit/utils/setting.ts

@@ -0,0 +1,32 @@
+import type { Page } from '@playwright/test';
+
+export async function clickCollaborationPanel(page: Page) {
+  await page.click('[data-tab-key="collaboration"]');
+}
+
+export async function clickPublishPanel(page: Page) {
+  await page.click('[data-tab-key="publish"]');
+}
+
+export async function openSettingModal(page: Page) {
+  await page.getByTestId('settings-modal-trigger').click();
+}
+
+export async function openAppearancePanel(page: Page) {
+  await page.getByTestId('appearance-panel-trigger').click();
+}
+
+export async function openShortcutsPanel(page: Page) {
+  await page.getByTestId('shortcuts-panel-trigger').click();
+}
+
+export async function openAboutPanel(page: Page) {
+  await page.getByTestId('about-panel-trigger').click();
+}
+
+export async function openWorkspaceSettingPanel(
+  page: Page,
+  workspaceName: string
+) {
+  await page.getByTestId('settings-sidebar').getByText(workspaceName).click();
+}

tests/kit/utils/sidebar.ts

@@ -0,0 +1,17 @@
+import type { Page } from '@playwright/test';
+
+export async function clickSideBarSettingButton(page: Page) {
+  return page.getByTestId('slider-bar-workspace-setting-button').click();
+}
+
+export async function clickSideBarAllPageButton(page: Page) {
+  return page.getByTestId('all-pages').click();
+}
+
+export async function clickSideBarCurrentWorkspaceBanner(page: Page) {
+  return page.getByTestId('current-workspace').click();
+}
+
+export async function clickNewPageButton(page: Page) {
+  return page.getByTestId('new-page-button').click();
+}

tests/kit/utils/utils.ts

@@ -0,0 +1,14 @@
+import type { Page } from '@playwright/test';
+
+export async function waitForLogMessage(
+  page: Page,
+  log: string
+): Promise<boolean> {
+  return new Promise(resolve => {
+    page.on('console', msg => {
+      if (msg.type() === 'log' && msg.text() === log) {
+        resolve(true);
+      }
+    });
+  });
+}

tests/kit/utils/workspace.ts

@@ -0,0 +1,51 @@
+import type { Page } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+import { clickCollaborationPanel } from './setting';
+import { clickSideBarSettingButton } from './sidebar';
+
+interface CreateWorkspaceParams {
+  name: string;
+}
+
+export async function openWorkspaceListModal(page: Page) {
+  const workspaceName = page.getByTestId('workspace-name');
+  await workspaceName.click();
+}
+
+export async function createWorkspace(
+  params: CreateWorkspaceParams,
+  page: Page
+) {
+  await openWorkspaceListModal(page);
+
+  // open create workspace modal
+  await page.locator('.add-icon').click();
+
+  // input workspace name
+  await page.getByPlaceholder('Set a Workspace name').click();
+  await page.getByPlaceholder('Set a Workspace name').fill(params.name);
+
+  // click create button
+  return page.getByRole('button', { name: 'Create' }).click();
+}
+
+export async function assertCurrentWorkspaceFlavour(
+  flavour: 'affine' | 'local',
+  page: Page
+) {
+  // @ts-expect-error
+  const actual = await page.evaluate(() => globalThis.currentWorkspace.flavour);
+  expect(actual).toBe(flavour);
+}
+
+export async function enableAffineCloudWorkspace(page: Page) {
+  await clickSideBarSettingButton(page);
+  await page.waitForTimeout(50);
+  await clickCollaborationPanel(page);
+  await page.getByTestId('local-workspace-enable-cloud-button').click();
+  await page.getByTestId('confirm-enable-cloud-button').click();
+  await page.waitForSelector("[data-testid='member-length']", {
+    timeout: 20000,
+  });
+}