From fc7f4849354e81f5b92048f09d7d239841d6ba9d Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 9 May 2024 06:57:13 +1000
Subject: [PATCH] feat(ui): add `data-testid`s to control layers components:

- Add Layer Menu Button: `control-layers-add-layer-menu-button`
- Delete All Layers Button: `control-layers-delete-all-layers-button`
- CL Layer List: `control-layers-layer-list`
- CL Canvas: `control-layers-canvas`
- Toggle Metadata Button: `toggle-show-metadata-button`
- Toggle Progress Button: `toggle-show-progress-button`
- Toggle Viewer Menu Button: `toggle-viewer-menu-button`
- Settings Tab Button: `generation-tab-settings-tab-button`
- Control Layers Tab Button: `generation-tab-control-layers-tab-button`
---
 .../features/controlLayers/components/AddLayerButton.tsx | 7 ++++++-
 .../components/ControlLayersPanelContent.tsx             | 2 +-
 .../controlLayers/components/DeleteAllLayersButton.tsx   | 1 +
 .../features/controlLayers/components/StageComponent.tsx | 9 ++++++++-
 .../ImageViewer/ToggleMetadataViewerButton.tsx           | 1 +
 .../components/ImageViewer/ToggleProgressButton.tsx      | 1 +
 .../gallery/components/ImageViewer/ViewerToggleMenu.tsx  | 2 +-
 .../ui/components/ParametersPanelTextToImage.tsx         | 8 ++++++--
 8 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/AddLayerButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/AddLayerButton.tsx
index 3102e4afa8..c7a49da8c7 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/AddLayerButton.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/AddLayerButton.tsx
@@ -18,7 +18,12 @@ export const AddLayerButton = memo(() => {
 
   return (
     <Menu>
-      <MenuButton as={Button} leftIcon={<PiPlusBold />} variant="ghost">
+      <MenuButton
+        as={Button}
+        leftIcon={<PiPlusBold />}
+        variant="ghost"
+        data-testid="control-layers-add-layer-menu-button"
+      >
         {t('controlLayers.addLayer')}
       </MenuButton>
       <MenuList>
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersPanelContent.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersPanelContent.tsx
index 1dd79d0220..d3ddc07139 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersPanelContent.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersPanelContent.tsx
@@ -32,7 +32,7 @@ export const ControlLayersPanelContent = memo(() => {
       </Flex>
       {layerIdTypePairs.length > 0 && (
         <ScrollableContent>
-          <Flex flexDir="column" gap={2}>
+          <Flex flexDir="column" gap={2} data-testid="control-layers-layer-list">
             {layerIdTypePairs.map(({ id, type }) => (
               <LayerWrapper key={id} id={id} type={type} />
             ))}
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/DeleteAllLayersButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/DeleteAllLayersButton.tsx
index dad102b470..00487fcc43 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/DeleteAllLayersButton.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/DeleteAllLayersButton.tsx
@@ -20,6 +20,7 @@ export const DeleteAllLayersButton = memo(() => {
       variant="ghost"
       colorScheme="error"
       isDisabled={isDisabled}
+      data-testid="control-layers-delete-all-layers-button"
     >
       {t('controlLayers.deleteAll')}
     </Button>
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx b/invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx
index d0d693a5f2..16bf4aa121 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx
@@ -233,7 +233,14 @@ export const StageComponent = memo(({ asPreview = false }: Props) => {
   return (
     <Flex overflow="hidden" w="full" h="full">
       <Flex ref={wrapperRef} w="full" h="full" alignItems="center" justifyContent="center">
-        <Flex ref={containerRef} tabIndex={-1} bg="base.850" borderRadius="base" overflow="hidden" />
+        <Flex
+          ref={containerRef}
+          tabIndex={-1}
+          bg="base.850"
+          borderRadius="base"
+          overflow="hidden"
+          data-testid="control-layers-canvas"
+        />
       </Flex>
     </Flex>
   );
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ToggleMetadataViewerButton.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ToggleMetadataViewerButton.tsx
index a298ebda56..4bf55116db 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ToggleMetadataViewerButton.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ToggleMetadataViewerButton.tsx
@@ -35,6 +35,7 @@ export const ToggleMetadataViewerButton = memo(() => {
       isDisabled={!imageDTO}
       variant="outline"
       colorScheme={shouldShowImageDetails ? 'invokeBlue' : 'base'}
+      data-testid="toggle-show-metadata-button"
     />
   );
 });
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ToggleProgressButton.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ToggleProgressButton.tsx
index 994a8bf10e..ee698130fb 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ToggleProgressButton.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ToggleProgressButton.tsx
@@ -22,6 +22,7 @@ export const ToggleProgressButton = memo(() => {
       onClick={onClick}
       variant="outline"
       colorScheme={shouldShowProgressInViewer ? 'invokeBlue' : 'base'}
+      data-testid="toggle-show-progress-button"
     />
   );
 });
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToggleMenu.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToggleMenu.tsx
index dd4268b208..3552c28a5b 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToggleMenu.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToggleMenu.tsx
@@ -21,7 +21,7 @@ export const ViewerToggleMenu = () => {
   return (
     <Popover isLazy>
       <PopoverTrigger>
-        <Button variant="outline">
+        <Button variant="outline" data-testid="toggle-viewer-menu-button">
           <Flex gap={3} w="full" alignItems="center">
             {isOpen ? <Icon as={PiEyeBold} /> : <Icon as={PiPencilBold} />}
             <Text fontSize="md">{isOpen ? t('common.viewing') : t('common.editing')}</Text>
diff --git a/invokeai/frontend/web/src/features/ui/components/ParametersPanelTextToImage.tsx b/invokeai/frontend/web/src/features/ui/components/ParametersPanelTextToImage.tsx
index 698be530f9..b78d5dce9a 100644
--- a/invokeai/frontend/web/src/features/ui/components/ParametersPanelTextToImage.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/ParametersPanelTextToImage.tsx
@@ -75,10 +75,14 @@ const ParametersPanelTextToImage = () => {
                 onChange={onChangeTabs}
               >
                 <TabList gap={2} fontSize="sm" borderColor="base.800">
-                  <Tab sx={baseStyles} _selected={selectedStyles}>
+                  <Tab sx={baseStyles} _selected={selectedStyles} data-testid="generation-tab-settings-tab-button">
                     {t('common.settingsLabel')}
                   </Tab>
-                  <Tab sx={baseStyles} _selected={selectedStyles}>
+                  <Tab
+                    sx={baseStyles}
+                    _selected={selectedStyles}
+                    data-testid="generation-tab-control-layers-tab-button"
+                  >
                     {controlLayersTitle}
                   </Tab>
                 </TabList>