mirror of
https://github.com/invoke-ai/InvokeAI
synced 2024-08-30 20:32:17 +00:00
add data-testids to UI components that may be hard to target with automation
This commit is contained in:
Mary Hipp
psychedelicious
parent
5174f382b9
commit
52f8c9e16f
@ -46,6 +46,7 @@ const IAICollapse = (props: IAIToggleCollapseProps) => {
|
||||
transitionDuration: 'normal',
|
||||
userSelect: 'none',
|
||||
}}
|
||||
data-testid={`${label} collapsible`}
|
||||
>
|
||||
{label}
|
||||
<AnimatePresence>
|
||||
|
||||
@ -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} />
|
||||
|
||||
@ -39,6 +39,7 @@ const IAIDndImageIcon = (props: Props) => {
|
||||
},
|
||||
...styleOverrides,
|
||||
}}
|
||||
data-testid={tooltip}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@ -30,6 +30,7 @@ const IAIIconButton = forwardRef((props: IAIIconButtonProps, forwardedRef) => {
|
||||
ref={forwardedRef}
|
||||
role={role}
|
||||
colorScheme={isChecked ? 'accent' : 'base'}
|
||||
data-testid={tooltip}
|
||||
{...rest}
|
||||
/>
|
||||
</Tooltip>
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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} />
|
||||
|
||||
@ -20,6 +20,7 @@ const AddBoardButton = () => {
|
||||
aria-label={t('boards.addBoard')}
|
||||
onClick={handleCreateBoard}
|
||||
size="sm"
|
||||
data-testid="add-board-button"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@ -68,17 +68,22 @@ const BoardsList = (props: Props) => {
|
||||
>
|
||||
<Grid
|
||||
className="list-container"
|
||||
data-testid="boards-list"
|
||||
sx={{
|
||||
gridTemplateColumns: `repeat(auto-fill, minmax(108px, 1fr));`,
|
||||
maxH: 346,
|
||||
}}
|
||||
>
|
||||
<GridItem sx={{ p: 1.5 }}>
|
||||
<GridItem sx={{ p: 1.5 }} data-testid="no-board">
|
||||
<NoBoardBoard isSelected={selectedBoardId === 'none'} />
|
||||
</GridItem>
|
||||
{filteredBoards &&
|
||||
filteredBoards.map((board) => (
|
||||
<GridItem key={board.board_id} sx={{ p: 1.5 }}>
|
||||
filteredBoards.map((board, index) => (
|
||||
<GridItem
|
||||
key={board.board_id}
|
||||
sx={{ p: 1.5 }}
|
||||
data-testid={`board-${index}`}
|
||||
>
|
||||
<GalleryBoard
|
||||
board={board}
|
||||
isSelected={selectedBoardId === board.board_id}
|
||||
|
||||
@ -79,6 +79,7 @@ const BoardsSearch = () => {
|
||||
value={boardSearchText}
|
||||
onKeyDown={handleKeydown}
|
||||
onChange={handleChange}
|
||||
data-testid="board-search-input"
|
||||
/>
|
||||
{boardSearchText && boardSearchText.length && (
|
||||
<InputRightElement>
|
||||
|
||||
@ -149,6 +149,7 @@ const CurrentImagePreview = () => {
|
||||
width={denoiseProgress.progress_image.width}
|
||||
height={denoiseProgress.progress_image.height}
|
||||
draggable={false}
|
||||
data-testid="progress-image"
|
||||
sx={{
|
||||
objectFit: 'contain',
|
||||
maxWidth: 'full',
|
||||
@ -171,6 +172,7 @@ const CurrentImagePreview = () => {
|
||||
noContentFallback={
|
||||
<IAINoContentFallback icon={FaImage} label="No image selected" />
|
||||
}
|
||||
dataTestId="image-preview"
|
||||
/>
|
||||
)}
|
||||
{shouldShowImageDetails && imageDTO && (
|
||||
|
||||
@ -109,6 +109,7 @@ const ImageGalleryContent = () => {
|
||||
w: 'full',
|
||||
}}
|
||||
leftIcon={<FaImages />}
|
||||
data-testid="images-tab"
|
||||
>
|
||||
Images
|
||||
</Tab>
|
||||
@ -121,6 +122,7 @@ const ImageGalleryContent = () => {
|
||||
w: 'full',
|
||||
}}
|
||||
leftIcon={<FaServer />}
|
||||
data-testid="assets-tab"
|
||||
>
|
||||
Assets
|
||||
</Tab>
|
||||
|
||||
@ -117,7 +117,10 @@ const GalleryImage = (props: HoverableImageProps) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<Box sx={{ w: 'full', h: 'full', touchAction: 'none' }}>
|
||||
<Box
|
||||
sx={{ w: 'full', h: 'full', touchAction: 'none' }}
|
||||
data-testid={`image-${imageDTO.image_name}`}
|
||||
>
|
||||
<Flex
|
||||
userSelect="none"
|
||||
sx={{
|
||||
|
||||
@ -3,7 +3,12 @@ import { PropsWithChildren, memo } from 'react';
|
||||
|
||||
type ItemContainerProps = PropsWithChildren & FlexProps;
|
||||
const ItemContainer = forwardRef((props: ItemContainerProps, ref) => (
|
||||
<Box className="item-container" ref={ref} p={1.5}>
|
||||
<Box
|
||||
className="item-container"
|
||||
ref={ref}
|
||||
p={1.5}
|
||||
data-testid="image-item-container"
|
||||
>
|
||||
{props.children}
|
||||
</Box>
|
||||
));
|
||||
|
||||
@ -17,6 +17,7 @@ const ListContainer = forwardRef((props: ListContainerProps, ref) => {
|
||||
sx={{
|
||||
gridTemplateColumns: `repeat(auto-fill, minmax(${galleryImageMinimumWidth}px, 1fr));`,
|
||||
}}
|
||||
data-testid="image-list-container"
|
||||
>
|
||||
{props.children}
|
||||
</Grid>
|
||||
|
||||
@ -98,6 +98,7 @@ const ParamLoRASelect = () => {
|
||||
item.value.toLowerCase().includes(value.toLowerCase().trim())
|
||||
}
|
||||
onChange={handleChange}
|
||||
data-testid="add-lora"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@ -107,6 +107,7 @@ const ParamControlNetCollapse = () => {
|
||||
flexGrow={1}
|
||||
size="sm"
|
||||
onClick={handleClickedAddControlNet}
|
||||
data-testid="add controlnet"
|
||||
/>
|
||||
</Flex>
|
||||
{controlNetsArray.map((c, i) => (
|
||||
|
||||
@ -60,6 +60,7 @@ const InitialImage = () => {
|
||||
noContentFallback={
|
||||
<IAINoContentFallback label="No initial image selected" />
|
||||
}
|
||||
dataTestId="initial-image"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@ -77,7 +77,12 @@ const QueueCounts = memo(() => {
|
||||
}, [dispatch]);
|
||||
|
||||
return (
|
||||
<Flex justifyContent="space-between" alignItems="center" pe={1}>
|
||||
<Flex
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
pe={1}
|
||||
data-testid="queue-count"
|
||||
>
|
||||
<Spacer />
|
||||
<Button
|
||||
onClick={handleClick}
|
||||
|
||||
@ -72,6 +72,7 @@ const QueueItemComponent = ({ index, item, context }: InnerItemProps) => {
|
||||
borderRadius="base"
|
||||
justifyContent="center"
|
||||
sx={sx}
|
||||
data-testid="queue-item"
|
||||
>
|
||||
<Flex
|
||||
minH={9}
|
||||
|
||||
@ -8,7 +8,7 @@ const QueueStatus = () => {
|
||||
const { data: queueStatus } = useGetQueueStatusQuery();
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<StatusStatGroup>
|
||||
<StatusStatGroup data-testid="queue-status">
|
||||
<StatusStatItem
|
||||
label={t('queue.in_progress')}
|
||||
value={queueStatus?.queue.in_progress ?? 0}
|
||||
|
||||
@ -39,6 +39,7 @@ const QueueButton = ({
|
||||
colorScheme={colorScheme}
|
||||
isLoading={isLoading}
|
||||
sx={sx}
|
||||
data-testid={label}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@ -55,6 +56,7 @@ const QueueButton = ({
|
||||
loadingText={loadingText ?? label}
|
||||
flexGrow={1}
|
||||
sx={sx}
|
||||
data-testid={label}
|
||||
>
|
||||
{label}
|
||||
</IAIButton>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user