From 52f8c9e16f47606e7e7ffd8209543c88e49cbd68 Mon Sep 17 00:00:00 2001
From: Mary Hipp <maryhipp@Marys-MacBook-Air.local>
Date: Thu, 28 Sep 2023 15:25:45 -0400
Subject: [PATCH] add data-testids to UI components that may be hard to target
 with automation

---
 .../web/src/common/components/IAICollapse.tsx         |  1 +
 .../web/src/common/components/IAIDndImage.tsx         |  3 +++
 .../web/src/common/components/IAIDndImageIcon.tsx     |  1 +
 .../web/src/common/components/IAIIconButton.tsx       |  1 +
 .../common/components/IAIMantineSearchableSelect.tsx  |  7 ++++++-
 .../web/src/common/components/IAIMantineSelect.tsx    |  1 +
 .../components/Boards/BoardsList/AddBoardButton.tsx   |  1 +
 .../components/Boards/BoardsList/BoardsList.tsx       | 11 ++++++++---
 .../components/Boards/BoardsList/BoardsSearch.tsx     |  1 +
 .../components/CurrentImage/CurrentImagePreview.tsx   |  2 ++
 .../gallery/components/ImageGalleryContent.tsx        |  2 ++
 .../gallery/components/ImageGrid/GalleryImage.tsx     |  5 ++++-
 .../components/ImageGrid/ImageGridItemContainer.tsx   |  7 ++++++-
 .../components/ImageGrid/ImageGridListContainer.tsx   |  1 +
 .../src/features/lora/components/ParamLoraSelect.tsx  |  1 +
 .../Parameters/ControlNet/ParamControlNetCollapse.tsx |  1 +
 .../Parameters/ImageToImage/InitialImage.tsx          |  1 +
 .../src/features/queue/components/QueueControls.tsx   |  7 ++++++-
 .../queue/components/QueueList/QueueItemComponent.tsx |  1 +
 .../web/src/features/queue/components/QueueStatus.tsx |  2 +-
 .../features/queue/components/common/QueueButton.tsx  |  2 ++
 21 files changed, 51 insertions(+), 8 deletions(-)

diff --git a/invokeai/frontend/web/src/common/components/IAICollapse.tsx b/invokeai/frontend/web/src/common/components/IAICollapse.tsx
index c2e6cebe99..ca7140ffa5 100644
--- a/invokeai/frontend/web/src/common/components/IAICollapse.tsx
+++ b/invokeai/frontend/web/src/common/components/IAICollapse.tsx
@@ -46,6 +46,7 @@ const IAICollapse = (props: IAIToggleCollapseProps) => {
           transitionDuration: 'normal',
           userSelect: 'none',
         }}
+        data-testid={`${label} collapsible`}
       >
         {label}
         <AnimatePresence>
diff --git a/invokeai/frontend/web/src/common/components/IAIDndImage.tsx b/invokeai/frontend/web/src/common/components/IAIDndImage.tsx
index e7599a1e87..ac19131fdc 100644
--- a/invokeai/frontend/web/src/common/components/IAIDndImage.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIDndImage.tsx
@@ -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} />
diff --git a/invokeai/frontend/web/src/common/components/IAIDndImageIcon.tsx b/invokeai/frontend/web/src/common/components/IAIDndImageIcon.tsx
index f3d3fc0dda..01755b764a 100644
--- a/invokeai/frontend/web/src/common/components/IAIDndImageIcon.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIDndImageIcon.tsx
@@ -39,6 +39,7 @@ const IAIDndImageIcon = (props: Props) => {
         },
         ...styleOverrides,
       }}
+      data-testid={tooltip}
     />
   );
 };
