feat: refactor program dashboard to use react query

package.json

@@ -29,7 +29,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
+    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.3",
     "@edx/frontend-component-footer": "^14.6.0",
     "@edx/frontend-component-header": "^8.0.0",
     "@edx/frontend-enterprise-hotjar": "7.2.0",

src/App.jsx

@@ -1,19 +1,14 @@
 import React from 'react';
-import { Helmet } from 'react-helmet';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { logError } from '@edx/frontend-platform/logging';
 import { initializeHotjar } from '@edx/frontend-enterprise-hotjar';
 
 import { ErrorPage } from '@edx/frontend-platform/react';
-import { FooterSlot } from '@edx/frontend-component-footer';
 import { Alert } from '@openedx/paragon';
 
 import Dashboard from 'containers/Dashboard';
 
-import AppWrapper from 'containers/AppWrapper';
-import LearnerDashboardHeader from 'containers/LearnerDashboardHeader';
-
 import { getConfig } from '@edx/frontend-platform';
 import { useInitializeLearnerHome } from 'data/hooks';
 import { useMasquerade } from 'data/context';
@@ -42,28 +37,16 @@ export const App = () => {
     }
   }, []);
   return (
-    <>
-      <Helmet>
-        <title>{formatMessage(messages.pageTitle)}</title>
-        <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
-      </Helmet>
-      <div>
-        <AppWrapper>
-          <LearnerDashboardHeader />
-          <main id="main">
-            {hasNetworkFailure
-              ? (
-                <Alert variant="danger">
-                  <ErrorPage message={formatMessage(messages.errorMessage, { supportEmail })} />
-                </Alert>
-              ) : (
-                <Dashboard />
-              )}
-          </main>
-        </AppWrapper>
-        <FooterSlot />
-      </div>
-    </>
+    <main id="main">
+      {hasNetworkFailure
+        ? (
+          <Alert variant="danger">
+            <ErrorPage message={formatMessage(messages.errorMessage, { supportEmail })} />
+          </Alert>
+        ) : (
+          <Dashboard />
+        )}
+    </main>
   );
 };
 

src/App.test.jsx

@@ -1,4 +1,4 @@
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
@@ -15,12 +15,8 @@ jest.mock('data/context', () => ({
   useMasquerade: jest.fn(() => ({ masqueradeUser: null })),
 }));
 
-jest.mock('@edx/frontend-component-footer', () => ({
-  FooterSlot: jest.fn(() => <div>FooterSlot</div>),
-}));
 jest.mock('containers/Dashboard', () => jest.fn(() => <div>Dashboard</div>));
 jest.mock('containers/LearnerDashboardHeader', () => jest.fn(() => <div>LearnerDashboardHeader</div>));
