Migrate reassure tests for ChatFinder to SearchRouter

src/components/Search/SearchRouter/SearchRouter.tsx

@@ -23,21 +23,23 @@ import Timing from '@userActions/Timing';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import {useSearchRouterContext} from './SearchRouterContext';
 import SearchRouterInput from './SearchRouterInput';
 import SearchRouterList from './SearchRouterList';
 
 const SEARCH_DEBOUNCE_DELAY = 150;
 
-function SearchRouter() {
+type SearchRouterProps = {
+    onRouterClose: () => void;
+};
+
+function SearchRouter({onRouterClose}: SearchRouterProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [betas] = useOnyx(ONYXKEYS.BETAS);
     const [recentSearches] = useOnyx(ONYXKEYS.RECENT_SEARCHES);
     const [isSearchingForReports] = useOnyx(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, {initWithStoredValues: false});
 
     const {isSmallScreenWidth} = useResponsiveLayout();
-    const {isSearchRouterDisplayed, closeSearchRouter} = useSearchRouterContext();
     const listRef = useRef<SelectionListHandle>(null);
 
     const [textInputValue, debouncedInputValue, setTextInputValue] = useDebouncedState('', 500);
@@ -90,15 +92,6 @@ function SearchRouter() {
         Report.searchInServer(debouncedInputValue.trim());
     }, [debouncedInputValue]);
 
-    useEffect(() => {
-        if (!textInputValue && isSearchRouterDisplayed) {
-            return;
-        }
-        listRef.current?.updateAndScrollToFocusedIndex(0);
-        // eslint-disable-next-line react-compiler/react-compiler
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isSearchRouterDisplayed]);
-
     const contextualReportData = contextualReportID ? searchOptions.recentReports?.find((option) => option.reportID === contextualReportID) : undefined;
 
     const clearUserQuery = () => {
@@ -135,40 +128,43 @@ function SearchRouter() {
     };
 
     const closeAndClearRouter = useCallback(() => {
-        closeSearchRouter();
+        onRouterClose();
         clearUserQuery();
         // eslint-disable-next-line react-compiler/react-compiler
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [closeSearchRouter]);
+    }, [onRouterClose]);
 
     const onSearchSubmit = useCallback(
         (query: SearchQueryJSON | undefined) => {
             if (!query) {
                 return;
             }
-            closeSearchRouter();
+            onRouterClose();
             const queryString = SearchUtils.buildSearchQueryString(query);
             Navigation.navigate(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: queryString}));
             clearUserQuery();
         },
         // eslint-disable-next-line react-compiler/react-compiler
         // eslint-disable-next-line react-hooks/exhaustive-deps
