test: replacing snapshot tests with RTL tests part 14 (#2236)

Author: jacobo-dominguez-wgu

src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,62 @@
+import React from 'react';
+import { render, screen, initializeMocks } from '@src/testUtils';
+import { formatMessage } from '@src/editors/testUtils';
+import { QuestionWidgetInternal as QuestionWidget } from '.';
+
+jest.mock('@src/editors/data/redux', () => ({
+  __esModule: true,
+  default: jest.fn(),
+  actions: {
+    problem: {
+      updateQuestion: jest.fn().mockName('actions.problem.updateQuestion'),
+    },
+  },
+  selectors: {
+    app: {
+      learningContextId: jest.fn(state => ({ learningContextId: state })),
+      images: jest.fn(state => ({ images: state })),
+      isLibrary: jest.fn(state => ({ isLibrary: state })),
+      blockId: jest.fn(state => ({ blockId: state })),
+    },
+    problem: {
+      question: jest.fn(state => ({ question: state })),
+    },
+  },
+  thunkActions: {
+    video: {
+      importTranscript: jest.fn(),
+    },
+  },
+}));
+
+jest.mock('@src/editors/sharedComponents/TinyMceWidget/hooks', () => ({
+  ...jest.requireActual('../../../../../sharedComponents/TinyMceWidget/hooks'),
+  prepareEditorRef: jest.fn(() => ({
+    refReady: true,
+    setEditorRef: jest.fn().mockName('prepareEditorRef.setEditorRef'),
+  })),
+}));
+
+jest.mock('@src/editors/sharedComponents/TinyMceWidget', () => ('TinyMceWidget'));
+
+describe('QuestionWidget', () => {
+  const props = {
+    question: 'This is my question',
+    updateQuestion: jest.fn(),
+    learningContextId: 'course+org+run',
+    images: {},
+    isLibrary: false,
+    blockId: '',
+    // injected
+    intl: { formatMessage },
+  };
+  describe('render', () => {
+    beforeEach(() => {
+      initializeMocks();
+    });
+    test('renders correct default', () => {
+      render(<QuestionWidget {...props} />);
+      expect(screen.getByText('Question')).toBeInTheDocument();
+    });
+  });
+});

src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.test.jsx

@@ -1,49 +1,85 @@
-import 'CourseAuthoring/editors/setupEditorTest';
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { formatMessage } from '../../testUtils';
+import { render, initializeMocks } from '@src/testUtils';
 import VideoEditor from '.';
+import * as hooks from './hooks';
+
+const reduxSelectors = require('../../data/redux').selectors;
 
 jest.mock('../EditorContainer', () => 'EditorContainer');
 jest.mock('./components/VideoEditorModal', () => 'VideoEditorModal');
 
-jest.mock('./hooks', () => ({
-  ErrorContext: {
-    Provider: 'ErrorContext.Provider',
-  },
-  errorsHook: jest.fn(() => ({
-    error: 'hooks.errorsHook.error',
-    validateEntry: jest.fn().mockName('validateEntry'),
-  })),
-  fetchVideoContent: jest.fn().mockName('fetchVideoContent'),
-}));
-
-jest.mock('../../data/redux', () => ({
-  selectors: {
-    requests: {
-      isFinished: jest.fn((state, params) => ({ isFailed: { state, params } })),
-    },
-    app: {
-      isLibrary: jest.fn(state => ({ isLibrary: state })),
-    },
-  },
-}));
-
-jest.mock('@openedx/paragon', () => ({
-  ...jest.requireActual('@openedx/paragon'),
-  Spinner: 'Spinner',
-}));
-
 describe('VideoEditor', () => {
   const props = {
     onClose: jest.fn().mockName('props.onClose'),
-    intl: { formatMessage },
-    studioViewFinished: false,
-    isLibrary: false,
+    returnFunction: jest.fn().mockName('props.returnFunction'),
   };
-  describe('snapshots', () => {
-    test('renders as expected with default behavior', () => {
-      expect(shallow(<VideoEditor {...props} />).snapshot).toMatchSnapshot();
+
+  describe('conditional rendering', () => {
+    let isFinishedSpy: jest.SpyInstance;
+    let isLibrarySpy: jest.SpyInstance;
+    let shouldCreateBlockSpy: jest.SpyInstance;
+    let errorsHookSpy: jest.SpyInstance;
+    let fetchVideoContentSpy: jest.SpyInstance;
+
+    beforeEach(() => {
+      isFinishedSpy = jest.spyOn(reduxSelectors.requests, 'isFinished');
+      isLibrarySpy = jest.spyOn(reduxSelectors.app, 'isLibrary');
+      shouldCreateBlockSpy = jest.spyOn(reduxSelectors.app, 'shouldCreateBlock');
+      errorsHookSpy = jest.spyOn(hooks, 'errorsHook');
+      fetchVideoContentSpy = jest.spyOn(hooks, 'fetchVideoContent');
+      errorsHookSpy.mockReturnValue({ error: null, validateEntry: jest.fn() });
+      fetchVideoContentSpy.mockReturnValue(jest.fn());
+      isLibrarySpy.mockReturnValue(false);
+      initializeMocks();
+    });
+
+    afterEach(() => {
+      jest.clearAllMocks();
+    });
+
+    test('shows spinner when neither create workflow nor studio view finished', () => {
+      isFinishedSpy.mockReturnValue(false);
+      shouldCreateBlockSpy.mockReturnValue(false);
+      const { container } = render(<VideoEditor {...props} />);
+      expect(container.querySelector('.pgn__spinner')).toBeInTheDocument();
+      expect(container.querySelector('EditorContainer')).toBeInTheDocument();
+      expect(container.querySelector('VideoEditorModal')).not.toBeInTheDocument();
+    });
+
+    test('shows VideoEditorModal when isCreateWorkflow is true', () => {
+      isFinishedSpy.mockReturnValue(false);
+      shouldCreateBlockSpy.mockReturnValue(true);
+      const { container } = render(<VideoEditor {...props} />);
+      expect(container.querySelector('.pgn__spinner')).not.toBeInTheDocument();
+      expect(container.querySelector('EditorContainer')).toBeInTheDocument();
+      expect(container.querySelector('VideoEditorModal')).toBeInTheDocument();
+    });
+
+    test('shows VideoEditorModal when studioViewFinished is true', () => {
+      isFinishedSpy.mockReturnValue(true);
+      shouldCreateBlockSpy.mockReturnValue(false);
+
+      const { container } = render(<VideoEditor {...props} />);
+      expect(container.querySelector('.pgn__spinner')).not.toBeInTheDocument();
+      expect(container.querySelector('EditorContainer')).toBeInTheDocument();
+      expect(container.querySelector('VideoEditorModal')).toBeInTheDocument();
+    });
+
+    test('passes isLibrary, onClose, and returnFunction to VideoEditorModal', () => {
+      isFinishedSpy.mockReturnValue(true);
+      shouldCreateBlockSpy.mockReturnValue(false);
+      isLibrarySpy.mockReturnValue(true);
+
+      const { container } = render(<VideoEditor {...props} />);
+      expect(container.querySelector('.video-editor')).toBeInTheDocument();
+    });
+
+    test('calls fetchVideoContent and passes validateEntry to EditorContainer', () => {
+      isFinishedSpy.mockReturnValue(true);
+      shouldCreateBlockSpy.mockReturnValue(false);
+
+      render(<VideoEditor {...props} />);
+      expect(fetchVideoContentSpy).toHaveBeenCalled();
+      expect(errorsHookSpy).toHaveBeenCalled();
     });
   });
 });