add data-testids to UI components that may be hard to target with automation

This commit is contained in:
Mary Hipp
2023-09-28 15:25:45 -04:00
committed by psychedelicious
parent 5174f382b9
commit 52f8c9e16f
21 changed files with 51 additions and 8 deletions

View File

@ -46,6 +46,7 @@ const IAICollapse = (props: IAIToggleCollapseProps) => {
transitionDuration: 'normal',
userSelect: 'none',
}}
data-testid={`${label} collapsible`}
>
{label}
<AnimatePresence>

View File

@ -67,6 +67,7 @@ type IAIDndImageProps = FlexProps & {
withHoverOverlay?: boolean;
children?: JSX.Element;
uploadElement?: ReactNode;
dataTestId?: string;
};
const IAIDndImage = (props: IAIDndImageProps) => {
@ -94,6 +95,7 @@ const IAIDndImage = (props: IAIDndImageProps) => {
children,
onMouseOver,
onMouseOut,
dataTestId,
} = props;
const { colorMode } = useColorMode();
@ -183,6 +185,7 @@ const IAIDndImage = (props: IAIDndImageProps) => {
borderRadius: 'base',
...imageSx,
}}
data-testId={dataTestId}
/>
{withMetadataOverlay && (
<ImageMetadataOverlay imageDTO={imageDTO} />

View File

@ -39,6 +39,7 @@ const IAIDndImageIcon = (props: Props) => {
},
...styleOverrides,
}}
data-testid={tooltip}
/>
);
};

View File

@ -30,6 +30,7 @@ const IAIIconButton = forwardRef((props: IAIIconButtonProps, forwardedRef) => {
ref={forwardedRef}
role={role}
colorScheme={isChecked ? 'accent' : 'base'}
data-testid={tooltip}
{...rest}
/>
</Tooltip>

View File

@ -70,7 +70,12 @@ const IAIMantineSearchableSelect = forwardRef((props: IAISelectProps, ref) => {
return (
<Tooltip label={tooltip} placement="top" hasArrow>
<FormControl ref={ref} isDisabled={disabled} position="static">
<FormControl
ref={ref}
isDisabled={disabled}
position="static"
data-testid={`select-${label || props.placeholder}`}
>
{label && <FormLabel>{label}</FormLabel>}
<Select
ref={inputRef}

View File

@ -27,6 +27,7 @@ const IAIMantineSelect = forwardRef((props: IAISelectProps, ref) => {
isRequired={required}
isDisabled={disabled}
position="static"
data-testid={`select-${label || props.placeholder}`}
>
<FormLabel>{label}</FormLabel>
<Select disabled={disabled} ref={inputRef} styles={styles} {...rest} />