-        [closeSearchRouter],
+        [onRouterClose],
     );
 
     useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ESCAPE, () => {
-        closeSearchRouter();
+        onRouterClose();
         clearUserQuery();
     });
 
     const modalWidth = isSmallScreenWidth ? styles.w100 : {width: variables.popoverWidth};
 
     return (
-        <View style={[styles.flex1, modalWidth, styles.h100, !isSmallScreenWidth && styles.mh85vh]}>
+        <View
+            style={[styles.flex1, modalWidth, styles.h100, !isSmallScreenWidth && styles.mh85vh]}
+            testID={SearchRouter.displayName}
+        >
             {isSmallScreenWidth && (
                 <HeaderWithBackButton
                     title={translate('common.search')}
-                    onBackButtonPress={() => closeSearchRouter()}
+                    onBackButtonPress={() => onRouterClose()}
                 />
             )}
             <SearchRouterInput

src/components/Search/SearchRouter/SearchRouterInput.tsx

@@ -68,6 +68,7 @@ function SearchRouterInput({
         <View style={[styles.flexRow, styles.alignItemsCenter, wrapperStyle ?? styles.searchRouterTextInputContainer, isFocused && wrapperFocusedStyle]}>
             <View style={styles.flex1}>
                 <TextInput
+                    testID="search-router-text-input"
                     value={value}
                     onChangeText={onChangeText}
                     autoFocus

src/components/Search/SearchRouter/SearchRouterModal.tsx

@@ -20,7 +20,7 @@ function SearchRouterModal() {
             popoverAnchorPosition={{right: 20, top: 20}}
             onClose={closeSearchRouter}
         >
-            <FocusTrapForModal active={isSearchRouterDisplayed}>{isSearchRouterDisplayed && <SearchRouter />}</FocusTrapForModal>
+            <FocusTrapForModal active={isSearchRouterDisplayed}>{isSearchRouterDisplayed && <SearchRouter onRouterClose={closeSearchRouter} />}</FocusTrapForModal>
         </Modal>
     );
 }

src/libs/E2E/reactNativeLaunchingTest.ts

@@ -32,7 +32,6 @@ if (!appInstanceId) {
 // import your test here, define its name and config first in e2e/config.js
 const tests: Tests = {
     [E2EConfig.TEST_NAMES.AppStartTime]: require<TestModule>('./tests/appStartTimeTest.e2e').default,
-    // Todo [Search] rename
     [E2EConfig.TEST_NAMES.OpenSearchRouter]: require<TestModule>('./tests/openSearchRouterTest.e2e').default,
     [E2EConfig.TEST_NAMES.ChatOpening]: require<TestModule>('./tests/chatOpeningTest.e2e').default,
     [E2EConfig.TEST_NAMES.ReportTyping]: require<TestModule>('./tests/reportTypingTest.e2e').default,

src/libs/Navigation/AppNavigator/AuthScreens.tsx

@@ -7,8 +7,8 @@ import ActiveGuidesEventListener from '@components/ActiveGuidesEventListener';
 import ComposeProviders from '@components/ComposeProviders';
 import OptionsListContextProvider from '@components/OptionListContextProvider';
 import {SearchContextProvider} from '@components/Search/SearchContext';
-import SearchRouterModal from '@components/Search/SearchRouter/SearchRouterModal';
 import {useSearchRouterContext} from '@components/Search/SearchRouter/SearchRouterContext';
+import SearchRouterModal from '@components/Search/SearchRouter/SearchRouterModal';
 import useActiveWorkspace from '@hooks/useActiveWorkspace';
 import useOnboardingFlowRouter from '@hooks/useOnboardingFlow';
 import usePermissions from '@hooks/usePermissions';

tests/perf-test/ChatFinderPage.perf-test.tsx → tests/perf-test/SearchRouter.perf-test.tsx

@@ -2,11 +2,11 @@ import type * as NativeNavigation from '@react-navigation/native';
 import {fireEvent, screen} from '@testing-library/react-native';
 import React, {useMemo} from 'react';
 import type {ComponentType} from 'react';
-import {View} from 'react-native';
 import Onyx from 'react-native-onyx';
 import {measureRenders} from 'reassure';
 import {LocaleContextProvider} from '@components/LocaleContextProvider';
 import OptionListContextProvider, {OptionsListContext} from '@components/OptionListContextProvider';
+import SearchRouter from '@components/Search/SearchRouter/SearchRouter';
 import {KeyboardStateProvider} from '@components/withKeyboardState';
 import type {WithNavigationFocusProps} from '@components/withNavigationFocus';
 import {createOptionList} from '@libs/OptionsListUtils';
@@ -23,8 +23,6 @@ import * as TestHelper from '../utils/TestHelper';
 import waitForBatchedUpdates from '../utils/waitForBatchedUpdates';
 import wrapOnyxWithWaitForBatchedUpdates from '../utils/wrapOnyxWithWaitForBatchedUpdates';
 
-// Todo [Search] Either migrate this test to tests new SearchRouter or remove it completely.
-
 jest.mock('lodash/debounce', () =>
     jest.fn((fn: Record<string, jest.Mock>) => {
         // eslint-disable-next-line no-param-reassign
@@ -66,6 +64,9 @@ jest.mock('@react-navigation/native', () => {
             getCurrentRoute: () => jest.fn(),
             getState: () => jest.fn(),
         }),
+        useNavigationState: () => ({
+            routes: [],
+        }),
     };
 });
 
@@ -84,15 +85,6 @@ jest.mock('@src/components/withNavigationFocus', () => (Component: ComponentType
 
     return WithNavigationFocus;
 });
-// mock of useDismissedReferralBanners
-jest.mock('../../src/hooks/useDismissedReferralBanners', () => ({
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    __esModule: true,
-    default: jest.fn(() => ({
-        isDismissed: false,
-        setAsDismissed: () => {},
-    })),
-}));
 
 const getMockedReports = (length = 100) =>
     createCollection<Report>(
@@ -132,44 +124,33 @@ afterEach(() => {
     Onyx.clear();
 });
 
-function ChatFinderPageWrapper(args: any) {
+const mockOnClose = jest.fn();
+
+function SearchRouterWrapper() {
     return (
         <ComposeProviders components={[OnyxProvider, LocaleContextProvider, KeyboardStateProvider]}>
             <OptionListContextProvider>
-                <View />
-                {/* <ChatFinderPage */}
-                {/*    // eslint-disable-next-line react/jsx-props-no-spreading */}
-                {/*    {...args} */}
-                {/*    navigation={args.navigation} */}
-                {/* /> */}
+                <SearchRouter onRouterClose={mockOnClose} />
             </OptionListContextProvider>
         </ComposeProviders>
     );
 }
 
-function ChatFinderPageWithCachedOptions(args: any) {
+function SearchRouterWrapperWithCachedOptions() {
     return (
         <ComposeProviders components={[OnyxProvider, LocaleContextProvider]}>
             <OptionsListContext.Provider value={useMemo(() => ({options: mockedOptions, initializeOptions: () => {}, areOptionsInitialized: true}), [])}>
-                {/* <ChatFinderPage */}
-                {/*    // eslint-disable-next-line react/jsx-props-no-spreading */}
-                {/*    {...args} */}
-                {/*    navigation={args.navigation} */}
-                {/* /> */}
+                <SearchRouter onRouterClose={mockOnClose} />
             </OptionsListContext.Provider>
         </ComposeProviders>
     );
 }
 
-test('[ChatFinderPage] should render list with cached options', async () => {
-    const {addListener} = createAddListenerMock();
-
+test('[SearchRouter] should render chat list with cached options', async () => {
     const scenario = async () => {
-        await screen.findByTestId('ChatFinderPage'); // Todo [Search] fix testID no longer existing
+        await screen.findByTestId('SearchRouter');
     };
 
-    // const navigation = {addListener} as unknown as StackNavigationProp<RootStackParamList, 'ChatFinder', undefined>;
-
     return waitForBatchedUpdates()
         .then(() =>
             Onyx.multiSet({
@@ -179,23 +160,19 @@ test('[ChatFinderPage] should render list with cached options', async () => {
                 [ONYXKEYS.IS_SEARCHING_FOR_REPORTS]: true,
             }),
         )
-        .then(() => measureRenders(<ChatFinderPageWithCachedOptions route={{key: 'ChatFinder_Root', name: 'ChatFinder'}} />, {scenario}));
+        .then(() => measureRenders(<SearchRouterWrapperWithCachedOptions />, {scenario}));
 });
 
-test('[ChatFinderPage] should interact when text input changes', async () => {
-    const {addListener} = createAddListenerMock();
-
+test('[SearchRouter] should react to text input changes', async () => {
     const scenario = async () => {
-        await screen.findByTestId('ChatFinderPage');
+        await screen.findByTestId('SearchRouter');
 
-        const input = screen.getByTestId('selection-list-text-input');
+        const input = screen.getByTestId('search-router-text-input');
         fireEvent.changeText(input, 'Email Four');
         fireEvent.changeText(input, 'Report');
         fireEvent.changeText(input, 'Email Five');
     };
 
-    // const navigation = {addListener} as unknown as StackNavigationProp<RootStackParamList, 'ChatFinder', undefined>;
-
     return waitForBatchedUpdates()
         .then(() =>
             Onyx.multiSet({
@@ -205,13 +182,5 @@ test('[ChatFinderPage] should interact when text input changes', async () => {
                 [ONYXKEYS.IS_SEARCHING_FOR_REPORTS]: true,
             }),
         )
-        .then(() =>
-            measureRenders(
-                <ChatFinderPageWrapper
-                    route={{key: 'ChatFinder_Root', name: 'ChatFinder'}}
-                    // navigation={navigation}
-                />,
-                {scenario},
-            ),
-        );
+        .then(() => measureRenders(<SearchRouterWrapper />, {scenario}));
 });