test: add tests for dispatching updateCourseDetailsOverview on mceFocus in TinyMCE editor

Author: bra-i-am

src/editors/sharedComponents/TinyMceWidget/hooks.test.js

@@ -10,6 +10,7 @@ import pluginConfig from './pluginConfig';
 // should be re-thought and cleaned up to avoid this pattern.
 // eslint-disable-next-line import/no-self-import
 import * as module from './hooks';
+import { updateCourseDetailsOverview } from '../../../schedule-and-details/data/slice';
 
 jest.mock('react', () => ({
   ...jest.requireActual('react'),
@@ -167,6 +168,97 @@ describe('TinyMceEditor hooks', () => {
         expect(openImgModal).not.toHaveBeenCalled();
         expect(editor.on).toHaveBeenCalled();
       });
+      test('dispatches updateCourseDetailsOverview if newContent exists on mceFocus', () => {
+        const dispatch = jest.fn();
+        const editorType = 'text';
+
+        const editor = {
+          ui: {
+            registry: {
+              addButton: jest.fn(),
+              addToggleButton: jest.fn(),
+              addIcon: jest.fn(),
+            },
+          },
+          on: jest.fn((event, callback) => {
+            if (event === 'ExecCommand') {
+              callback({ command: 'mceFocus' });
+            }
+          }),
+          getContent: jest.fn(() => '<p>Some content</p>'),
+          formatter: { remove: jest.fn(), formatChanged: jest.fn() },
+          undoManager: { add: jest.fn() },
+          focus: jest.fn(),
+        };
+
+        const replaceStaticWithAssetSpy = jest
+          .spyOn(module, 'replaceStaticWithAsset')
+          .mockReturnValue('<p>Updated content</p>');
+
+        const setup = module.setupCustomBehavior({
+          editorType,
+          updateContent: jest.fn(),
+          openImgModal: jest.fn(),
+          openSourceCodeModal: jest.fn(),
+          setImage: jest.fn(),
+          lmsEndpointUrl: 'http://example.com',
+          learningContextId: 'course-v1:test',
+          images: { current: [] },
+          dispatch,
+        });
+
+        setup(editor);
+
+        expect(dispatch).toHaveBeenCalledWith(updateCourseDetailsOverview('<p>Updated content</p>'));
+
+        replaceStaticWithAssetSpy.mockRestore();
+      });
+
+      test('does not dispatch updateCourseDetailsOverview if newContent is falsy on mceFocus', () => {
+        const dispatch = jest.fn();
+        const editorType = 'text';
+
+        const editor = {
+          ui: {
+            registry: {
+              addButton: jest.fn(),
+              addToggleButton: jest.fn(),
+              addIcon: jest.fn(),
+            },
+          },
+          on: jest.fn((event, callback) => {
+            if (event === 'ExecCommand') {
+              callback({ command: 'mceFocus' });
+            }
+          }),
+          getContent: jest.fn(() => '<p>Unchanged content</p>'),
+          formatter: { remove: jest.fn(), formatChanged: jest.fn() },
+          undoManager: { add: jest.fn() },
+          focus: jest.fn(),
+        };
+
+        const replaceStaticWithAssetSpy = jest
+          .spyOn(module, 'replaceStaticWithAsset')
+          .mockReturnValue(false);
+
+        const setup = module.setupCustomBehavior({
+          editorType,
+          updateContent: jest.fn(),
+          openImgModal: jest.fn(),
+          openSourceCodeModal: jest.fn(),
+          setImage: jest.fn(),
+          lmsEndpointUrl: 'http://example.com',
+          learningContextId: 'course-v1:test',
+          images: { current: [] },
+          dispatch,
+        });
+
+        setup(editor);
+
+        expect(dispatch).not.toHaveBeenCalled();
+
+        replaceStaticWithAssetSpy.mockRestore();
+      });
     });
 
     describe('parseContentForLabels', () => {