UX: Better composer hyperlink modal (#8160)

This commit is contained in:
Penar Musaraj
2019-10-08 16:19:07 -04:00
committed by GitHub
parent 1ee633cea4
commit 30cda1761d
9 changed files with 154 additions and 130 deletions

View File

@@ -0,0 +1,73 @@
import { acceptance } from "helpers/qunit-helpers";
acceptance("Composer - Hyperlink", {
loggedIn: true
});
QUnit.test("add a hyperlink to a reply", async assert => {
await visit("/t/internationalization-localization/280");
await click(".topic-post:first-child button.reply");
await fillIn(".d-editor-input", "This is a link to ");
assert.equal(
find(".insert-link.modal-body").length,
0,
"no hyperlink modal by default"
);
await click(".d-editor button.link");
assert.equal(
find(".insert-link.modal-body").length,
1,
"hyperlink modal visible"
);
await fillIn(".modal-body .link-url", "google.com");
await fillIn(".modal-body .link-text", "Google");
await click(".modal-footer button.btn-primary");
assert.equal(
find(".d-editor-input").val(),
"This is a link to [Google](http://google.com)",
"adds link with url and text, prepends 'http://'"
);
assert.equal(
find(".insert-link.modal-body").length,
0,
"modal dismissed after submitting link"
);
await fillIn(".d-editor-input", "Reset textarea contents.");
await click(".d-editor button.link");
await fillIn(".modal-body .link-url", "google.com");
await fillIn(".modal-body .link-text", "Google");
await click(".modal-footer button.btn-danger");
assert.equal(
find(".d-editor-input").val(),
"Reset textarea contents.",
"adds link with url and text, prepends 'http://'"
);
assert.equal(
find(".insert-link.modal-body").length,
0,
"modal dismissed after cancelling"
);
const textarea = find("#reply-control .d-editor-input")[0];
textarea.selectionStart = 0;
textarea.selectionEnd = 6;
await click(".d-editor button.link");
await fillIn(".modal-body .link-url", "somelink.com");
await click(".modal-footer button.btn-primary");
assert.equal(
find(".d-editor-input").val(),
"[Reset](http://somelink.com) textarea contents.",
"adds link to a selected text"
);
});

View File

@@ -200,62 +200,6 @@ testCase(`italic with a multiline selection`, async function(assert, textarea) {
assert.equal(textarea.selectionEnd, 12);
});
testCase("link modal (cancel)", async function(assert) {
assert.equal(find(".insert-link.hidden").length, 1);
await click("button.link");
assert.equal(find(".insert-link.hidden").length, 0);
await click(".insert-link button.btn-danger");
assert.equal(find(".insert-link.hidden").length, 1);
assert.equal(this.value, "hello world.");
});
testCase("link modal (simple link)", async function(assert, textarea) {
await click("button.link");
const url = "http://eviltrout.com";
await fillIn(".insert-link input.link-url", url);
await click(".insert-link button.btn-primary");
assert.equal(find(".insert-link.hidden").length, 1);
assert.equal(this.value, `hello world.[${url}](${url})`);
assert.equal(textarea.selectionStart, 13);
assert.equal(textarea.selectionEnd, 13 + url.length);
});
testCase("link modal auto http addition", async function(assert) {
await click("button.link");
await fillIn(".insert-link input.link-url", "sam.com");
await click(".insert-link button.btn-primary");
assert.equal(this.value, `hello world.[sam.com](http://sam.com)`);
});
testCase("link modal (simple link) with selected text", async function(
assert,
textarea
) {
textarea.selectionStart = 0;
textarea.selectionEnd = 12;
await click("button.link");
assert.equal(find("input.link-text")[0].value, "hello world.");
await fillIn(".insert-link input.link-url", "http://eviltrout.com");
await click(".insert-link button.btn-primary");
assert.equal(find(".insert-link.hidden").length, 1);
assert.equal(this.value, "[hello world.](http://eviltrout.com)");
});
testCase("link modal (link with description)", async function(assert) {
await click("button.link");
await fillIn(".insert-link input.link-url", "http://eviltrout.com");
await fillIn(".insert-link input.link-text", "evil trout");
await click(".insert-link button.btn-primary");
assert.equal(find(".insert-link.hidden").length, 1);
assert.equal(this.value, "hello world.[evil trout](http://eviltrout.com)");
});
componentTest("advanced code", {
template: "{{d-editor value=value}}",
beforeEach() {