-jest.mock('containers/AppWrapper', () => jest.fn(({ children }) => <div className="AppWrapper">{children}</div>));
 
 jest.mock('@edx/frontend-platform', () => ({
   getConfig: jest.fn(() => ({})),
@@ -43,31 +39,12 @@ useInitializeLearnerHome.mockReturnValue({
 
 describe('App router component', () => {
   describe('component', () => {
-    const runBasicTests = () => {
-      it('displays title in helmet component', async () => {
-        await waitFor(() => expect(document.title).toEqual(messages.pageTitle.defaultMessage));
-      });
-      it('displays learner dashboard header', () => {
-        const learnerDashboardHeader = screen.getByText('LearnerDashboardHeader');
-        expect(learnerDashboardHeader).toBeInTheDocument();
-      });
-      it('wraps the header and main components in an AppWrapper widget container', () => {
-        const appWrapper = screen.getByText('LearnerDashboardHeader').parentElement;
-        expect(appWrapper).toHaveClass('AppWrapper');
-        expect(appWrapper.children[1].id).toEqual('main');
-      });
-      it('displays footer slot', () => {
-        const footerSlot = screen.getByText('FooterSlot');
-        expect(footerSlot).toBeInTheDocument();
-      });
-    };
     describe('no network failure', () => {
       beforeEach(() => {
         jest.clearAllMocks();
         getConfig.mockReturnValue({});
         render(<IntlProvider locale="en"><App /></IntlProvider>);
       });
-      runBasicTests();
       it('loads dashboard', () => {
         const dashboard = screen.getByText('Dashboard');
         expect(dashboard).toBeInTheDocument();
@@ -79,7 +56,6 @@ describe('App router component', () => {
         getConfig.mockReturnValue({ OPTIMIZELY_URL: 'fake.url' });
         render(<IntlProvider locale="en"><App /></IntlProvider>);
       });
-      runBasicTests();
       it('loads dashboard', () => {
         const dashboard = screen.getByText('Dashboard');
         expect(dashboard).toBeInTheDocument();
@@ -91,7 +67,6 @@ describe('App router component', () => {
         getConfig.mockReturnValue({ OPTIMIZELY_PROJECT_ID: 'fakeId' });
         render(<IntlProvider locale="en"><App /></IntlProvider>);
       });
-      runBasicTests();
       it('loads dashboard', () => {
         const dashboard = screen.getByText('Dashboard');
         expect(dashboard).toBeInTheDocument();
@@ -107,7 +82,6 @@ describe('App router component', () => {
         getConfig.mockReturnValue({});
         render(<IntlProvider locale="en" messages={messages}><App /></IntlProvider>);
       });
-      runBasicTests();
       it('loads error page', () => {
         const alert = screen.getByRole('alert');
         expect(alert).toBeInTheDocument();
@@ -120,7 +94,6 @@ describe('App router component', () => {
         getConfig.mockReturnValue({});
         render(<IntlProvider locale="en"><App /></IntlProvider>);
       });
-      runBasicTests();
       it('loads error page', () => {
         const alert = screen.getByRole('alert');
         expect(alert).toBeInTheDocument();

src/containers/Dashboard/index.test.jsx

@@ -25,28 +25,21 @@ jest.mock('./LoadingView', () => jest.fn(() => <div>LoadingView</div>));
 jest.mock('containers/SelectSessionModal', () => jest.fn(() => <div>SelectSessionModal</div>));
 jest.mock('./DashboardLayout', () => jest.fn(() => <div>DashboardLayout</div>));
 
-const pageTitle = 'test-page-title';
-
 describe('Dashboard', () => {
   const createWrapper = (props = {}) => {
     const {
       hasCourses = true,
       initIsPending = true,
       showSelectSessionModal = true,
     } = props;
-    hooks.useDashboardMessages.mockReturnValue({ pageTitle });
+    hooks.useDashboardMessages.mockReturnValue({ pageTitle: 'Dashboard' });
     const dataMocked = { data: hasCourses ? { courses: [1, 2] } : { courses: [] }, isPending: initIsPending };
     useInitializeLearnerHome.mockReturnValue(dataMocked);
     useSelectSessionModal.mockReturnValue({ selectSessionModal: showSelectSessionModal ? { cardId: 1 } : null });
     return render(<IntlProvider locale="en"><Dashboard /></IntlProvider>);
   };
 
   describe('render', () => {
-    it('page title is displayed in sr-only h1 tag', () => {
-      createWrapper();
-      const heading = screen.getByText(pageTitle);
-      expect(heading).toHaveClass('sr-only');
-    });
     describe('initIsPending false', () => {
       it('should render DashboardModalSlot', () => {
         createWrapper({ initIsPending: false });

src/containers/LearnerDashboardHeader/LearnerDashboardMenu.jsx

@@ -9,18 +9,20 @@ const getLearnerHeaderMenu = (
   courseSearchUrl,
   authenticatedUser,
   exploreCoursesClick,
+  pathname,
 ) => ({
   mainMenu: [
     {
       type: 'item',
       href: '/',
       content: formatMessage(messages.course),
-      isActive: true,
+      isActive: pathname === '/',
     },
     ...(getConfig().ENABLE_PROGRAMS ? [{
       type: 'item',
-      href: `${urls.programsUrl()}`,
+      href: getConfig().ENABLE_PROGRAM_DASHBOARD ? '/programs' : `${urls.programsUrl()}`,
       content: formatMessage(messages.program),
+      isActive: pathname === '/programs',
     }] : []),
     ...(!getConfig().NON_BROWSABLE_COURSES ? [{
       type: 'item',

src/containers/LearnerDashboardHeader/hooks.js

@@ -15,10 +15,10 @@ export const findCoursesNavClicked = (href) => track.findCourses.findCoursesClic
 });
 
 export const useLearnerDashboardHeaderMenu = ({
-  courseSearchUrl, authenticatedUser, exploreCoursesClick,
+  courseSearchUrl, authenticatedUser, exploreCoursesClick, pathname,
 }) => {
   const { formatMessage } = useIntl();
-  return getLearnerHeaderMenu(formatMessage, courseSearchUrl, authenticatedUser, exploreCoursesClick);
+  return getLearnerHeaderMenu(formatMessage, courseSearchUrl, authenticatedUser, exploreCoursesClick, pathname);
 };
 
 export default {

src/containers/LearnerDashboardHeader/index.jsx

@@ -1,19 +1,27 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import MasqueradeBar from 'containers/MasqueradeBar';
 import { AppContext } from '@edx/frontend-platform/react';
 import Header from '@edx/frontend-component-header';
 import { useInitializeLearnerHome } from 'data/hooks';
 import urls from 'data/services/lms/urls';
 
+import { useLocation } from 'react-router-dom';
+import { useDashboardMessages } from 'containers/Dashboard/hooks';
 import ConfirmEmailBanner from './ConfirmEmailBanner';
-
+import appMessages from '../../messages';
 import { useLearnerDashboardHeaderMenu, findCoursesNavClicked } from './hooks';
-
 import './index.scss';
 
 export const LearnerDashboardHeader = () => {
   const { authenticatedUser } = React.useContext(AppContext);
+  const { formatMessage } = useIntl();
+  const { pageTitle } = useDashboardMessages();
+  const location = useLocation();
+  const { pathname } = location;
   const { data: learnerData } = useInitializeLearnerHome();
   const courseSearchUrl = learnerData?.platformSettings?.courseSearchUrl || '';
 
@@ -25,16 +33,22 @@ export const LearnerDashboardHeader = () => {
     courseSearchUrl,
     authenticatedUser,
     exploreCoursesClick,
+    pathname,
   });
 
   return (
     <>
+      <Helmet>
+        <title>{formatMessage(appMessages.pageTitle)}</title>
+        <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
+      </Helmet>
       <ConfirmEmailBanner />
       <Header
         mainMenuItems={learnerHomeHeaderMenu.mainMenu}
         secondaryMenuItems={learnerHomeHeaderMenu.secondaryMenu}
         userMenuItems={learnerHomeHeaderMenu.userMenu}
       />
+      <h1 className="sr-only">{pageTitle}</h1>
       <MasqueradeBar />
     </>
   );

src/containers/LearnerDashboardHeader/index.test.jsx

@@ -1,8 +1,10 @@
 import { mergeConfig } from '@edx/frontend-platform';
 import { render, screen } from '@testing-library/react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { useLocation } from 'react-router-dom';
 
 import urls from 'data/services/lms/urls';
+import { useDashboardMessages } from 'containers/Dashboard/hooks';
 import LearnerDashboardHeader from '.';
 import { findCoursesNavClicked } from './hooks';
 
@@ -22,16 +24,34 @@ jest.mock('./hooks', () => ({
   findCoursesNavClicked: jest.fn(),
 }));
 
+jest.mock('react-router-dom', () => ({
+  useLocation: jest.fn(() => ({
+    pathname: '/',
+  })),
+}));
+
 const mockedHeaderProps = jest.fn();
 jest.mock('containers/MasqueradeBar', () => jest.fn(() => <div>MasqueradeBar</div>));
 jest.mock('./ConfirmEmailBanner', () => jest.fn(() => <div>ConfirmEmailBanner</div>));
 jest.mock('@edx/frontend-component-header', () => jest.fn((props) => {
   mockedHeaderProps(props);
   return <div>Header</div>;
 }));
+jest.mock('containers/Dashboard/hooks', () => ({
+  useDashboardMessages: jest.fn(),
+}));
+
+const pageTitle = 'test-page-title';
 
 describe('LearnerDashboardHeader', () => {
   beforeEach(() => jest.clearAllMocks());
+
+  it('page title is displayed in sr-only h1 tag', () => {
+    useDashboardMessages.mockReturnValue({ pageTitle });
+    render(<IntlProvider locale="en"><LearnerDashboardHeader /></IntlProvider>);
+    const heading = screen.getByText(pageTitle);
+    expect(heading).toHaveClass('sr-only');
+  });
   it('renders and discover url is correct', () => {
     mergeConfig({ ORDER_HISTORY_URL: 'test-url' });
     render(<IntlProvider locale="en"><LearnerDashboardHeader /></IntlProvider>);
@@ -60,6 +80,26 @@ describe('LearnerDashboardHeader', () => {
     const { mainMenuItems } = props;
     expect(mainMenuItems.length).toBe(3);
   });
+
+  it('should highlight the active tab depending on the pathname', () => {
+    render(<IntlProvider locale="en"><LearnerDashboardHeader /></IntlProvider>);
+    const props = mockedHeaderProps.mock.calls[0][0];
+    const { mainMenuItems } = props;
+    expect(mainMenuItems[0].isActive).toBe(true);
+  });
+
+  it('should highlight the programs tab if dashboard is enabled and on the programs page', () => {
+    mergeConfig({ ENABLE_PROGRAMS: true, ENABLE_PROGRAM_DASHBOARD: true });
+    useLocation.mockReturnValueOnce({
+      pathname: '/programs',
+    });
+    render(<IntlProvider locale="en"><LearnerDashboardHeader /></IntlProvider>);
+    const props = mockedHeaderProps.mock.calls[0][0];
+    const { mainMenuItems } = props;
+    expect(mainMenuItems[0].isActive).toBe(false);
+    expect(mainMenuItems[1].isActive).toBe(true);
+  });
+
   it('should not display Discover New tab if it is disabled by configuration', () => {
     mergeConfig({ NON_BROWSABLE_COURSES: true });
     render(<IntlProvider locale="en"><LearnerDashboardHeader /></IntlProvider>);