Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gitlab-ce
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
1
Merge Requests
1
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
nexedi
gitlab-ce
Commits
3243e275
Commit
3243e275
authored
Jun 07, 2021
by
Himanshu Kapoor
Committed by
Enrique Alcántara
Jun 08, 2021
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Add tests for inserting and updating links
parent
0eecc2c9
Changes
4
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
73 additions
and
20 deletions
+73
-20
app/assets/javascripts/content_editor/components/toolbar_link_button.vue
...scripts/content_editor/components/toolbar_link_button.vue
+5
-1
locale/gitlab.pot
locale/gitlab.pot
+6
-0
spec/frontend/content_editor/components/__snapshots__/toolbar_link_button_spec.js.snap
...components/__snapshots__/toolbar_link_button_spec.js.snap
+30
-13
spec/frontend/content_editor/components/toolbar_link_button_spec.js
...end/content_editor/components/toolbar_link_button_spec.js
+32
-6
No files found.
app/assets/javascripts/content_editor/components/toolbar_link_button.vue
View file @
3243e275
...
...
@@ -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
View file @
3243e275
...
...
@@ -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
View file @
3243e275
// 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>"
`;
spec/frontend/content_editor/components/toolbar_link_button_spec.js
View file @
3243e275
import
{
GlDropdown
,
GlDropdownDivider
,
Gl
DropdownItem
,
GlFormInputGroup
}
from
'
@gitlab/ui
'
;
import
{
shallowM
ountExtended
}
from
'
helpers/vue_test_utils_helper
'
;
import
{
GlDropdown
,
GlDropdownDivider
,
Gl
FormInputGroup
,
GlButton
}
from
'
@gitlab/ui
'
;
import
{
m
ountExtended
}
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
=
shallowM
ountExtended
(
ToolbarLinkButton
,
{
wrapper
=
m
ountExtended
(
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
);
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment