feat: upgrade react rotuer to v6 (#793)

* feat: upgrade react rotuer to v6 * fix: test cases * build: update header and footer * refactor: update jumpnav test case
openedx · Aug 18, 2023 · 3d98558 · 3d98558
1 parent e7e7f51
commit 3d98558
Show file tree

Hide file tree

Showing 32 changed files with 325 additions and 423 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,9 +28,9 @@
   ],
   "dependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
-    "@edx/frontend-component-footer": "12.1.2",
-    "@edx/frontend-component-header": "4.5.0",
-    "@edx/frontend-platform": "4.6.1",
+    "@edx/frontend-component-footer": "12.2.0",
+    "@edx/frontend-component-header": "4.6.0",
+    "@edx/frontend-platform": "5.0.0",
     "@edx/paragon": "20.46.2",
     "@fortawesome/fontawesome-svg-core": "1.2.36",
     "@fortawesome/free-brands-svg-icons": "5.15.4",
@@ -66,8 +66,8 @@
     "react-dom": "17.0.2",
     "react-helmet": "6.1.0",
     "react-redux": "7.2.9",
-    "react-router": "5.2.1",
-    "react-router-dom": "5.3.0",
+    "react-router": "6.14.2",
+    "react-router-dom": "6.14.2",
     "react-router-hash-link": "2.4.3",
     "react-scrollspy": "3.4.3",
     "react-transition-group": "4.4.5",

diff --git a/src/account-settings/certificate-preference/test/CertificatePreference.test.jsx b/src/account-settings/certificate-preference/test/CertificatePreference.test.jsx
@@ -2,14 +2,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
-import { Router } from 'react-router-dom';
+import { BrowserRouter as Router } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
 import {
   fireEvent,
   render,
   screen,
 } from '@testing-library/react';
-import { createMemoryHistory } from 'history';
 
 import * as auth from '@edx/frontend-platform/auth';
 import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
