Merge pull request #51157 from margelo/fix/e2e-search-tests

[NoQA] fix(e2e): fix e2e search test by clicking search page
Expensify · Oct 22, 2024 · 615565d · 615565d
2 parents 179d0f0 + 204a126
commit 615565d
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 36 deletions.
diff --git a/...GenericPressable/BaseGenericPressable.tsx → ...e/implementation/BaseGenericPressable.tsx b/...GenericPressable/BaseGenericPressable.tsx → ...e/implementation/BaseGenericPressable.tsx
@@ -3,15 +3,15 @@ import React, {forwardRef, useCallback, useEffect, useMemo, useState} from 'reac
 import type {GestureResponderEvent, View} from 'react-native';
 // eslint-disable-next-line no-restricted-imports
 import {Pressable} from 'react-native';
+import type {PressableRef} from '@components/Pressable/GenericPressable/types';
+import type PressableProps from '@components/Pressable/GenericPressable/types';
 import useSingleExecution from '@hooks/useSingleExecution';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Accessibility from '@libs/Accessibility';
 import HapticFeedback from '@libs/HapticFeedback';
 import KeyboardShortcut from '@libs/KeyboardShortcut';
 import CONST from '@src/CONST';
-import type {PressableRef} from './types';
-import type PressableProps from './types';
 
 function GenericPressable(
     {

diff --git a/...essable/GenericPressable/index.native.tsx → ...Pressable/implementation/index.native.tsx b/...essable/GenericPressable/index.native.tsx → ...Pressable/implementation/index.native.tsx
@@ -1,7 +1,7 @@
 import React, {forwardRef} from 'react';
+import type {PressableRef} from '@components/Pressable/GenericPressable/types';
+import type PressableProps from '@components/Pressable/GenericPressable/types';
 import GenericPressable from './BaseGenericPressable';
-import type {PressableRef} from './types';
-import type PressableProps from './types';
 
 function NativeGenericPressable(props: PressableProps, ref: PressableRef) {
     return (

diff --git a/src/components/Pressable/GenericPressable/implementation/index.tsx b/src/components/Pressable/GenericPressable/implementation/index.tsx
@@ -0,0 +1,33 @@
+import React, {forwardRef} from 'react';
+import type {Role} from 'react-native';
+import type {PressableRef} from '@components/Pressable/GenericPressable/types';
+import type PressableProps from '@components/Pressable/GenericPressable/types';
+import GenericPressable from './BaseGenericPressable';
+
+function WebGenericPressable({focusable = true, ...props}: PressableProps, ref: PressableRef) {
+    const accessible = props.accessible ?? props.accessible === undefined ? true : props.accessible;
+
+    return (
+        <GenericPressable
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            ref={ref}
+            // change native accessibility props to web accessibility props
+            focusable={focusable}
+            tabIndex={props.tabIndex ?? (!accessible || !focusable) ? -1 : 0}
+            role={(props.accessibilityRole ?? props.role) as Role}
+            id={props.id}
+            aria-label={props.accessibilityLabel}
+            aria-labelledby={props.accessibilityLabelledBy}
+            aria-valuenow={props.accessibilityValue?.now}
+            aria-valuemin={props.accessibilityValue?.min}
+            aria-valuemax={props.accessibilityValue?.max}
+            aria-valuetext={props.accessibilityValue?.text}
+            dataSet={{tag: 'pressable', ...(props.noDragArea && {dragArea: false}), ...props.dataSet}}
+        />
+    );
+}
+
+WebGenericPressable.displayName = 'WebGenericPressable';
+
+export default forwardRef(WebGenericPressable);
diff --git a/src/components/Pressable/GenericPressable/index.e2e.tsx b/src/components/Pressable/GenericPressable/index.e2e.tsx
@@ -0,0 +1,34 @@
+import React, {forwardRef, useEffect} from 'react';
+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 E2EGenericPressableWrapper(props: PressableProps, ref: PressableRef) {
+    useEffect(() => {
+        const nativeId = props.nativeID;
+        if (!nativeId) {
+            return;
+        }
+        console.debug(`[E2E] E2EGenericPressableWrapper: Registering pressable with nativeID: ${nativeId}`);
+        pressableRegistry.set(nativeId, props);
+    }, [props]);
+
+    return (
+        <GenericPressable
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            ref={ref}
+        />
+    );
+}
+
+E2EGenericPressableWrapper.displayName = 'E2EGenericPressableWrapper';
+
+export default forwardRef(E2EGenericPressableWrapper);
+export {getPressableProps};
diff --git a/src/components/Pressable/GenericPressable/index.tsx b/src/components/Pressable/GenericPressable/index.tsx
@@ -1,33 +1,3 @@
-import React, {forwardRef} from 'react';
-import type {Role} from 'react-native';
-import GenericPressable from './BaseGenericPressable';
-import type {PressableRef} from './types';
-import type PressableProps from './types';
+import GenericPressable from './implementation';
 
-function WebGenericPressable({focusable = true, ...props}: PressableProps, ref: PressableRef) {
-    const accessible = props.accessible ?? props.accessible === undefined ? true : props.accessible;
-
-    return (
-        <GenericPressable
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-            ref={ref}
-            // change native accessibility props to web accessibility props
-            focusable={focusable}
-            tabIndex={props.tabIndex ?? (!accessible || !focusable) ? -1 : 0}
-            role={(props.accessibilityRole ?? props.role) as Role}
-            id={props.id}
-            aria-label={props.accessibilityLabel}
-            aria-labelledby={props.accessibilityLabelledBy}
-            aria-valuenow={props.accessibilityValue?.now}
-            aria-valuemin={props.accessibilityValue?.min}
-            aria-valuemax={props.accessibilityValue?.max}
-            aria-valuetext={props.accessibilityValue?.text}
-            dataSet={{tag: 'pressable', ...(props.noDragArea && {dragArea: false}), ...props.dataSet}}
-        />
-    );
-}
-
-WebGenericPressable.displayName = 'WebGenericPressable';
-
-export default forwardRef(WebGenericPressable);
+export default GenericPressable;
diff --git a/src/components/Search/SearchRouter/SearchButton.tsx b/src/components/Search/SearchRouter/SearchButton.tsx
@@ -26,6 +26,7 @@ function SearchButton({style}: SearchButtonProps) {
     return (
         <Tooltip text={translate('common.search')}>
             <PressableWithoutFeedback
+                nativeID="searchButton"
                 accessibilityLabel={translate('common.search')}
                 style={[styles.flexRow, styles.touchableButtonImage, style]}
                 onPress={Session.checkIfActionIsAllowed(() => {

diff --git a/src/libs/E2E/tests/openSearchRouterTest.e2e.ts b/src/libs/E2E/tests/openSearchRouterTest.e2e.ts
@@ -1,4 +1,5 @@
 import Config from 'react-native-config';
+import * as E2EGenericPressableWrapper from '@components/Pressable/GenericPressable/index.e2e';
 import E2ELogin from '@libs/E2E/actions/e2eLogin';
 import waitForAppLoaded from '@libs/E2E/actions/waitForAppLoaded';
 import E2EClient from '@libs/E2E/client';
@@ -31,6 +32,29 @@ const test = () => {
 
         Performance.subscribeToMeasurements((entry) => {
             console.debug(`[E2E] Entry: ${JSON.stringify(entry)}`);
+            if (entry.name === CONST.TIMING.SIDEBAR_LOADED) {
+                const props = E2EGenericPressableWrapper.getPressableProps('searchButton');
+                if (!props) {
+                    console.debug('[E2E] Search button not found, failing test!');
+                    E2EClient.submitTestResults({
+                        branch: Config.E2E_BRANCH,
+                        error: 'Search button not found',
+                        name: 'Open Search Router TTI',
+                    }).then(() => E2EClient.submitTestDone());
+                    return;
+                }
+                if (!props.onPress) {
+                    console.debug('[E2E] Search button found but onPress prop was not present, failing test!');
+                    E2EClient.submitTestResults({
+                        branch: Config.E2E_BRANCH,
+                        error: 'Search button found but onPress prop was not present',
+                        name: 'Open Search Router TTI',
+                    }).then(() => E2EClient.submitTestDone());
+                    return;
+                }
+                // Open the search router
+                props.onPress();
+            }
 
             if (entry.name === CONST.TIMING.SEARCH_ROUTER_RENDER) {
                 E2EClient.submitTestResults({