test: refactor editor test rendering

Author: bradenmacdonald

src/editors/containers/VideoEditor/components/VideoEditorModal.test.tsx

@@ -1,98 +1,59 @@
-import { render, waitFor, act } from '@testing-library/react';
-import { configureStore } from '@reduxjs/toolkit';
-import { MemoryRouter } from 'react-router-dom';
-import { AppProvider } from '@edx/frontend-platform/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { initializeMockApp } from '@edx/frontend-platform';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { thunkActions } from '@src/editors/data/redux';
 import VideoEditorModal from './VideoEditorModal';
-import { thunkActions } from '../../../data/redux';
+import { initializeMocks, waitFor, act } from '@src/testUtils';
+import editorRender, { getEditorStore, PartialEditorState } from '@src/editors/editorTestRender';
 
-jest.mock('../../../data/redux', () => ({
-  ...jest.requireActual('../../../data/redux'),
-  thunkActions: {
-    video: {
-      loadVideoData: jest
-        .fn()
-        .mockImplementation(() => ({ type: 'MOCK_ACTION' })),
-    },
-  },
-}));
+thunkActions.video.loadVideoData = jest.fn().mockImplementation(() => ({ type: 'MOCK_ACTION' }));
 
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      retry: false,
+const initialState: PartialEditorState = {
+  app: {
+    videos: [],
+    learningContextId: 'course-v1:test+test+test',
+    blockId: 'some-block-id',
+    courseDetails: {},
+  },
+  requests: {
+    uploadAsset: { status: 'inactive', response: {} as any },
+    uploadTranscript: { status: 'inactive', response: {} as any },
+    deleteTranscript: { status: 'inactive', response: {} as any },
+    fetchVideos: { status: 'inactive', response: {} as any },
+  },
+  video: {
+    videoSource: '',
+    videoId: '',
+    fallbackVideos: ['', ''],
+    allowVideoDownloads: false,
+    allowVideoSharing: { level: 'block', value: false },
+    thumbnail: null,
+    transcripts: [],
+    selectedVideoTranscriptUrls: {},
+    allowTranscriptDownloads: false,
+    duration: {
+      startTime: '00:00:00',
+      stopTime: '00:00:00',
+      total: '00:00:00',
     },
   },
-});
+};
 
 describe('VideoUploader', () => {
-  let store;
-
   beforeEach(async () => {
-    store = configureStore({
-      reducer: (state, action) => (action && action.newState ? action.newState : state),
-      preloadedState: {
-        app: {
-          videos: [],
-          learningContextId: 'course-v1:test+test+test',
-          blockId: 'some-block-id',
-          courseDetails: {},
-        },
-        requests: {
-          uploadAsset: { status: 'inactive' },
-          uploadTranscript: { status: 'inactive' },
-          deleteTranscript: { status: 'inactive' },
-          fetchVideos: { status: 'inactive' },
-        },
-        video: {
-          videoSource: '',
-          videoId: '',
-          fallbackVideos: ['', ''],
-          allowVideoDownloads: false,
-          allowVideoSharing: { level: 'block', value: false },
-          thumbnail: null,
-          transcripts: [],
-          transcriptHandlerUrl: '',
-          selectedVideoTranscriptUrls: {},
-          allowTranscriptDownloads: false,
-          duration: {
-            startTime: '00:00:00',
-            stopTime: '00:00:00',
-            total: '00:00:00',
-          },
-        },
-      },
-    });
-    initializeMockApp({
-      authenticatedUser: {
-        userId: 3,
-        username: 'test-user',
-        administrator: true,
-        roles: [],
-      },
-    });
+    initializeMocks();
   });
 
-  const renderComponent = async () => render(
-    <AppProvider store={store} wrapWithRouter={false}>
-      <IntlProvider locale="en">
-        <QueryClientProvider client={queryClient}>
-          <MemoryRouter
-            initialEntries={[
-              '/some/path?selectedVideoId=id_1&selectedVideoUrl=https://video.com',
-            ]}
-          >
-            <VideoEditorModal isLibrary={false} />
-          </MemoryRouter>
-        </QueryClientProvider>
-      </IntlProvider>
-    </AppProvider>,
+  const renderComponent = () => editorRender(
+    <VideoEditorModal isLibrary={false} />,
+    {
+      path: '/some/path',
+      routerProps: {
+        initialEntries: ['/some/path?selectedVideoId=id_1&selectedVideoUrl=https://video.com'],
+      },
+      initialState,
+    }
   );
 
   it('should render the component and call loadVideoData with correct parameters', async () => {
-    await renderComponent();
+    renderComponent();
     await waitFor(() => {
       expect(thunkActions.video.loadVideoData).toHaveBeenCalledWith(
         'id_1',
@@ -102,10 +63,11 @@ describe('VideoUploader', () => {
   });
 
   it('should call loadVideoData again when isLoaded state changes', async () => {
-    await renderComponent();
+    renderComponent();
     await waitFor(() => {
-      expect(thunkActions.video.loadVideoData).toHaveBeenCalledTimes(2);
+      expect(thunkActions.video.loadVideoData).toHaveBeenCalledTimes(1);
     });
+    const store = getEditorStore();
 
     act(() => {
       store.dispatch({
@@ -121,7 +83,7 @@ describe('VideoUploader', () => {
     });
 
     await waitFor(() => {
-      expect(thunkActions.video.loadVideoData).toHaveBeenCalledTimes(3);
+      expect(thunkActions.video.loadVideoData).toHaveBeenCalledTimes(2);
     });
   });
 });

src/editors/data/redux/index.ts

@@ -24,6 +24,10 @@ const rootReducer = (state: any, action: any) => {
   if (action.type === 'resetEditor') {
     return editorReducer(undefined, action);
   }
+  // For test purposes only:
+  if (action.type === 'UPDATE_STATE') {
+    return action.newState;
+  }
 
   return editorReducer(state, action);
 };

src/editors/editorTestRender.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { type Store } from 'redux';
+import { render as baseRender, type RouteOptions } from '../testUtils';
+import { EditorContextProvider } from './EditorContext';
+import { createStore } from './data/store';
+import { EditorState } from './data/redux';
+
+/**
+ * Partial<EditorState> only allows top-level keys to be missing. This is an
+ * even more partial state that allows sub-keys to be missing.
+ */
+export type PartialEditorState = {
+  [P in keyof EditorState]?: Partial<EditorState[P]> | undefined;
+};
+
+interface Options {
+  learningContextId?: string;
+  initialState?: PartialEditorState;
+}
+
+let editorStore: Store<EditorState>;
+
+/**
+ * Custom render function for testing React components with the editor context and Redux store.
+ *
+ * Wraps the provided UI in both the EditorContextProvider and Redux Provider,
+ * ensuring that components under test have access to the necessary context and store.
+ *
+ * @param {React.ReactElement} ui - The React element to render.
+ * @param options - Options
+ * @returns {RenderResult} The result of the render, as returned by RTL render.
+ */
+export const editorRender = (ui, {
+  learningContextId = 'course-v1:Org+COURSE+RUN',
+  initialState = undefined,
+  ...routerOptions
+}: Options & RouteOptions = {}) => {
+  editorStore = createStore(initialState);
+  return baseRender(ui, {
+    extraWrapper: ({ children }) => (
+      <EditorContextProvider learningContextId={learningContextId}>
+        <Provider store={editorStore}>
+          {children}
+        </Provider>
+      </EditorContextProvider>
+    ),
+    ...routerOptions,
+  });
+};
+
+export function getEditorStore() {
+  return editorStore;
+}
+
+export default editorRender;

src/editors/editorTestRender.tsx

@@ -155,17 +155,14 @@ const defaultUser = {
  *
  * Returns the new `axiosMock` in case you need to mock out axios requests.
  */
-export function initializeMocks({ user = defaultUser, initialState = undefined, customReduxStoreCreator = null }: {
+export function initializeMocks({ user = defaultUser, initialState = undefined }: {
   user?: { userId: number, username: string },
   initialState?: Record<string, any>, // TODO: proper typing for our redux state
-  customReduxStoreCreator?: ((preLoadedState: Record<string, any>) => Store) | null,
 } = {}) {
   initializeMockApp({
     authenticatedUser: user,
   });
-  // Use a custom redux store creator if provided
-  // e.g. use a different store like `createStore` of src/editors/data/store.ts which changes the redux state shape
-  reduxStore = customReduxStoreCreator?.(initialState as any) ?? initializeReduxStore(initialState as any);
+  reduxStore = initializeReduxStore(initialState as any);
   queryClient = new QueryClient({
     defaultOptions: {
       queries: {