diff --git a/VAMobile/src/components/BaseListItem.tsx b/VAMobile/src/components/BaseListItem.tsx index dcf68414355..5fd798997b7 100644 --- a/VAMobile/src/components/BaseListItem.tsx +++ b/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 = (props) => { claimsRequestNumber, fileUploaded, minHeight, + detoxTestID, } = props const theme = useTheme() @@ -289,7 +293,7 @@ const BaseListItem: FC = (props) => { // onPress exist, wrap in Pressable and apply a11yProps if (onPress) { return ( - + {generateItem()} ) diff --git a/VAMobile/src/components/Carousel/CarouselTabBar.tsx b/VAMobile/src/components/Carousel/CarouselTabBar.tsx index b99c04e2519..d7fe7b29a57 100644 --- a/VAMobile/src/components/Carousel/CarouselTabBar.tsx +++ b/VAMobile/src/components/Carousel/CarouselTabBar.tsx @@ -98,7 +98,7 @@ function CarouselTabBar({ onCarouselEnd, screenList, translation }: CarouselTabB @@ -124,7 +124,7 @@ function CarouselTabBar({ onCarouselEnd, screenList, translation }: CarouselTabB { return ( - + {t('crisisLineButton.label')} diff --git a/VAMobile/src/components/DefaultList.tsx b/VAMobile/src/components/DefaultList.tsx index 590a22f93b2..86c2453d7ce 100644 --- a/VAMobile/src/components/DefaultList.tsx +++ b/VAMobile/src/components/DefaultList.tsx @@ -30,12 +30,13 @@ export type DefaultListProps = { const DefaultList: FC = ({ items, title, titleA11yLabel, selectable }) => { const listItemObjs: Array = 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 = - return { ...listItemObj, content, testId: testIdToUse } + return { ...listItemObj, content, testId: testIdToUse, detoxTestID: detoxTestIDToUse } }) return diff --git a/VAMobile/src/components/DescriptiveBackButton.tsx b/VAMobile/src/components/DescriptiveBackButton.tsx index 35ffbbec96f..a14179ff4aa 100644 --- a/VAMobile/src/components/DescriptiveBackButton.tsx +++ b/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 = ({ onPress, label, labelA11y, focusOnButton = true }) => { +export const DescriptiveBackButton: FC = ({ + onPress, + label, + labelA11y, + focusOnButton = true, + backButtonTestID, +}) => { const theme = useTheme() const [focusRef, setFocus] = useAccessibilityFocus() @@ -38,7 +46,8 @@ export const DescriptiveBackButton: FC = ({ onPress, label, ref={focusRef} onPress={onPress} accessibilityRole="link" - accessibilityLabel={labelA11y ? labelA11y : label}> + accessibilityLabel={labelA11y ? labelA11y : label} + testID={backButtonTestID}> = ({ items, title, titleA11yLabel }) => { const listItemObjs: Array = 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 = ({ 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 = ({ items, title, titleA11yLabel }) => { a11yValue, a11yRole: 'link', a11yState, + detoxTestID: detoxTestIDToUse, } }) diff --git a/VAMobile/src/components/FormWrapper/FormFields/Picker/VAModalPicker.tsx b/VAMobile/src/components/FormWrapper/FormFields/Picker/VAModalPicker.tsx index f420ad90611..ffa16d70111 100644 --- a/VAMobile/src/components/FormWrapper/FormFields/Picker/VAModalPicker.tsx +++ b/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 = ({ confirmBtnText, testID, showModalByDefault, + cancelTestID, + confirmTestID, }) => { const [modalVisible, setModalVisible] = useState(false) const theme = useTheme() @@ -286,7 +292,7 @@ const VAModalPicker: FC = ({ - + {cancelLabel} @@ -294,7 +300,7 @@ const VAModalPicker: FC = ({ {getTranslation(labelKey || '', t)} - + {confirmLabel} diff --git a/VAMobile/src/components/LargeNavButton.tsx b/VAMobile/src/components/LargeNavButton.tsx index 95270fcc25f..4c64cc8c14d 100644 --- a/VAMobile/src/components/LargeNavButton.tsx +++ b/VAMobile/src/components/LargeNavButton.tsx @@ -51,6 +51,7 @@ const LargeNavButton: FC = ({ a11yHint, onPress, showLoading, + testID, }: HomeNavButtonProps) => { const theme = useTheme() const { t } = useTranslation(NAMESPACE.COMMON) @@ -81,7 +82,7 @@ const LargeNavButton: FC = ({ onPress={onPress} accessible={true} accessibilityRole={'link'} - testID={title} + testID={testID} accessibilityLabel={accessibilityLabel} {...a11yHintProp(a11yHint || '')}> diff --git a/VAMobile/src/components/MessageList.tsx b/VAMobile/src/components/MessageList.tsx index c5e6d1d7a21..1f0277d7414 100644 --- a/VAMobile/src/components/MessageList.tsx +++ b/VAMobile/src/components/MessageList.tsx @@ -42,7 +42,7 @@ const MessageList: FC = ({ items, title, titleA11yLabel }) => const theme = useTheme() const listItemObjs: Array = 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 = ({ 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 diff --git a/VAMobile/src/components/Nametag/Nametag.tsx b/VAMobile/src/components/Nametag/Nametag.tsx index adcb14c5105..7a11f7965c1 100644 --- a/VAMobile/src/components/Nametag/Nametag.tsx +++ b/VAMobile/src/components/Nametag/Nametag.tsx @@ -102,7 +102,7 @@ export const Nametag = () => { return ( {accessToMilitaryInfo && branch !== '' && ( - + {getBranchSeal()} diff --git a/VAMobile/src/components/RadioGroupModal.tsx b/VAMobile/src/components/RadioGroupModal.tsx index 71132d223cf..b7d8cc2d5fa 100644 --- a/VAMobile/src/components/RadioGroupModal.tsx +++ b/VAMobile/src/components/RadioGroupModal.tsx @@ -120,12 +120,14 @@ const RadioGroupModal: FC = ({ 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 ( diff --git a/VAMobile/src/components/SimpleList.tsx b/VAMobile/src/components/SimpleList.tsx index 28b43cfbacc..bff44c71f8a 100644 --- a/VAMobile/src/components/SimpleList.tsx +++ b/VAMobile/src/components/SimpleList.tsx @@ -25,14 +25,15 @@ export type SimpleListProps = { const SimpleList: FC = ({ items, title, titleA11yLabel }) => { const listItemObjs: Array = 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 = [{ text } as TextLine] const testIdToUse = testId ? testId : generateTestIDForTextList(textLine) const content = + const detoxTestIDToUse = detoxTestID ? detoxTestID : testIdToUse - return { ...listItemObj, content, testId: testIdToUse } + return { ...listItemObj, content, testId: testIdToUse, detoxTestID: detoxTestIDToUse } }) return diff --git a/VAMobile/src/components/Templates/HeaderBanner.tsx b/VAMobile/src/components/Templates/HeaderBanner.tsx index 5d2776ce1d9..b38f11014b8 100644 --- a/VAMobile/src/components/Templates/HeaderBanner.tsx +++ b/VAMobile/src/components/Templates/HeaderBanner.tsx @@ -197,7 +197,6 @@ const HeaderBanner: FC = ({ 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 = ({ label={leftButton.text} onPress={leftButton.onPress} focusOnButton={focus === 'Left'} + backButtonTestID={leftButton.testID} /> ) : leftButton ? (