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={{