[No QA]Add testID to HeaderPageLayout.tsx and llustratedHeaderPageLayout.tsx and apply to all instances of IllustratedHeaderPageLayout.tsx

src/components/HeaderPageLayout.tsx

@@ -19,6 +19,9 @@ type HeaderPageLayoutProps = ChildrenProps &
         /** The background color to apply in the upper half of the screen. */
         backgroundColor?: string;
 
+        /** TestID to apply to the whole section container */
+        testID: string;
+
         /** A fixed footer to display at the bottom of the page. */
         footer?: ReactNode;
 
@@ -50,6 +53,7 @@ function HeaderPageLayout({
     style,
     headerContent,
     shouldShowOfflineIndicatorInWideScreen = false,
+    testID,
     ...rest
 }: HeaderPageLayoutProps) {
     const theme = useTheme();
@@ -72,7 +76,7 @@ function HeaderPageLayout({
             shouldEnablePickerAvoiding={false}
             includeSafeAreaPaddingBottom={false}
             offlineIndicatorStyle={[appBGColor]}
-            testID={HeaderPageLayout.displayName}
+            testID={testID}
             shouldShowOfflineIndicatorInWideScreen={shouldShowOfflineIndicatorInWideScreen}
         >
             {({safeAreaPaddingBottomStyle}) => (

src/components/IllustratedHeaderPageLayout.tsx

@@ -16,9 +16,12 @@ type IllustratedHeaderPageLayoutProps = HeaderPageLayoutProps & {
 
     /** Overlay content to display on top of animation */
     overlayContent?: () => ReactNode;
+
+    /** TestID to apply to the whole section container */
+    testID: string;
 };
 
-function IllustratedHeaderPageLayout({backgroundColor, children, illustration, overlayContent, ...rest}: IllustratedHeaderPageLayoutProps) {
+function IllustratedHeaderPageLayout({backgroundColor, children, illustration, testID, overlayContent, ...rest}: IllustratedHeaderPageLayoutProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const shouldLimitHeight = !rest.shouldShowBackButton;
@@ -38,6 +41,7 @@ function IllustratedHeaderPageLayout({backgroundColor, children, illustration, o
                     {overlayContent?.()}
                 </>
             }
+            testID={testID}
             headerContainerStyles={[styles.justifyContentCenter, styles.w100, shouldLimitHeight && styles.centralPaneAnimation]}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...rest}

src/pages/ReferralDetailsPage.tsx

@@ -59,6 +59,7 @@ function ReferralDetailsPage({route, account}: ReferralDetailsPageProps) {
             }
             headerContainerStyles={[styles.staticHeaderImage, styles.justifyContentEnd]}
             backgroundColor={theme.PAGE_THEMES[SCREENS.REFERRAL_DETAILS].backgroundColor}
+            testID={ReferralDetailsPage.displayName}
         >
             <Text style={[styles.textHeadline, styles.mb2, styles.ph5]}>{contentHeader}</Text>
             <Text style={[styles.webViewStyles.baseFontStyle, styles.ml0, styles.mb5, styles.ph5]}>{contentBody}</Text>

src/pages/TeachersUnite/SaveTheWorldPage.tsx

@@ -23,6 +23,7 @@ function SaveTheWorldPage() {
             backgroundColor={theme.PAGE_THEMES[SCREENS.SAVE_THE_WORLD.ROOT].backgroundColor}
             onBackButtonPress={Navigation.goBack}
             illustration={LottieAnimations.SaveTheWorld}
+            testID={SaveTheWorldPage.displayName}
         >
             <View style={[styles.mb4, styles.justifyContentBetween, styles.mh5]}>
                 <Text style={[styles.textHeadline, styles.mb3]}>{translate('teachersUnitePage.teachersUnite')}</Text>

src/pages/settings/AboutPage/AboutPage.tsx

@@ -132,6 +132,7 @@ function AboutPage() {
             backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.ABOUT].backgroundColor}
             overlayContent={overlayContent}
             shouldShowOfflineIndicatorInWideScreen
+            testID={AboutPage.displayName}
         >
             <View style={[styles.settingsPageBody, styles.ph5]}>
                 <Text style={[styles.textHeadline, styles.mb1]}>{translate('footer.aboutExpensify')}</Text>

src/pages/settings/InitialSettingsPage.js

@@ -347,6 +347,7 @@ function InitialSettingsPage(props) {
             onBackButtonPress={() => Navigation.closeFullScreen()}
             backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.ROOT].backgroundColor}
             childrenContainerStyles={[styles.m0, styles.p0]}
+            testID={InitialSettingsPage.displayName}
         >
             <View style={styles.w100}>
                 {accountMenuItems}

src/pages/settings/Preferences/PreferencesPage.js

@@ -55,6 +55,7 @@ function PreferencesPage(props) {
             illustration={LottieAnimations.PreferencesDJ}
             shouldShowBackButton={isSmallScreenWidth}
             shouldShowOfflineIndicatorInWideScreen
+            testID={PreferencesPage.displayName}
         >
             <View style={styles.mb6}>
                 <Text

src/pages/settings/Profile/LoungeAccessPage.js

@@ -38,6 +38,7 @@ function LoungeAccessPage(props) {
             title={translate('loungeAccessPage.loungeAccess')}
             onBackButtonPress={() => Navigation.goBack(ROUTES)}
             illustration={LottieAnimations.ExpensifyLounge}
+            testID={LoungeAccessPage.displayName}
         >
             <Text
                 style={[styles.flex1, styles.ph5, styles.textHeadline, styles.preWrap, styles.mb2]}

src/pages/settings/Security/SecuritySettingsPage.tsx

@@ -53,6 +53,7 @@ function SecuritySettingsPage() {
             illustration={LottieAnimations.Safe}
             backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.SECURITY].backgroundColor}
             shouldShowOfflineIndicatorInWideScreen
+            testID={SecuritySettingsPage.displayName}
         >
             <ScrollView contentContainerStyle={[styles.flexGrow1, styles.flexColumn, styles.justifyContentBetween]}>
                 <View style={[styles.flex1]}>

src/pages/settings/Wallet/ActivatePhysicalCardPage.js

@@ -138,6 +138,7 @@ function ActivatePhysicalCardPage({
             illustration={LottieAnimations.Magician}
             scrollViewContainerStyles={[styles.mnh100]}
             childrenContainerStyles={[styles.flex1]}
+            testID={ActivatePhysicalCardPage.displayName}
         >
             <Text style={[styles.mh5, styles.textHeadline]}>{translate('activateCardPage.pleaseEnterLastFour')}</Text>
             <View style={[styles.mh5, {minHeight: MAGIC_INPUT_MIN_HEIGHT}]}>

src/pages/settings/Wallet/WalletEmptyState.js

@@ -46,6 +46,7 @@ function WalletEmptyState({onAddPaymentMethod}) {
             shouldShowBackButton={isSmallScreenWidth}
             shouldShowOfflineIndicatorInWideScreen
             style={isSmallScreenWidth ? styles.workspaceSectionMobile : styles.workspaceSection}
+            testID={WalletEmptyState.displayName}
         >
             <FeatureList
                 menuItems={WALLET_FEATURES}