From 37e2a44c5b0ebe76cc6fc45ca6e2898b0c02c4ad Mon Sep 17 00:00:00 2001
From: Sarah Breen <sarah.breen@opentrons.com>
Date: Mon, 4 Oct 2021 13:49:21 -0400
Subject: [PATCH] refactor(app): add selectors to Metadata Card and Robot
 Calibration Step (#8426)

* refactor(app): add selectors to Metadata Card and Robot Calibration Step

fix #8336
---
 app/src/atoms/structure/LabeledValue.tsx          |  4 +++-
 app/src/organisms/ProtocolSetup/MetadataCard.tsx  | 11 ++++++++++-
 .../RunSetupCard/CollapsibleStep.tsx              |  4 +++-
 .../RobotCalibration/CalibrationItem.tsx          |  5 +++--
 .../RobotCalibration/DeckCalibration.tsx          | 15 +++++++++++++--
 .../RobotCalibration/PipetteCalibration.tsx       | 10 +++++++++-
 .../RobotCalibration/TipLengthCalibration.tsx     |  7 ++++++-
 .../RunSetupCard/RobotCalibration/index.tsx       | 14 ++++++++++++--
 .../ProtocolSetup/RunSetupCard/index.tsx          | 14 ++++++++++++--
 components/src/icons/Icon.tsx                     |  4 +++-
 10 files changed, 74 insertions(+), 14 deletions(-)

diff --git a/app/src/atoms/structure/LabeledValue.tsx b/app/src/atoms/structure/LabeledValue.tsx
index 58087bf9e1b..220cb3a3c36 100644
--- a/app/src/atoms/structure/LabeledValue.tsx
+++ b/app/src/atoms/structure/LabeledValue.tsx
@@ -11,6 +11,7 @@ import type { StyleProps } from '@opentrons/components'
 interface Props extends StyleProps {
   label: React.ReactNode
   value: React.ReactNode
+  id?: string
   labelProps?: React.ComponentProps<typeof Text>
   valueProps?: React.ComponentProps<typeof Text>
 }
@@ -19,12 +20,13 @@ export function LabeledValue(props: Props): JSX.Element {
   const {
     label,
     value,
+    id,
     labelProps = {},
     valueProps = {},
     ...wrapperProps
   } = props
   return (
-    <Box css={FONT_BODY_1_DARK} lineHeight={1.5} {...wrapperProps}>
+    <Box css={FONT_BODY_1_DARK} lineHeight={1.5} {...wrapperProps} id={id}>
       <Text
         fontWeight={FONT_WEIGHT_SEMIBOLD}
         margin="0 0 0.25rem"
diff --git a/app/src/organisms/ProtocolSetup/MetadataCard.tsx b/app/src/organisms/ProtocolSetup/MetadataCard.tsx
index 425062fbd13..003b6135152 100644
--- a/app/src/organisms/ProtocolSetup/MetadataCard.tsx
+++ b/app/src/organisms/ProtocolSetup/MetadataCard.tsx
@@ -25,16 +25,19 @@ export function MetadataCard(): JSX.Element {
           flex={3}
           label={t('organization_and_author')}
           value={author || '-'}
+          id={'MetadataCard_protocolOrganizationAuthor'}
         />
         <LabeledValue
           flex={3}
           label={t('last_updated')}
           value={lastUpdated ? format(lastUpdated, DATE_FORMAT) : '-'}
+          id={'MetadataCard_protocolLastUpdated'}
         />
         <LabeledValue
           flex={2}
           label={t('creation_method')}
           value={method || '-'}
+          id={'MetadataCard_protocolCreationMethod'}
         />
       </Flex>
       <Flex marginTop={SPACING_2}>
@@ -42,8 +45,14 @@ export function MetadataCard(): JSX.Element {
           flex={6}
           label={t('description')}
           value={description || '-'}
+          id={'MetadataCard_protocolDescription'}
+        />
+        <LabeledValue
+          flex={2}
+          label={t('estimated_run_time')}
+          value={'-'}
+          id={'MetadataCard_protocolEstRunTime'}
         />
-        <LabeledValue flex={2} label={t('estimated_run_time')} value={'-'} />
       </Flex>
     </Card>
   )
diff --git a/app/src/organisms/ProtocolSetup/RunSetupCard/CollapsibleStep.tsx b/app/src/organisms/ProtocolSetup/RunSetupCard/CollapsibleStep.tsx
index 34ecc580a23..cc85764d261 100644
--- a/app/src/organisms/ProtocolSetup/RunSetupCard/CollapsibleStep.tsx
+++ b/app/src/organisms/ProtocolSetup/RunSetupCard/CollapsibleStep.tsx
@@ -20,6 +20,7 @@ interface CollapsibleStepProps {
   title: string
   description: string
   label: string
+  id?: string
   toggleExpanded: () => void
   children: React.ReactNode
   rightAlignedNode: React.ReactNode
@@ -30,6 +31,7 @@ export function CollapsibleStep({
   title,
   description,
   label,
+  id,
   toggleExpanded,
   children,
   rightAlignedNode,
@@ -46,7 +48,7 @@ export function CollapsibleStep({
           >
             {label}
           </Text>
-          <Text as="h5" css={FONT_HEADER_DARK} marginTop={SPACING_2}>
+          <Text as="h5" css={FONT_HEADER_DARK} marginTop={SPACING_2} id={id}>
             {title}
           </Text>
           <Text as="p" css={FONT_BODY_1_DARK} marginTop={SPACING_2}>
diff --git a/app/src/organisms/ProtocolSetup/RunSetupCard/RobotCalibration/CalibrationItem.tsx b/app/src/organisms/ProtocolSetup/RunSetupCard/RobotCalibration/CalibrationItem.tsx
index 0e8255d3a69..ad91580e5e0 100644
--- a/app/src/organisms/ProtocolSetup/RunSetupCard/RobotCalibration/CalibrationItem.tsx
+++ b/app/src/organisms/ProtocolSetup/RunSetupCard/RobotCalibration/CalibrationItem.tsx
@@ -25,10 +25,11 @@ interface Props {
   index?: number
   subText?: string
   title?: string
+  id?: string
 }
 
 export function CalibrationItem(props: Props): JSX.Element | null {
-  const { index, title, subText, calibratedDate, button } = props
+  const { index, title, subText, calibratedDate, button, id } = props
   const { t } = useTranslation('protocol_setup')
   const backgroundColor =
     index !== undefined && index % 2 === 0 ? C_NEAR_WHITE : C_WHITE
@@ -55,7 +56,7 @@ export function CalibrationItem(props: Props): JSX.Element | null {
           />
           <span>
             {title !== undefined && (
-              <Text role={'heading'} fontSize={FONT_SIZE_BODY_2}>
+              <Text role={'heading'} fontSize={FONT_SIZE_BODY_2} id={id}>
                 {title}
               </Text>
             )}
diff --git a/app/src/organisms/ProtocolSetup/RunSetupCard/RobotCalibration/DeckCalibration.tsx b/app/src/organisms/ProtocolSetup/RunSetupCard/RobotCalibration/DeckCalibration.tsx
index 07ea91fb0d4..435c7697fec 100644
--- a/app/src/organisms/ProtocolSetup/RunSetupCard/RobotCalibration/DeckCalibration.tsx
+++ b/app/src/organisms/ProtocolSetup/RunSetupCard/RobotCalibration/DeckCalibration.tsx
@@ -68,7 +68,12 @@ export function DeckCalibration(props: Props): JSX.Element | null {
         alignItems={ALIGN_CENTER}
         justifyContent={JUSTIFY_SPACE_BETWEEN}
       >
-        <Text as={'h2'} css={FONT_HEADER_THIN} paddingBottom={SPACING_2}>
+        <Text
+          as={'h2'}
+          css={FONT_HEADER_THIN}
+          paddingBottom={SPACING_2}
+          id={'DeckCalibration_deckCalibrationTitle'}
+        >
           {t('deck_calibration_title')}
         </Text>
         <Link
@@ -76,6 +81,7 @@ export function DeckCalibration(props: Props): JSX.Element | null {
           onClick={() => setHelpModalIsOpen(true)}
           color={C_BLUE}
           fontSize={FONT_SIZE_BODY_1}
+          id={'DeckCalibration_robotCalibrationHelpLink'}
         >
           {t('robot_cal_help_title')}
         </Link>
@@ -91,7 +97,10 @@ export function DeckCalibration(props: Props): JSX.Element | null {
                 justifyContent={JUSTIFY_SPACE_BETWEEN}
               >
                 <Text css={FONT_HEADER_DARK}>{t('robot_cal_help_title')}</Text>
-                <Box onClick={() => setHelpModalIsOpen(false)}>
+                <Box
+                  onClick={() => setHelpModalIsOpen(false)}
+                  id={'RobotCalModal_xButton'}
+                >
                   <Icon name={'close'} size={SIZE_2} />
                 </Box>
               </Flex>
@@ -106,6 +115,7 @@ export function DeckCalibration(props: Props): JSX.Element | null {
                         href={robotCalHelpArticle}
                         target="_blank"
                         rel="noopener noreferrer"
+                        id={'RobotCalModal_helpArticleLink'}
                       />
                     ),
                   }}
@@ -153,6 +163,7 @@ export function DeckCalibration(props: Props): JSX.Element | null {
                   width={SIZE_4}
                   backgroundColor={C_BLUE}
                   name="close"
+                  id={'RobotCalModal_closeButton'}
                 >
                   {t('shared:close')}
                 </PrimaryBtn>
diff --git a/app/src/organisms/ProtocolSetup/RunSetupCard/RobotCalibration/PipetteCalibration.tsx b/app/src/organisms/ProtocolSetup/RunSetupCard/RobotCalibration/PipetteCalibration.tsx
index d7762dd0979..a9febd4c7df 100644
--- a/app/src/organisms/ProtocolSetup/RunSetupCard/RobotCalibration/PipetteCalibration.tsx
+++ b/app/src/organisms/ProtocolSetup/RunSetupCard/RobotCalibration/PipetteCalibration.tsx
@@ -89,6 +89,7 @@ export function PipetteCalibration(props: Props): JSX.Element {
           href={inexactPipetteSupportArticle}
           color={C_BLUE}
           marginRight={SPACING_3}
+          id={'PipetteCalibration_pipetteMismatchHelpLink'}
         >
           {t('pipette_compat_help')}
         </Link>
@@ -109,7 +110,12 @@ export function PipetteCalibration(props: Props): JSX.Element {
         >
           {t('pipette_missing')}
         </Text>
-        <PrimaryBtn as={RRDLink} to={pipettesPageUrl} backgroundColor={C_BLUE}>
+        <PrimaryBtn
+          as={RRDLink}
+          to={pipettesPageUrl}
+          backgroundColor={C_BLUE}
+          id={'PipetteCalibration_attachPipetteButton'}
+        >
           {t('attach_pipette_cta')}
         </PrimaryBtn>
       </Flex>
@@ -122,6 +128,7 @@ export function PipetteCalibration(props: Props): JSX.Element {
           <PrimaryBtn
             backgroundColor={C_BLUE}
             onClick={() => startPipetteOffsetCalibrationBlockModal(null)}
+            id={'PipetteCalibration_calibratePipetteButton'}
           >
             {t('calibrate_now_cta')}
           </PrimaryBtn>
@@ -151,6 +158,7 @@ export function PipetteCalibration(props: Props): JSX.Element {
       title={`${t('mount_title', { mount: mount.toUpperCase() })} ${
         pipetteTipRackData.pipetteDisplayName
       }`}
+      id={`PipetteCalibration_${mount}MountTitle`}
     />
   )
 }
diff --git a/app/src/organisms/ProtocolSetup/RunSetupCard/RobotCalibration/TipLengthCalibration.tsx b/app/src/organisms/ProtocolSetup/RunSetupCard/RobotCalibration/TipLengthCalibration.tsx
index 666df3a4f33..92d82d41954 100644
--- a/app/src/organisms/ProtocolSetup/RunSetupCard/RobotCalibration/TipLengthCalibration.tsx
+++ b/app/src/organisms/ProtocolSetup/RunSetupCard/RobotCalibration/TipLengthCalibration.tsx
@@ -194,11 +194,16 @@ export function TipLengthCalibration({
           onClick={() => confirm(true)}
           textDecoration={TEXT_DECORATION_UNDERLINE}
           css={FONT_BODY_2_DARK}
+          id={'TipRackCalibration_recalibrateTipRackLink'}
         >
           {t('recalibrate')}
         </Link>
       ) : (
-        <PrimaryBtn backgroundColor={C_BLUE} onClick={() => handleStart()}>
+        <PrimaryBtn
+          backgroundColor={C_BLUE}
+          onClick={() => handleStart()}
+          id={'TipRackCalibration_calibrateTipRackButton'}
+        >
           {t('calibrate_now_cta')}
         </PrimaryBtn>
       )}
diff --git a/app/src/organisms/ProtocolSetup/RunSetupCard/RobotCalibration/index.tsx b/app/src/organisms/ProtocolSetup/RunSetupCard/RobotCalibration/index.tsx
index f32af66c3f8..5e2faa4e790 100644
--- a/app/src/organisms/ProtocolSetup/RunSetupCard/RobotCalibration/index.tsx
+++ b/app/src/organisms/ProtocolSetup/RunSetupCard/RobotCalibration/index.tsx
@@ -61,7 +61,12 @@ export function RobotCalibration(props: Props): JSX.Element {
     <>
       <DeckCalibration robotName={robotName} />
       <Divider marginY={SPACING_3} />
-      <Text as="h2" paddingBottom={SPACING_2} css={FONT_HEADER_THIN}>
+      <Text
+        as="h2"
+        paddingBottom={SPACING_2}
+        css={FONT_HEADER_THIN}
+        id={`PipetteCalibration_requiredPipettesTitle`}
+      >
         {t('required_pipettes_title')}
       </Text>
       <div>
@@ -83,7 +88,11 @@ export function RobotCalibration(props: Props): JSX.Element {
         })}
       </div>
       <Divider marginY={SPACING_3} />
-      <Text as="h2" css={FONT_HEADER_THIN}>
+      <Text
+        as="h2"
+        css={FONT_HEADER_THIN}
+        id={'TipRackCalibration_requiredTipLengthTitle'}
+      >
         {t('required_tip_racks_title')}
       </Text>
       <div>
@@ -130,6 +139,7 @@ export function RobotCalibration(props: Props): JSX.Element {
           onClick={() => expandStep(nextStep)}
           backgroundColor={C_BLUE}
           {...targetProps}
+          id={'RobotCalStep_proceedButton'}
         >
           {t(nextStepButtonKey)}
         </PrimaryBtn>
diff --git a/app/src/organisms/ProtocolSetup/RunSetupCard/index.tsx b/app/src/organisms/ProtocolSetup/RunSetupCard/index.tsx
index 88b18f70421..9291fd28a87 100644
--- a/app/src/organisms/ProtocolSetup/RunSetupCard/index.tsx
+++ b/app/src/organisms/ProtocolSetup/RunSetupCard/index.tsx
@@ -111,7 +111,12 @@ export function RunSetupCard(): JSX.Element | null {
       paddingY={SPACING_3}
       backgroundColor={C_WHITE}
     >
-      <Text as="h2" paddingX={SPACING_3} fontWeight={FONT_WEIGHT_SEMIBOLD}>
+      <Text
+        as="h2"
+        paddingX={SPACING_3}
+        fontWeight={FONT_WEIGHT_SEMIBOLD}
+        id={'RunSetupCard_setupForRun'}
+      >
         {t('setup_for_run')}
       </Text>
       {stepsKeysInOrder.map((stepKey, index) => (
@@ -121,6 +126,7 @@ export function RunSetupCard(): JSX.Element | null {
             expanded={stepKey === expandedStepKey}
             label={t('step', { index: index + 1 })}
             title={t(`${stepKey}_title`)}
+            id={`RunSetupCard_${stepKey}`}
             description={StepDetailMap[stepKey].description}
             toggleExpanded={() =>
               stepKey === expandedStepKey
@@ -145,8 +151,12 @@ export function RunSetupCard(): JSX.Element | null {
                         ? 'check-circle'
                         : 'alert-circle'
                     }
+                    id={'RunSetupCard_calibrationIcon'}
                   />
-                  <Text fontSize={FONT_SIZE_BODY_1}>
+                  <Text
+                    fontSize={FONT_SIZE_BODY_1}
+                    id={'RunSetupCard_calibrationText'}
+                  >
                     {calibrationStatus.complete
                       ? t('calibration_ready')
                       : t('calibration_needed')}
diff --git a/components/src/icons/Icon.tsx b/components/src/icons/Icon.tsx
index 189e5b1efe9..4eb8967e8fc 100644
--- a/components/src/icons/Icon.tsx
+++ b/components/src/icons/Icon.tsx
@@ -28,6 +28,7 @@ export interface IconProps extends SvgProps {
   style?: Record<string, string | number>
   /** optional children */
   children?: React.ReactNode
+  id?: string
 }
 
 const spinAnimation = keyframes`
@@ -52,7 +53,7 @@ const spinStyle = css`
  * ```
  */
 export function Icon(props: IconProps): JSX.Element | null {
-  const { name, children, className, spin, ...svgProps } = props
+  const { name, children, className, spin, id, ...svgProps } = props
 
   if (!(name in ICON_DATA_BY_NAME)) {
     console.error(`"${name}" is not a valid Icon name`)
@@ -69,6 +70,7 @@ export function Icon(props: IconProps): JSX.Element | null {
       className={cx(className, { spin })}
       css={spinStyle}
       {...svgProps}
+      id={id}
     >
       <path fillRule="evenodd" d={path} />
       {props.children}