@@ -28,8 +27,6 @@ jest.mock('react-redux', () => ({
 jest.mock('@edx/frontend-platform/auth');
 jest.mock('../../data/selectors', () => jest.fn().mockImplementation(() => ({ certPreferenceSelector: () => ({}) })));
 
-const history = createMemoryHistory();
-
 const IntlCertificatePreference = injectIntl(CertificatePreference);
 
 const mockStore = configureStore();
@@ -42,7 +39,7 @@ describe('NameChange', () => {
   const labelText = 'If checked, this name will appear on your certificates and public-facing records.';
 
   const reduxWrapper = children => (
-    <Router history={history}>
+    <Router>
       <IntlProvider locale="en">
         <Provider store={store}>{children}</Provider>
       </IntlProvider>

diff --git a/src/account-settings/name-change/NameChange.jsx b/src/account-settings/name-change/NameChange.jsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { connect, useDispatch } from 'react-redux';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
@@ -29,7 +29,7 @@ const NameChangeModal = ({
   saveState,
 }) => {
   const dispatch = useDispatch();
-  const { push } = useHistory();
+  const navigate = useNavigate();
   const { username } = getAuthenticatedUser();
   const [verifiedNameInput, setVerifiedNameInput] = useState(formValues.verified_name || '');
   const [confirmedWarning, setConfirmedWarning] = useState(false);
@@ -69,9 +69,9 @@ const NameChangeModal = ({
   useEffect(() => {
     if (saveState === 'complete') {
       handleClose();
-      push(`/id-verification?next=${encodeURIComponent('account/settings')}`);
+      navigate(`/id-verification?next=${encodeURIComponent('account/settings')}`);
     }
-  }, [handleClose, push, saveState]);
+  }, [handleClose, navigate, saveState]);
 
   function renderErrors() {
     if (Object.keys(errors).length > 0) {

diff --git a/src/account-settings/name-change/test/NameChange.test.jsx b/src/account-settings/name-change/test/NameChange.test.jsx
@@ -2,14 +2,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
-import { Router } from 'react-router-dom';
+import { BrowserRouter as Router } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
 import {
   fireEvent,
   render,
   screen,
 } from '@testing-library/react';
-import { createMemoryHistory } from 'history';
 
 import * as auth from '@edx/frontend-platform/auth';
 import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
@@ -28,8 +27,6 @@ jest.mock('react-redux', () => ({
 jest.mock('@edx/frontend-platform/auth');
 jest.mock('../../data/selectors', () => jest.fn().mockImplementation(() => ({ nameChangeSelector: () => ({}) })));
 
-const history = createMemoryHistory();
-
 const IntlNameChange = injectIntl(NameChange);
 
 const mockStore = configureStore();
@@ -39,7 +36,7 @@ describe('NameChange', () => {
   let store = {};
 
   const reduxWrapper = children => (
-    <Router history={history}>
+    <Router>
       <IntlProvider locale="en">
         <Provider store={store}>{children}</Provider>
       </IntlProvider>
@@ -168,6 +165,6 @@ describe('NameChange', () => {
     props.saveState = 'complete';
 
     render(reduxWrapper(<IntlNameChange {...props} />));
-    expect(history.location.pathname).toEqual('/id-verification');
+    expect(window.location.pathname).toEqual('/id-verification');
   });
 });
diff --git a/src/account-settings/test/JumpNav.test.jsx b/src/account-settings/test/JumpNav.test.jsx
@@ -4,7 +4,6 @@ import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
 import { AppProvider } from '@edx/frontend-platform/react';
 import { initializeMockApp, mergeConfig, setConfig } from '@edx/frontend-platform';
 
-import { BrowserRouter as Router } from 'react-router-dom';
 import JumpNav from '../JumpNav';
 import configureStore from '../../data/configureStore';
 
@@ -41,15 +40,11 @@ describe('JumpNav', () => {
 
   it('should not render Optional Information link', () => {
     const tree = renderer.create((
-      // Had to wrap the following in a router or I will receive an error stating:
-      // "Invariant failed: You should not use <NavLink> outside a <Router>"
-      <Router>
-        <IntlProvider locale="en">
-          <AppProvider store={store}>
-            <IntlJumpNav {...props} />
-          </AppProvider>
-        </IntlProvider>
-      </Router>
+      <IntlProvider locale="en">
+        <AppProvider store={store}>
+          <IntlJumpNav {...props} />
+        </AppProvider>
+      </IntlProvider>
     ))
       .toJSON();
 
@@ -67,14 +62,11 @@ describe('JumpNav', () => {
     };
 
     const tree = renderer.create((
-      // Same as previous test
-      <Router>
-        <IntlProvider locale="en">
-          <AppProvider store={store}>
-            <IntlJumpNav {...props} />
-          </AppProvider>
-        </IntlProvider>
-      </Router>
+      <IntlProvider locale="en">
+        <AppProvider store={store}>
+          <IntlJumpNav {...props} />
+        </AppProvider>
+      </IntlProvider>
     ))
       .toJSON();
 

diff --git a/src/account-settings/test/__snapshots__/JumpNav.test.jsx.snap b/src/account-settings/test/__snapshots__/JumpNav.test.jsx.snap
@@ -12,8 +12,10 @@ exports[`JumpNav should not render Optional Information link 1`] = `
       className=""
     >
       <a
-        aria-current={null}
+        aria-current="page"
+        className="active"
         href="/#basic-information"
+        isActive={[Function]}
         onClick={[Function]}
       >
         Account Information
@@ -23,8 +25,10 @@ exports[`JumpNav should not render Optional Information link 1`] = `
       className=""
     >
       <a
-        aria-current={null}
+        aria-current="page"
+        className="active"
         href="/#profile-information"
+        isActive={[Function]}
         onClick={[Function]}
       >
         Profile Information
@@ -34,8 +38,10 @@ exports[`JumpNav should not render Optional Information link 1`] = `
       className=""
     >
       <a
-        aria-current={null}
+        aria-current="page"
+        className="active"
         href="/#social-media"
+        isActive={[Function]}
         onClick={[Function]}
       >
         Social Media Links
@@ -45,8 +51,10 @@ exports[`JumpNav should not render Optional Information link 1`] = `
       className=""
     >
       <a
-        aria-current={null}
+        aria-current="page"
+        className="active"
         href="/#site-preferences"
+        isActive={[Function]}
         onClick={[Function]}
       >
         Site Preferences
@@ -56,8 +64,10 @@ exports[`JumpNav should not render Optional Information link 1`] = `
       className=""
     >
       <a
-        aria-current={null}
+        aria-current="page"
+        className="active"
         href="/#linked-accounts"
+        isActive={[Function]}
         onClick={[Function]}
       >
         Linked Accounts
@@ -67,8 +77,10 @@ exports[`JumpNav should not render Optional Information link 1`] = `
       className=""
     >
       <a
-        aria-current={null}
+        aria-current="page"
+        className="active"
         href="/#delete-account"
+        isActive={[Function]}
         onClick={[Function]}
       >
         Delete My Account
@@ -90,8 +102,10 @@ exports[`JumpNav should render Optional Information link 1`] = `
       className=""
     >
       <a
-        aria-current={null}
+        aria-current="page"
+        className="active"
         href="/#basic-information"
+        isActive={[Function]}
         onClick={[Function]}
       >
         Account Information
@@ -101,8 +115,10 @@ exports[`JumpNav should render Optional Information link 1`] = `
       className=""
     >
       <a
-        aria-current={null}
+        aria-current="page"
+        className="active"
         href="/#profile-information"
+        isActive={[Function]}
         onClick={[Function]}
       >
         Profile Information
@@ -112,8 +128,10 @@ exports[`JumpNav should render Optional Information link 1`] = `
       className=""
     >
       <a
-        aria-current={null}
+        aria-current="page"
+        className="active"
         href="/#demographics-information"
+        isActive={[Function]}
         onClick={[Function]}
       >
         Optional Information
@@ -123,8 +141,10 @@ exports[`JumpNav should render Optional Information link 1`] = `
       className=""
     >
       <a
-        aria-current={null}
+        aria-current="page"
+        className="active"
         href="/#social-media"
+        isActive={[Function]}
         onClick={[Function]}
       >
         Social Media Links
@@ -134,8 +154,10 @@ exports[`JumpNav should render Optional Information link 1`] = `
       className=""
     >
       <a
-        aria-current={null}
+        aria-current="page"
+        className="active"
         href="/#site-preferences"
+        isActive={[Function]}
         onClick={[Function]}
       >
         Site Preferences
@@ -145,8 +167,10 @@ exports[`JumpNav should render Optional Information link 1`] = `
       className=""
     >
       <a
-        aria-current={null}
+        aria-current="page"
+        className="active"
         href="/#linked-accounts"
+        isActive={[Function]}
         onClick={[Function]}
       >
         Linked Accounts
@@ -156,8 +180,10 @@ exports[`JumpNav should render Optional Information link 1`] = `
       className=""
     >
       <a
-        aria-current={null}
+        aria-current="page"
+        className="active"
         href="/#delete-account"
+        isActive={[Function]}
         onClick={[Function]}
       >
         Delete My Account