Merge pull request #52751 from margelo/e2e/money-request-flow

e2e: added money request flow e2e test

Author: dangrous

contributingGuides/PERFORMANCE_METRICS.md

@@ -25,6 +25,9 @@ Project is using Firebase for tracking these metrics. However, not all of them a
 | `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.     |
 | `pusher_ping_pong`    | ✅ | The time it takes to receive a PONG event through Pusher.<br><br>**Platforms:** All      | Starts every minute and repeats on the minute.     | Stops when the event is received from the server.     |
+| `open_create_expense`    | ❌ | Time taken to open "Create expense" screen.<br><br>**Platforms:** All      | Starts when the `Create expense` is pressed.     | Stops when the `IOURequestStartPage` finishes laying out.     |
+| `open_create_expense_contact`    | ❌ | Time taken to "Create 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_create_expense_approve`    | ❌ | Time taken to "Create 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
 
@@ -38,7 +41,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

@@ -1519,6 +1519,9 @@ const CONST = {
         SIDEBAR_LOADED: 'sidebar_loaded',
         LOAD_SEARCH_OPTIONS: 'load_search_options',
         SEND_MESSAGE: 'send_message',
+        OPEN_CREATE_EXPENSE: 'open_create_expense',
+        OPEN_CREATE_EXPENSE_CONTACT: 'open_create_expense_contact',
+        OPEN_CREATE_EXPENSE_APPROVE: 'open_create_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

@@ -123,9 +123,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;
 
@@ -147,6 +144,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;
+
     /** Whether is a nested button inside other button, since nesting buttons isn't valid html */
     isNested?: boolean;
 

src/components/FloatingActionButton.tsx

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

src/components/MoneyRequestAmountInput.tsx

@@ -3,10 +3,10 @@ import React, {useCallback, useEffect, useImperativeHandle, useRef, useState} fr
 import type {NativeSyntheticEvent, StyleProp, TextStyle, ViewStyle} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
 import {useMouseContext} from '@hooks/useMouseContext';
-import * as Browser from '@libs/Browser';
-import * as CurrencyUtils from '@libs/CurrencyUtils';
+import {isMobileSafari} from '@libs/Browser';
+import {convertToFrontendAmountAsString, getCurrencyDecimals} from '@libs/CurrencyUtils';
 import getOperatingSystem from '@libs/getOperatingSystem';
-import * as MoneyRequestUtils from '@libs/MoneyRequestUtils';
+import {replaceAllDigits, replaceCommasWithPeriod, stripCommaFromAmount, stripDecimalsFromAmount, stripSpacesFromAmount, validateAmount} from '@libs/MoneyRequestUtils';
 import shouldIgnoreSelectionWhenUpdatedManually from '@libs/shouldIgnoreSelectionWhenUpdatedManually';
 import CONST from '@src/CONST';
 import isTextInputFocused from './TextInput/BaseTextInput/isTextInputFocused';
@@ -92,6 +92,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;
 } & Pick<TextInputWithCurrencySymbolProps, 'autoGrowExtraSpace'>;
 
 type Selection = {
@@ -107,7 +110,7 @@ const getNewSelection = (oldSelection: Selection, prevLength: number, newLength:
     return {start: cursorPosition, end: cursorPosition};
 };
 
-const defaultOnFormatAmount = (amount: number, currency?: string) => CurrencyUtils.convertToFrontendAmountAsString(amount, currency ?? CONST.CURRENCY.USD);
+const defaultOnFormatAmount = (amount: number, currency?: string) => convertToFrontendAmountAsString(amount, currency ?? CONST.CURRENCY.USD);
 
 function MoneyRequestAmountInput(
     {
@@ -129,6 +132,7 @@ function MoneyRequestAmountInput(
         autoGrow = true,
         autoGrowExtraSpace,
         contentWidth,
+        testID,
         ...props
     }: MoneyRequestAmountInputProps,
     forwardedRef: ForwardedRef<BaseTextInputRef>,
@@ -139,7 +143,7 @@ function MoneyRequestAmountInput(
 
     const amountRef = useRef<string | undefined>(undefined);
 
-    const decimals = CurrencyUtils.getCurrencyDecimals(currency);
+    const decimals = getCurrencyDecimals(currency);
     const selectedAmountAsString = amount ? onFormatAmount(amount, currency) : '';
 
     const [currentAmount, setCurrentAmount] = useState(selectedAmountAsString);
@@ -161,13 +165,11 @@ function MoneyRequestAmountInput(
         (newAmount: string) => {
             // Remove spaces from the newAmount value because Safari on iOS adds spaces when pasting a copied value
             // More info: https://github.com/Expensify/App/issues/16974
-            const newAmountWithoutSpaces = MoneyRequestUtils.stripSpacesFromAmount(newAmount);
-            const finalAmount = newAmountWithoutSpaces.includes('.')
-                ? MoneyRequestUtils.stripCommaFromAmount(newAmountWithoutSpaces)
-                : MoneyRequestUtils.replaceCommasWithPeriod(newAmountWithoutSpaces);
+            const newAmountWithoutSpaces = stripSpacesFromAmount(newAmount);
+            const finalAmount = newAmountWithoutSpaces.includes('.') ? stripCommaFromAmount(newAmountWithoutSpaces) : replaceCommasWithPeriod(newAmountWithoutSpaces);
             // Use a shallow copy of selection to trigger setSelection
             // More info: https://github.com/Expensify/App/issues/16385
-            if (!MoneyRequestUtils.validateAmount(finalAmount, decimals)) {
+            if (!validateAmount(finalAmount, decimals)) {
                 setSelection((prevSelection) => ({...prevSelection}));
                 return;
             }
@@ -176,7 +178,7 @@ function MoneyRequestAmountInput(
 
             willSelectionBeUpdatedManually.current = true;
             let hasSelectionBeenSet = false;
-            const strippedAmount = MoneyRequestUtils.stripCommaFromAmount(finalAmount);
+            const strippedAmount = stripCommaFromAmount(finalAmount);
             amountRef.current = strippedAmount;
             setCurrentAmount((prevAmount) => {
                 const isForwardDelete = prevAmount.length > strippedAmount.length && forwardDeletePressedRef.current;
@@ -233,12 +235,12 @@ function MoneyRequestAmountInput(
     // Modifies the amount to match the decimals for changed currency.
     useEffect(() => {
         // If the changed currency supports decimals, we can return
-        if (MoneyRequestUtils.validateAmount(currentAmount, decimals)) {
+        if (validateAmount(currentAmount, decimals)) {
             return;
         }
 
         // If the changed currency doesn't support decimals, we can strip the decimals
-        setNewAmount(MoneyRequestUtils.stripDecimalsFromAmount(currentAmount));
+        setNewAmount(stripDecimalsFromAmount(currentAmount));
 
         // we want to update only when decimals change (setNewAmount also changes when decimals change).
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
@@ -249,7 +251,7 @@ function MoneyRequestAmountInput(
      */
     const textInputKeyPress = ({nativeEvent}: NativeSyntheticEvent<KeyboardEvent>) => {
         const key = nativeEvent?.key.toLowerCase();
-        if (Browser.isMobileSafari() && key === CONST.PLATFORM_SPECIFIC_KEYS.CTRL.DEFAULT) {
+        if (isMobileSafari() && key === CONST.PLATFORM_SPECIFIC_KEYS.CTRL.DEFAULT) {
             // Optimistically anticipate forward-delete on iOS Safari (in cases where the Mac Accessiblity keyboard is being
             // used for input). If the Control-D shortcut doesn't get sent, the ref will still be reset on the next key press.
             forwardDeletePressedRef.current = true;
@@ -276,7 +278,7 @@ function MoneyRequestAmountInput(
         });
     }, [amount, currency, onFormatAmount, formatAmountOnBlur, maxLength]);
 
-    const formattedAmount = MoneyRequestUtils.replaceAllDigits(currentAmount, toLocaleDigit);
+    const formattedAmount = replaceAllDigits(currentAmount, toLocaleDigit);
 
     const {setMouseDown, setMouseUp} = useMouseContext();
     const handleMouseDown = (e: React.MouseEvent<Element, MouseEvent>) => {
@@ -340,6 +342,7 @@ function MoneyRequestAmountInput(
             onMouseDown={handleMouseDown}
             onMouseUp={handleMouseUp}
             contentWidth={contentWidth}
+            testID={testID}
         />
     );
 }

src/components/PopoverMenu.tsx

@@ -61,6 +61,9 @@ type PopoverMenuItem = MenuItemProps & {
     rightIcon?: React.FC<SvgProps>;
 
     key?: string;
+
+    /** Test identifier used to find elements in unit and e2e tests */
+    testID?: string;
 };
 
 type PopoverModalProps = Pick<ModalProps, 'animationIn' | 'animationOut' | 'animationInTiming' | 'animationOutTiming'> &
@@ -198,8 +201,8 @@ function PopoverMenu({
     shouldUpdateFocusedIndex = true,
     shouldUseModalPaddingStyle,
     shouldUseNewModal,
-    testID,
     shouldAvoidSafariException = false,
+    testID,
 }: PopoverMenuProps) {
     const styles = useThemeStyles();
     const theme = useTheme();
@@ -278,7 +281,7 @@ function PopoverMenu({
     };
 
     const renderedMenuItems = currentMenuItems.map((item, menuIndex) => {
-        const {text, onSelected, subMenuItems, shouldCallAfterModalHide, key, ...menuItemProps} = item;
+        const {text, onSelected, subMenuItems, shouldCallAfterModalHide, key, testID: menuItemTestID, ...menuItemProps} = item;
         return (
             <OfflineWithFeedback
                 // eslint-disable-next-line react/no-array-index-key
@@ -288,7 +291,7 @@ function PopoverMenu({
                 <FocusableMenuItem
                     // eslint-disable-next-line react/no-array-index-key
                     key={key ?? `${item.text}_${menuIndex}`}
-                    pressableTestID={`PopoverMenuItem-${item.text}`}
+                    pressableTestID={menuItemTestID ?? `PopoverMenuItem-${item.text}`}
                     title={text}
                     onPress={() => selectItem(menuIndex)}
                     focused={focusedIndex === menuIndex}

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

@@ -39,6 +39,7 @@ function BaseListItem<TItem extends ListItem>({
     onFocus = () => {},
     hoverStyle,
     onLongPressRow,
+    testID,
 }: BaseListItemProps<TItem>) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -112,6 +113,7 @@ function BaseListItem<TItem extends ListItem>({
                 onMouseLeave={handleMouseLeave}
                 tabIndex={item.tabIndex}
                 wrapperStyle={pressableWrapperStyle}
+                testID={testID}
             >
                 <View
                     testID={`${CONST.BASE_LIST_ITEM_TEST_ID}${item.keyForList}`}

src/components/SelectionList/InviteMemberListItem.tsx

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

src/components/SelectionList/types.ts

@@ -329,6 +329,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,29 +24,30 @@ type TabSelectorProps = MaterialTopTabBarProps & {
     shouldShowLabelWhenInactive?: boolean;
 };
 
-type IconAndTitle = {
+type IconTitleAndTestID = {
     icon: IconAsset;
     title: string;
+    testID?: string;
 };
 
-function getIconAndTitle(route: string, translate: LocaleContextProps['translate']): IconAndTitle {
+function getIconTitleAndTestID(route: string, translate: LocaleContextProps['translate']): IconTitleAndTestID {
     switch (route) {
         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')};
+            return {icon: Expensicons.ReceiptScan, title: translate('tabSelector.scan'), testID: 'scan'};
         case CONST.TAB.NEW_CHAT:
-            return {icon: Expensicons.User, title: translate('tabSelector.chat')};
+            return {icon: Expensicons.User, title: translate('tabSelector.chat'), testID: 'chat'};
         case CONST.TAB.NEW_ROOM:
-            return {icon: Expensicons.Hashtag, title: translate('tabSelector.room')};
+            return {icon: Expensicons.Hashtag, title: translate('tabSelector.room'), testID: 'room'};
         case CONST.TAB_REQUEST.DISTANCE:
-            return {icon: Expensicons.Car, title: translate('common.distance')};
+            return {icon: Expensicons.Car, title: translate('common.distance'), testID: 'distance'};
         case CONST.TAB.SHARE.SHARE:
-            return {icon: Expensicons.UploadAlt, title: translate('common.share')};
+            return {icon: Expensicons.UploadAlt, title: translate('common.share'), testID: 'share'};
         case CONST.TAB.SHARE.SUBMIT:
-            return {icon: Expensicons.Receipt, title: translate('common.submit')};
+            return {icon: Expensicons.Receipt, title: translate('common.submit'), testID: 'submit'};
         case CONST.TAB_REQUEST.PER_DIEM:
-            return {icon: Expensicons.CalendarSolid, title: translate('common.perDiem')};
+            return {icon: Expensicons.CalendarSolid, title: translate('common.perDiem'), testID: 'perDiem'};
         default:
             throw new Error(`Route ${route} has no icon nor title set.`);
     }
@@ -74,7 +75,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} = getIconTitleAndTestID(route.name, translate);
                     const onPress = () => {
                         if (isActive) {
                             return;
@@ -106,6 +107,7 @@ function TabSelector({state, navigation, onTabPress = () => {}, position, onFocu
                             inactiveOpacity={inactiveOpacity}
                             backgroundColor={backgroundColor}
                             isActive={isActive}
+                            testID={testID}
                             shouldShowLabelWhenInactive={shouldShowLabelWhenInactive}
                         />
                     );

src/components/TabSelector/TabSelectorItem.tsx

@@ -35,6 +35,9 @@ type TabSelectorItemProps = {
 
     /** Whether to show the label when the tab is inactive */
     shouldShowLabelWhenInactive?: boolean;
+
+    /** Test identifier used to find elements in unit and e2e tests */
+    testID?: string;
 };
 
 function TabSelectorItem({
@@ -46,6 +49,7 @@ function TabSelectorItem({
     inactiveOpacity = 1,
     isActive = false,
     shouldShowLabelWhenInactive = true,
+    testID,
 }: TabSelectorItemProps) {
     const styles = useThemeStyles();
     const [isHovered, setIsHovered] = useState(false);
@@ -64,6 +68,7 @@ function TabSelectorItem({
                 onHoverOut={() => setIsHovered(false)}
                 role={CONST.ROLE.BUTTON}
                 dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
+                testID={testID}
             >
                 <TabIcon
                     icon={icon}