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>

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)}