From adc21735fc4102fa461464fff2f45490e82c9a05 Mon Sep 17 00:00:00 2001
From: Raymond Zhou <56318341+rayzhou-bit@users.noreply.github.com>
Date: Thu, 4 May 2023 14:17:14 -0700
Subject: [PATCH] fix: expandable textarea should save on blur (#325)

---
 src/editors/data/services/cms/api.js          |  2 +-
 src/editors/data/services/cms/api.test.js     | 26 +++++++++++++++++++
 src/editors/data/services/cms/mockApi.js      |  6 +----
 .../sharedComponents/TinyMceWidget/hooks.js   |  2 ++
 .../TinyMceWidget/hooks.test.js               |  3 ++-
 5 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/editors/data/services/cms/api.js b/src/editors/data/services/cms/api.js
index 328db5522a..f43ff9fdfb 100644
--- a/src/editors/data/services/cms/api.js
+++ b/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];
 };
diff --git a/src/editors/data/services/cms/api.test.js b/src/editors/data/services/cms/api.test.js
index eb66719d7c..fa17b01288 100644
--- a/src/editors/data/services/cms/api.test.js
+++ b/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 };
diff --git a/src/editors/data/services/cms/mockApi.js b/src/editors/data/services/cms/mockApi.js
index d15eaae222..9b3de20aa2 100644
--- a/src/editors/data/services/cms/mockApi.js
+++ b/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({});
diff --git a/src/editors/sharedComponents/TinyMceWidget/hooks.js b/src/editors/sharedComponents/TinyMceWidget/hooks.js
index 9fe5a44d04..34a6ac6349 100644
--- a/src/editors/sharedComponents/TinyMceWidget/hooks.js
+++ b/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') {
diff --git a/src/editors/sharedComponents/TinyMceWidget/hooks.test.js b/src/editors/sharedComponents/TinyMceWidget/hooks.test.js
index 196617bd03..5078cc6809 100644
--- a/src/editors/sharedComponents/TinyMceWidget/hooks.test.js
+++ b/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();
       });
     });