diff --git a/invokeai/frontend/web/src/common/components/IAIIconButton.tsx b/invokeai/frontend/web/src/common/components/IAIIconButton.tsx
index 0a42430689..e426a37e15 100644
--- a/invokeai/frontend/web/src/common/components/IAIIconButton.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIIconButton.tsx
@@ -30,6 +30,7 @@ const IAIIconButton = forwardRef((props: IAIIconButtonProps, forwardedRef) => {
         ref={forwardedRef}
         role={role}
         colorScheme={isChecked ? 'accent' : 'base'}
+        data-testid={tooltip}
         {...rest}
       />
     </Tooltip>
diff --git a/invokeai/frontend/web/src/common/components/IAIMantineSearchableSelect.tsx b/invokeai/frontend/web/src/common/components/IAIMantineSearchableSelect.tsx
index ee6cd86170..39fe7ead3c 100644
--- a/invokeai/frontend/web/src/common/components/IAIMantineSearchableSelect.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIMantineSearchableSelect.tsx
@@ -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}
diff --git a/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx b/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx
index c1150c2c9e..8cc08d2304 100644
--- a/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx
+++ b/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx
@@ -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} />
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/AddBoardButton.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/AddBoardButton.tsx
index 96739f4c84..578b956a83 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/AddBoardButton.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/AddBoardButton.tsx
@@ -20,6 +20,7 @@ const AddBoardButton = () => {
       aria-label={t('boards.addBoard')}
       onClick={handleCreateBoard}
       size="sm"
+      data-testid="add-board-button"
     />
   );
 };
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx
index 4bbd9533fa..b928f379dc 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx
@@ -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}
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsSearch.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsSearch.tsx
index 2d2a85597c..6835253be2 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsSearch.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsSearch.tsx
@@ -79,6 +79,7 @@ const BoardsSearch = () => {
         value={boardSearchText}
         onKeyDown={handleKeydown}
         onChange={handleChange}
+        data-testid="board-search-input"
       />
       {boardSearchText && boardSearchText.length && (
         <InputRightElement>
diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx
index ac2e4a2bf8..ec60d7cbef 100644
--- a/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImage/CurrentImagePreview.tsx
@@ -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 && (
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
index 672cf4e17a..63e0cee378 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
@@ -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>
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx
index af01eeaea8..471abe6ef3 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx
@@ -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={{
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridItemContainer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridItemContainer.tsx
index f55ca1dedf..e018770243 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridItemContainer.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridItemContainer.tsx
@@ -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>
 ));
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridListContainer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridListContainer.tsx
index a93222b58e..8bc6d783ff 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridListContainer.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/ImageGridListContainer.tsx
@@ -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>
diff --git a/invokeai/frontend/web/src/features/lora/components/ParamLoraSelect.tsx b/invokeai/frontend/web/src/features/lora/components/ParamLoraSelect.tsx
index bb485d44b6..ef90e14656 100644
--- a/invokeai/frontend/web/src/features/lora/components/ParamLoraSelect.tsx
+++ b/invokeai/frontend/web/src/features/lora/components/ParamLoraSelect.tsx
@@ -98,6 +98,7 @@ const ParamLoRASelect = () => {
         item.value.toLowerCase().includes(value.toLowerCase().trim())
       }
       onChange={handleChange}
+      data-testid="add-lora"
     />
   );
 };
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse.tsx
index 844bda8b3d..85b5c36b95 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse.tsx
@@ -107,6 +107,7 @@ const ParamControlNetCollapse = () => {
             flexGrow={1}
             size="sm"
             onClick={handleClickedAddControlNet}
+            data-testid="add controlnet"
           />
         </Flex>
         {controlNetsArray.map((c, i) => (
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImage.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImage.tsx
index 17786dac43..52eac42700 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImage.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImage.tsx
@@ -60,6 +60,7 @@ const InitialImage = () => {
       noContentFallback={
         <IAINoContentFallback label="No initial image selected" />
       }
+      dataTestId="initial-image"
     />
   );
 };
diff --git a/invokeai/frontend/web/src/features/queue/components/QueueControls.tsx b/invokeai/frontend/web/src/features/queue/components/QueueControls.tsx
index b19b2425b2..fc42cbb4ad 100644
--- a/invokeai/frontend/web/src/features/queue/components/QueueControls.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueControls.tsx
@@ -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}
diff --git a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx
index 7f4fd9bc9b..dc952a9c36 100644
--- a/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueList/QueueItemComponent.tsx
@@ -72,6 +72,7 @@ const QueueItemComponent = ({ index, item, context }: InnerItemProps) => {
       borderRadius="base"
       justifyContent="center"
       sx={sx}
+      data-testid="queue-item"
     >
       <Flex
         minH={9}
diff --git a/invokeai/frontend/web/src/features/queue/components/QueueStatus.tsx b/invokeai/frontend/web/src/features/queue/components/QueueStatus.tsx
index a91d3c4679..392aeb1a4b 100644
--- a/invokeai/frontend/web/src/features/queue/components/QueueStatus.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueStatus.tsx
@@ -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}
diff --git a/invokeai/frontend/web/src/features/queue/components/common/QueueButton.tsx b/invokeai/frontend/web/src/features/queue/components/common/QueueButton.tsx
index f3ef09f44d..126bbbfdd0 100644
--- a/invokeai/frontend/web/src/features/queue/components/common/QueueButton.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/common/QueueButton.tsx
@@ -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>