import { GlLink, GlForm } from '@gitlab/ui'; import { mountExtended } from 'helpers/vue_test_utils_helper'; import BubbleMenu from '~/content_editor/components/bubble_menus/bubble_menu.vue'; import MediaBubbleMenu from '~/content_editor/components/bubble_menus/media_bubble_menu.vue'; import { stubComponent } from 'helpers/stub_component'; import eventHubFactory from '~/helpers/event_hub_factory'; import Image from '~/content_editor/extensions/image'; import Audio from '~/content_editor/extensions/audio'; import Video from '~/content_editor/extensions/video'; import { createTestEditor, emitEditorEvent, mockChainedCommands } from '../../test_utils'; import { PROJECT_WIKI_ATTACHMENT_IMAGE_HTML, PROJECT_WIKI_ATTACHMENT_AUDIO_HTML, PROJECT_WIKI_ATTACHMENT_VIDEO_HTML, } from '../../test_constants'; const TIPTAP_IMAGE_HTML = `
\n \n
'); }); }); describe(`replace ${mediaType} button`, () => { it('uploads and replaces the selected image when file input changes', async () => { const commands = mockChainedCommands(tiptapEditor, [ 'focus', 'deleteSelection', 'uploadAttachment', 'run', ]); const file = new File(['foo'], 'foo.png', { type: 'image/png' }); await wrapper.findByTestId('replace-media').vm.$emit('click'); await selectFile(file); expect(commands.focus).toHaveBeenCalled(); expect(commands.deleteSelection).toHaveBeenCalled(); expect(commands.uploadAttachment).toHaveBeenCalledWith({ file }); expect(commands.run).toHaveBeenCalled(); }); }); describe('edit button', () => { let mediaSrcInput; let mediaTitleInput; let mediaAltInput; beforeEach(async () => { await wrapper.findByTestId('edit-media').vm.$emit('click'); mediaSrcInput = wrapper.findByTestId('media-src'); mediaTitleInput = wrapper.findByTestId('media-title'); mediaAltInput = wrapper.findByTestId('media-alt'); }); it('hides the link and copy/edit/remove link buttons', async () => { expectLinkButtonsToExist(false); }); it(`shows a form to edit the ${mediaType} src/title/alt`, () => { expect(wrapper.findComponent(GlForm).exists()).toBe(true); expect(mediaSrcInput.element.value).toBe(filePath); expect(mediaTitleInput.element.value).toBe(''); expect(mediaAltInput.element.value).toBe('test-file'); }); describe('after making changes in the form and clicking apply', () => { beforeEach(async () => { mediaSrcInput.setValue('https://gitlab.com/favicon.png'); mediaAltInput.setValue('gitlab favicon'); mediaTitleInput.setValue('gitlab favicon'); contentEditor.resolveUrl.mockResolvedValue('https://gitlab.com/favicon.png'); await wrapper.findComponent(GlForm).vm.$emit('submit', createFakeEvent()); }); it(`updates prosemirror doc with new src to the ${mediaType}`, async () => { expect(tiptapEditor.getHTML()).toBe(mediaOutputHTML); }); it(`updates the link to the ${mediaType} in the bubble menu`, () => { const link = wrapper.findComponent(GlLink); expect(link.attributes()).toEqual( expect.objectContaining({ href: 'https://gitlab.com/favicon.png', 'aria-label': 'https://gitlab.com/favicon.png', title: 'https://gitlab.com/favicon.png', target: '_blank', }), ); expect(link.text()).toBe('https://gitlab.com/favicon.png'); }); }); describe('after making changes in the form and clicking cancel', () => { beforeEach(async () => { mediaSrcInput.setValue('https://gitlab.com/favicon.png'); mediaAltInput.setValue('gitlab favicon'); mediaTitleInput.setValue('gitlab favicon'); await wrapper.findByTestId('cancel-editing-media').vm.$emit('click'); }); it('hides the form and shows the copy/edit/remove link buttons', () => { expectLinkButtonsToExist(); }); it(`resets the form with old values of the ${mediaType} from prosemirror`, async () => { // click edit once again to show the form back await wrapper.findByTestId('edit-media').vm.$emit('click'); mediaSrcInput = wrapper.findByTestId('media-src'); mediaTitleInput = wrapper.findByTestId('media-title'); mediaAltInput = wrapper.findByTestId('media-alt'); expect(mediaSrcInput.element.value).toBe(filePath); expect(mediaAltInput.element.value).toBe('test-file'); expect(mediaTitleInput.element.value).toBe(''); }); }); }); }, );