Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 11 additions & 2 deletions src/libs/Navigation/Navigation.ts
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
];

let account: OnyxEntry<Account>;
Onyx.connect({

Check warning on line 47 in src/libs/Navigation/Navigation.ts

View workflow job for this annotation

GitHub Actions / Changed files ESLint check

Onyx.connect() is deprecated. Use useOnyx() hook instead and pass the data as parameters to a pure function
key: ONYXKEYS.ACCOUNT,
callback: (value) => {
account = value;
Expand Down Expand Up @@ -160,6 +160,15 @@
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.
*
Expand All @@ -170,11 +179,11 @@
* @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);
}

/**
Expand Down
75 changes: 75 additions & 0 deletions tests/navigation/isActiveRouteTests.tsx
Original file line number Diff line number Diff line change
@@ -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);
});
});
Loading