diff --git a/src/base/Button/Button.tsx b/src/base/Button/Button.tsx index 534ae2de0..72640587a 100644 --- a/src/base/Button/Button.tsx +++ b/src/base/Button/Button.tsx @@ -3,11 +3,12 @@ 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> @@ -15,17 +16,17 @@ export function Button({ label, children, ...props }: ButtonProps): JSX.Element } 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> ); diff --git a/src/base/Switch/Switch.tsx b/src/base/Switch/Switch.tsx index 820c12cc8..9c8a47904 100644 --- a/src/base/Switch/Switch.tsx +++ b/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} />; }); diff --git a/src/base/Typography/Typography.tsx b/src/base/Typography/Typography.tsx index 70ea97827..5bc51fc3f 100644 --- a/src/base/Typography/Typography.tsx +++ b/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} />; });