test(app): add selectors for devices pages (#9611)

backfill selectors for a variety of unified app devices pages closes #9434
Opentrons · Mar 2, 2022 · 7d67da4 · 7d67da4
1 parent e75fe82
commit 7d67da4
Show file tree

Hide file tree

Showing 9 changed files with 48 additions and 28 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -47,23 +47,23 @@ 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>
           <Flex flexDirection={DIRECTION_COLUMN} paddingRight={SPACING_3}>
             <Text textTransform={TEXT_TRANSFORM_UPPERCASE}>
               {t('left_mount')}
             </Text>
-            <Text>
+            <Text id="RobotCard_leftMountPipette">
               {attachedPipettes?.left?.modelSpecs.displayName ?? t('empty')}
             </Text>
           </Flex>
           <Flex flexDirection={DIRECTION_COLUMN} paddingRight={SPACING_3}>
             <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
@@ -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,15 +79,15 @@ 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>
           </Flex>
           {/* 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
@@ -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
@@ -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>