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

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