1 files changed, 59 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/components/rich_content_editor/rich_content_editor_spec.js b/spec/frontend/vue_shared/components/rich_content_editor/rich_content_editor_spec.js
index 549d89171c6..0db10389df4 100644
--- a/spec/frontend/vue_shared/components/rich_content_editor/rich_content_editor_spec.js
+++ b/spec/frontend/vue_shared/components/rich_content_editor/rich_content_editor_spec.js
@@ -1,17 +1,33 @@
 import { shallowMount } from '@vue/test-utils';
 import RichContentEditor from '~/vue_shared/components/rich_content_editor/rich_content_editor.vue';
+import AddImageModal from '~/vue_shared/components/rich_content_editor/modals/add_image_modal.vue';
 import {
   EDITOR_OPTIONS,
   EDITOR_TYPES,
   EDITOR_HEIGHT,
   EDITOR_PREVIEW_STYLE,
+  CUSTOM_EVENTS,
 } from '~/vue_shared/components/rich_content_editor/constants';
 
+import {
+  addCustomEventListener,
+  removeCustomEventListener,
+  addImage,
+} from '~/vue_shared/components/rich_content_editor/editor_service';
+
+jest.mock('~/vue_shared/components/rich_content_editor/editor_service', () => ({
+  ...jest.requireActual('~/vue_shared/components/rich_content_editor/editor_service'),
+  addCustomEventListener: jest.fn(),
+  removeCustomEventListener: jest.fn(),
+  addImage: jest.fn(),
+}));
+
 describe('Rich Content Editor', () => {
   let wrapper;
 
   const value = '## Some Markdown';
   const findEditor = () => wrapper.find({ ref: 'editor' });
+  const findAddImageModal = () => wrapper.find(AddImageModal);
 
   beforeEach(() => {
     wrapper = shallowMount(RichContentEditor, {
@@ -56,4 +72,47 @@ describe('Rich Content Editor', () => {
       expect(wrapper.emitted().input[0][0]).toBe(changedMarkdown);
     });
   });
+
+  describe('when editor is loaded', () => {
+    it('adds the CUSTOM_EVENTS.openAddImageModal custom event listener', () => {
+      const mockEditorApi = { eventManager: { addEventType: jest.fn(), listen: jest.fn() } };
+      findEditor().vm.$emit('load', mockEditorApi);
+
+      expect(addCustomEventListener).toHaveBeenCalledWith(
+        mockEditorApi,
+        CUSTOM_EVENTS.openAddImageModal,
+        wrapper.vm.onOpenAddImageModal,
+      );
+    });
+  });
+
+  describe('when editor is destroyed', () => {
+    it('removes the CUSTOM_EVENTS.openAddImageModal custom event listener', () => {
+      const mockEditorApi = { eventManager: { removeEventHandler: jest.fn() } };
+
+      wrapper.vm.editorApi = mockEditorApi;
+      wrapper.vm.$destroy();
+
+      expect(removeCustomEventListener).toHaveBeenCalledWith(
+        mockEditorApi,
+        CUSTOM_EVENTS.openAddImageModal,
+        wrapper.vm.onOpenAddImageModal,
+      );
+    });
+  });
+
+  describe('add image modal', () => {
+    it('renders an addImageModal component', () => {
+      expect(findAddImageModal().exists()).toBe(true);
+    });
+
+    it('calls the onAddImage method when the addImage event is emitted', () => {
+      const mockImage = { imageUrl: 'some/url.png', description: 'some description' };
+      const mockInstance = { exec: jest.fn() };
+      wrapper.vm.$refs.editor = mockInstance;
+
+      findAddImageModal().vm.$emit('addImage', mockImage);
+      expect(addImage).toHaveBeenCalledWith(mockInstance, mockImage);
+    });
+  });
 });