[do not merge] Jwesson/test rebase branch

.env

@@ -45,3 +45,4 @@ NON_BROWSABLE_COURSES=false
 SHOW_UNENROLL_SURVEY=true
 # Fallback in local style files
 PARAGON_THEME_URLS={}
+ENABLE_PROGRAM_DASHBOARD=false

src/App.jsx

@@ -1,18 +1,12 @@
 import React from 'react';
-import { Helmet } from 'react-helmet';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 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';
 import messages from './messages';
@@ -26,28 +20,16 @@ export const App = () => {
   const supportEmail = data?.platformSettings?.supportEmail || undefined;
 
   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';
@@ -7,20 +7,8 @@ import { useInitializeLearnerHome } from 'data/hooks';
 import { App } from './App';
 import messages from './messages';
 
-jest.mock('data/hooks', () => ({
-  useInitializeLearnerHome: jest.fn(),
-}));
-
-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 +31,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 +48,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 +59,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 +74,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 +86,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/config/index.js

@@ -22,6 +22,7 @@ const configuration = {
   ENABLE_PROGRAMS: process.env.ENABLE_PROGRAMS === 'true',
   NON_BROWSABLE_COURSES: process.env.NON_BROWSABLE_COURSES === 'true',
   SHOW_UNENROLL_SURVEY: process.env.SHOW_UNENROLL_SURVEY === 'true',
+  ENABLE_PROGRAM_DASHBOARD: process.env.ENABLE_PROGRAM_DASHBOARD === 'true',
 };
 
 const features = {};

src/containers/Dashboard/index.jsx

@@ -6,6 +6,7 @@ import SelectSessionModal from 'containers/SelectSessionModal';
 import CoursesPanel from 'containers/CoursesPanel';
 import DashboardModalSlot from 'plugin-slots/DashboardModalSlot';
 
+import MasqueradeBar from 'containers/MasqueradeBar';
 import LoadingView from './LoadingView';
 import DashboardLayout from './DashboardLayout';
 import hooks from './hooks';
@@ -20,24 +21,27 @@ export const Dashboard = () => {
   const hasCourses = useMemo(() => data?.courses?.length > 0, [data]);
 
   return (
-    <div id="dashboard-container" className="d-flex flex-column p-2 pt-0">
-      <h1 className="sr-only">{pageTitle}</h1>
-      {!isPending && (
-        <>
-          <DashboardModalSlot />
-          {(hasCourses && showSelectSessionModal) && <SelectSessionModal />}
-        </>
-      )}
-      <div id="dashboard-content" data-testid="dashboard-content">
-        {isPending
-          ? (<LoadingView />)
-          : (
-            <DashboardLayout>
-              <CoursesPanel />
-            </DashboardLayout>
-          )}
+    <>
+      <MasqueradeBar />
+      <div id="dashboard-container" className="d-flex flex-column p-2 pt-0">
+        <h1 className="sr-only">{pageTitle}</h1>
+        {!isPending && (
+          <>
+            <DashboardModalSlot />
+            {(hasCourses && showSelectSessionModal) && <SelectSessionModal />}
+          </>
+        )}
+        <div id="dashboard-content" data-testid="dashboard-content">
+          {isPending
+            ? (<LoadingView />)
+            : (
+              <DashboardLayout>
+                <CoursesPanel />
+              </DashboardLayout>
+            )}
+        </div>
       </div>
-    </div>
+    </>
   );
 };
 

src/containers/Dashboard/index.test.jsx

@@ -24,8 +24,7 @@ jest.mock('containers/CoursesPanel', () => jest.fn(() => <div>CoursesPanel</div>
 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';
+jest.mock('containers/MasqueradeBar', () => jest.fn(() => <div>MasqueradeBar</div>)); // Mock the MasqueradeBar
 
 describe('Dashboard', () => {
   const createWrapper = (props = {}) => {
@@ -34,19 +33,14 @@ describe('Dashboard', () => {
       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 });
@@ -58,6 +52,11 @@ describe('Dashboard', () => {
         const selectSessionModal = screen.getByText('SelectSessionModal');
         expect(selectSessionModal).toBeInTheDocument();
       });
+      it('should render MasqueradeBar', () => {
+        createWrapper({ initIsPending: false });
+        const masqueradeBar = screen.getByText('MasqueradeBar');
+        expect(masqueradeBar).toBeInTheDocument();
+      });
     });
     describe('courses still loading', () => {
       it('should render LoadingView', () => {
@@ -72,6 +71,11 @@ describe('Dashboard', () => {
         const dashboardLayout = screen.getByText('DashboardLayout');
         expect(dashboardLayout).toBeInTheDocument();
       });
+      it('should render MasqueradeBar', () => {
+        createWrapper({ initIsPending: false });
+        const masqueradeBar = screen.getByText('MasqueradeBar');
+        expect(masqueradeBar).toBeInTheDocument();
+      });
     });
   });
 });

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 {