e2e: added money request flow e2e test

contributingGuides/PERFORMANCE_METRICS.md

@@ -24,6 +24,9 @@ Project is using Firebase for tracking these metrics. However, not all of them a
 | `open_report_from_preview`   | ✅ | Time taken to open a report from preview.<br><br>(previously `switch_report_from_preview`)<br><br>**Platforms:** All     | Starts when the user presses the Report Preview.     | Stops when the `ReportActionsList` finishes laying out.     |
 | `open_report_thread`   | ✅ | Time taken to open a thread in a report.<br><br>**Platforms:** All      | Starts when user presses Report Action Item.     | Stops when the `ReportActionsList` finishes laying out.     |
 | `send_message`    | ✅ | Time taken to send a message.<br><br>**Platforms:** All      | Starts when the new message is sent.     | Stops when the message is being rendered in the chat.     |
+| `open_submit_expense`    | ❌ | Time taken to open "Submit expense" screen.<br><br>**Platforms:** All      | Starts when the `Create expense` is pressed.     | Stops when the `IOURequestStartPage` finishes laying out.     |
+| `open_submit_expense_contact`    | ❌ | Time taken to Submit expense screen.<br><br>**Platforms:** All      | Starts when the `Next` button on `Create expense` screen is pressed.     | Stops when the `IOURequestStepParticipants` finishes laying out.     |
+| `open_submit_expense_approve`    | ❌ | Time taken to Submit expense screen.<br><br>**Platforms:** All      | Starts when the `Contact` on `Choose recipient` screen is selected.     | Stops when the `IOURequestStepConfirmation` finishes laying out.     |
 
 ## Documentation Maintenance
 
@@ -37,7 +40,6 @@ To ensure this documentation remains accurate and useful, please adhere to the f
 
 4. **Code Location Changes**: If the placement of a metric in the code changes, update the "Start time" and "End time" columns to reflect the new location.
 
