1 files changed, 39 insertions, 13 deletions

diff --git a/spec/frontend/content_editor/components/toolbar_link_button_spec.js b/spec/frontend/content_editor/components/toolbar_link_button_spec.js
index 576a2912f72..0cf488260bd 100644
--- a/spec/frontend/content_editor/components/toolbar_link_button_spec.js
+++ b/spec/frontend/content_editor/components/toolbar_link_button_spec.js
@@ -1,9 +1,9 @@
-import { GlDropdown, GlDropdownDivider, GlButton, GlFormInputGroup } from '@gitlab/ui';
+import { GlDropdown, GlButton, GlFormInputGroup } from '@gitlab/ui';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import ToolbarLinkButton from '~/content_editor/components/toolbar_link_button.vue';
-import { tiptapExtension as Link } from '~/content_editor/extensions/link';
+import Link from '~/content_editor/extensions/link';
 import { hasSelection } from '~/content_editor/services/utils';
-import { createTestEditor, mockChainedCommands } from '../test_utils';
+import { createTestEditor, mockChainedCommands, emitEditorEvent } from '../test_utils';
 
 jest.mock('~/content_editor/services/utils');
 
@@ -13,21 +13,26 @@ describe('content_editor/components/toolbar_link_button', () => {
 
   const buildWrapper = () => {
     wrapper = mountExtended(ToolbarLinkButton, {
-      propsData: {
+      provide: {
         tiptapEditor: editor,
       },
     });
   };
   const findDropdown = () => wrapper.findComponent(GlDropdown);
-  const findDropdownDivider = () => wrapper.findComponent(GlDropdownDivider);
   const findLinkURLInput = () => wrapper.findComponent(GlFormInputGroup).find('input[type="text"]');
   const findApplyLinkButton = () => wrapper.findComponent(GlButton);
   const findRemoveLinkButton = () => wrapper.findByText('Remove link');
 
+  const selectFile = async (file) => {
+    const input = wrapper.find({ ref: 'fileSelector' });
+
+    // override the property definition because `input.files` isn't directly modifyable
+    Object.defineProperty(input.element, 'files', { value: [file], writable: true });
+    await input.trigger('change');
+  };
+
   beforeEach(() => {
-    editor = createTestEditor({
-      extensions: [Link],
-    });
+    editor = createTestEditor();
   });
 
   afterEach(() => {
@@ -45,14 +50,19 @@ describe('content_editor/components/toolbar_link_button', () => {
     beforeEach(async () => {
       jest.spyOn(editor, 'isActive').mockReturnValueOnce(true);
       buildWrapper();
+
+      await emitEditorEvent({ event: 'transaction', tiptapEditor: editor });
     });
 
     it('sets dropdown as active when link extension is active', () => {
       expect(findDropdown().props('toggleClass')).toEqual({ active: true });
     });
 
+    it('does not display the upload file option', () => {
+      expect(wrapper.findByText('Upload file').exists()).toBe(false);
+    });
+
     it('displays a remove link dropdown option', () => {
-      expect(findDropdownDivider().exists()).toBe(true);
       expect(wrapper.findByText('Remove link').exists()).toBe(true);
     });
 
@@ -90,7 +100,7 @@ describe('content_editor/components/toolbar_link_button', () => {
           href: '/username/my-project/uploads/abcdefgh133535/my-file.zip',
         });
 
-        await editor.emit('selectionUpdate', { editor });
+        await emitEditorEvent({ event: 'transaction', tiptapEditor: editor });
 
         expect(findLinkURLInput().element.value).toEqual('uploads/my-file.zip');
       });
@@ -100,14 +110,14 @@ describe('content_editor/components/toolbar_link_button', () => {
           href: 'https://gitlab.com',
         });
 
-        await editor.emit('selectionUpdate', { editor });
+        await emitEditorEvent({ event: 'transaction', tiptapEditor: editor });
 
         expect(findLinkURLInput().element.value).toEqual('https://gitlab.com');
       });
     });
   });
 
-  describe('when there is not an active link', () => {
+  describe('when there is no active link', () => {
     beforeEach(() => {
       jest.spyOn(editor, 'isActive');
       editor.isActive.mockReturnValueOnce(false);
@@ -118,8 +128,11 @@ describe('content_editor/components/toolbar_link_button', () => {
       expect(findDropdown().props('toggleClass')).toEqual({ active: false });
     });
 
+    it('displays the upload file option', () => {
+      expect(wrapper.findByText('Upload file').exists()).toBe(true);
+    });
+
     it('does not display a remove link dropdown option', () => {
-      expect(findDropdownDivider().exists()).toBe(false);
       expect(wrapper.findByText('Remove link').exists()).toBe(false);
     });
 
@@ -138,6 +151,19 @@ describe('content_editor/components/toolbar_link_button', () => {
 
       expect(wrapper.emitted().execute[0]).toEqual([{ contentType: 'link' }]);
     });
+
+    it('uploads the selected image when file input changes', async () => {
+      const commands = mockChainedCommands(editor, ['focus', 'uploadAttachment', 'run']);
+      const file = new File(['foo'], 'foo.png', { type: 'image/png' });
+
+      await selectFile(file);
+
+      expect(commands.focus).toHaveBeenCalled();
+      expect(commands.uploadAttachment).toHaveBeenCalledWith({ file });
+      expect(commands.run).toHaveBeenCalled();
+
+      expect(wrapper.emitted().execute[0]).toEqual([{ contentType: 'link' }]);
+    });
   });
 
   describe('when the user displays the dropdown', () => {