diff --git a/tests/ui/ResizeScreenTests.tsx b/tests/ui/ResizeScreenTests.tsx new file mode 100644 index 000000000000..5bd86ad152b2 --- /dev/null +++ b/tests/ui/ResizeScreenTests.tsx @@ -0,0 +1,95 @@ +import {NavigationContainer} from '@react-navigation/native'; +import {render, renderHook} from '@testing-library/react-native'; +import React from 'react'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; +import type ResponsiveLayoutResult from '@hooks/useResponsiveLayout/types'; +import getIsNarrowLayout from '@libs/getIsNarrowLayout'; +import createResponsiveStackNavigator from '@libs/Navigation/AppNavigator/createResponsiveStackNavigator'; +import BottomTabNavigator from '@libs/Navigation/AppNavigator/Navigators/BottomTabNavigator'; +import useNavigationResetRootOnLayoutChange from '@libs/Navigation/AppNavigator/useNavigationResetRootOnLayoutChange'; +import navigationRef from '@libs/Navigation/navigationRef'; +import type {AuthScreensParamList} from '@libs/Navigation/types'; +import ProfilePage from '@pages/settings/Profile/ProfilePage'; +import NAVIGATORS from '@src/NAVIGATORS'; +import SCREENS from '@src/SCREENS'; + +const RootStack = createResponsiveStackNavigator(); + +jest.mock('@hooks/useResponsiveLayout', () => jest.fn()); +jest.mock('@libs/getIsNarrowLayout', () => jest.fn()); + +jest.mock('@pages/settings/InitialSettingsPage'); +jest.mock('@pages/settings/Profile/ProfilePage'); +jest.mock('@libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar'); + +const DEFAULT_USE_RESPONSIVE_LAYOUT_VALUE: ResponsiveLayoutResult = { + shouldUseNarrowLayout: true, + isSmallScreenWidth: true, + isInNarrowPaneModal: false, + isExtraSmallScreenHeight: false, + isMediumScreenWidth: false, + isLargeScreenWidth: false, + isExtraSmallScreenWidth: false, + isSmallScreen: false, + onboardingIsMediumOrLargerScreenWidth: false, +}; + +const INITIAL_STATE = { + routes: [ + { + name: NAVIGATORS.BOTTOM_TAB_NAVIGATOR, + state: { + index: 1, + routes: [{name: SCREENS.HOME}, {name: SCREENS.SETTINGS.ROOT}], + }, + }, + ], +}; + +const mockedGetIsNarrowLayout = getIsNarrowLayout as jest.MockedFunction; +const mockedUseResponsiveLayout = useResponsiveLayout as jest.MockedFunction; + +describe('Resize screen', () => { + it('Should display the settings profile after resizing the screen with the settings page opened to the wide layout', () => { + // Given the initialized navigation on the narrow layout with the settings screen + mockedGetIsNarrowLayout.mockReturnValue(true); + mockedUseResponsiveLayout.mockReturnValue({...DEFAULT_USE_RESPONSIVE_LAYOUT_VALUE, shouldUseNarrowLayout: true}); + + const {rerender} = renderHook(() => useNavigationResetRootOnLayoutChange()); + + render( + + + + + + + , + ); + + const rootStateBeforeResize = navigationRef.current?.getRootState(); + + expect(rootStateBeforeResize?.routes.at(0)?.name).toBe(NAVIGATORS.BOTTOM_TAB_NAVIGATOR); + expect(rootStateBeforeResize?.routes.at(1)).toBeUndefined(); + + // When resizing the screen to the wide layout + mockedGetIsNarrowLayout.mockReturnValue(false); + mockedUseResponsiveLayout.mockReturnValue({...DEFAULT_USE_RESPONSIVE_LAYOUT_VALUE, shouldUseNarrowLayout: false}); + rerender({}); + + const rootStateAfterResize = navigationRef.current?.getRootState(); + + // Then the settings profile page should be displayed on the screen + expect(rootStateAfterResize?.routes.at(0)?.name).toBe(NAVIGATORS.BOTTOM_TAB_NAVIGATOR); + expect(rootStateAfterResize?.routes.at(1)?.name).toBe(SCREENS.SETTINGS.PROFILE.ROOT); + }); +});