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

apps/web/src/components/affine/new-workspace-setting-detail/delete-leave-workspace/index.tsx

@@ -31,6 +31,7 @@ export const DeleteLeaveWorkspace: FC<{
         onClick={() => {
           setShowDelete(true);
         }}
+        testId="delete-workspace-button"
       >
         <ArrowRightSmallIcon />
       </SettingRow>

apps/web/src/components/affine/setting-modal/general-setting/about/index.tsx

@@ -21,7 +21,11 @@ export const AboutAffine = () => {
   );
   return (
     <>
-      <SettingHeader title={t['About AFFiNE']()} subtitle={t['None yet']()} />
+      <SettingHeader
+        title={t['About AFFiNE']()}
+        subtitle={t['None yet']()}
+        data-testid="about-title"
+      />
       {runtimeConfig.enableNewSettingUnstableApi && environment.isDesktop ? (
         <SettingWrapper title={t['Version']()}>
           <SettingRow

apps/web/src/components/affine/setting-modal/general-setting/appearance/index.tsx

@@ -30,9 +30,15 @@ export const ThemeSettings = () => {
         [setTheme]
       )}
     >
-      <RadioButton value="system">{t['system']()}</RadioButton>
-      <RadioButton value="light">{t['light']()}</RadioButton>
-      <RadioButton value="dark">{t['dark']()}</RadioButton>
+      <RadioButton value="system" data-testid="system-theme-trigger">
+        {t['system']()}
+      </RadioButton>
+      <RadioButton value="light" data-testid="light-theme-trigger">
+        {t['light']()}
+      </RadioButton>
+      <RadioButton value="dark" data-testid="dark-theme-trigger">
+        {t['dark']()}
+      </RadioButton>
     </RadioButtonGroup>
   );
 };
@@ -86,6 +92,7 @@ export const AppearanceSettings = () => {
           desc={t['Maximum display of content within a page.']()}
         >
           <Switch
+            data-testid="full-width-layout-trigger"
             checked={appSettings.fullWidthLayout}
             onChange={checked => changeSwitch('fullWidthLayout', checked)}
           />

apps/web/src/components/affine/setting-modal/general-setting/index.tsx

@@ -16,6 +16,7 @@ export type GeneralSettingList = {
   key: GeneralSettingKeys;
   title: string;
   icon: FC<SVGProps<SVGSVGElement>>;
+  testId: string;
 }[];
 
 export const useGeneralSettingList = (): GeneralSettingList => {
@@ -25,16 +26,19 @@ export const useGeneralSettingList = (): GeneralSettingList => {
       key: 'appearance',
       title: t['com.affine.settings.appearance'](),
       icon: AppearanceIcon,
+      testId: 'appearance-panel-trigger',
     },
     {
       key: 'shortcuts',
       title: t['Keyboard Shortcuts'](),
       icon: KeyboardIcon,
+      testId: 'shortcuts-panel-trigger',
     },
     {
       key: 'about',
       title: t['About AFFiNE'](),
       icon: InformationIcon,
+      testId: 'about-panel-trigger',
     },
   ];
 };

apps/web/src/components/affine/setting-modal/general-setting/shortcuts/index.tsx

@@ -23,6 +23,7 @@ export const Shortcuts = () => {
       <SettingHeader
         title={t['Keyboard Shortcuts']()}
         subtitle={t['Check Keyboard Shortcuts quickly']()}
+        data-testid="keyboard-shortcuts-title"
       />
       <SettingWrapper title={t['General']()}>
         {Object.entries(generalShortcuts).map(([title, shortcuts]) => {

apps/web/src/components/affine/setting-modal/setting-sidebar/index.tsx

@@ -46,11 +46,11 @@ export const SettingSidebar = ({
 }) => {
   const t = useAFFiNEI18N();
   return (
-    <div className={settingSlideBar}>
+    <div className={settingSlideBar} data-testid="settings-sidebar">
       <div className={sidebarTitle}>{t['Settings']()}</div>
       <div className={sidebarSubtitle}>{t['General']()}</div>
       <div className={sidebarItemsWrapper}>
-        {generalSettingList.map(({ title, icon, key }) => {
+        {generalSettingList.map(({ title, icon, key, testId }) => {
           return (
             <div
               className={clsx(sidebarSelectItem, {
@@ -61,6 +61,7 @@ export const SettingSidebar = ({
               onClick={() => {
                 onGeneralSettingClick(key);
               }}
+              data-testid={testId}
             >
               {icon({ className: 'icon' })}
               <span className="setting-name">{title}</span>

apps/web/src/components/root-app-sidebar/index.tsx

@@ -182,7 +182,7 @@ export const RootAppSidebar = ({
           </RouteMenuLinkItem>
           {runtimeConfig.enableNewSettingModal ? (
             <MenuItem icon={<SettingsIcon />} onClick={onOpenSettingModal}>
-              <span data-testid="new-settings">
+              <span data-testid="settings-modal-trigger">
                 {t['Settings']()}
                 <i
                   style={{

packages/component/src/components/setting-components/setting-header.tsx

@@ -1,12 +1,15 @@
-import type { FC } from 'react';
+import type { FC, HTMLAttributes } from 'react';
 
 import { settingHeader } from './share.css';
-export const SettingHeader: FC<{ title: string; subtitle?: string }> = ({
-  title,
-  subtitle,
-}) => {
+
+export const SettingHeader: FC<
+  { title: string; subtitle?: string } & Omit<
+    HTMLAttributes<HTMLDivElement>,
+    'title'
+  >
+> = ({ title, subtitle, ...otherProps }) => {
   return (
-    <div className={settingHeader}>
+    <div className={settingHeader} {...otherProps}>
       <div className="title">{title}</div>
       <div className="subtitle">{subtitle}</div>
     </div>

packages/component/src/components/setting-components/setting-row.tsx

@@ -10,8 +10,17 @@ export const SettingRow: FC<
     style?: CSSProperties;
     onClick?: () => void;
     spreadCol?: boolean;
+    testId?: string;
   }>
-> = ({ name, desc, children, onClick, style, spreadCol = true }) => {
+> = ({
+  name,
+  desc,
+  children,
+  onClick,
+  style,
+  spreadCol = true,
+  testId = '',
+}) => {
   return (
     <div
       className={clsx(settingRow, {
@@ -19,6 +28,7 @@ export const SettingRow: FC<
       })}
       style={style}
       onClick={onClick}
+      data-testid={testId}
     >
       <div className="left-col">
         <div className="name">{name}</div>

packages/component/src/ui/switch/switch.tsx

@@ -1,17 +1,17 @@
 // components/switch.tsx
 import clsx from 'clsx';
-import { useState } from 'react';
+import { type HTMLAttributes, type ReactNode, useState } from 'react';
 
 import * as styles from './index.css';
 
-type SwitchProps = {
+type SwitchProps = Omit<HTMLAttributes<HTMLLabelElement>, 'onChange'> & {
   checked?: boolean;
   onChange?: (checked: boolean) => void;
-  children?: React.ReactNode;
+  children?: ReactNode;
 };
 
 export const Switch = (props: SwitchProps) => {
-  const { checked, onChange, children } = props;
+  const { checked, onChange, children, ...otherProps } = props;
   const [isChecked, setIsChecked] = useState(checked);
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -21,7 +21,7 @@ export const Switch = (props: SwitchProps) => {
   };
 
   return (
-    <label className={clsx(styles.labelStyle)}>
+    <label className={clsx(styles.labelStyle)} {...otherProps}>
       {children}
       <input
         className={clsx(styles.inputStyle)}

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