e2e: added money request flow e2e test

src/CONST.ts

@@ -1304,6 +1304,9 @@ const CONST = {
         SIDEBAR_LOADED: 'sidebar_loaded',
         LOAD_SEARCH_OPTIONS: 'load_search_options',
         SEND_MESSAGE: 'send_message',
+        OPEN_SUBMIT_EXPENSE: 'open_submit_expense',
+        OPEN_SUBMIT_EXPENSE_CONTACT: 'open_submit_expense_contact',
+        OPEN_SUBMIT_EXPENSE_APPROVE: 'open_submit_expense_approve',
         COLD: 'cold',
         WARM: 'warm',
         REPORT_ACTION_ITEM_LAYOUT_DEBOUNCE_TIME: 1500,

src/components/BigNumberPad.tsx

@@ -97,6 +97,7 @@ function BigNumberPad({numberPressed, longPressHandlerStateChanged = () => {}, i
                                     e.preventDefault();
                                 }}
                                 isLongPressDisabled={isLongPressDisabled}
+                                testID={`button_${column}`}
                             />
                         );
                     })}

src/components/Button/index.tsx

@@ -142,6 +142,9 @@ type ButtonProps = Partial<ChildrenProps> & {
 
     /** Whether the Enter keyboard listening is active whether or not the screen that contains the button is focused */
     isPressOnEnterActive?: boolean;
+
+    /** The testID of the button. Used to locate this view in end-to-end tests. */
+    testID?: string;
 };
 
 type KeyboardShortcutComponentProps = Pick<ButtonProps, 'isDisabled' | 'isLoading' | 'onPress' | 'pressOnEnter' | 'allowBubble' | 'enterKeyEventListenerPriority' | 'isPressOnEnterActive'>;
@@ -242,6 +245,7 @@ function Button(
         link = false,
         isContentCentered = false,
         isPressOnEnterActive,
+        testID,
         ...rest
     }: ButtonProps,
     ref: ForwardedRef<View>,
@@ -410,6 +414,7 @@ function Button(
                 hoverDimmingValue={1}
                 onHoverIn={() => setIsHovered(true)}
                 onHoverOut={() => setIsHovered(false)}
+                testID={testID}
             >
                 {renderContent()}
                 {isLoading && (

src/components/MoneyRequestAmountInput.tsx

@@ -91,6 +91,9 @@ type MoneyRequestAmountInputProps = {
 
     /** The width of inner content */
     contentWidth?: number;
+
+    /** The testID of the input. Used to locate this view in end-to-end tests. */
+    testID?: string;
 };
 
 type Selection = {
@@ -127,6 +130,7 @@ function MoneyRequestAmountInput(
         shouldKeepUserInput = false,
         autoGrow = true,
         contentWidth,
+        testID,
         ...props
     }: MoneyRequestAmountInputProps,
     forwardedRef: ForwardedRef<BaseTextInputRef>,
@@ -337,6 +341,7 @@ function MoneyRequestAmountInput(
             onMouseDown={handleMouseDown}
             onMouseUp={handleMouseUp}
             contentWidth={contentWidth}
+            testID={testID}
         />
     );
 }

src/components/Pressable/GenericPressable/index.e2e.tsx

@@ -1,22 +1,25 @@
 import React, {forwardRef, useEffect} from 'react';
+import {DeviceEventEmitter} from 'react-native';
 import GenericPressable from './implementation';
 import type {PressableRef} from './types';
 import type PressableProps from './types';
 
 const pressableRegistry = new Map<string, PressableProps>();
 
-function getPressableProps(nativeID: string): PressableProps | undefined {
-    return pressableRegistry.get(nativeID);
+function getPressableProps(testId: string): PressableProps | undefined {
+    return pressableRegistry.get(testId);
 }
 
 function E2EGenericPressableWrapper(props: PressableProps, ref: PressableRef) {
     useEffect(() => {
-        const nativeId = props.nativeID;
-        if (!nativeId) {
+        const testId = props.testID;
+        if (!testId) {
             return;
         }
-        console.debug(`[E2E] E2EGenericPressableWrapper: Registering pressable with nativeID: ${nativeId}`);
-        pressableRegistry.set(nativeId, props);
+        console.debug(`[E2E] E2EGenericPressableWrapper: Registering pressable with testID: ${testId}`);
+        pressableRegistry.set(testId, props);
+
+        DeviceEventEmitter.emit('onBecameVisible', testId);
     }, [props]);
 
     return (

src/components/Search/SearchRouter/SearchButton.tsx

@@ -26,7 +26,7 @@ function SearchButton({style}: SearchButtonProps) {
     return (
         <Tooltip text={translate('common.search')}>
             <PressableWithoutFeedback
-                nativeID="searchButton"
+                testID="searchButton"
                 accessibilityLabel={translate('common.search')}
                 style={[styles.flexRow, styles.touchableButtonImage, style]}
                 onPress={Session.checkIfActionIsAllowed(() => {

src/components/SelectionList/BaseListItem.tsx

@@ -36,6 +36,7 @@ function BaseListItem<TItem extends ListItem>({
     onFocus = () => {},
     hoverStyle,
     onLongPressRow,
+    testID,
 }: BaseListItemProps<TItem>) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -106,6 +107,7 @@ function BaseListItem<TItem extends ListItem>({
                 onMouseLeave={handleMouseLeave}
                 tabIndex={item.tabIndex}
                 wrapperStyle={pressableWrapperStyle}
+                testID={testID}
             >
                 <View
                     style={[

src/components/SelectionList/InviteMemberListItem.tsx

@@ -82,6 +82,7 @@ function InviteMemberListItem<TItem extends ListItem>({
             onFocus={onFocus}
             shouldSyncFocus={shouldSyncFocus}
             shouldDisplayRBR={!shouldShowCheckBox}
+            testID={item.text}
         >
             {(hovered?: boolean) => (
                 <>

src/components/SelectionList/types.ts

@@ -312,6 +312,8 @@ type BaseListItemProps<TItem extends ListItem> = CommonListItemProps<TItem> & {
     hoverStyle?: StyleProp<ViewStyle>;
     /** Errors that this user may contain */
     shouldDisplayRBR?: boolean;
+    /** Test ID of the component. Used to locate this view in end-to-end tests. */
+    testID?: string;
 };
 
 type UserListItemProps<TItem extends ListItem> = ListItemProps<TItem> & {

src/components/TextInput/BaseTextInput/index.native.tsx → src/components/TextInput/BaseTextInput/implementation/index.native.tsx

@@ -13,6 +13,7 @@ import RNMarkdownTextInput from '@components/RNMarkdownTextInput';
 import type {AnimatedTextInputRef} from '@components/RNTextInput';
 import RNTextInput from '@components/RNTextInput';
 import Text from '@components/Text';
+import type {BaseTextInputProps, BaseTextInputRef} from '@components/TextInput/BaseTextInput/types';
 import * as styleConst from '@components/TextInput/styleConst';
 import TextInputClearButton from '@components/TextInput/TextInputClearButton';
 import TextInputLabel from '@components/TextInput/TextInputLabel';
@@ -26,7 +27,6 @@ import isInputAutoFilled from '@libs/isInputAutoFilled';
 import useNativeDriver from '@libs/useNativeDriver';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
-import type {BaseTextInputProps, BaseTextInputRef} from './types';
 
 function BaseTextInput(
     {