Add tests for inserting and updating links

app/assets/javascripts/content_editor/components/toolbar_link_button.vue

@@ -47,6 +47,8 @@ export default {
   methods: {
     updateLink() {
       this.tiptapEditor.chain().focus().unsetLink().setLink({ href: this.linkHref }).run();
+
+      this.$emit('execute', { contentType: linkContentType });
     },
     selectLink() {
       const { tiptapEditor } = this;
@@ -58,6 +60,8 @@ export default {
     },
     removeLink() {
       this.tiptapEditor.chain().focus().unsetLink().run();
+
+      this.$emit('execute', { contentType: linkContentType });
     },
   },
 };
@@ -73,7 +77,7 @@ export default {
     <gl-dropdown-form class="gl-px-3!">
       <gl-form-input-group v-model="linkHref" :placeholder="__('Link URL')">
         <template #append>
-          <gl-button variant="confirm" @click="updateLink">{{ __('Apply') }}</gl-button>
+          <gl-button variant="confirm" @click="updateLink()">{{ __('Apply') }}</gl-button>
         </template>
       </gl-form-input-group>
     </gl-dropdown-form>

locale/gitlab.pot

@@ -19817,6 +19817,9 @@ msgstr ""
 msgid "Link Sentry to GitLab to discover and view the errors your application generates."
 msgstr ""
 
+msgid "Link URL"
+msgstr ""
+
 msgid "Link an external wiki from the project's sidebar. %{docs_link}"
 msgstr ""
 
@@ -27372,6 +27375,9 @@ msgstr ""
 msgid "Remove limit"
 msgstr ""
 
+msgid "Remove link"
+msgstr ""
+
 msgid "Remove list"
 msgstr ""
 

spec/frontend/content_editor/components/__snapshots__/toolbar_link_button_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`content_editor/components/toolbar_link_button renders dropdown component 1`] = `
-"<gl-dropdown-stub headertext=\\"\\" hideheaderborder=\\"true\\" text=\\"\\" category=\\"tertiary\\" variant=\\"default\\" size=\\"small\\" icon=\\"link\\" toggleclass=\\"[object Object]\\">
-  <gl-dropdown-form-stub class=\\"gl-px-3!\\">
+"<div class=\\"dropdown b-dropdown gl-new-dropdown btn-group\\">
+  <!----><button aria-haspopup=\\"true\\" aria-expanded=\\"false\\" type=\\"button\\" class=\\"btn dropdown-toggle btn-default btn-sm gl-button gl-dropdown-toggle btn-default-tertiary dropdown-icon-only\\">
+    <!----> <svg data-testid=\\"link-icon\\" role=\\"img\\" aria-hidden=\\"true\\" class=\\"dropdown-icon gl-icon s16\\">
+      <use href=\\"#link\\"></use>
+    </svg> <span class=\\"gl-new-dropdown-button-text\\"></span> <svg data-testid=\\"chevron-down-icon\\" role=\\"img\\" aria-hidden=\\"true\\" class=\\"gl-button-icon dropdown-chevron gl-icon s16\\">
+      <use href=\\"#chevron-down\\"></use>
+    </svg></button>
+  <ul role=\\"menu\\" tabindex=\\"-1\\" class=\\"dropdown-menu\\">
+    <div class=\\"gl-new-dropdown-inner\\">
+      <!---->
+      <div class=\\"gl-new-dropdown-contents\\">
+        <li role=\\"presentation\\" class=\\"gl-px-3!\\">
+          <form tabindex=\\"-1\\" class=\\"b-dropdown-form gl-p-0\\">
             <div placeholder=\\"Link URL\\">
-      <b-input-group-stub tag=\\"div\\">
+              <div role=\\"group\\" class=\\"input-group\\">
+                <!---->
+                <!----> <input type=\\"text\\" placeholder=\\"Link URL\\" class=\\"gl-form-input form-control\\">
+                <div class=\\"input-group-append\\"><button type=\\"button\\" class=\\"btn btn-confirm btn-md gl-button\\">
                     <!---->
-        <b-form-input-stub value=\\"\\" placeholder=\\"Link URL\\" debounce=\\"0\\" type=\\"text\\" class=\\"gl-form-input\\"></b-form-input-stub>
-        <b-input-group-append-stub tag=\\"div\\">
-          <gl-button-stub category=\\"primary\\" variant=\\"confirm\\" size=\\"medium\\" icon=\\"\\" buttontextclasses=\\"\\">Apply</gl-button-stub>
-        </b-input-group-append-stub>
-      </b-input-group-stub>
+                    <!----> <span class=\\"gl-button-text\\">Apply</span></button></div>
+                <!---->
+              </div>
             </div>
-  </gl-dropdown-form-stub>
+          </form>
+        </li>
         <!---->
         <!---->
-</gl-dropdown-stub>"
+      </div>
+      <!---->
+    </div>
+  </ul>
+</div>"
 `;

spec/frontend/content_editor/components/toolbar_link_button_spec.js

-import { GlDropdown, GlDropdownDivider, GlDropdownItem, GlFormInputGroup } from '@gitlab/ui';
-import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { GlDropdown, GlDropdownDivider, GlFormInputGroup, GlButton } 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 { hasSelection } from '~/content_editor/services/utils';
@@ -12,7 +12,7 @@ describe('content_editor/components/toolbar_link_button', () => {
   let editor;
 
   const buildWrapper = () => {
-    wrapper = shallowMountExtended(ToolbarLinkButton, {
+    wrapper = mountExtended(ToolbarLinkButton, {
       propsData: {
         tiptapEditor: editor,
       },
@@ -23,7 +23,9 @@ describe('content_editor/components/toolbar_link_button', () => {
   };
   const findDropdown = () => wrapper.findComponent(GlDropdown);
   const findDropdownDivider = () => wrapper.findComponent(GlDropdownDivider);
-  const findDropdownItem = () => wrapper.findComponent(GlDropdownItem);
+  const findLinkURLInput = () => wrapper.findComponent(GlFormInputGroup).find('input[type="text"]');
+  const findApplyLinkButton = () => wrapper.findComponent(GlButton);
+  const findRemoveLinkButton = () => wrapper.findByText('Remove link');
 
   beforeEach(() => {
     editor = createTestEditor({
@@ -58,15 +60,27 @@ describe('content_editor/components/toolbar_link_button', () => {
       expect(wrapper.findByText('Remove link').exists()).toBe(true);
     });
 
-    it('executes removeLink command when the remove link option is clicked', () => {
+    it('executes removeLink command when the remove link option is clicked', async () => {
       const commands = mockChainedCommands(editor, ['focus', 'unsetLink', 'run']);
 
-      findDropdownItem().vm.$emit('click');
+      await findRemoveLinkButton().trigger('click');
 
       expect(commands.unsetLink).toHaveBeenCalled();
       expect(commands.focus).toHaveBeenCalled();
       expect(commands.run).toHaveBeenCalled();
     });
+
+    it('updates the link with a new link when "Apply" button is clicked', async () => {
+      const commands = mockChainedCommands(editor, ['focus', 'unsetLink', 'setLink', 'run']);
+
+      await findLinkURLInput().setValue('https://example');
+      await findApplyLinkButton().trigger('click');
+
+      expect(commands.focus).toHaveBeenCalled();
+      expect(commands.unsetLink).toHaveBeenCalled();
+      expect(commands.setLink).toHaveBeenCalledWith({ href: 'https://example' });
+      expect(commands.run).toHaveBeenCalled();
+    });
   });
 
   describe('when there is not an active link', () => {
@@ -84,6 +98,17 @@ describe('content_editor/components/toolbar_link_button', () => {
       expect(findDropdownDivider().exists()).toBe(false);
       expect(wrapper.findByText('Remove link').exists()).toBe(false);
     });
+
+    it('sets the link to the value in the URL input when "Apply" button is clicked', async () => {
+      const commands = mockChainedCommands(editor, ['focus', 'unsetLink', 'setLink', 'run']);
+
+      await findLinkURLInput().setValue('https://example');
+      await findApplyLinkButton().trigger('click');
+
+      expect(commands.focus).toHaveBeenCalled();
+      expect(commands.setLink).toHaveBeenCalledWith({ href: 'https://example' });
+      expect(commands.run).toHaveBeenCalled();
+    });
   });
 
   describe('when the user displays the dropdown', () => {
@@ -92,6 +117,7 @@ describe('content_editor/components/toolbar_link_button', () => {
     beforeEach(() => {
       commands = mockChainedCommands(editor, ['focus', 'extendMarkRange', 'run']);
     });
+
     describe('given the user has not selected text', () => {
       beforeEach(() => {
         hasSelection.mockReturnValueOnce(false);