Merge pull request Expensify#65340 from daledah/fix/64320

fix: correct isActiveRoute

Author: aldo-expensify

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);
 }
 
 /**

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<typeof getIsNarrowLayout>;
+const mockedUseResponsiveLayout = useResponsiveLayout as jest.MockedFunction<typeof useResponsiveLayout>;
+
+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(
+            <TestNavigationContainer
+                initialState={{
+                    index: 0,
+                    routes: [
+                        {
+                            name: NAVIGATORS.SETTINGS_SPLIT_NAVIGATOR,
+                            state: {
+                                index: 1,
+                                routes: [
+                                    {
+                                        name: SCREENS.SETTINGS.ROOT,
+                                    },
+                                    {
+                                        name: SCREENS.SETTINGS.PROFILE.ROOT,
+                                        params: {
+                                            backTo: 'settings/profile',
+                                        },
+                                    },
+                                ],
+                            },
+                        },
+                    ],
+                }}
+            />,
+        );
+        const result = Navigation.isActiveRoute(routeToCheck);
+        expect(result).toBe(expectedResult);
+    });
+});