feat: add and modify test case for new settings modal (#2925)

tests/libs/setting.ts

@@ -7,3 +7,26 @@ export async function clickCollaborationPanel(page: Page) {
 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/parallels/local-first-delete-workspace.spec.ts

@@ -3,10 +3,9 @@ import { expect } from '@playwright/test';
 
 import { openHomePage } from '../libs/load-page';
 import { waitEditorLoad } from '../libs/page-logic';
-import {
-  clickSideBarCurrentWorkspaceBanner,
-  clickSideBarSettingButton,
-} from '../libs/sidebar';
+import { openWorkspaceSettingPanel } from '../libs/setting';
+import { openSettingModal } from '../libs/setting';
+import { clickSideBarCurrentWorkspaceBanner } from '../libs/sidebar';
 import { assertCurrentWorkspaceFlavour } from '../libs/workspace';
 
 test('Create new workspace, then delete it', async ({ page }) => {
@@ -24,7 +23,8 @@ test('Create new workspace, then delete it', async ({ page }) => {
   expect(await page.getByTestId('workspace-name').textContent()).toBe(
     'Test Workspace'
   );
-  await clickSideBarSettingButton(page);
+  await openSettingModal(page);
+  await openWorkspaceSettingPanel(page, 'Test Workspace');
   await page.getByTestId('delete-workspace-button').click();
   const workspaceNameDom = await page.getByTestId('workspace-name');
   const currentWorkspaceName = await workspaceNameDom.evaluate(
@@ -50,12 +50,13 @@ test('Create new workspace, then delete it', async ({ page }) => {
 test('Delete last workspace', async ({ page }) => {
   await openHomePage(page);
   await waitEditorLoad(page);
-  await clickSideBarSettingButton(page);
-  await page.getByTestId('delete-workspace-button').click();
   const workspaceNameDom = await page.getByTestId('workspace-name');
   const currentWorkspaceName = await workspaceNameDom.evaluate(
     node => node.textContent
   );
+  await openSettingModal(page);
+  await openWorkspaceSettingPanel(page, currentWorkspaceName as string);
+  await page.getByTestId('delete-workspace-button').click();
   await page
     .getByTestId('delete-workspace-input')
     .type(currentWorkspaceName as string);

tests/parallels/local-first-setting-page.spec.ts

@@ -1,31 +0,0 @@
-import { resolve } from 'node:path';
-
-import { test, testResultDir } from '@affine-test/kit/playwright';
-import { expect } from '@playwright/test';
-
-import { openHomePage } from '../libs/load-page';
-import { waitEditorLoad } from '../libs/page-logic';
-import { clickSideBarSettingButton } from '../libs/sidebar';
-
-test('Should highlight the setting page menu when selected', async ({
-  page,
-}) => {
-  await openHomePage(page);
-  await waitEditorLoad(page);
-  const element = await page.getByTestId('slider-bar-workspace-setting-button');
-  const prev = await element.screenshot({
-    path: resolve(
-      testResultDir,
-      'slider-bar-workspace-setting-button-prev.png'
-    ),
-  });
-  await clickSideBarSettingButton(page);
-  await page.waitForTimeout(50);
-  const after = await element.screenshot({
-    path: resolve(
-      testResultDir,
-      'slider-bar-workspace-setting-button-after.png'
-    ),
-  });
-  expect(prev).not.toEqual(after);
-});

tests/parallels/settings.spec.ts

@@ -0,0 +1,71 @@
+import { test } from '@affine-test/kit/playwright';
+import { expect } from '@playwright/test';
+
+import { openHomePage } from '../libs/load-page';
+import { waitEditorLoad } from '../libs/page-logic';
+import {
+  openAboutPanel,
+  openAppearancePanel,
+  openSettingModal,
+  openShortcutsPanel,
+} from '../libs/setting';
+
+test('Open settings modal', async ({ page }) => {
+  await openHomePage(page);
+  await waitEditorLoad(page);
+  await openSettingModal(page);
+
+  const modal = await page.getByTestId('setting-modal');
+  await expect(modal).toBeVisible();
+});
+
+test('Change theme', async ({ page }) => {
+  await openHomePage(page);
+  await waitEditorLoad(page);
+  await openSettingModal(page);
+  await openAppearancePanel(page);
+  const root = page.locator('html');
+
+  await page.getByTestId('light-theme-trigger').click();
+  const lightMode = await root.evaluate(element =>
+    element.getAttribute('data-theme')
+  );
+  expect(lightMode).toBe('light');
+
+  await page.getByTestId('dark-theme-trigger').click();
+  const darkMode = await root.evaluate(element =>
+    element.getAttribute('data-theme')
+  );
+  expect(darkMode).toBe('dark');
+});
+
+test('Change layout width', async ({ page }) => {
+  await openHomePage(page);
+  await waitEditorLoad(page);
+  await openSettingModal(page);
+  await openAppearancePanel(page);
+
+  await page.getByTestId('full-width-layout-trigger').click();
+
+  const editorWrapper = await page.locator('.editor-wrapper');
+  const className = await editorWrapper.getAttribute('class');
+  expect(className).toContain('full-screen');
+});
+
+test('Open shortcuts panel', async ({ page }) => {
+  await openHomePage(page);
+  await waitEditorLoad(page);
+  await openSettingModal(page);
+  await openShortcutsPanel(page);
+  const title = await page.getByTestId('keyboard-shortcuts-title');
+  await expect(title).toBeVisible();
+});
+
+test('Open about panel', async ({ page }) => {
+  await openHomePage(page);
+  await waitEditorLoad(page);
+  await openSettingModal(page);
+  await openAboutPanel(page);
+  const title = await page.getByTestId('about-title');
+  await expect(title).toBeVisible();
+});