diff options
Diffstat (limited to 'spec/frontend/vue_shared/components/rich_content_editor/rich_content_editor_spec.js')
-rw-r--r-- | spec/frontend/vue_shared/components/rich_content_editor/rich_content_editor_spec.js | 59 |
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); + }); + }); }); |