diff --git a/packages/catalog-search/src/SearchSuggestionItem.jsx b/packages/catalog-search/src/SearchSuggestionItem.jsx index 367c592b3..2ed4fff47 100644 --- a/packages/catalog-search/src/SearchSuggestionItem.jsx +++ b/packages/catalog-search/src/SearchSuggestionItem.jsx @@ -14,8 +14,9 @@ const SearchSuggestionItem = ({ suggestionItemHandler(hit); } }; + console.warn(url); return ( - +
{ /* eslint-disable-next-line react/no-danger, no-underscore-dangle */ }
diff --git a/packages/catalog-search/src/tests/CurrentRefinements.test.jsx b/packages/catalog-search/src/tests/CurrentRefinements.test.jsx index e8b29b4db..35751a659 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,18 @@ 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][1]).toStrictEqual({ + 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 53fe1de52..64ee7bbf2 100644 --- a/packages/catalog-search/src/tests/FacetListBase.test.jsx +++ b/packages/catalog-search/src/tests/FacetListBase.test.jsx @@ -3,12 +3,20 @@ import { renderWithRouter } from '@edx/frontend-enterprise-utils'; import { act, screen, fireEvent } from '@testing-library/react'; import '@testing-library/jest-dom/extend-expect'; +import { useLocation } from 'react-router-dom'; import { FREE_ALL_TITLE } from '../SearchFilters'; import FacetListBase from '../FacetListBase'; 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', () => ({ + useLocation: jest.fn(), + useNavigate: () => mockedNavigator, +})); + const propsForNoItems = { items: [], title: FREE_ALL_TITLE, @@ -53,6 +61,11 @@ const searchableDropdownProps = { }; describe('', () => { + beforeEach(() => { + useLocation.mockReturnValue({ pathname: '/' }); + jest.clearAllMocks(); + }); + test('renders with no options', async () => { renderWithRouter(); @@ -101,7 +114,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('/', { 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 +160,7 @@ describe('', () => { }); // assert page was deleted and subjects were not - expect(history.location.search).toEqual('?subjects=Communication&showAll=1'); + expect(mockedNavigator).toHaveBeenCalledWith('/', { 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 392bc41a4..21f467953 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, @@ -102,7 +112,7 @@ describe('', () => { }); test('supports clicking on a refinement', async () => { - const { history } = renderWithRouter(); + renderWithRouter(); // assert the refinements appear await act(async () => { @@ -116,18 +126,17 @@ describe('', () => { }); // assert the clicked refinement was added to the url - expect(history.location.search).toEqual('?subjects=Communication'); + expect(mockedNavigator).toHaveBeenCalledWith('/', { 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 +149,6 @@ describe('', () => { }); // assert page was deleted and subjects were not - expect(history.location.search).toEqual('?subjects=Communication'); + expect(mockedNavigator).toHaveBeenCalledWith('/', { search: 'subjects=Communication' }); }); }); diff --git a/packages/catalog-search/src/tests/LearningTypeRadioFacet.test.jsx b/packages/catalog-search/src/tests/LearningTypeRadioFacet.test.jsx index 6a6782b99..921bc18c4 100644 --- a/packages/catalog-search/src/tests/LearningTypeRadioFacet.test.jsx +++ b/packages/catalog-search/src/tests/LearningTypeRadioFacet.test.jsx @@ -9,6 +9,16 @@ import LearningTypeRadioFacet from '../LearningTypeRadioFacet'; import { features } from '../config'; import { renderWithSearchContext } from './utils'; +const mockedNavigator = jest.fn(); + +jest.mock('react-router-dom', () => ({ + ...jest.requireActual('react-router-dom'), + useNavigate: () => mockedNavigator, + 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 ad0bc1190..6bda2c027 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('/', { 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('/', { 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 bfe89066d..db5bd11ce 100644 --- a/packages/catalog-search/src/tests/SearchPagination.test.jsx +++ b/packages/catalog-search/src/tests/SearchPagination.test.jsx @@ -2,48 +2,72 @@ import React from 'react'; import { renderWithRouter } from '@edx/frontend-enterprise-utils'; import { screen, fireEvent } from '@testing-library/react'; import '@testing-library/jest-dom/extend-expect'; +import { useLocation } from 'react-router-dom'; 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('/', { 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][1]).toEqual({ 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][1]).toEqual({ 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][1]).toEqual({ 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][1]).toEqual({ search: 'page=2' }); }); }); diff --git a/packages/catalog-search/src/tests/SearchSuggestionItem.test.jsx b/packages/catalog-search/src/tests/SearchSuggestionItem.test.jsx index dcbd86a2a..98d24ab56 100644 --- a/packages/catalog-search/src/tests/SearchSuggestionItem.test.jsx +++ b/packages/catalog-search/src/tests/SearchSuggestionItem.test.jsx @@ -4,6 +4,16 @@ import { screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import SearchSuggestionItem from '../SearchSuggestionItem'; +const mockedNavigator = jest.fn(); + +jest.mock('react-router-dom', () => ({ + ...jest.requireActual('react-router-dom'), + useNavigate: () => mockedNavigator, + useLocation: () => ({ + pathname: '/', + }), +})); + describe('', () => { test('renders course data', () => { const mockData = { diff --git a/packages/catalog-search/src/tests/SearchSuggestions.test.jsx b/packages/catalog-search/src/tests/SearchSuggestions.test.jsx index 002bf47a0..88e0ca61b 100644 --- a/packages/catalog-search/src/tests/SearchSuggestions.test.jsx +++ b/packages/catalog-search/src/tests/SearchSuggestions.test.jsx @@ -99,24 +99,26 @@ describe('', () => { expect(handleSubmit.mock.calls.length).toBe(1); }); - test('redirects to correct page on course click', () => { - const { container, history } = renderWithRouter(); + test.only('redirects to correct page on course click', () => { + const { container } = 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(