diff --git a/src/libs/Navigation/Navigation.ts b/src/libs/Navigation/Navigation.ts index ea3585a24ff9c..85b625903bc48 100644 --- a/src/libs/Navigation/Navigation.ts +++ b/src/libs/Navigation/Navigation.ts @@ -160,6 +160,15 @@ function getReportRHPActiveRoute(): string { return ''; } +/** + * Cleans the route path by removing redundant slashes and query parameters. + * @param routePath The route path to clean. + * @returns The cleaned route path. + */ +function cleanRoutePath(routePath: string): string { + return routePath.replace(CONST.REGEX.ROUTES.REDUNDANT_SLASHES, (match, p1) => (p1 ? '/' : '')).replace(/\?.*/, ''); +} + /** * Check whether the passed route is currently Active or not. * @@ -170,11 +179,11 @@ function getReportRHPActiveRoute(): string { * @return is active */ function isActiveRoute(routePath: Route): boolean { - let activeRoute = getActiveRoute(); + let activeRoute = getActiveRouteWithoutParams(); activeRoute = activeRoute.startsWith('/') ? activeRoute.substring(1) : activeRoute; // We remove redundant (consecutive and trailing) slashes from path before matching - return activeRoute === routePath.replace(CONST.REGEX.ROUTES.REDUNDANT_SLASHES, (match, p1) => (p1 ? '/' : '')); + return cleanRoutePath(activeRoute) === cleanRoutePath(routePath); } /** diff --git a/tests/navigation/isActiveRouteTests.tsx b/tests/navigation/isActiveRouteTests.tsx new file mode 100644 index 0000000000000..ab123c659cb39 --- /dev/null +++ b/tests/navigation/isActiveRouteTests.tsx @@ -0,0 +1,75 @@ +import {describe, expect, test} from '@jest/globals'; +import {render} from '@testing-library/react-native'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; +import getIsNarrowLayout from '@libs/getIsNarrowLayout'; +import CONST from '@src/CONST'; +import Navigation from '@src/libs/Navigation/Navigation'; +import NAVIGATORS from '@src/NAVIGATORS'; +import type {Route} from '@src/ROUTES'; +import SCREENS from '@src/SCREENS'; +import TestNavigationContainer from '../utils/TestNavigationContainer'; + +jest.mock('@hooks/useResponsiveLayout', () => jest.fn()); +jest.mock('@libs/getIsNarrowLayout', () => jest.fn()); + +// Mock Fullstory library dependency +jest.mock('@libs/Fullstory', () => ({ + default: { + consentAndIdentify: jest.fn(), + }, + parseFSAttributes: jest.fn(), +})); + +jest.mock('@pages/home/sidebar/NavigationTabBarAvatar'); +jest.mock('@src/components/Navigation/TopLevelNavigationTabBar'); + +const mockedGetIsNarrowLayout = getIsNarrowLayout as jest.MockedFunction; +const mockedUseResponsiveLayout = useResponsiveLayout as jest.MockedFunction; + +describe('Navigation', () => { + beforeEach(() => { + mockedGetIsNarrowLayout.mockReturnValue(true); + mockedUseResponsiveLayout.mockReturnValue({...CONST.NAVIGATION_TESTS.DEFAULT_USE_RESPONSIVE_LAYOUT_VALUE, shouldUseNarrowLayout: true}); + }); + // given current active route is "/settings/profile?backTo=settings%2profile" + test.each([ + ['settings/profile' as Route, true], + ['settings/profile/' as Route, true], + ['settings/profile?param=1' as Route, true], + ['settings/profile/display-name' as Route, false], + ['settings/profile/display-name/' as Route, false], + ['settings/preferences' as Route, false], + ['report' as Route, false], + ['report/123/' as Route, false], + ['report/123' as Route, false], + ])('isActiveRoute("%s") should return %s', (routeToCheck, expectedResult) => { + render( + , + ); + const result = Navigation.isActiveRoute(routeToCheck); + expect(result).toBe(expectedResult); + }); +});