fix: expandable textarea should save on blur (openedx#325)

src/editors/data/services/cms/api.js

@@ -288,7 +288,7 @@ export const processLicense = (licenseType, licenseDetails) => {
 
 export const checkMockApi = (key) => {
   if (process.env.REACT_APP_DEVGALLERY) {
-    return mockApi[key];
+    return mockApi[key] ? mockApi[key] : mockApi.emptyMock;
   }
   return module.apiMethods[key];
 };

src/editors/data/services/cms/api.test.js

@@ -1,5 +1,6 @@
 import * as utils from '../../../utils';
 import * as api from './api';
+import * as mockApi from './mockApi';
 import * as urls from './urls';
 import { get, post, deleteObject } from './utils';
 
@@ -547,6 +548,31 @@ describe('cms api', () => {
       expect(api.processLicense(licenseType, licenseDetails)).toEqual('all-rights-reserved');
     });
   });
+  describe('checkMockApi', () => {
+    const envTemp = process.env;
+    beforeEach(() => {
+      jest.resetModules();
+      process.env = { ...envTemp };
+    });
+    afterEach(() => {
+      process.env = envTemp;
+    });
+    describe('if REACT_APP_DEVGALLERY is true', () => {
+      it('should return the mockApi version of a call when it exists', () => {
+        process.env.REACT_APP_DEVGALLERY = true;
+        expect(api.checkMockApi('fetchBlockById')).toEqual(mockApi.fetchBlockById);
+      });
+      it('should return an empty mock when the call does not exist', () => {
+        process.env.REACT_APP_DEVGALLERY = true;
+        expect(api.checkMockApi('someRAnDomThINg')).toEqual(mockApi.emptyMock);
+      });
+    });
+    describe('if REACT_APP_DEVGALLERY is not true', () => {
+      it('should return the appropriate call', () => {
+        expect(api.checkMockApi('fetchBlockById')).toEqual(apiMethods.fetchBlockById);
+      });
+    });
+  });
   describe('fetchVideoFeatures', () => {
     it('should call get with url.videoFeatures', () => {
       const args = { studioEndpointUrl, learningContextId };

src/editors/data/services/cms/mockApi.js

@@ -291,8 +291,4 @@ export const fetchStudioView = ({ blockId, studioEndpointUrl }) => {
   });
 };
 
-export const checkTranscriptsForImport = () => mockPromise({});
-
-export const uploadTranscript = () => mockPromise({});
-
-export const fetchAdvancedSettings = () => mockPromise({});
+export const emptyMock = () => mockPromise({});

src/editors/sharedComponents/TinyMceWidget/hooks.js

@@ -152,6 +152,8 @@ export const setupCustomBehavior = ({
         updateContent,
       });
     });
+    // TODO: consider using tinyMCE onblur for all react state updates
+    editor.on('blur', () => updateContent(editor.getContent()));
   }
   editor.on('ExecCommand', (e) => {
     if (editorType === 'text' && e.command === 'mceFocus') {

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

@@ -49,7 +49,7 @@ describe('TinyMceEditor hooks', () => {
         const openSourceCodeModal = jest.fn();
         const setImage = jest.fn();
         const updateContent = jest.fn();
-        const editorType = 'SOmeEDitor';
+        const editorType = 'expandable';
         const lmsEndpointUrl = 'sOmEvaLue.cOm';
         const editor = {
           ui: { registry: { addButton, addToggleButton, addIcon } },
@@ -88,6 +88,7 @@ describe('TinyMceEditor hooks', () => {
           }],
         ]);
         expect(openImgModal).not.toHaveBeenCalled();
+        expect(editor.on).toHaveBeenCalled();
       });
     });