CU/9578-rachael-detox-swap-out-by-text-to-by-id (#9620)

Co-authored-by: Therese <[email protected]>

VAMobile/src/components/BaseListItem.tsx

@@ -82,6 +82,9 @@ export type BaseListItemProps = {
 
   /** Optional min height */
   minHeight?: number
+
+  /** test id string for detox */
+  detoxTestID?: string
 }
 
 export const ButtonDecorator: FC<{
@@ -191,6 +194,7 @@ const BaseListItem: FC<BaseListItemProps> = (props) => {
     claimsRequestNumber,
     fileUploaded,
     minHeight,
+    detoxTestID,
   } = props
   const theme = useTheme()
 
@@ -289,7 +293,7 @@ const BaseListItem: FC<BaseListItemProps> = (props) => {
   // onPress exist, wrap in Pressable and apply a11yProps
   if (onPress) {
     return (
-      <Pressable {...a11yProps} {...pressableProps} testID={testId}>
+      <Pressable {...a11yProps} {...pressableProps} testID={detoxTestID}>
         {generateItem()}
       </Pressable>
     )

VAMobile/src/components/Carousel/CarouselTabBar.tsx

@@ -98,7 +98,7 @@ function CarouselTabBar({ onCarouselEnd, screenList, translation }: CarouselTabB
       <StyledPressable
         onPress={onPressCallback}
         accessibilityLabel={translation(buttonText)}
-        testID={translation(buttonText)}
+        testID="onboardingSkipBackButtonID"
         accessibilityRole="link"
         {...a11yHintProp(allyHint || '')}>
         <TextView variant="MobileBody" color="primaryContrast" allowFontScaling={false} mr="auto" selectable={false}>
@@ -124,7 +124,7 @@ function CarouselTabBar({ onCarouselEnd, screenList, translation }: CarouselTabB
       <StyledPressable
         onPress={onContinue}
         accessibilityLabel={translation(buttonText)}
-        testID={translation(buttonText)}
+        testID="onboardingDoneNextButtonID"
         accessibilityRole="link"
         {...a11yHintProp(allyHint || '')}>
         <TextView

VAMobile/src/components/CrisisLineButton.tsx

@@ -33,7 +33,7 @@ const CrisisLineButton: FC = () => {
 
   return (
     <Box mx={theme.dimensions.gutter} my={theme.dimensions.standardMarginBetween}>
-      <Pressable {...pressableProps}>
+      <Pressable {...pressableProps} testID="veteransCrisisLineID">
         <TextView variant={'CrisisLineButton'} py={14}>
           {t('crisisLineButton.label')}
         </TextView>

VAMobile/src/components/DefaultList.tsx

@@ -30,12 +30,13 @@ export type DefaultListProps = {
 const DefaultList: FC<DefaultListProps> = ({ items, title, titleA11yLabel, selectable }) => {
   const listItemObjs: Array<ListItemObj> = items.map((item) => {
     // Move all of the properties except text lines to the standard list item object
-    const { textLines, testId, ...listItemObj } = { ...item }
+    const { textLines, testId, detoxTestID, ...listItemObj } = { ...item }
     const testIdToUse = testId ? testId : generateTestIDForTextList(textLines)
+    const detoxTestIDToUse = detoxTestID ? detoxTestID : testIdToUse
 
     const content = <TextLines listOfText={textLines} selectable={selectable} />
 
-    return { ...listItemObj, content, testId: testIdToUse }
+    return { ...listItemObj, content, testId: testIdToUse, detoxTestID: detoxTestIDToUse }
   })
 
   return <List items={listItemObjs} title={title} titleA11yLabel={titleA11yLabel} />

VAMobile/src/components/DescriptiveBackButton.tsx

@@ -21,12 +21,20 @@ export type DescBackButtonProps = {
   labelA11y?: string
   /** boolean to specify if we want accessibility to focus on the back button */
   focusOnButton?: boolean
+  /** optional testID */
+  backButtonTestID?: string
 }
 
 /**
  * Descriptive button used by the stack navigation to go back to the previous screen
  */
-export const DescriptiveBackButton: FC<DescBackButtonProps> = ({ onPress, label, labelA11y, focusOnButton = true }) => {
+export const DescriptiveBackButton: FC<DescBackButtonProps> = ({
+  onPress,
+  label,
+  labelA11y,
+  focusOnButton = true,
+  backButtonTestID,
+}) => {
   const theme = useTheme()
 
   const [focusRef, setFocus] = useAccessibilityFocus<TouchableWithoutFeedback>()
@@ -38,7 +46,8 @@ export const DescriptiveBackButton: FC<DescBackButtonProps> = ({ onPress, label,
       ref={focusRef}
       onPress={onPress}
       accessibilityRole="link"
-      accessibilityLabel={labelA11y ? labelA11y : label}>
+      accessibilityLabel={labelA11y ? labelA11y : label}
+      testID={backButtonTestID}>
       <Box
         display="flex"
         flexDirection="row"

VAMobile/src/components/FormWrapper/FormFields/Picker/PickerList.tsx

@@ -39,7 +39,7 @@ const PickerList: FC<PickerListProps> = ({ items, title, titleA11yLabel }) => {
 
   const listItemObjs: Array<ListItemObj> = items.map((item: PickerListItemObj, index) => {
     // Move all of the properties except text lines to the standard list item object
-    const { text, icon, testId, isSelected, ...listItemObj } = item
+    const { text, icon, testId, isSelected, detoxTestID, ...listItemObj } = item
 
     const textLine = icon
       ? [{ text, iconProps: icon, color: icon.fill } as TextLineWithIconProps]
@@ -51,6 +51,7 @@ const PickerList: FC<PickerListProps> = ({ items, title, titleA11yLabel }) => {
 
     const defaultTestId = text ? text : t('picker.noSelection')
     const testIdToUse = testId ? testId : defaultTestId
+    const detoxTestIDToUse = detoxTestID ? detoxTestID : testIdToUse
 
     const a11yValue = t('listPosition', { position: index + 1, total: items.length })
     const a11yState = {
@@ -66,6 +67,7 @@ const PickerList: FC<PickerListProps> = ({ items, title, titleA11yLabel }) => {
       a11yValue,
       a11yRole: 'link',
       a11yState,
+      detoxTestID: detoxTestIDToUse,
     }
   })
 

VAMobile/src/components/FormWrapper/FormFields/Picker/VAModalPicker.tsx

@@ -74,6 +74,10 @@ export type VAModalPickerProps = {
   showModalByDefault?: boolean
   /** Optional TestID for scrollView */
   testID?: string
+  /** Optional TestID for cancel button */
+  cancelTestID?: string
+  /** Option TestID for apply button */
+  confirmTestID?: string
 }
 
 /**A common component to display a picker for the device with an optional label*/
@@ -94,6 +98,8 @@ const VAModalPicker: FC<VAModalPickerProps> = ({
   confirmBtnText,
   testID,
   showModalByDefault,
+  cancelTestID,
+  confirmTestID,
 }) => {
   const [modalVisible, setModalVisible] = useState(false)
   const theme = useTheme()
@@ -286,15 +292,15 @@ const VAModalPicker: FC<VAModalPickerProps> = ({
           <Box flexGrow={1} backgroundColor="modalOverlay" opacity={0.8} pt={topPadding} />
           <Box backgroundColor="list" pb={insets.bottom} flexShrink={1}>
             <Box {...actionsBarBoxProps}>
-              <Pressable onPress={onCancel} {...cancelButtonProps}>
+              <Pressable onPress={onCancel} {...cancelButtonProps} testID={cancelTestID}>
                 <TextView {...commonButtonProps}>{cancelLabel}</TextView>
               </Pressable>
               <Box flex={4}>
                 <TextView variant="MobileBodyBold" textAlign={'center'} allowFontScaling={false}>
                   {getTranslation(labelKey || '', t)}
                 </TextView>
               </Box>
-              <Pressable onPress={onConfirm} {...confirmButtonProps}>
+              <Pressable onPress={onConfirm} {...confirmButtonProps} testID={confirmTestID}>
                 <TextView {...commonButtonProps}>{confirmLabel}</TextView>
               </Pressable>
             </Box>

VAMobile/src/components/LargeNavButton.tsx

@@ -51,6 +51,7 @@ const LargeNavButton: FC<HomeNavButtonProps> = ({
   a11yHint,
   onPress,
   showLoading,
+  testID,
 }: HomeNavButtonProps) => {
   const theme = useTheme()
   const { t } = useTranslation(NAMESPACE.COMMON)
@@ -81,7 +82,7 @@ const LargeNavButton: FC<HomeNavButtonProps> = ({
       onPress={onPress}
       accessible={true}
       accessibilityRole={'link'}
-      testID={title}
+      testID={testID}
       accessibilityLabel={accessibilityLabel}
       {...a11yHintProp(a11yHint || '')}>
       <Box flexDirection="row">

VAMobile/src/components/MessageList.tsx

@@ -42,7 +42,7 @@ const MessageList: FC<MessageListProps> = ({ items, title, titleA11yLabel }) =>
   const theme = useTheme()
   const listItemObjs: Array<ListItemObj> = items.map((item) => {
     // Move all of the properties except text lines to the standard list item object
-    const { inlineTextWithIcons, testId, ...listItemObj } = item
+    const { inlineTextWithIcons, testId, detoxTestID, ...listItemObj } = item
     let testIdToUse = testId ? testId : generateTestIDForInlineTextIconList(inlineTextWithIcons, t)
 
     // We want to display black 'Read' tag only for sent messages that have been seen by the recipients
@@ -74,8 +74,15 @@ const MessageList: FC<MessageListProps> = ({ items, title, titleA11yLabel }) =>
 
     // Append accessibility label for Sent messages 'READ' tag
     testIdToUse = `${testIdToUse} ${sentReadTagA11y}`.trim()
+    const detoxTestIDToUse = detoxTestID ? detoxTestID : testIdToUse
 
-    return { ...listItemObj, content, testId: testIdToUse, decorator: ButtonDecoratorType.None }
+    return {
+      ...listItemObj,
+      content,
+      testId: testIdToUse,
+      decorator: ButtonDecoratorType.None,
+      detoxTestID: detoxTestIDToUse,
+    }
   })
 
   return <List items={listItemObjs} title={title} titleA11yLabel={titleA11yLabel} />

VAMobile/src/components/Nametag/Nametag.tsx

@@ -102,7 +102,7 @@ export const Nametag = () => {
   return (
     <Box>
       {accessToMilitaryInfo && branch !== '' && (
-        <Pressable {...pressableProps}>
+        <Pressable {...pressableProps} testID="veteranStatusButtonID">
           <Box py={theme.dimensions.buttonPadding} pr={8} flexDirection="row" alignItems="center">
             {getBranchSeal()}
             <Box ml={theme.dimensions.buttonPadding} flex={1}>

VAMobile/src/components/RadioGroupModal.tsx

@@ -120,12 +120,14 @@ const RadioGroupModal: FC<RadioGroupModalProps> = ({
     accessible: true,
     accessibilityRole: 'button',
     accessibilityHint: t('cancel.picker.a11yHint'),
+    testID: 'radioButtonCancelTestID',
   }
 
   const applyButtonProps: PressableProps = {
     accessible: true,
     accessibilityRole: 'button',
     accessibilityHint: t('done.picker.a11yHint'),
+    testID: 'radioButtonApplyTestID',
   }
 
   return (

VAMobile/src/components/SimpleList.tsx

@@ -25,14 +25,15 @@ export type SimpleListProps = {
 const SimpleList: FC<SimpleListProps> = ({ items, title, titleA11yLabel }) => {
   const listItemObjs: Array<ListItemObj> = items.map((item: SimpleListItemObj) => {
     // Move all of the properties except text lines to the standard list item object
-    const { text, testId, ...listItemObj } = { ...item }
+    const { text, testId, detoxTestID, ...listItemObj } = { ...item }
 
     const textLine: Array<TextLine> = [{ text } as TextLine]
 
     const testIdToUse = testId ? testId : generateTestIDForTextList(textLine)
     const content = <TextLines listOfText={textLine} />
+    const detoxTestIDToUse = detoxTestID ? detoxTestID : testIdToUse
 
-    return { ...listItemObj, content, testId: testIdToUse }
+    return { ...listItemObj, content, testId: testIdToUse, detoxTestID: detoxTestIDToUse }
   })
 
   return <List items={listItemObjs} title={title} titleA11yLabel={titleA11yLabel} />

VAMobile/src/components/Templates/HeaderBanner.tsx

@@ -197,7 +197,6 @@ const HeaderBanner: FC<HeaderBannerProps> = ({
   const titleLength = title?.type === 'VA' ? 2 : title?.title.length || 0
   const totalTextLength = (leftButton?.text.length || 0) + titleLength + (rightButton?.text.length || 0)
   const constrainTitle = totalTextLength > TEXT_CONSTRAINT_THRESHOLD
-
   if (leftButton) {
     leftTextViewProps = {
       color: 'footerButton',
@@ -278,6 +277,7 @@ const HeaderBanner: FC<HeaderBannerProps> = ({
                   label={leftButton.text}
                   onPress={leftButton.onPress}
                   focusOnButton={focus === 'Left'}
+                  backButtonTestID={leftButton.testID}
                 />
               ) : leftButton ? (
                 <Box ml={theme.dimensions.buttonPadding} mt={theme.dimensions.buttonPadding}>