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

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>