test(components): add data-test-ids for e2e tests

src/base/Button/Button.tsx

@@ -3,29 +3,30 @@ import { Button as MuiButton, type ButtonProps as MuiButtonProps } from '@mui/ma
 export interface ButtonProps extends MuiButtonProps {
   label?: string;
   children?: React.ReactNode;
+  'data-testid'?: string;
 }
 
 export function Button({ label, children, ...props }: ButtonProps): JSX.Element {
   return (
-    <MuiButton {...props}>
+    <MuiButton data-testid={props['data-testid']} {...props}>
       {label}
       {children}
     </MuiButton>
   );
 }
 
 export const ContainedButton = (props: ButtonProps): JSX.Element => (
-  <Button variant="contained" {...props}>
+  <Button variant="contained" data-testid={props['data-testid'] || 'contained-button'} {...props}>
     {props.children}
   </Button>
 );
 export const OutlinedButton = (props: ButtonProps): JSX.Element => (
-  <Button variant="outlined" {...props}>
+  <Button variant="outlined" data-testid={props['data-testid'] || 'outlined-button'} {...props}>
     {props.children}
   </Button>
 );
 export const TextButton = (props: ButtonProps): JSX.Element => (
-  <Button variant="text" {...props}>
+  <Button variant="text" data-testid={props['data-testid'] || 'text-button'} {...props}>
     {props.children}
   </Button>
 );

src/base/Switch/Switch.tsx

@@ -1,7 +1,11 @@
 import { Switch as MuiSwitch, type SwitchProps as MuiSwitchProps } from '@mui/material';
 import React from 'react';
 
-const Switch = React.forwardRef<HTMLButtonElement, MuiSwitchProps>((props, ref) => {
+interface ExtendedSwitchProps extends MuiSwitchProps {
+  'data-testid'?: string;
+}
+
+const Switch = React.forwardRef<HTMLButtonElement, ExtendedSwitchProps>((props, ref) => {
   return <MuiSwitch {...props} ref={ref} />;
 });
 

src/base/Typography/Typography.tsx

@@ -4,7 +4,11 @@ import {
 } from '@mui/material';
 import React from 'react';
 
-const Typography = React.forwardRef<HTMLDivElement, MuiTypographyProps>((props, ref) => {
+interface ExtendedTypographyProps extends MuiTypographyProps {
+  'data-testid'?: string;
+}
+
+const Typography = React.forwardRef<HTMLDivElement, ExtendedTypographyProps>((props, ref) => {
   return <MuiTypography {...props} ref={ref} />;
 });