fix: all affected test cases due to react router upgrade

openedx · Jun 14, 2023 · 452b52b · 452b52b
1 parent 7811b77
commit 452b52b
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 67 deletions.
diff --git a/src/CourseAuthoringRoutes.test.jsx b/src/CourseAuthoringRoutes.test.jsx
@@ -13,10 +13,10 @@ const editorContainerMockText = 'Editor Container';
 const videoSelectorContainerMockText = 'Video Selector Container';
 let store;
 const mockComponentFn = jest.fn();
-jest.mock('react-router', () => ({
-  ...jest.requireActual('react-router'),
-  useRouteMatch: () => ({
-    path: `/course/${courseId}`,
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({
+    courseId,
   }),
 }));
 jest.mock('./pages-and-resources/PagesAndResources', () => (props) => {
@@ -51,9 +51,9 @@ describe('<CourseAuthoringRoutes>', () => {
 
   it('renders the PagesAndResources component when the pages and resources route is active', () => {
     render(
-      <AppProvider store={store}>
-        <MemoryRouter initialEntries={[`/course/${courseId}/pages-and-resources`]}>
-          <CourseAuthoringRoutes courseId={courseId} />
+      <AppProvider store={store} wrapWithRouter={false}>
+        <MemoryRouter initialEntries={['/pages-and-resources']}>
+          <CourseAuthoringRoutes />
         </MemoryRouter>
       </AppProvider>,
     );
@@ -69,9 +69,9 @@ describe('<CourseAuthoringRoutes>', () => {
 
   it('renders the ProctoredExamSettings component when the proctored exam settings route is active', () => {
     render(
-      <AppProvider store={store}>
-        <MemoryRouter initialEntries={[`/course/${courseId}/proctored-exam-settings`]}>
-          <CourseAuthoringRoutes courseId={courseId} />
+      <AppProvider store={store} wrapWithRouter={false}>
+        <MemoryRouter initialEntries={['/proctored-exam-settings']}>
+          <CourseAuthoringRoutes />
         </MemoryRouter>
       </AppProvider>,
     );
@@ -87,9 +87,9 @@ describe('<CourseAuthoringRoutes>', () => {
 
   it('renders the EditorContainer component when the course editor route is active', () => {
     render(
-      <AppProvider store={store}>
-        <MemoryRouter initialEntries={[`/course/${courseId}/editor/video/block-id`]}>
-          <CourseAuthoringRoutes courseId={courseId} />
+      <AppProvider store={store} wrapWithRouter={false}>
+        <MemoryRouter initialEntries={['/editor/video/block-id']}>
+          <CourseAuthoringRoutes />
         </MemoryRouter>
       </AppProvider>,
     );
@@ -105,9 +105,9 @@ describe('<CourseAuthoringRoutes>', () => {
 
   it('renders the VideoSelectorContainer component when the course videos route is active', () => {
     render(
-      <AppProvider store={store}>
-        <MemoryRouter initialEntries={[`/course/${courseId}/editor/course-videos/block-id`]}>
-          <CourseAuthoringRoutes courseId={courseId} />
+      <AppProvider store={store} wrapWithRouter={false}>
+        <MemoryRouter initialEntries={['/editor/course-videos/block-id']}>
+          <CourseAuthoringRoutes />
         </MemoryRouter>
       </AppProvider>,
     );

diff --git a/src/editors/__snapshots__/EditorContainer.test.jsx.snap b/src/editors/__snapshots__/EditorContainer.test.jsx.snap
@@ -5,8 +5,6 @@ exports[`Editor Container snapshots rendering correctly with expected Input 1`]
   className="editor-page"
 >
   <EditorPage
-    blockId="company-id1"
-    blockType="html"
     courseId="cOuRsEId"
     lmsEndpointUrl="http://localhost:18000"
     studioEndpointUrl="http://localhost:18010"

diff --git a/src/pages-and-resources/discussions/DiscussionsSettings.test.jsx b/src/pages-and-resources/discussions/DiscussionsSettings.test.jsx
@@ -3,15 +3,15 @@ import {
   getConfig, history, initializeMockApp, setConfig,
 } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { AppProvider, PageRoute } from '@edx/frontend-platform/react';
+import { AppProvider, PageWrap } from '@edx/frontend-platform/react';
 import {
   act, findByRole, getByRole, queryByLabelText, queryByRole, queryByTestId, queryByText, render,
   screen, waitFor, waitForElementToBeRemoved,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import MockAdapter from 'axios-mock-adapter';
 import React from 'react';
-import { Switch } from 'react-router';
+import { Routes, Route } from 'react-router-dom';
 import { fetchCourseDetail } from '../../data/thunks';
 import initializeStore from '../../store';
 import { executeThunk } from '../../utils';
@@ -41,16 +41,16 @@ function renderComponent() {
   const wrapper = render(
     <AppProvider store={store}>
       <PagesAndResourcesProvider courseId={courseId}>
-        <Switch>
-          <PageRoute
-            path={[
-              `/course/${courseId}/pages-and-resources/discussion/configure/:appId`,
-              `/course/${courseId}/pages-and-resources/discussion`,
-            ]}
-          >
-            <DiscussionsSettings courseId={courseId} />
-          </PageRoute>
-        </Switch>
+        <Routes>
+          <Route
+            path={`/course/${courseId}/pages-and-resources/discussion/configure/:appId`}
+            element={<PageWrap><DiscussionsSettings courseId={courseId} /></PageWrap>}
+          />
+          <Route
+            path={`/course/${courseId}/pages-and-resources/discussion`}
+            element={<PageWrap><DiscussionsSettings courseId={courseId} /></PageWrap>}
+          />
+        </Routes>
       </PagesAndResourcesProvider>
     </AppProvider>,
   );
@@ -80,7 +80,7 @@ describe('DiscussionsSettings', () => {
     axiosMock = new MockAdapter(getAuthenticatedHttpClient());
 
     // Leave the DiscussionsSettings route after the test.
-    history.push(`/course/${courseId}/pages-and-resources`);
+   history.push(`/course/${courseId}/pages-and-resources`);
   });
 
   describe('with successful network connections', () => {
@@ -89,12 +89,13 @@ describe('DiscussionsSettings', () => {
         .reply(200, generateProvidersApiResponse(false));
       axiosMock.onGet(getDiscussionsSettingsUrl(courseId))
         .reply(200, generatePiazzaApiResponse(true));
-      renderComponent();
     });
 
     test('sets selection step from routes', async () => {
       history.push(`/course/${courseId}/pages-and-resources/discussion`);
 
+      renderComponent();
+
       // This is an important line that ensures the spinner has been removed - and thus our main
       // content has been loaded - prior to proceeding with our expectations.
       await waitForElementToBeRemoved(screen.getByRole('status'));
@@ -106,6 +107,8 @@ describe('DiscussionsSettings', () => {
     test('sets settings step from routes', async () => {
       history.push(`/course/${courseId}/pages-and-resources/discussion/configure/piazza`);
 
+      renderComponent();
+
       // This is an important line that ensures the spinner has been removed - and thus our main
       // content has been loaded - prior to proceeding with our expectations.
       await waitForElementToBeRemoved(screen.getByRole('status'));
@@ -117,6 +120,8 @@ describe('DiscussionsSettings', () => {
     test('successfully advances to settings step for lti', async () => {
       history.push(`/course/${courseId}/pages-and-resources/discussion`);
 
+      renderComponent();
+
       // This is an important line that ensures the spinner has been removed - and thus our main
       // content has been loaded - prior to proceeding with our expectations.
       await waitForElementToBeRemoved(screen.getByRole('status'));
@@ -135,9 +140,10 @@ describe('DiscussionsSettings', () => {
     test('successfully advances to settings step for legacy', async () => {
       axiosMock.onGet(getDiscussionsProvidersUrl(courseId)).reply(200, generateProvidersApiResponse(false, 'legacy'));
       axiosMock.onGet(getDiscussionsSettingsUrl(courseId)).reply(200, legacyApiResponse);
-      renderComponent();
       history.push(`/course/${courseId}/pages-and-resources/discussion`);
 
+      renderComponent();
+
       // This is an important line that ensures the spinner has been removed - and thus our main
       // content has been loaded - prior to proceeding with our expectations.
       await waitForElementToBeRemoved(screen.getByRole('status'));
@@ -156,6 +162,8 @@ describe('DiscussionsSettings', () => {
     test('successfully goes back to first step', async () => {
       history.push(`/course/${courseId}/pages-and-resources/discussion/configure/piazza`);
 
+      renderComponent();
+
       // This is an important line that ensures the spinner has been removed - and thus our main
       // content has been loaded - prior to proceeding with our expectations.
       await waitForElementToBeRemoved(screen.getByRole('status'));
@@ -171,6 +179,8 @@ describe('DiscussionsSettings', () => {
     test('successfully closes the modal', async () => {
       history.push(`/course/${courseId}/pages-and-resources/discussion`);
 
+      renderComponent();
+
       // This is an important line that ensures the spinner has been removed - and thus our main
       // content has been loaded - prior to proceeding with our expectations.
       await waitForElementToBeRemoved(screen.getByRole('status'));
@@ -188,6 +198,8 @@ describe('DiscussionsSettings', () => {
     test('successfully submit the modal', async () => {
       history.push(`/course/${courseId}/pages-and-resources/discussion`);
 
+      renderComponent();
+
       axiosMock.onPost(getDiscussionsSettingsUrl(courseId)).reply(200, generatePiazzaApiResponse(true));
 
       // This is an important line that ensures the spinner has been removed - and thus our main
@@ -213,6 +225,8 @@ describe('DiscussionsSettings', () => {
       await executeThunk(fetchCourseDetail(courseId), store.dispatch);
       history.push(`/course/${courseId}/pages-and-resources/discussion`);
 
+      renderComponent();
+
       // This is an important line that ensures the spinner has been removed - and thus our main
       // content has been loaded - prior to proceeding with our expectations.
       await waitForElementToBeRemoved(screen.getByRole('status'));
@@ -234,6 +248,8 @@ describe('DiscussionsSettings', () => {
       await executeThunk(fetchCourseDetail(courseId), store.dispatch);
       history.push(`/course/${courseId}/pages-and-resources/discussion`);
 
+      renderComponent();
+
       // This is an important line that ensures the spinner has been removed - and thus our main
       // content has been loaded - prior to proceeding with our expectations.
       await waitForElementToBeRemoved(screen.getByRole('status'));
@@ -269,12 +285,13 @@ describe('DiscussionsSettings', () => {
 
       axiosMock.onGet(getDiscussionsProvidersUrl(courseId)).networkError();
       axiosMock.onGet(getDiscussionsSettingsUrl(courseId)).networkError();
-      renderComponent();
     });
 
     test('shows connection error alert', async () => {
       history.push(`/course/${courseId}/pages-and-resources/discussion`);
 
+      renderComponent();
+
       // This is an important line that ensures the spinner has been removed - and thus our main
       // content has been loaded - prior to proceeding with our expectations.
       await waitForElementToBeRemoved(screen.getByRole('status'));
@@ -305,6 +322,8 @@ describe('DiscussionsSettings', () => {
     test('shows connection error alert at top of form', async () => {
       history.push(`/course/${courseId}/pages-and-resources/discussion/configure/piazza`);
 
+      renderComponent();
+
       // This is an important line that ensures the spinner has been removed - and thus our main
       // content has been loaded - prior to proceeding with our expectations.
       await waitForElementToBeRemoved(screen.getByRole('status'));
@@ -328,13 +347,13 @@ describe('DiscussionsSettings', () => {
     beforeEach(() => {
       axiosMock.onGet(getDiscussionsProvidersUrl(courseId)).reply(403);
       axiosMock.onGet(getDiscussionsSettingsUrl(courseId)).reply(403);
-
-      renderComponent();
     });
 
     test('shows permission denied alert', async () => {
       history.push(`/course/${courseId}/pages-and-resources/discussion`);
 
+      renderComponent();
+
       // This is an important line that ensures the spinner has been removed - and thus our main
       // content has been loaded - prior to proceeding with our expectations.
       await waitForElementToBeRemoved(screen.getByRole('status'));
@@ -351,13 +370,13 @@ describe('DiscussionsSettings', () => {
         .reply(200, generateProvidersApiResponse());
       axiosMock.onGet(getDiscussionsSettingsUrl(courseId)).reply(200, piazzaApiResponse);
       axiosMock.onPost(getDiscussionsSettingsUrl(courseId)).reply(403);
-
-      renderComponent();
     });
 
     test('shows permission denied alert at top of form', async () => {
       history.push(`/course/${courseId}/pages-and-resources/discussion/configure/piazza`);
 
+      renderComponent();
+
       // This is an important line that ensures the spinner has been removed - and thus our main
       // content has been loaded - prior to proceeding with our expectations.
       await waitForElementToBeRemoved(screen.getByRole('status'));
@@ -410,13 +429,14 @@ describe.each([
       .reply(200, generateProvidersApiResponse(isAdminOnlyConfig));
     axiosMock.onGet(getDiscussionsSettingsUrl(courseId))
       .reply(200, generatePiazzaApiResponse(true));
-    renderComponent();
   });
 
   test(`successfully advances to settings step for lti when adminOnlyConfig=${isAdminOnlyConfig} and user ${isAdmin ? 'is' : 'is not'} admin `, async () => {
     const showLTIConfig = isAdmin;
     history.push(`/course/${courseId}/pages-and-resources/discussion`);
 
+    renderComponent();
+
     // This is an important line that ensures the spinner has been removed - and thus our main
     // content has been loaded - prior to proceeding with our expectations.
     await waitForElementToBeRemoved(screen.getByRole('status'));
@@ -461,18 +481,19 @@ describe.each([
     axiosMock = new MockAdapter(getAuthenticatedHttpClient());
 
     // Leave the DiscussionsSettings route after the test.
-    history.push(`/course/${courseId}/pages-and-resources`);
+    // history.push(`/course/${courseId}/pages-and-resources`);
     axiosMock.onGet(getDiscussionsProvidersUrl(courseId))
       .reply(200, generateProvidersApiResponse(false));
     axiosMock.onGet(getDiscussionsSettingsUrl(courseId))
       .reply(200, generatePiazzaApiResponse(piiSharingAllowed));
-    renderComponent();
   });
 
   test(`${piiSharingAllowed ? 'shows PII share username/email field when piiSharingAllowed is true'
     : 'hides PII share username/email field when piiSharingAllowed is false'}`, async () => {
     history.push(`/course/${courseId}/pages-and-resources/discussion`);
 
+    renderComponent();
+
     // This is an important line that ensures the spinner has been removed - and thus our main
     // content has been loaded - prior to proceeding with our expectations.
     await waitForElementToBeRemoved(screen.getByRole('status'));

diff --git a/src/pages-and-resources/discussions/data/redux.test.js b/src/pages-and-resources/discussions/data/redux.test.js
@@ -15,6 +15,7 @@ import { fetchDiscussionSettings, fetchProviders, saveProviderConfig } from './t
 
 const courseId = 'course-v1:edX+TestX+Test_Course';
 const pagesAndResourcesPath = `/course/${courseId}/pages-and-resources`;
+const mockedNavigator = jest.fn();
 
 const featuresState = {
   'discussion-page': {
@@ -114,6 +115,7 @@ describe('Data layer integration tests', () => {
 
   afterEach(() => {
     axiosMock.reset();
+    jest.clearAllMocks();
   });
 
   describe('fetchProviders', () => {
@@ -286,7 +288,7 @@ describe('Data layer integration tests', () => {
       await executeThunk(fetchProviders(courseId), store.dispatch);
       await executeThunk(fetchDiscussionSettings(courseId), store.dispatch);
       store.dispatch(selectApp({ appId: 'piazza' }));
-      await executeThunk(saveProviderConfig(courseId, 'piazza', {}, pagesAndResourcesPath), store.dispatch);
+      await executeThunk(saveProviderConfig(courseId, 'piazza', {}, pagesAndResourcesPath, mockedNavigator), store.dispatch);
 
       // Assert we're still on the form.
       expect(window.location.pathname).toEqual(`/course/${courseId}/pages-and-resources/discussions/configure/piazza`);
@@ -313,7 +315,7 @@ describe('Data layer integration tests', () => {
       // We call fetchProviders and selectApp here too just to get us into a real state.
       await executeThunk(fetchProviders(courseId), store.dispatch);
       store.dispatch(selectApp({ appId: 'piazza' }));
-      await executeThunk(saveProviderConfig(courseId, 'piazza', {}, pagesAndResourcesPath), store.dispatch);
+      await executeThunk(saveProviderConfig(courseId, 'piazza', {}, pagesAndResourcesPath, mockedNavigator), store.dispatch);
 
       // Assert we're still on the form.
       expect(window.location.pathname).toEqual(`/course/${courseId}/pages-and-resources/discussions/configure/piazza`);
@@ -369,9 +371,10 @@ describe('Data layer integration tests', () => {
           launchUrl: 'http://localhost/new_launch_url',
         },
         pagesAndResourcesPath,
+        mockedNavigator,
       ), store.dispatch);
 
-      expect(window.location.pathname).toEqual(pagesAndResourcesPath);
+      expect(mockedNavigator).toHaveBeenCalledWith(pagesAndResourcesPath);
       expect(store.getState().discussions).toEqual(
         expect.objectContaining({
           appIds: ['legacy', 'openedx', 'piazza', 'discourse'],
@@ -464,8 +467,9 @@ describe('Data layer integration tests', () => {
           ],
         },
         pagesAndResourcesPath,
+        mockedNavigator,
       ), store.dispatch);
-      expect(window.location.pathname).toEqual(pagesAndResourcesPath);
+      expect(mockedNavigator).toHaveBeenCalledWith(pagesAndResourcesPath);
       expect(store.getState().discussions).toEqual(
         expect.objectContaining({
           appIds: ['legacy', 'openedx', 'piazza', 'discourse'],

diff --git a/src/pages-and-resources/live/BbbSettings.test.jsx b/src/pages-and-resources/live/BbbSettings.test.jsx
@@ -7,11 +7,11 @@ import {
 } from '@testing-library/react';
 
 import ReactDOM from 'react-dom';
-import { Switch } from 'react-router-dom';
+import { Routes, Route } from 'react-router-dom';
 import { initializeMockApp, history } from '@edx/frontend-platform';
 import MockAdapter from 'axios-mock-adapter';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { AppProvider, PageRoute } from '@edx/frontend-platform/react';
+import { AppProvider, PageWrap } from '@edx/frontend-platform/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import userEvent from '@testing-library/user-event';
@@ -43,11 +43,9 @@ const renderComponent = () => {
     <IntlProvider locale="en">
       <AppProvider store={store}>
         <PagesAndResourcesProvider courseId={courseId}>
-          <Switch>
-            <PageRoute path={liveSettingsUrl}>
-              <LiveSettings onClose={() => {}} />
-            </PageRoute>
-          </Switch>
+          <Routes>
+            <Route path={liveSettingsUrl} element={<PageWrap><LiveSettings onClose={() => {}} /></PageWrap>} />
+          </Routes>
         </PagesAndResourcesProvider>
       </AppProvider>
     </IntlProvider>,