Merge pull request #55 from input-output-hk/LW-11556/add_test_ids

add data-testid to toggle-switch component

Author: ljagiela

src/design-system/box/box.component.tsx

@@ -51,7 +51,7 @@ export const Box = forwardRef<HTMLDivElement | null, Readonly<Props>>(
       px,
       py,
       w,
-      testId = 'box',
+      testId,
       ...props
     },
     ref,

src/design-system/toggle-switch/toggle-switch.component.tsx

@@ -21,29 +21,40 @@ type Props = Omit<
   defaultChecked?: boolean;
   required?: boolean;
   id?: string;
+  testId?: string;
 };
 
 export const ToggleSwitch = ({
   label,
   id,
   icon,
   disabled,
+  testId,
   ...props
 }: Readonly<Props>): JSX.Element => {
   return (
     <Flex
       alignItems="center"
       className={disabled === true ? cx.disabled : undefined}
     >
-      <label className={cx.label} htmlFor={id}>
+      <label
+        className={cx.label}
+        htmlFor={id}
+        data-testid={testId + 'toggle-label'}
+      >
         <Text.Body.Normal color="secondary">{label}</Text.Body.Normal>
       </label>
-      {icon !== undefined && <Box className={cx.iconContainer}>{icon}</Box>}
+      {icon !== undefined && (
+        <Box className={cx.iconContainer} testId={testId + 'toggle-icon'}>
+          {icon}
+        </Box>
+      )}
       <Switch.Root
         {...props}
         disabled={disabled}
         className={cx.toogleSwitch}
         id={id}
+        data-testid={testId + 'toggle-switch'}
       >
         <Switch.Thumb className={cx.thumb} />
       </Switch.Root>