-
 ## Additional Resources
 
 - [Firebase Documentation](https://firebase.google.com/docs)

src/CONST.ts

@@ -1321,6 +1321,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',
         APPLY_AIRSHIP_UPDATES: 'apply_airship_updates',
         APPLY_PUSHER_UPDATES: 'apply_pusher_updates',
         APPLY_HTTPS_UPDATES: 'apply_https_updates',

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

@@ -122,9 +122,6 @@ type ButtonProps = Partial<ChildrenProps> & {
     /** Id to use for this button */
     id?: string;
 
-    /** Used to locate this button in ui tests */
-    testID?: string;
-
     /** Accessibility label for the component */
     accessibilityLabel?: string;
 
@@ -145,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'>;

src/components/FloatingActionButton.tsx

@@ -110,6 +110,7 @@ function FloatingActionButton({onPress, isActive, accessibilityLabel, role}: Flo
             onLongPress={() => {}}
             role={role}
             shouldUseHapticsOnLongPress={false}
+            testID="floating-action-button"
         >
             <Animated.View style={[styles.floatingActionButton, animatedStyle]}>
                 <Svg

src/components/MenuItem.tsx

@@ -348,6 +348,9 @@ type MenuItemBaseProps = {
 
     /** Should break word for room title */
     shouldBreakWord?: boolean;
+
+    /** Test identifier used to find elements in unit and e2e tests */
+    testID?: string;
 };
 
 type MenuItemProps = (IconProps | AvatarProps | NoIcon) & MenuItemBaseProps;
@@ -461,6 +464,7 @@ function MenuItem(
         onHideTooltip,
         shouldIconUseAutoWidthStyle = false,
         shouldBreakWord = false,
+        testID,
     }: MenuItemProps,
     ref: PressableRef,
 ) {
@@ -629,6 +633,7 @@ function MenuItem(
                                 accessibilityLabel={title ? title.toString() : ''}
                                 accessible
                                 onFocus={onFocus}
+                                testID={testID}
                             >
                                 {({pressed}) => (
                                     <View style={[styles.flex1]}>

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/PopoverMenu.tsx

@@ -54,6 +54,9 @@ type PopoverMenuItem = MenuItemProps & {
     shouldCloseAllModals?: boolean;
 
     pendingAction?: PendingAction;
+
+    /** Test identifier used to find elements in unit and e2e tests */
+    testID?: string;
 };
 
 type PopoverModalProps = Pick<ModalProps, 'animationIn' | 'animationOut' | 'animationInTiming'>;

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

@@ -28,7 +28,7 @@ function SearchButton({style}: SearchButtonProps) {
         <Tooltip text={translate('common.search')}>
             <PressableWithoutFeedback
                 ref={pressableRef}
-                nativeID="searchButton"
+                testID="searchButton"
                 accessibilityLabel={translate('common.search')}
                 style={[styles.flexRow, styles.touchableButtonImage, style]}
                 // eslint-disable-next-line react-compiler/react-compiler

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

@@ -315,6 +315,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/TabSelector/TabSelector.tsx

@@ -24,6 +24,7 @@ type TabSelectorProps = MaterialTopTabBarProps & {
 type IconAndTitle = {
     icon: IconAsset;
     title: string;
+    testID?: string;
 };
 
 function getIconAndTitle(route: string, translate: LocaleContextProps['translate']): IconAndTitle {
@@ -39,7 +40,7 @@ function getIconAndTitle(route: string, translate: LocaleContextProps['translate
         case CONST.DEBUG.TRANSACTION_VIOLATIONS:
             return {icon: Expensicons.Exclamation, title: translate('debug.violations')};
         case CONST.TAB_REQUEST.MANUAL:
-            return {icon: Expensicons.Pencil, title: translate('tabSelector.manual')};
+            return {icon: Expensicons.Pencil, title: translate('tabSelector.manual'), testID: 'manual'};
         case CONST.TAB_REQUEST.SCAN:
             return {icon: Expensicons.ReceiptScan, title: translate('tabSelector.scan')};
         case CONST.TAB.NEW_CHAT:
@@ -75,7 +76,7 @@ function TabSelector({state, navigation, onTabPress = () => {}, position, onFocu
                     const activeOpacity = getOpacity({routesLength: state.routes.length, tabIndex: index, active: true, affectedTabs: affectedAnimatedTabs, position, isActive});
                     const inactiveOpacity = getOpacity({routesLength: state.routes.length, tabIndex: index, active: false, affectedTabs: affectedAnimatedTabs, position, isActive});
                     const backgroundColor = getBackgroundColor({routesLength: state.routes.length, tabIndex: index, affectedTabs: affectedAnimatedTabs, theme, position, isActive});
-                    const {icon, title} = getIconAndTitle(route.name, translate);
+                    const {icon, title, testID} = getIconAndTitle(route.name, translate);
 
                     const onPress = () => {
                         if (isActive) {
@@ -108,6 +109,7 @@ function TabSelector({state, navigation, onTabPress = () => {}, position, onFocu
                             inactiveOpacity={inactiveOpacity}
                             backgroundColor={backgroundColor}
                             isActive={isActive}
+                            testID={testID}
                         />
                     );
                 })}

src/components/TabSelector/TabSelectorItem.tsx

@@ -30,9 +30,12 @@ type TabSelectorItemProps = {
 
     /** Whether this tab is active */
     isActive?: boolean;
+
+    /** Test identifier used to find elements in unit and e2e tests */
+    testID?: string;
 };
 
-function TabSelectorItem({icon, title = '', onPress = () => {}, backgroundColor = '', activeOpacity = 0, inactiveOpacity = 1, isActive = false}: TabSelectorItemProps) {
+function TabSelectorItem({icon, title = '', onPress = () => {}, backgroundColor = '', activeOpacity = 0, inactiveOpacity = 1, isActive = false, testID}: TabSelectorItemProps) {
     const styles = useThemeStyles();
     const [isHovered, setIsHovered] = useState(false);
 
@@ -46,6 +49,7 @@ function TabSelectorItem({icon, title = '', onPress = () => {}, backgroundColor
             onHoverOut={() => setIsHovered(false)}
             role={CONST.ROLE.BUTTON}
             dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
+            testID={testID}
         >
             <TabIcon
                 icon={icon}

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

@@ -14,6 +14,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';
@@ -27,7 +28,6 @@ import getSecureEntryKeyboardType from '@libs/getSecureEntryKeyboardType';
 import isInputAutoFilled from '@libs/isInputAutoFilled';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
-import type {BaseTextInputProps, BaseTextInputRef} from './types';
 
 function BaseTextInput(
     {