Commit 3243e275 authored by Himanshu Kapoor's avatar Himanshu Kapoor Committed by Enrique Alcántara

Add tests for inserting and updating links

parent 0eecc2c9
......@@ -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>
......
......@@ -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 ""
......
// 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 placeholder=\\"Link URL\\">
<b-input-group-stub tag=\\"div\\">
"<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\\">
<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\\">
<!---->
<!----> <span class=\\"gl-button-text\\">Apply</span></button></div>
<!---->
</div>
</div>
</form>
</li>
<!---->
<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>
<!---->
</div>
<!---->
</div>
</gl-dropdown-form-stub>
<!---->
<!---->
</gl-dropdown-stub>"
</ul>
</div>"
`;
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);
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment