diff --git a/package-lock.json b/package-lock.json
index 0f6e04be..a0073943 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2470,9 +2470,9 @@
"link": true
},
"node_modules/@edx/frontend-platform": {
- "version": "4.6.0",
- "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-4.6.0.tgz",
- "integrity": "sha512-NZ1I3BgUZl7bqvDwSnnL+LxqZOdOUGZU55KiwvknqiKU8RS5Lx9tc4arp+NcX1u58xy/Xbinv+mriSO6PPxQNQ==",
+ "version": "5.0.0",
+ "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-5.0.0.tgz",
+ "integrity": "sha512-DD9/B4rnC3BKPiWlbEFF1JIYFbWC6vUBKTyN8sf4khi4DNhhWhsobk+iNeCWNzF9UgCPRbniIqesdV1F9NXNZw==",
"dev": true,
"dependencies": {
"@cospired/i18n-iso-languages": "4.1.0",
@@ -2500,13 +2500,13 @@
"transifex-utils.js": "i18n/scripts/transifex-utils.js"
},
"peerDependencies": {
- "@edx/frontend-build": ">= 8.1.0",
+ "@edx/frontend-build": ">= 8.1.0 || ^12.9.0-alpha.1",
"@edx/paragon": ">= 10.0.0 < 21.0.0",
"prop-types": "^15.7.2",
"react": "^16.9.0 || ^17.0.0",
"react-dom": "^16.9.0 || ^17.0.0",
"react-redux": "^7.1.1",
- "react-router-dom": "^5.0.1",
+ "react-router-dom": "^6.0.0",
"redux": "^4.0.4"
}
},
@@ -5445,6 +5445,15 @@
"url": "https://opencollective.com/popperjs"
}
},
+ "node_modules/@remix-run/router": {
+ "version": "1.7.2",
+ "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.7.2.tgz",
+ "integrity": "sha512-7Lcn7IqGMV+vizMPoEl5F0XDshcdDYtMI6uJLQdQz5CfZAwy3vvGKYSUk789qndt5dEC4HfSjviSYlSoHGL2+A==",
+ "dev": true,
+ "engines": {
+ "node": ">=14"
+ }
+ },
"node_modules/@restart/context": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
@@ -18160,21 +18169,6 @@
"node": ">=4"
}
},
- "node_modules/mini-create-react-context": {
- "version": "0.4.1",
- "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
- "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
- "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
- "dev": true,
- "dependencies": {
- "@babel/runtime": "^7.12.1",
- "tiny-warning": "^1.0.3"
- },
- "peerDependencies": {
- "prop-types": "^15.0.0",
- "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
- }
- },
"node_modules/mini-css-extract-plugin": {
"version": "1.6.2",
"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.6.2.tgz",
@@ -20525,21 +20519,6 @@
"node": "14 || >=16.14"
}
},
- "node_modules/path-to-regexp": {
- "version": "1.8.0",
- "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
- "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
- "dev": true,
- "dependencies": {
- "isarray": "0.0.1"
- }
- },
- "node_modules/path-to-regexp/node_modules/isarray": {
- "version": "0.0.1",
- "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
- "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==",
- "dev": true
- },
"node_modules/path-type": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -22267,50 +22246,37 @@
}
},
"node_modules/react-router": {
- "version": "5.2.0",
- "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
- "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==",
+ "version": "6.14.2",
+ "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.14.2.tgz",
+ "integrity": "sha512-09Zss2dE2z+T1D03IheqAFtK4UzQyX8nFPWx6jkwdYzGLXd5ie06A6ezS2fO6zJfEb/SpG6UocN2O1hfD+2urQ==",
"dev": true,
"dependencies": {
- "@babel/runtime": "^7.1.2",
- "history": "^4.9.0",
- "hoist-non-react-statics": "^3.1.0",
- "loose-envify": "^1.3.1",
- "mini-create-react-context": "^0.4.0",
- "path-to-regexp": "^1.7.0",
- "prop-types": "^15.6.2",
- "react-is": "^16.6.0",
- "tiny-invariant": "^1.0.2",
- "tiny-warning": "^1.0.0"
+ "@remix-run/router": "1.7.2"
+ },
+ "engines": {
+ "node": ">=14"
},
"peerDependencies": {
- "react": ">=15"
+ "react": ">=16.8"
}
},
"node_modules/react-router-dom": {
- "version": "5.2.0",
- "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
- "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
+ "version": "6.14.2",
+ "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.14.2.tgz",
+ "integrity": "sha512-5pWX0jdKR48XFZBuJqHosX3AAHjRAzygouMTyimnBPOLdY3WjzUSKhus2FVMihUFWzeLebDgr4r8UeQFAct7Bg==",
"dev": true,
"dependencies": {
- "@babel/runtime": "^7.1.2",
- "history": "^4.9.0",
- "loose-envify": "^1.3.1",
- "prop-types": "^15.6.2",
- "react-router": "5.2.0",
- "tiny-invariant": "^1.0.2",
- "tiny-warning": "^1.0.0"
+ "@remix-run/router": "1.7.2",
+ "react-router": "6.14.2"
+ },
+ "engines": {
+ "node": ">=14"
},
"peerDependencies": {
- "react": ">=15"
+ "react": ">=16.8",
+ "react-dom": ">=16.8"
}
},
- "node_modules/react-router/node_modules/react-is": {
- "version": "16.13.1",
- "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
- "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
- "dev": true
- },
"node_modules/react-shallow-renderer": {
"version": "16.15.0",
"resolved": "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz",
@@ -27263,7 +27229,7 @@
"devDependencies": {
"@edx/browserslist-config": "1.1.0",
"@edx/frontend-build": "12.7.0",
- "@edx/frontend-platform": "4.6.0",
+ "@edx/frontend-platform": "5.0.0",
"@edx/paragon": "20.45.0",
"@testing-library/jest-dom": "5.11.6",
"@testing-library/react": "12.1.4",
@@ -27272,16 +27238,16 @@
"react": "17.0.2",
"react-dom": "17.0.2",
"react-instantsearch-dom": "6.8.3",
- "react-router-dom": "5.2.0",
+ "react-router-dom": "6.14.2",
"react-test-renderer": "17.0.2"
},
"peerDependencies": {
- "@edx/frontend-platform": "^4.0.1",
+ "@edx/frontend-platform": "5.0.0",
"@edx/paragon": "^19.15.0 || ^20.0.0",
"react": "^16.12.0 || ^17.0.0",
"react-dom": "^16.12.0 || ^17.0.0",
"react-instantsearch-dom": "^6.8.3",
- "react-router-dom": "^5.2.0"
+ "react-router-dom": "^6.0.0"
}
},
"packages/hotjar": {
@@ -27293,12 +27259,12 @@
"@edx/frontend-build": "12.7.0",
"react": "17.0.2",
"react-dom": "17.0.2",
- "react-router-dom": "5.2.0"
+ "react-router-dom": "6.14.2"
},
"peerDependencies": {
"react": "^16.12.0 || ^17.0.0",
"react-dom": "^16.12.0 || ^17.0.0",
- "react-router-dom": "^5.2.0"
+ "react-router-dom": "6.14.2"
}
},
"packages/logistration": {
@@ -27312,19 +27278,19 @@
"devDependencies": {
"@edx/browserslist-config": "1.1.0",
"@edx/frontend-build": "12.7.0",
- "@edx/frontend-platform": "4.6.0",
+ "@edx/frontend-platform": "5.0.0",
"@testing-library/jest-dom": "5.11.6",
"@testing-library/react": "12.1.4",
"react": "17.0.2",
"react-dom": "17.0.2",
- "react-router-dom": "5.2.0",
+ "react-router-dom": "6.14.2",
"react-test-renderer": "17.0.2"
},
"peerDependencies": {
- "@edx/frontend-platform": "^4.0.1",
+ "@edx/frontend-platform": "5.0.0",
"react": "^16.12.0 || ^17.0.0",
"react-dom": "^16.12.0 || ^17.0.0",
- "react-router-dom": "^5.2.0"
+ "react-router-dom": "6.14.2"
}
},
"packages/utils": {
@@ -27338,17 +27304,17 @@
"devDependencies": {
"@edx/browserslist-config": "1.1.0",
"@edx/frontend-build": "12.7.0",
- "@edx/frontend-platform": "4.6.0",
+ "@edx/frontend-platform": "5.0.0",
"react": "17.0.2",
"react-dom": "17.0.2",
- "react-router-dom": "5.2.0",
+ "react-router-dom": "6.14.2",
"react-test-renderer": "17.0.2"
},
"peerDependencies": {
- "@edx/frontend-platform": "^4.0.1",
+ "@edx/frontend-platform": "5.0.0",
"react": "^16.12.0 || ^17.0.0",
"react-dom": "^16.12.0 || ^17.0.0",
- "react-router-dom": "^5.2.0"
+ "react-router-dom": "6.14.2"
}
}
}
diff --git a/packages/catalog-search/package.json b/packages/catalog-search/package.json
index 2013036f..1da9c253 100644
--- a/packages/catalog-search/package.json
+++ b/packages/catalog-search/package.json
@@ -45,7 +45,7 @@
"devDependencies": {
"@edx/browserslist-config": "1.1.0",
"@edx/frontend-build": "12.7.0",
- "@edx/frontend-platform": "4.6.0",
+ "@edx/frontend-platform": "5.0.0",
"@edx/paragon": "20.45.0",
"@testing-library/jest-dom": "5.11.6",
"@testing-library/react": "12.1.4",
@@ -54,15 +54,15 @@
"react": "17.0.2",
"react-dom": "17.0.2",
"react-instantsearch-dom": "6.8.3",
- "react-router-dom": "5.2.0",
+ "react-router-dom": "6.14.2",
"react-test-renderer": "17.0.2"
},
"peerDependencies": {
- "@edx/frontend-platform": "^4.0.1",
+ "@edx/frontend-platform": "^5.0.0",
"@edx/paragon": "^19.15.0 || ^20.0.0",
"react": "^16.12.0 || ^17.0.0",
"react-dom": "^16.12.0 || ^17.0.0",
"react-instantsearch-dom": "^6.8.3",
- "react-router-dom": "^5.2.0"
+ "react-router-dom": "^6.0.0"
}
}
diff --git a/packages/catalog-search/src/SearchContext.jsx b/packages/catalog-search/src/SearchContext.jsx
index 61bcd326..5779efc9 100644
--- a/packages/catalog-search/src/SearchContext.jsx
+++ b/packages/catalog-search/src/SearchContext.jsx
@@ -3,7 +3,7 @@ import React, {
createContext, useReducer, useMemo, useEffect,
} from 'react';
import PropTypes from 'prop-types';
-import { useLocation, useHistory } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
import { useIsFirstRender } from '@edx/frontend-enterprise-utils';
import {
@@ -43,8 +43,8 @@ const SearchData = ({ children, searchFacetFilters, trackingName }) => {
{},
);
- const { search } = useLocation();
- const history = useHistory();
+ const { pathname, search } = useLocation();
+ const navigate = useNavigate();
/**
* Applies initial URL query params on page load to the refinements
@@ -70,7 +70,7 @@ const SearchData = ({ children, searchFacetFilters, trackingName }) => {
useEffect(() => {
if (!isFirstRender) {
const newQueryString = stringifyRefinements(refinements);
- history.push({ search: newQueryString });
+ navigate({ pathname, search: newQueryString });
}
}, [JSON.stringify(refinements)]);
diff --git a/packages/catalog-search/src/SearchSuggestionItem.jsx b/packages/catalog-search/src/SearchSuggestionItem.jsx
index 367c592b..5b19ca1a 100644
--- a/packages/catalog-search/src/SearchSuggestionItem.jsx
+++ b/packages/catalog-search/src/SearchSuggestionItem.jsx
@@ -14,6 +14,7 @@ const SearchSuggestionItem = ({
suggestionItemHandler(hit);
}
};
+
return (
diff --git a/packages/catalog-search/src/tests/CurrentRefinements.test.jsx b/packages/catalog-search/src/tests/CurrentRefinements.test.jsx
index e8b29b4d..9d7e7573 100644
--- a/packages/catalog-search/src/tests/CurrentRefinements.test.jsx
+++ b/packages/catalog-search/src/tests/CurrentRefinements.test.jsx
@@ -12,6 +12,17 @@ import {
} from '../data/tests/constants';
import SearchData from '../SearchContext';
+const mockedNavigator = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useNavigate: () => mockedNavigator,
+ useLocation: () => ({
+ pathname: '/',
+ search: 'subjects=Computer Science&subjects=Communication',
+ }),
+}));
+
describe('', () => {
const items = [
{
@@ -60,19 +71,19 @@ describe('', () => {
});
test('supports removing an active refinement from the url by clicking on it', async () => {
- const { history } = renderWithRouter(
+ renderWithRouter(
,
- {
- route: `/?subjects=${SUBJECTS.COMPUTER_SCIENCE}&subjects=${SUBJECTS.COMMUNICATION}`,
- },
);
// click a specific refinement to remove it
fireEvent.click(screen.queryByText(SUBJECTS.COMMUNICATION));
// assert the clicked refinement in the url is removed but others stay put
- expect(history.location.search).toEqual('?subjects=Computer%20Science');
+ expect(mockedNavigator.mock.calls[mockedNavigator.mock.calls.length - 1][0]).toStrictEqual({
+ pathname: '/',
+ search: 'subjects=Computer%20Science',
+ });
});
});
diff --git a/packages/catalog-search/src/tests/FacetListBase.test.jsx b/packages/catalog-search/src/tests/FacetListBase.test.jsx
index 53fe1de5..a02ad95a 100644
--- a/packages/catalog-search/src/tests/FacetListBase.test.jsx
+++ b/packages/catalog-search/src/tests/FacetListBase.test.jsx
@@ -1,4 +1,5 @@
import React from 'react';
+import { useLocation } from 'react-router-dom';
import { renderWithRouter } from '@edx/frontend-enterprise-utils';
import { act, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
@@ -9,6 +10,14 @@ import { FACET_ATTRIBUTES, SUBJECTS } from '../data/tests/constants';
import { NO_OPTIONS_FOUND, SHOW_ALL_NAME } from '../data/constants';
import SearchData from '../SearchContext';
+const mockedNavigator = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useLocation: jest.fn(),
+ useNavigate: () => mockedNavigator,
+}));
+
const propsForNoItems = {
items: [],
title: FREE_ALL_TITLE,
@@ -53,6 +62,11 @@ const searchableDropdownProps = {
};
describe('', () => {
+ beforeEach(() => {
+ useLocation.mockReturnValue({ pathname: '/' });
+ jest.clearAllMocks();
+ });
+
test('renders with no options', async () => {
renderWithRouter();
@@ -101,7 +115,7 @@ describe('', () => {
});
test('supports clicking on a refinement', async () => {
- const { history } = renderWithRouter(
+ renderWithRouter(
', () => {
fireEvent.click(screen.queryByText(NOT_FREE_LABEL));
});
- expect(history.location.search).toEqual('?showAll=1');
+ expect(mockedNavigator).toHaveBeenCalledWith({ pathname: '/', search: 'showAll=1' });
});
test('clears pagination when clicking on a refinement', async () => {
- const { history } = renderWithRouter(
+ const mockedLocation = {
+ pathname: '/',
+ search: '?subjects=Communication&page=3',
+ };
+ useLocation.mockReturnValue(mockedLocation);
+
+ renderWithRouter(
,
- { route: '/search?subjects=Communication&page=3' },
);
// assert the refinements appear
@@ -142,7 +161,7 @@ describe('', () => {
});
// assert page was deleted and subjects were not
- expect(history.location.search).toEqual('?subjects=Communication&showAll=1');
+ expect(mockedNavigator).toHaveBeenCalledWith({ pathname: '/', search: 'subjects=Communication&showAll=1' });
});
test('renders a typeahead dropdown', async () => {
diff --git a/packages/catalog-search/src/tests/FacetListRefinement.test.jsx b/packages/catalog-search/src/tests/FacetListRefinement.test.jsx
index 392bc41a..a2b47f63 100644
--- a/packages/catalog-search/src/tests/FacetListRefinement.test.jsx
+++ b/packages/catalog-search/src/tests/FacetListRefinement.test.jsx
@@ -9,6 +9,16 @@ import SearchData from '../SearchContext';
import { FACET_ATTRIBUTES, SUBJECTS } from '../data/tests/constants';
import { NO_OPTIONS_FOUND } from '../data/constants';
+const mockedNavigator = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useNavigate: () => mockedNavigator,
+ useLocation: () => ({
+ pathname: '/',
+ }),
+}));
+
const propsForNoRefinements = {
items: [],
attribute: FACET_ATTRIBUTES.SUBJECTS,
@@ -52,6 +62,10 @@ const propsForActiveRefinements = {
};
describe('', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
test('renders with no options', async () => {
renderWithRouter();
@@ -102,7 +116,7 @@ describe('', () => {
});
test('supports clicking on a refinement', async () => {
- const { history } = renderWithRouter();
+ renderWithRouter();
// assert the refinements appear
await act(async () => {
@@ -116,18 +130,17 @@ describe('', () => {
});
// assert the clicked refinement was added to the url
- expect(history.location.search).toEqual('?subjects=Communication');
+ expect(mockedNavigator).toHaveBeenCalledWith({ pathname: '/', search: 'subjects=Communication' });
});
test('clears pagination when clicking on a refinement', async () => {
- const { history } = renderWithRouter(
+ renderWithRouter(
,
- { route: '/search?page=3' },
);
// assert the refinements appear
@@ -140,6 +153,6 @@ describe('', () => {
});
// assert page was deleted and subjects were not
- expect(history.location.search).toEqual('?subjects=Communication');
+ expect(mockedNavigator).toHaveBeenCalledWith({ pathname: '/', search: 'subjects=Communication' });
});
});
diff --git a/packages/catalog-search/src/tests/LearningTypeRadioFacet.test.jsx b/packages/catalog-search/src/tests/LearningTypeRadioFacet.test.jsx
index 6a6782b9..f0838add 100644
--- a/packages/catalog-search/src/tests/LearningTypeRadioFacet.test.jsx
+++ b/packages/catalog-search/src/tests/LearningTypeRadioFacet.test.jsx
@@ -9,6 +9,13 @@ import LearningTypeRadioFacet from '../LearningTypeRadioFacet';
import { features } from '../config';
import { renderWithSearchContext } from './utils';
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useLocation: () => ({
+ pathname: '/',
+ }),
+}));
+
describe('', () => {
beforeEach(() => {
features.ENABlE_PATHWAYS = true;
diff --git a/packages/catalog-search/src/tests/SearchBox.test.jsx b/packages/catalog-search/src/tests/SearchBox.test.jsx
index ad0bc119..4d1d1263 100644
--- a/packages/catalog-search/src/tests/SearchBox.test.jsx
+++ b/packages/catalog-search/src/tests/SearchBox.test.jsx
@@ -18,6 +18,16 @@ import {
jest.mock('@edx/frontend-platform/analytics');
+const mockedNavigator = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useNavigate: () => mockedNavigator,
+ useLocation: () => ({
+ pathname: '/',
+ }),
+}));
+
const TEST_QUERY = 'test query';
const HEADER_TITLE = 'Search Courses and Programs';
@@ -90,15 +100,14 @@ describe('', () => {
);
});
test('handles submit and clear', async () => {
- const { history } = renderWithSearchContext();
+ renderWithSearchContext();
// fill in search input and submit the search
userEvent.type(screen.getByRole('searchbox'), TEST_QUERY);
userEvent.type(screen.getByRole('searchbox'), '{enter}');
// assert url is updated with the query
- await waitFor(() => expect(history).toHaveLength(2));
- expect(history.location.search).toEqual('?q=test%20query');
+ expect(mockedNavigator).toHaveBeenCalledWith({ pathname: '/', search: 'q=test%20query' });
// check tracking is not invoked due to absent trackingName in context
expect(sendTrackEvent).not.toHaveBeenCalled();
@@ -106,8 +115,7 @@ describe('', () => {
userEvent.click(screen.getByText('clear search'));
// assert query no longer exists in url
- await waitFor(() => expect(history).toHaveLength(3));
- expect(history.location.search).toEqual('');
+ await waitFor(() => expect(mockedNavigator).toHaveBeenCalledWith({ pathname: '/', search: '' }));
});
test('tracking event when search initiated with trackingName present in context', () => {
renderWithSearchContextAndTracking(, 'aProduct');
diff --git a/packages/catalog-search/src/tests/SearchPagination.test.jsx b/packages/catalog-search/src/tests/SearchPagination.test.jsx
index bfe89066..2e023855 100644
--- a/packages/catalog-search/src/tests/SearchPagination.test.jsx
+++ b/packages/catalog-search/src/tests/SearchPagination.test.jsx
@@ -1,4 +1,5 @@
import React from 'react';
+import { useLocation } from 'react-router-dom';
import { renderWithRouter } from '@edx/frontend-enterprise-utils';
import { screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
@@ -6,44 +7,67 @@ import '@testing-library/jest-dom/extend-expect';
import { SearchPaginationBase } from '../SearchPagination';
import SearchData from '../SearchContext';
+const mockedNavigator = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useNavigate: () => mockedNavigator,
+ useLocation: jest.fn(),
+}));
+
describe('', () => {
+ beforeEach(() => {
+ useLocation.mockReturnValue({ pathname: '/' });
+ jest.clearAllMocks();
+ });
+
test('updates url when navigating right', () => {
- const { history } = renderWithRouter();
+ renderWithRouter();
// assert no initial page query parameter
- expect(history.location.search).toEqual('');
+ expect(window.location.search).toEqual('');
// click on next button and assert page query parameter exists and is accurate
fireEvent.click(screen.queryByText('Navigate Right'));
- expect(history.location.search).toEqual('?page=2');
+ expect(mockedNavigator).toHaveBeenCalledWith({ pathname: '/', search: 'page=2' });
});
test('deletes page query when navigating to the first page', () => {
- const { history } = renderWithRouter(
+ const mockedLocation = {
+ pathname: '/',
+ search: '?page=2',
+ };
+ useLocation.mockReturnValue(mockedLocation);
+
+ renderWithRouter(
,
- { route: 'search/?page=2' },
);
// assert SearchData does not modify the page
- expect(history.location.search).toEqual('?page=2');
+ expect(mockedNavigator.mock.calls[0][0]).toEqual({ pathname: '/', search: 'page=2' });
// click on prev button and assert page disappears
fireEvent.click(screen.queryByText('Navigate Left'));
- expect(history.location.search).toEqual('');
+ expect(mockedNavigator.mock.calls[1][0]).toEqual({ pathname: '/', search: '' });
});
test('updates page query when navigating left to a previous page', () => {
- const { history } = renderWithRouter((
+ const mockedLocation = {
+ pathname: '/',
+ search: '?page=3',
+ };
+ useLocation.mockReturnValue(mockedLocation);
+
+ renderWithRouter(
- ), {
- route: 'search/?page=3',
- });
+ ,
+ );
// assert SearchData adds showAll
- expect(history.location.search).toEqual('?page=3');
+ expect(mockedNavigator.mock.calls[0][0]).toEqual({ pathname: '/', search: 'page=3' });
// click on prev button and assert page disappears
fireEvent.click(screen.queryByText('Navigate Left'));
- expect(history.location.search).toEqual('?page=2');
+ expect(mockedNavigator.mock.calls[1][0]).toEqual({ pathname: '/', search: 'page=2' });
});
});
diff --git a/packages/catalog-search/src/tests/SearchSuggestionItem.test.jsx b/packages/catalog-search/src/tests/SearchSuggestionItem.test.jsx
index dcbd86a2..2e45f796 100644
--- a/packages/catalog-search/src/tests/SearchSuggestionItem.test.jsx
+++ b/packages/catalog-search/src/tests/SearchSuggestionItem.test.jsx
@@ -77,14 +77,14 @@ describe('', () => {
},
};
- const { container, history } = renderWithRouter();
userEvent.click(container.getElementsByClassName('suggestion-item')[0]);
- expect(history.location.pathname).toBe(mockData.program.url);
+ expect(window.location.pathname).toBe(mockData.program.url);
});
test('fires callback on click if disableSuggestionRedirect is true', () => {
diff --git a/packages/catalog-search/src/tests/SearchSuggestions.test.jsx b/packages/catalog-search/src/tests/SearchSuggestions.test.jsx
index 002bf47a..1d322c1c 100644
--- a/packages/catalog-search/src/tests/SearchSuggestions.test.jsx
+++ b/packages/catalog-search/src/tests/SearchSuggestions.test.jsx
@@ -100,23 +100,24 @@ describe('', () => {
});
test('redirects to correct page on course click', () => {
- const { container, history } = renderWithRouter();
+
userEvent.click(container.getElementsByClassName('suggestion-item')[0]);
- expect(history.location.pathname).toBe('/test-enterprise/course/edX+courseX');
+ expect(window.location.pathname).toBe('/test-enterprise/course/edX+courseX');
});
test('redirects to correct page on program click', () => {
- const { container, history } = renderWithRouter();
userEvent.click(container.getElementsByClassName('suggestion-item')[1]);
- expect(history.location.pathname).toBe('/test-enterprise/program/456');
+ expect(window.location.pathname).toBe('/test-enterprise/program/456');
});
test('properly handles exec ed content', () => {
const { container } = renderWithRouter(