From 7d67da4f7c153ef0636e0725f483d21d12d1a915 Mon Sep 17 00:00:00 2001
From: Brent Hagen <brent.hagen@opentrons.com>
Date: Wed, 2 Mar 2022 16:49:38 -0500
Subject: [PATCH] test(app): add selectors for devices pages (#9611)

backfill selectors for a variety of unified app devices pages

closes #9434
---
 app/src/atoms/ToggleBtn/index.tsx               |  7 ++++---
 app/src/organisms/Devices/DevicesEmptyState.tsx | 16 ++++++++++++++--
 app/src/organisms/Devices/ModuleIcon.tsx        |  1 +
 .../organisms/Devices/PipettesAndModules.tsx    |  7 ++-----
 .../organisms/Devices/RecentProtocolRuns.tsx    |  7 ++-----
 app/src/organisms/Devices/RobotCard.tsx         |  9 +++++----
 app/src/organisms/Devices/RobotOverview.tsx     | 17 ++++++++++++-----
 app/src/organisms/Devices/RobotStatusBanner.tsx |  6 +++---
 app/src/pages/Devices/DevicesLanding/index.tsx  |  6 +++++-
 9 files changed, 48 insertions(+), 28 deletions(-)

diff --git a/app/src/atoms/ToggleBtn/index.tsx b/app/src/atoms/ToggleBtn/index.tsx
index 96d50a6592d..5fa3aacd242 100644
--- a/app/src/atoms/ToggleBtn/index.tsx
+++ b/app/src/atoms/ToggleBtn/index.tsx
@@ -17,10 +17,11 @@ export interface ToggleBtnProps extends StyleProps {
   toggledOn: boolean
   disabled?: boolean | null
   onClick?: (e: React.MouseEvent) => unknown
+  id?: string
 }
 
 export function ToggleBtn(props: ToggleBtnProps): JSX.Element {
-  const { label, toggledOn, disabled, ...buttonProps } = props
+  const { label, toggledOn, disabled, id, ...buttonProps } = props
   const iconName = toggledOn ? 'ot-toggle-switch-on' : 'ot-toggle-switch-off'
   let color = C_DARK_GRAY
 
@@ -32,12 +33,12 @@ export function ToggleBtn(props: ToggleBtnProps): JSX.Element {
 
   return (
     <Btn
-      // @ts-expect-error TODO: cast disabled to Boolean as Btn expects it
-      disabled={disabled}
+      disabled={disabled ?? false}
       role="switch"
       aria-label={label}
       aria-checked={toggledOn}
       color={color}
+      id={id}
       {...buttonProps}
     >
       <Icon name={iconName} />
diff --git a/app/src/organisms/Devices/DevicesEmptyState.tsx b/app/src/organisms/Devices/DevicesEmptyState.tsx
index 0c37fd6a159..cd5a26e52e2 100644
--- a/app/src/organisms/Devices/DevicesEmptyState.tsx
+++ b/app/src/organisms/Devices/DevicesEmptyState.tsx
@@ -43,11 +43,21 @@ export function DevicesEmptyState(): JSX.Element {
       justifyContent={JUSTIFY_CENTER}
       padding={`${SPACING_5} 0`}
     >
-      <Text as="h3" fontWeight={FONT_WEIGHT_REGULAR} paddingBottom={SPACING_2}>
+      <Text
+        as="h3"
+        fontWeight={FONT_WEIGHT_REGULAR}
+        paddingBottom={SPACING_2}
+        id="DevicesEmptyState_noRobotsFound"
+      >
         {t('no_robots_found')}
       </Text>
       <Box paddingBottom={SPACING_3}>
-        <NewPrimaryBtn onClick={handleRefresh}>{t('refresh')}</NewPrimaryBtn>
+        <NewPrimaryBtn
+          onClick={handleRefresh}
+          id="DevicesEmptyState_refreshButton"
+        >
+          {t('refresh')}
+        </NewPrimaryBtn>
       </Box>
       <Link
         external
@@ -58,6 +68,7 @@ export function DevicesEmptyState(): JSX.Element {
         fontSize={FONT_SIZE_BODY_1}
         fontWeight={FONT_WEIGHT_SEMIBOLD}
         paddingBottom={SPACING_2}
+        id="DevicesEmptyState_settingUpNewRobot"
       >
         {t('setting_up_new_robot')}{' '}
         <Icon name="open-in-new" size="0.675rem" marginLeft={SPACING_1} />
@@ -70,6 +81,7 @@ export function DevicesEmptyState(): JSX.Element {
         color={C_BLUE}
         fontSize={FONT_SIZE_BODY_1}
         fontWeight={FONT_WEIGHT_SEMIBOLD}
+        id="DevicesEmptyState_troubleshootingConnectionProblems"
       >
         {t('troubleshooting_connection_problems')}
         <Icon name="open-in-new" size="0.675rem" marginLeft={SPACING_1} />
diff --git a/app/src/organisms/Devices/ModuleIcon.tsx b/app/src/organisms/Devices/ModuleIcon.tsx
index 638d92ac640..85c38ea9dd9 100644
--- a/app/src/organisms/Devices/ModuleIcon.tsx
+++ b/app/src/organisms/Devices/ModuleIcon.tsx
@@ -27,6 +27,7 @@ export const ModuleIcon = (props: ModuleIconProps): JSX.Element => {
       size={SIZE_1}
       marginRight={SPACING_1}
       color={C_HARBOR_GRAY}
+      id={`ModuleIcon_${moduleType}`}
     />
   )
 }
diff --git a/app/src/organisms/Devices/PipettesAndModules.tsx b/app/src/organisms/Devices/PipettesAndModules.tsx
index 7ae9249c1df..1174a109572 100644
--- a/app/src/organisms/Devices/PipettesAndModules.tsx
+++ b/app/src/organisms/Devices/PipettesAndModules.tsx
@@ -42,7 +42,7 @@ export function PipettesAndModules({
         fontWeight={FONT_WEIGHT_SEMIBOLD}
         fontSize={FONT_SIZE_BODY_2}
         marginBottom={SPACING_3}
-        data-testid="PipettesAndModules_title"
+        id="PipettesAndModules_title"
       >
         {t('pipettes_and_modules')}
       </Text>
@@ -64,10 +64,7 @@ export function PipettesAndModules({
             })}
           </Flex>
         ) : (
-          <Text
-            fontSize={FONT_SIZE_BODY_1}
-            data-testid="PipettesAndModules_offline"
-          >
+          <Text fontSize={FONT_SIZE_BODY_1} id="PipettesAndModules_offline">
             {t('offline_pipettes_and_modules')}
           </Text>
         )}
diff --git a/app/src/organisms/Devices/RecentProtocolRuns.tsx b/app/src/organisms/Devices/RecentProtocolRuns.tsx
index 578017ada01..899d36a616f 100644
--- a/app/src/organisms/Devices/RecentProtocolRuns.tsx
+++ b/app/src/organisms/Devices/RecentProtocolRuns.tsx
@@ -46,7 +46,7 @@ export function RecentProtocolRuns({
         borderBottom={`1px solid ${C_MED_LIGHT_GRAY}`}
         padding={SPACING_3}
         width="100%"
-        data-testid="RecentProtocolRuns_title"
+        id="RecentProtocolRuns_title"
       >
         {t('recent_protocol_runs')}
       </Text>
@@ -61,10 +61,7 @@ export function RecentProtocolRuns({
           // TODO: recent protocol runs section (ticket #8696)
           <div>recent protocol runs here</div>
         ) : (
-          <Text
-            fontSize={FONT_SIZE_BODY_1}
-            data-testid="RecentProtocolRuns_offline"
-          >
+          <Text fontSize={FONT_SIZE_BODY_1} id="RecentProtocolRuns_offline">
             {t('offline_recent_protocol_runs')}
           </Text>
         )}
diff --git a/app/src/organisms/Devices/RobotCard.tsx b/app/src/organisms/Devices/RobotCard.tsx
index 3b5a8fd6d88..2e011c90c32 100644
--- a/app/src/organisms/Devices/RobotCard.tsx
+++ b/app/src/organisms/Devices/RobotCard.tsx
@@ -47,7 +47,7 @@ export function RobotCard(props: RobotCardProps): JSX.Element | null {
       padding={SPACING_2}
       width="100%"
     >
-      <img src={OT2_PNG} style={{ width: '6rem' }} />
+      <img src={OT2_PNG} style={{ width: '6rem' }} id="RobotCard_robotImage" />
       <Box padding={SPACING_2} width="100%">
         <RobotStatusBanner name={name} local={local} />
         <Flex>
@@ -55,7 +55,7 @@ export function RobotCard(props: RobotCardProps): JSX.Element | null {
             <Text textTransform={TEXT_TRANSFORM_UPPERCASE}>
               {t('left_mount')}
             </Text>
-            <Text>
+            <Text id="RobotCard_leftMountPipette">
               {attachedPipettes?.left?.modelSpecs.displayName ?? t('empty')}
             </Text>
           </Flex>
@@ -63,7 +63,7 @@ export function RobotCard(props: RobotCardProps): JSX.Element | null {
             <Text textTransform={TEXT_TRANSFORM_UPPERCASE}>
               {t('right_mount')}
             </Text>
-            <Text>
+            <Text id="RobotCard_rightMountPipette">
               {attachedPipettes?.right?.modelSpecs.displayName ?? t('empty')}
             </Text>
           </Flex>
@@ -78,7 +78,8 @@ export function RobotCard(props: RobotCardProps): JSX.Element | null {
         </Flex>
       </Box>
       {/* temp link from three dot menu to device detail page. Robot actions menu covered in ticket #8673 */}
-      <Box alignSelf={ALIGN_START}>
+      {/* attachment of RobotCard_overflowMenu selector may change */}
+      <Box alignSelf={ALIGN_START} id="RobotCard_overflowMenu">
         <Link to={`/devices/${name}`}>
           <Icon name="dots-horizontal" color={C_BLUE} size={SIZE_2} />
         </Link>
diff --git a/app/src/organisms/Devices/RobotOverview.tsx b/app/src/organisms/Devices/RobotOverview.tsx
index cca5d6f1777..44ad3dd04bf 100644
--- a/app/src/organisms/Devices/RobotOverview.tsx
+++ b/app/src/organisms/Devices/RobotOverview.tsx
@@ -59,7 +59,11 @@ export function RobotOverview({
       padding={SPACING_2}
       width="100%"
     >
-      <img src={OT2_PNG} style={{ width: '6rem' }} />
+      <img
+        src={OT2_PNG}
+        style={{ width: '6rem' }}
+        id="RobotOverview_robotImage"
+      />
       <Box padding={SPACING_2} width="100%">
         <RobotStatusBanner name={robot.name} local={robot.local} />
         <Flex justifyContent={JUSTIFY_SPACE_BETWEEN}>
@@ -75,7 +79,7 @@ export function RobotOverview({
                 onClick={toggleLights}
                 size={SIZE_2}
                 marginRight={SPACING_2}
-                data-testid={`RobotOverview_${robot.name}_lights_toggle`}
+                id={`RobotOverview_lightsToggle`}
               />
               <Text as="span">{t('lights')}</Text>
             </Flex>
@@ -83,7 +87,7 @@ export function RobotOverview({
           {/* this link will change once protocol selection designs are finalized and functionality built out */}
           <Link
             to={`/devices/${robot.name}/protocol-runs/run`}
-            data-testid={`RobotOverview_${robot.name}_protocol_run_link`}
+            id={`RobotOverview_runAProtocol`}
           >
             <NewPrimaryBtn
               textTransform={TEXT_TRANSFORM_NONE}
@@ -95,8 +99,11 @@ export function RobotOverview({
         </Flex>
       </Box>
       <Box alignSelf={ALIGN_START}>
-        {/* temp link to robot settings until overflow menu implemented */}
-        <Link to={`/devices/${robotName}/robot-settings/calibration`}>
+        {/* temp link to robot settings until overflow menu implemented. selector may change */}
+        <Link
+          to={`/devices/${robotName}/robot-settings/calibration`}
+          id="RobotOverview_overflowMenu"
+        >
           <Icon name="dots-vertical" color={C_MED_DARK_GRAY} size={SIZE_2} />
         </Link>
       </Box>
diff --git a/app/src/organisms/Devices/RobotStatusBanner.tsx b/app/src/organisms/Devices/RobotStatusBanner.tsx
index abce026e29b..1ac7b9de18a 100644
--- a/app/src/organisms/Devices/RobotStatusBanner.tsx
+++ b/app/src/organisms/Devices/RobotStatusBanner.tsx
@@ -39,7 +39,7 @@ export function RobotStatusBanner(props: RobotStatusBannerProps): JSX.Element {
       {/* TODO: link to specific run page when built out */}
       <Link
         to={`/devices/${name}/protocol-runs/run`}
-        data-testid={`RobotStatusBanner_${name}_active_run_link`}
+        id="RobotStatusBanner_goToRun"
       >
         {t('go_to_run')}
       </Link>
@@ -50,13 +50,13 @@ export function RobotStatusBanner(props: RobotStatusBannerProps): JSX.Element {
     <Flex flexDirection={DIRECTION_COLUMN}>
       {/* robot_model can be seen in the health response, but only for "connectable" robots.
   Probably best to leave as "OT-2" for now */}
-      <Text data-testid={`RobotStatusBanner_${name}_model`}>OT-2</Text>
+      <Text id="RobotStatusBanner_robotModel">OT-2</Text>
       <Flex justifyContent={JUSTIFY_SPACE_BETWEEN}>
         <Flex paddingBottom={SPACING_3}>
           <Text
             as="span"
             marginRight={SPACING_3}
-            data-testid={`RobotStatusBanner_${name}_name`}
+            id="RobotStatusBanner_robotName"
           >
             {name}
           </Text>
diff --git a/app/src/pages/Devices/DevicesLanding/index.tsx b/app/src/pages/Devices/DevicesLanding/index.tsx
index 60b4fcc3ffe..765703a29a0 100644
--- a/app/src/pages/Devices/DevicesLanding/index.tsx
+++ b/app/src/pages/Devices/DevicesLanding/index.tsx
@@ -48,7 +48,11 @@ export function DevicesLanding(): JSX.Element {
   return (
     <Box minWidth={SIZE_6} padding={`${SPACING_2} ${SPACING_3}`}>
       <Flex>
-        <Text as="h3" fontWeight={FONT_WEIGHT_SEMIBOLD}>
+        <Text
+          as="h3"
+          fontWeight={FONT_WEIGHT_SEMIBOLD}
+          id="DevicesLanding_title"
+        >
           {t('devices')}
         </Text>
       </Flex>