test: enhance VideoEditorModal mock initialization

Author: bra-i-am

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

@@ -1,98 +1,58 @@
-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 { initializeMocks, waitFor, act } from '@src/testUtils';
+import editorRender, { getEditorStore, PartialEditorState } from '@src/editors/editorTestRender';
 import VideoEditorModal from './VideoEditorModal';
-import { thunkActions } from '../../../data/redux';
 
-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} />,
+    {
+      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 +62,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 +82,7 @@ describe('VideoUploader', () => {
     });
 
     await waitFor(() => {
-      expect(thunkActions.video.loadVideoData).toHaveBeenCalledTimes(3);
+      expect(thunkActions.video.loadVideoData).toHaveBeenCalledTimes(2);
     });
   });
 });

src/editors/data/redux/index.ts

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

src/editors/editorTestRender.tsx

@@ -1,15 +1,19 @@
 import React from 'react';
 import { Provider } from 'react-redux';
+import { Store } from 'redux';
 import { render as baseRender, WrapperOptions } from '../testUtils';
 import { EditorContextProvider } from './EditorContext';
-import { type EditorState, initializeStore } from './data/redux'; // adjust path if needed
+import { createStore } from './data/store';
+import { type EditorState } from './data/redux'; // adjust path if needed
 
 type RecursivePartial<T> = {
   [P in keyof T]?: RecursivePartial<T[P]>;
 };
 
 export type PartialEditorState = RecursivePartial<EditorState>;
 
+let editorStore: Store<EditorState>;
+
 /**
  * Custom render function for testing React components with the editor context and Redux store.
  *
@@ -27,16 +31,20 @@ export const editorRender = (
 ) => {
   // We might need a way for the test cases to access this store directly. In that case we could allow either an
   // initialState parameter OR an editorStore parameter.
-  const store = initializeStore(initialState as any);
+  editorStore = createStore(initialState);
 
   return baseRender(ui, {
     ...options,
     extraWrapper: ({ children }) => (
       <EditorContextProvider learningContextId={learningContextId}>
-        <Provider store={store}>
+        <Provider store={editorStore}>
           {children}
         </Provider>
       </EditorContextProvider>
     ),
   });
 };
+
+export function getEditorStore() {
+  return editorStore;
+}