[No QA] Add testID to ScreenWrapper

src/components/AvatarCropModal/AvatarCropModal.js

@@ -366,6 +366,7 @@ function AvatarCropModal(props) {
                 style={[styles.pb0]}
                 includePaddingTop={false}
                 includeSafeAreaPaddingBottom={false}
+                testID="AvatarCropModal"
             >
                 {props.isSmallScreenWidth && <HeaderGap />}
                 <HeaderWithBackButton

src/components/CountryPicker/CountrySelectorModal.js

@@ -78,6 +78,7 @@ function CountrySelectorModal({currentCountry, isVisible, onClose, onCountrySele
                 style={[styles.pb0]}
                 includePaddingTop={false}
                 includeSafeAreaPaddingBottom={false}
+                testID="CountrySelectorModal"
             >
                 <HeaderWithBackButton
                     title={translate('common.country')}

src/components/DistanceRequest.js

@@ -311,6 +311,7 @@ function DistanceRequest({iou, iouType, report, transaction, mapboxAccessToken,
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableKeyboardAvoidingView={false}
+            testID="DistanceRequest"
         >
             {({safeAreaPaddingBottomStyle}) => (
                 <FullPageNotFoundView shouldShow={!IOUUtils.isValidMoneyRequestType(iouType)}>

src/components/HeaderPageLayout.js

@@ -58,6 +58,7 @@ function HeaderPageLayout({backgroundColor, children, footer, headerContainerSty
             shouldEnablePickerAvoiding={false}
             includeSafeAreaPaddingBottom={false}
             offlineIndicatorStyle={[appBGColor]}
+            testID="HeaderPageLayout"
         >
             {({safeAreaPaddingBottomStyle}) => (
                 <>

src/components/NewDatePicker/CalendarPicker/YearPickerModal.js

@@ -64,6 +64,7 @@ function YearPickerModal(props) {
                 style={[styles.pb0]}
                 includePaddingTop={false}
                 includeSafeAreaPaddingBottom={false}
+                testID="YearPickerModal"
             >
                 <HeaderWithBackButton
                     title={translate('yearPickerPage.year')}

src/components/ReimbursementAccountLoadingIndicator.js

@@ -4,32 +4,31 @@ import PropTypes from 'prop-types';
 import Lottie from 'lottie-react-native';
 import * as LottieAnimations from './LottieAnimations';
 import styles from '../styles/styles';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import useLocalize from '../hooks/useLocalize';
 import Text from './Text';
 import HeaderWithBackButton from './HeaderWithBackButton';
 import ScreenWrapper from './ScreenWrapper';
 import FullScreenLoadingIndicator from './FullscreenLoadingIndicator';
 import FullPageOfflineBlockingView from './BlockingViews/FullPageOfflineBlockingView';
-import compose from '../libs/compose';
-import {withNetwork} from './OnyxProvider';
 
 const propTypes = {
     /** Whether the user is submitting verifications data */
     isSubmittingVerificationsData: PropTypes.bool.isRequired,
 
     /** Method to trigger when pressing back button of the header */
     onBackButtonPress: PropTypes.func.isRequired,
-    ...withLocalizePropTypes,
 };
 
 function ReimbursementAccountLoadingIndicator(props) {
+    const {translate} = useLocalize();
     return (
         <ScreenWrapper
             shouldShowOfflineIndicator={false}
             style={[StyleSheet.absoluteFillObject, styles.reimbursementAccountFullScreenLoading]}
+            testID="ReimbursementAccountLoadingIndicator"
         >
             <HeaderWithBackButton
-                title={props.translate('reimbursementAccountLoadingAnimation.oneMoment')}
+                title={translate('reimbursementAccountLoadingAnimation.oneMoment')}
                 onBackButtonPress={props.onBackButtonPress}
             />
             <FullPageOfflineBlockingView>
@@ -42,7 +41,7 @@ function ReimbursementAccountLoadingIndicator(props) {
                             style={styles.loadingVBAAnimation}
                         />
                         <View style={[styles.ph6]}>
-                            <Text style={[styles.textAlignCenter]}>{props.translate('reimbursementAccountLoadingAnimation.explanationLine')}</Text>
+                            <Text style={[styles.textAlignCenter]}>{translate('reimbursementAccountLoadingAnimation.explanationLine')}</Text>
                         </View>
                     </View>
                 ) : (
@@ -56,4 +55,4 @@ function ReimbursementAccountLoadingIndicator(props) {
 ReimbursementAccountLoadingIndicator.propTypes = propTypes;
 ReimbursementAccountLoadingIndicator.displayName = 'ReimbursementAccountLoadingIndicator';
 
-export default compose(withLocalize, withNetwork())(ReimbursementAccountLoadingIndicator);
+export default ReimbursementAccountLoadingIndicator;

src/components/ScreenWrapper/index.js

@@ -109,6 +109,7 @@ class ScreenWrapper extends React.Component {
                             style={styles.flex1}
                             // eslint-disable-next-line react/jsx-props-no-spreading
                             {...(this.props.environment === CONST.ENVIRONMENT.DEV ? this.panResponder.panHandlers : {})}
+                            testID={this.props.testID}
                         >
                             <View
                                 style={[styles.flex1, paddingStyle, ...this.props.style]}

src/components/ScreenWrapper/propTypes.js

@@ -10,6 +10,9 @@ const propTypes = {
     /** Returns a function as a child to pass insets to or a node to render without insets */
     children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
 
+    /** A unique ID to find the screen wrapper in tests */
+    testID: PropTypes.string.isRequired,
+
     /** Whether to include padding bottom */
     includeSafeAreaPaddingBottom: PropTypes.bool,
 

src/components/StatePicker/StateSelectorModal.js

@@ -84,6 +84,7 @@ function StateSelectorModal({currentState, isVisible, onClose, onStateSelected,
                 style={[styles.pb0]}
                 includePaddingTop={false}
                 includeSafeAreaPaddingBottom={false}
+                testID="StateSelectorModal"
             >
                 <HeaderWithBackButton
                     title={label || translate('common.state')}

src/pages/AddPersonalBankAccountPage.js

@@ -103,6 +103,7 @@ class AddPersonalBankAccountPage extends React.Component {
                 includeSafeAreaPaddingBottom={shouldShowSuccess}
                 shouldEnablePickerAvoiding={false}
                 shouldShowOfflineIndicator={false}
+                testID="AddPersonalBankAccountPage"
             >
                 <HeaderWithBackButton
                     title={this.props.translate('bankAccount.addBankAccount')}

src/pages/DetailsPage.js

@@ -126,7 +126,7 @@ function DetailsPage(props) {
     const isCurrentUser = _.keys(props.loginList).includes(details.login);
 
     return (
-        <ScreenWrapper>
+        <ScreenWrapper testID="DetailsPage">
             <FullPageNotFoundView shouldShow={_.isEmpty(login)}>
                 <HeaderWithBackButton title={props.translate('common.details')} />
                 <View

src/pages/EditRequestAmountPage.js

@@ -56,6 +56,7 @@ function EditRequestAmountPage({defaultAmount, defaultCurrency, onSubmit, report
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
+            testID="EditRequestAmountPage"
         >
             <HeaderWithBackButton title={translate('iou.amount')} />
             <MoneyRequestAmountForm

src/pages/EditRequestCategoryPage.js

@@ -30,6 +30,7 @@ function EditRequestCategoryPage({defaultCategory, policyID, onSubmit}) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
+            testID="EditRequestCategoryPage"
         >
             <HeaderWithBackButton
                 title={translate('common.category')}

src/pages/EditRequestCreatedPage.js

@@ -23,6 +23,7 @@ function EditRequestCreatedPage({defaultCreated, onSubmit}) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
+            testID="EditRequestCreatedPage"
         >
             <HeaderWithBackButton title={translate('common.date')} />
             <Form

src/pages/EditRequestDescriptionPage.js

@@ -27,6 +27,7 @@ function EditRequestDescriptionPage({defaultDescription, onSubmit}) {
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
             onEntryTransitionEnd={() => descriptionInputRef.current && descriptionInputRef.current.focus()}
+            testID="EditRequestDescriptionPage"
         >
             <HeaderWithBackButton title={translate('common.description')} />
             <Form

src/pages/EditRequestMerchantPage.js

@@ -38,6 +38,7 @@ function EditRequestMerchantPage({defaultMerchant, onSubmit}) {
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
             onEntryTransitionEnd={() => merchantInputRef.current && merchantInputRef.current.focus()}
+            testID="EditRequestMerchantPage"
         >
             <HeaderWithBackButton title={translate('common.merchant')} />
             <Form

src/pages/EditRequestReceiptPage.js

@@ -31,6 +31,7 @@ function EditRequestReceiptPage({route, transactionID}) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
+            testID="EditRequestReceiptPage"
         >
             <HeaderWithBackButton
                 title={translate('common.receipt')}

src/pages/EnablePayments/AdditionalDetailsStep.js

@@ -149,6 +149,7 @@ function AdditionalDetailsStep({walletAdditionalDetails, translate, currentUserP
             <ScreenWrapper
                 style={[styles.flex1]}
                 keyboardAvoidingViewBehavior="height"
+                testID="AdditionalDetailsStep"
             >
                 <HeaderWithBackButton
                     title={translate('additionalDetailsStep.headerTitle')}

src/pages/EnablePayments/EnablePaymentsPage.js

@@ -55,7 +55,10 @@ class EnablePaymentsPage extends React.Component {
         }
 
         return (
-            <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+            <ScreenWrapper
+                includeSafeAreaPaddingBottom={false}
+                testID="EnablePaymentsPage"
+            >
                 {() => {
                     if (this.props.userWallet.errorCode === CONST.WALLET.ERROR.KYC) {
                         return (

src/pages/ErrorPage/NotFoundPage.js

@@ -5,7 +5,7 @@ import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoun
 // eslint-disable-next-line rulesdir/no-negated-variables
 function NotFoundPage() {
     return (
-        <ScreenWrapper>
+        <ScreenWrapper testID="NotFoundPage">
             <FullPageNotFoundView shouldShow />
         </ScreenWrapper>
     );

src/pages/FlagCommentPage.js

@@ -154,7 +154,10 @@ function FlagCommentPage(props) {
     ));
 
     return (
-        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            testID="FlagCommentPage"
+        >
             {({safeAreaPaddingBottomStyle}) => (
                 <FullPageNotFoundView shouldShow={!ReportUtils.shouldShowFlagComment(getActionToFlag(), props.report)}>
                     <HeaderWithBackButton title={props.translate('reportActionContextMenu.flagAsOffensive')} />

src/pages/GetAssistancePage.js

@@ -78,7 +78,7 @@ function GetAssistancePage(props) {
     }
 
     return (
-        <ScreenWrapper>
+        <ScreenWrapper testID="GetAssistancePage">
             <HeaderWithBackButton
                 title={props.translate('getAssistancePage.title')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)}

src/pages/NewChatPage.js

@@ -173,6 +173,7 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate})
             includeSafeAreaPaddingBottom={false}
             includePaddingTop={false}
             shouldEnableMaxHeight
+            testID="NewChatPage"
         >
             {({safeAreaPaddingBottomStyle, insets}) => (
                 <KeyboardAvoidingView

src/pages/NewChatSelectorPage.js

@@ -32,6 +32,7 @@ function NewChatSelectorPage(props) {
             shouldEnableKeyboardAvoidingView={false}
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
+            testID="NewChatSelectorPage"
         >
             <HeaderWithBackButton
                 title={props.translate('sidebarScreen.fabNewChat')}

src/pages/PrivateNotes/PrivateNotesEditPage.js

@@ -80,6 +80,7 @@ function PrivateNotesEditPage({route, personalDetailsList, session, report}) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             onEntryTransitionEnd={() => focusAndUpdateMultilineInputRange(privateNotesInput.current)}
+            testID="PrivateNotesEditPage"
         >
             <FullPageNotFoundView
                 shouldShow={_.isEmpty(report) || _.isEmpty(report.privateNotes) || !_.has(report, ['privateNotes', route.params.accountID, 'note']) || !isCurrentUserNote}

src/pages/PrivateNotes/PrivateNotesListPage.js

@@ -117,7 +117,10 @@ function PrivateNotesListPage({report, personalDetailsList, network, session}) {
     }, [report, personalDetailsList, session, translate]);
 
     return (
-        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            testID="PrivateNotesListPage"
+        >
             <FullPageNotFoundView shouldShow={_.isEmpty(report.reportID) || (!report.isLoadingPrivateNotes && network.isOffline && _.isEmpty(lodashGet(report, 'privateNotes', {})))}>
                 <HeaderWithBackButton
                     title={translate('privateNotes.title')}

src/pages/PrivateNotes/PrivateNotesViewPage.js

@@ -56,7 +56,10 @@ function PrivateNotesViewPage({route, personalDetailsList, session, report}) {
     const privateNote = lodashGet(report, ['privateNotes', route.params.accountID, 'note'], '');
 
     return (
-        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            testID="PrivateNotesViewPage"
+        >
             <FullPageNotFoundView
                 shouldShow={_.isEmpty(report) || _.isEmpty(report.privateNotes) || !_.has(report, ['privateNotes', route.params.accountID, 'note'])}
                 subtitleKey="privateNotes.notesUnavailable"

src/pages/ProfilePage.js

@@ -144,7 +144,7 @@ function ProfilePage(props) {
     const chatReportWithCurrentUser = !isCurrentUser && !Session.isAnonymousUser() ? ReportUtils.getChatByParticipants([accountID]) : 0;
 
     return (
-        <ScreenWrapper>
+        <ScreenWrapper testID="ProfilePage">
             <HeaderWithBackButton
                 title={props.translate('common.profile')}
                 onBackButtonPress={() => Navigation.goBack(navigateBackTo)}

src/pages/ReimbursementAccount/ACHContractStep.js

@@ -145,7 +145,10 @@ function ACHContractStep(props) {
     };
 
     return (
-        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            testID="ACHContractStep"
+        >
             <HeaderWithBackButton
                 title={props.translate('beneficialOwnersStep.additionalInformation')}
                 stepCounter={{step: 4, total: 5}}

src/pages/ReimbursementAccount/BankAccountManualStep.js

@@ -73,7 +73,10 @@ function BankAccountManualStep(props) {
     const shouldDisableInputs = Boolean(lodashGet(reimbursementAccount, 'achData.bankAccountID'));
 
     return (
-        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            testID="BankAccountManualStep"
+        >
             <HeaderWithBackButton
                 title={translate('workspace.common.connectBankAccount')}
                 stepCounter={{step: 1, total: 5}}

src/pages/ReimbursementAccount/BankAccountPlaidStep.js

@@ -89,6 +89,7 @@ function BankAccountPlaidStep(props) {
             includeSafeAreaPaddingBottom={false}
             shouldEnablePickerAvoiding={false}
             shouldShowOfflineIndicator={false}
+            testID="BankAccountPlaidStep"
         >
             <HeaderWithBackButton
                 title={translate('workspace.common.connectBankAccount')}

src/pages/ReimbursementAccount/BankAccountStep.js

@@ -91,7 +91,10 @@ function BankAccountStep(props) {
     }
 
     return (
-        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            testID="BankAccountStep"
+        >
             <View style={[styles.flex1, styles.justifyContentBetween]}>
                 <HeaderWithBackButton
                     title={props.translate('workspace.common.connectBankAccount')}

src/pages/ReimbursementAccount/CompanyStep.js

@@ -140,7 +140,10 @@ function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaul
     const shouldDisableCompanyTaxID = Boolean(bankAccountID && getDefaultStateForField('companyTaxID'));
 
     return (
-        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            testID="CompanyStep"
+        >
             <HeaderWithBackButton
                 title={translate('companyStep.headerTitle')}
                 stepCounter={{step: 2, total: 5}}

src/pages/ReimbursementAccount/ContinueBankAccountSetup.js

@@ -41,7 +41,10 @@ function ContinueBankAccountSetup(props) {
     const errors = lodashGet(props.reimbursementAccount, 'errors', {});
     const pendingAction = lodashGet(props.reimbursementAccount, 'pendingAction', null);
     return (
-        <ScreenWrapper includeSafeAreaPaddingBottom={false}>
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            testID="ContinueBankAccountSetup"
+        >
             <HeaderWithBackButton
                 title={props.translate('workspace.common.connectBankAccount')}
                 subtitle={props.policyName}

src/pages/ReimbursementAccount/EnableStep.js

@@ -56,6 +56,7 @@ function EnableStep(props) {
         <ScreenWrapper
             style={[styles.flex1, styles.justifyContentBetween]}
             includeSafeAreaPaddingBottom={false}
+            testID="EnableStep"
         >
             <HeaderWithBackButton
                 title={props.translate('workspace.common.connectBankAccount')}

src/pages/ReimbursementAccount/ReimbursementAccountPage.js

@@ -339,7 +339,7 @@ class ReimbursementAccountPage extends React.Component {
 
         if (_.isEmpty(this.props.policy) || !PolicyUtils.isPolicyAdmin(this.props.policy)) {
             return (
-                <ScreenWrapper>
+                <ScreenWrapper testID="ReimbursementAccountPage">
                     <FullPageNotFoundView
                         shouldShow
                         onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)}
@@ -385,7 +385,7 @@ class ReimbursementAccountPage extends React.Component {
 
         if (errorText) {
             return (
-                <ScreenWrapper>
+                <ScreenWrapper testID="ReimbursementAccountPage">
                     <HeaderWithBackButton
                         title={this.props.translate('workspace.common.connectBankAccount')}
                         subtitle={policyName}

src/pages/ReimbursementAccount/RequestorOnfidoStep.js

@@ -44,6 +44,7 @@ class RequestorOnfidoStep extends React.Component {
             <ScreenWrapper
                 includeSafeAreaPaddingBottom={false}
                 shouldShowOfflineIndicator={false}
+                testID="RequestorOnfidoStep"
             >
                 <HeaderWithBackButton
                     title={this.props.translate('requestorStep.headerTitle')}