refactor: Updates in FilesPage

Author: ChrisChV

src/CourseAuthoringRoutes.jsx

@@ -65,7 +65,7 @@ const CourseAuthoringRoutes = () => {
           />
           <Route
             path="assets"
-            element={<PageWrap><FilesPage courseId={courseId} /></PageWrap>}
+            element={<PageWrap><FilesPage /></PageWrap>}
           />
           <Route
             path="videos"

src/files-and-videos/files-page/FilesPage.jsx

@@ -1,28 +1,28 @@
 import { useIntl } from '@edx/frontend-platform/i18n';
+
 import { Container } from '@openedx/paragon';
 import PropTypes from 'prop-types';
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import CourseFilesSlot from '../../plugin-slots/CourseFilesSlot';
-import Placeholder from '../../editors/Placeholder';
 
-import { RequestStatus } from '../../data/constants';
-import { useModel } from '../../generic/model-store';
-import getPageHeadTitle from '../../generic/utils';
-import EditFileAlertsSlot from '../../plugin-slots/EditFileAlertsSlot';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
+import CourseFilesSlot from '@src/plugin-slots/CourseFilesSlot';
+import Placeholder from '@src/editors/Placeholder';
+import { RequestStatus } from '@src/data/constants';
+import getPageHeadTitle from '@src/generic/utils';
+import EditFileAlertsSlot from '@src/plugin-slots/EditFileAlertsSlot';
+
 import { EditFileErrors } from '../generic';
 import { fetchAssets, resetErrors } from './data/thunks';
 import FilesPageProvider from './FilesPageProvider';
 import messages from './messages';
 import './FilesPage.scss';
 
-const FilesPage = ({
-  courseId,
-}) => {
+const FilesPage = () => {
   const intl = useIntl();
   const dispatch = useDispatch();
-  const courseDetails = useModel('courseDetails', courseId);
-  document.title = getPageHeadTitle(courseDetails?.name, intl.formatMessage(messages.heading));
+  const { courseId, courseDetails } = useCourseAuthoringContext();
+  document.title = getPageHeadTitle(courseDetails?.name || '', intl.formatMessage(messages.heading));
   const {
     loadingStatus,
     addingStatus: addAssetStatus,

src/files-and-videos/files-page/FilesPage.test.jsx

@@ -1,24 +1,21 @@
+
+import userEvent from '@testing-library/user-event';
+import ReactDOM from 'react-dom';
+import { saveAs } from 'file-saver';
+
+import { camelCaseObject } from '@edx/frontend-platform';
+
 import {
   render,
   fireEvent,
   screen,
   waitFor,
   within,
-} from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import ReactDOM from 'react-dom';
-import { saveAs } from 'file-saver';
-
-import { camelCaseObject, initializeMockApp } from '@edx/frontend-platform';
-import MockAdapter from 'axios-mock-adapter';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
-import { AppProvider } from '@edx/frontend-platform/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
-
-import initializeStore from '../../store';
-import { executeThunk } from '../../utils';
-import { RequestStatus } from '../../data/constants';
+  initializeMocks,
+} from '@src/testUtils';
+import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
+import { executeThunk } from '@src/utils';
+import { RequestStatus } from '@src/data/constants';
 import FilesPage from './FilesPage';
 import {
   generateFetchAssetApiResponse,
@@ -51,20 +48,16 @@ jest.mock('file-saver');
 
 const renderComponent = () => {
   render(
-    <IntlProvider locale="en">
-      <AppProvider store={store} wrapWithRouter={false}>
-        <MemoryRouter initialEntries={[`/course/${courseId}/videos`]}>
-          <Routes>
-            <Route
-              path="/course/:courseId/*"
-              element={
-                <FilesPage courseId={courseId} />
-              }
-            />
-          </Routes>
-        </MemoryRouter>
-      </AppProvider>
-    </IntlProvider>,
+    <CourseAuthoringProvider courseId={courseId}>
+      <FilesPage />,
+    </CourseAuthoringProvider>,
+    {
+      path: '/course/:courseId/*',
+      routerProps: {
+        initialEntries: [`/course/${courseId}/videos`],
+      },
+      params: { courseId },
+    },
   );
 };
 
@@ -91,24 +84,19 @@ const emptyMockStore = async (status) => {
 
 describe('FilesAndUploads', () => {
   describe('empty state', () => {
-    beforeEach(async () => {
-      initializeMockApp({
-        authenticatedUser: {
-          userId: 3,
-          username: 'abc123',
-          administrator: false,
-          roles: [],
-        },
-      });
-      store = initializeStore({
-        ...initialState,
-        assets: {
-          ...initialState.assets,
-          assetIds: [],
+    beforeEach(() => {
+      const mocks = initializeMocks({
+        initialState: {
+          ...initialState,
+          assets: {
+            ...initialState.assets,
+            assetIds: [],
+          },
+          models: {},
         },
-        models: {},
       });
-      axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+      store = mocks.reduxStore;
+      axiosMock = mocks.axiosMock;
       file = new File(['(⌐□_□)'], 'download.png', { type: 'image/png' });
     });
 
@@ -152,17 +140,19 @@ describe('FilesAndUploads', () => {
   });
 
   describe('valid assets', () => {
-    beforeEach(async () => {
-      initializeMockApp({
-        authenticatedUser: {
-          userId: 3,
-          username: 'abc123',
-          administrator: false,
-          roles: [],
+    beforeEach(() => {
+      const mocks = initializeMocks({
+        initialState: {
+          ...initialState,
+          assets: {
+            ...initialState.assets,
+            assetIds: [],
+          },
+          models: {},
         },
       });
-      store = initializeStore(initialState);
-      axiosMock = new MockAdapter(getAuthenticatedHttpClient());
+      store = mocks.reduxStore;
+      axiosMock = mocks.axiosMock;
       file = new File(['(⌐□_□)'], 'download.png', { type: 'image/png' });
       global.localStorage.clear();
     });