discourse/test/javascripts/components/d-editor-test.js.es6

816 lines
22 KiB
Plaintext
Raw Normal View History

2018-06-15 23:03:24 +08:00
import componentTest from "helpers/component-test";
2019-06-12 07:19:52 +08:00
// import { withPluginApi } from "discourse/lib/plugin-api";
import formatTextWithSelection from "helpers/d-editor-helper";
import {
setTextareaSelection,
getTextareaSelection
} from "helpers/textarea-selection-helper";
2018-06-15 23:03:24 +08:00
moduleForComponent("d-editor", { integration: true });
2018-06-15 23:03:24 +08:00
componentTest("preview updates with markdown", {
template: "{{d-editor value=value}}",
2018-07-30 04:51:32 +08:00
async test(assert) {
assert.ok(find(".d-editor-button-bar").length);
2018-07-30 04:51:32 +08:00
await fillIn(".d-editor-input", "hello **world**");
assert.equal(this.value, "hello **world**");
2018-07-30 04:51:32 +08:00
assert.equal(
find(".d-editor-preview")
2018-07-30 04:51:32 +08:00
.html()
.trim(),
"<p>hello <strong>world</strong></p>"
);
}
});
2018-06-15 23:03:24 +08:00
componentTest("preview sanitizes HTML", {
template: "{{d-editor value=value}}",
2018-07-30 04:51:32 +08:00
async test(assert) {
await fillIn(".d-editor-input", `"><svg onload="prompt(/xss/)"></svg>`);
assert.equal(
find(".d-editor-preview")
2018-07-30 04:51:32 +08:00
.html()
.trim(),
'<p>"&gt;</p>'
);
}
});
2018-06-15 23:03:24 +08:00
componentTest("updating the value refreshes the preview", {
template: "{{d-editor value=value}}",
2017-06-15 01:57:58 +08:00
beforeEach() {
2018-06-15 23:03:24 +08:00
this.set("value", "evil trout");
},
2018-07-30 04:51:32 +08:00
async test(assert) {
2018-06-15 23:03:24 +08:00
assert.equal(
find(".d-editor-preview")
2018-06-15 23:03:24 +08:00
.html()
.trim(),
"<p>evil trout</p>"
);
2018-07-30 04:51:32 +08:00
await this.set("value", "zogstrip");
assert.equal(
find(".d-editor-preview")
2018-07-30 04:51:32 +08:00
.html()
.trim(),
"<p>zogstrip</p>"
2018-06-15 23:03:24 +08:00
);
}
});
function jumpEnd(textarea) {
textarea.selectionStart = textarea.value.length;
textarea.selectionEnd = textarea.value.length;
return textarea;
}
function testCase(title, testFunc) {
componentTest(title, {
2018-06-15 23:03:24 +08:00
template: "{{d-editor value=value}}",
2017-06-15 01:57:58 +08:00
beforeEach() {
2018-06-15 23:03:24 +08:00
this.set("value", "hello world.");
},
test(assert) {
const textarea = jumpEnd(find("textarea.d-editor-input")[0]);
testFunc.call(this, assert, textarea);
}
});
}
function composerTestCase(title, testFunc) {
componentTest(title, {
2018-06-15 23:03:24 +08:00
template: "{{d-editor value=value composerEvents=true}}",
2017-06-15 01:57:58 +08:00
beforeEach() {
2018-06-15 23:03:24 +08:00
this.set("value", "hello world.");
},
test(assert) {
const textarea = jumpEnd(find("textarea.d-editor-input")[0]);
testFunc.call(this, assert, textarea);
}
});
}
2018-07-30 04:51:32 +08:00
testCase(`selecting the space before a word`, async function(assert, textarea) {
textarea.selectionStart = 5;
textarea.selectionEnd = 7;
2018-07-30 04:51:32 +08:00
await click(`button.bold`);
assert.equal(this.value, `hello **w**orld.`);
2018-07-30 04:51:32 +08:00
assert.equal(textarea.selectionStart, 8);
assert.equal(textarea.selectionEnd, 9);
});
2018-07-30 04:51:32 +08:00
testCase(`selecting the space after a word`, async function(assert, textarea) {
textarea.selectionStart = 0;
textarea.selectionEnd = 6;
2018-07-30 04:51:32 +08:00
await click(`button.bold`);
assert.equal(this.value, `**hello** world.`);
2018-07-30 04:51:32 +08:00
assert.equal(textarea.selectionStart, 2);
assert.equal(textarea.selectionEnd, 7);
});
2018-07-30 04:51:32 +08:00
testCase(`bold button with no selection`, async function(assert, textarea) {
await click(`button.bold`);
const example = I18n.t(`composer.bold_text`);
assert.equal(this.value, `hello world.**${example}**`);
2018-07-30 04:51:32 +08:00
assert.equal(textarea.selectionStart, 14);
assert.equal(textarea.selectionEnd, 14 + example.length);
});
2018-07-30 04:51:32 +08:00
testCase(`bold button with a selection`, async function(assert, textarea) {
textarea.selectionStart = 6;
textarea.selectionEnd = 11;
2018-07-30 04:51:32 +08:00
await click(`button.bold`);
assert.equal(this.value, `hello **world**.`);
2018-07-30 04:51:32 +08:00
assert.equal(textarea.selectionStart, 8);
assert.equal(textarea.selectionEnd, 13);
2018-07-30 04:51:32 +08:00
await click(`button.bold`);
assert.equal(this.value, "hello world.");
2018-07-30 04:51:32 +08:00
assert.equal(textarea.selectionStart, 6);
assert.equal(textarea.selectionEnd, 11);
});
2018-07-30 04:51:32 +08:00
testCase(`bold with a multiline selection`, async function(assert, textarea) {
2018-06-15 23:03:24 +08:00
this.set("value", "hello\n\nworld\n\ntest.");
2018-07-30 04:51:32 +08:00
textarea.selectionStart = 0;
textarea.selectionEnd = 12;
2018-07-30 04:51:32 +08:00
await click(`button.bold`);
assert.equal(this.value, `**hello**\n\n**world**\n\ntest.`);
2018-07-30 04:51:32 +08:00
assert.equal(textarea.selectionStart, 0);
assert.equal(textarea.selectionEnd, 20);
2018-07-30 04:51:32 +08:00
await click(`button.bold`);
assert.equal(this.value, `hello\n\nworld\n\ntest.`);
2018-07-30 04:51:32 +08:00
assert.equal(textarea.selectionStart, 0);
assert.equal(textarea.selectionEnd, 12);
});
2018-07-30 04:51:32 +08:00
testCase(`italic button with no selection`, async function(assert, textarea) {
await click(`button.italic`);
const example = I18n.t(`composer.italic_text`);
assert.equal(this.value, `hello world.*${example}*`);
2018-07-30 04:51:32 +08:00
assert.equal(textarea.selectionStart, 13);
assert.equal(textarea.selectionEnd, 13 + example.length);
});
2018-07-30 04:51:32 +08:00
testCase(`italic button with a selection`, async function(assert, textarea) {
textarea.selectionStart = 6;
textarea.selectionEnd = 11;
2018-07-30 04:51:32 +08:00
await click(`button.italic`);
assert.equal(this.value, `hello *world*.`);
2018-07-30 04:51:32 +08:00
assert.equal(textarea.selectionStart, 7);
assert.equal(textarea.selectionEnd, 12);
2018-07-30 04:51:32 +08:00
await click(`button.italic`);
assert.equal(this.value, "hello world.");
2018-07-30 04:51:32 +08:00
assert.equal(textarea.selectionStart, 6);
assert.equal(textarea.selectionEnd, 11);
});
2018-07-30 04:51:32 +08:00
testCase(`italic with a multiline selection`, async function(assert, textarea) {
2018-06-15 23:03:24 +08:00
this.set("value", "hello\n\nworld\n\ntest.");
2018-07-30 04:51:32 +08:00
textarea.selectionStart = 0;
textarea.selectionEnd = 12;
2018-07-30 04:51:32 +08:00
await click(`button.italic`);
assert.equal(this.value, `*hello*\n\n*world*\n\ntest.`);
2018-07-30 04:51:32 +08:00
assert.equal(textarea.selectionStart, 0);
assert.equal(textarea.selectionEnd, 16);
2018-07-30 04:51:32 +08:00
await click(`button.italic`);
assert.equal(this.value, `hello\n\nworld\n\ntest.`);
2018-07-30 04:51:32 +08:00
assert.equal(textarea.selectionStart, 0);
assert.equal(textarea.selectionEnd, 12);
});
2018-07-30 04:51:32 +08:00
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);
2018-07-30 04:51:32 +08:00
await click(".insert-link button.btn-danger");
assert.equal(find(".insert-link.hidden").length, 1);
assert.equal(this.value, "hello world.");
});
2018-07-30 04:51:32 +08:00
testCase("link modal (simple link)", async function(assert, textarea) {
await click("button.link");
2018-06-15 23:03:24 +08:00
const url = "http://eviltrout.com";
2018-07-30 04:51:32 +08:00
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})`);
2018-07-30 04:51:32 +08:00
assert.equal(textarea.selectionStart, 13);
assert.equal(textarea.selectionEnd, 13 + url.length);
});
2018-07-30 04:51:32 +08:00
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)`);
});
2018-07-30 04:51:32 +08:00
testCase("link modal (simple link) with selected text", async function(
2018-06-15 23:03:24 +08:00
assert,
textarea
) {
textarea.selectionStart = 0;
textarea.selectionEnd = 12;
2018-07-30 04:51:32 +08:00
await click("button.link");
assert.equal(find("input.link-text")[0].value, "hello world.");
2018-07-30 04:51:32 +08:00
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)");
});
2018-07-30 04:51:32 +08:00
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)");
});
2018-06-15 23:03:24 +08:00
componentTest("advanced code", {
template: "{{d-editor value=value}}",
2017-06-15 01:57:58 +08:00
beforeEach() {
2018-06-15 23:03:24 +08:00
this.siteSettings.code_formatting_style = "4-spaces-indent";
this.set(
"value",
`
function xyz(x, y, z) {
if (y === z) {
return true;
}
}
2018-06-15 23:03:24 +08:00
`
);
},
2018-07-30 04:51:32 +08:00
async test(assert) {
const textarea = find("textarea.d-editor-input")[0];
textarea.selectionStart = 0;
textarea.selectionEnd = textarea.value.length;
2018-07-30 04:51:32 +08:00
await click("button.code");
assert.equal(
this.value,
2018-07-30 04:51:32 +08:00
`
function xyz(x, y, z) {
if (y === z) {
return true;
}
}
`
2018-07-30 04:51:32 +08:00
);
}
});
2018-06-15 23:03:24 +08:00
componentTest("code button", {
template: "{{d-editor value=value}}",
2017-06-15 01:57:58 +08:00
beforeEach() {
2018-06-15 23:03:24 +08:00
this.siteSettings.code_formatting_style = "4-spaces-indent";
},
2018-07-30 04:51:32 +08:00
async test(assert) {
const textarea = jumpEnd(find("textarea.d-editor-input")[0]);
2018-07-30 04:51:32 +08:00
await click("button.code");
assert.equal(this.value, ` ${I18n.t("composer.code_text")}`);
2018-07-30 04:51:32 +08:00
this.set("value", "first line\n\nsecond line\n\nthird line");
2018-07-30 04:51:32 +08:00
textarea.selectionStart = 11;
textarea.selectionEnd = 11;
2018-07-30 04:51:32 +08:00
await click("button.code");
assert.equal(
this.value,
2018-07-30 04:51:32 +08:00
`first line
2018-06-15 23:03:24 +08:00
${I18n.t("composer.code_text")}
second line
third line`
2018-07-30 04:51:32 +08:00
);
2018-07-30 04:51:32 +08:00
this.set("value", "first line\n\nsecond line\n\nthird line");
2018-07-30 04:51:32 +08:00
await click("button.code");
assert.equal(
this.value,
2018-07-30 04:51:32 +08:00
`first line
second line
2018-06-15 23:03:24 +08:00
third line\`${I18n.t("composer.code_title")}\``
2018-07-30 04:51:32 +08:00
);
this.set("value", "first line\n\nsecond line\n\nthird line");
2018-07-30 04:51:32 +08:00
textarea.selectionStart = 5;
textarea.selectionEnd = 5;
2018-07-30 04:51:32 +08:00
await click("button.code");
assert.equal(
this.value,
2018-07-30 04:51:32 +08:00
`first\`${I18n.t("composer.code_title")}\` line
second line
third line`
2018-07-30 04:51:32 +08:00
);
this.set("value", "first line\n\nsecond line\n\nthird line");
2018-07-30 04:51:32 +08:00
textarea.selectionStart = 6;
textarea.selectionEnd = 10;
2018-07-30 04:51:32 +08:00
await click("button.code");
assert.equal(this.value, "first `line`\n\nsecond line\n\nthird line");
2018-07-30 04:51:32 +08:00
assert.equal(textarea.selectionStart, 7);
assert.equal(textarea.selectionEnd, 11);
2018-07-30 04:51:32 +08:00
await click("button.code");
assert.equal(this.value, "first line\n\nsecond line\n\nthird line");
2018-07-30 04:51:32 +08:00
assert.equal(textarea.selectionStart, 6);
assert.equal(textarea.selectionEnd, 10);
2018-07-30 04:51:32 +08:00
textarea.selectionStart = 0;
textarea.selectionEnd = 23;
2018-07-30 04:51:32 +08:00
await click("button.code");
assert.equal(this.value, " first line\n\n second line\n\nthird line");
2018-07-30 04:51:32 +08:00
assert.equal(textarea.selectionStart, 0);
assert.equal(textarea.selectionEnd, 31);
2018-07-30 04:51:32 +08:00
await click("button.code");
assert.equal(this.value, "first line\n\nsecond line\n\nthird line");
2018-07-30 04:51:32 +08:00
assert.equal(textarea.selectionStart, 0);
assert.equal(textarea.selectionEnd, 23);
}
});
2018-06-15 23:03:24 +08:00
componentTest("code fences", {
template: "{{d-editor value=value}}",
2017-06-15 01:57:58 +08:00
beforeEach() {
2018-06-15 23:03:24 +08:00
this.set("value", "");
},
2018-07-30 04:51:32 +08:00
async test(assert) {
const textarea = jumpEnd(find("textarea.d-editor-input")[0]);
2018-07-30 04:51:32 +08:00
await click("button.code");
assert.equal(
this.value,
2018-07-30 04:51:32 +08:00
`\`\`\`
${I18n.t("composer.paste_code_text")}
\`\`\``
2018-07-30 04:51:32 +08:00
);
2018-07-30 04:51:32 +08:00
assert.equal(textarea.selectionStart, 4);
assert.equal(textarea.selectionEnd, 27);
2018-07-30 04:51:32 +08:00
this.set("value", "first line\nsecond line\nthird line");
2018-07-30 04:51:32 +08:00
textarea.selectionStart = 0;
textarea.selectionEnd = textarea.value.length;
2018-07-30 04:51:32 +08:00
await click("button.code");
assert.equal(
this.value,
2018-07-30 04:51:32 +08:00
`\`\`\`
first line
second line
third line
\`\`\`
`
2018-07-30 04:51:32 +08:00
);
2018-07-30 04:51:32 +08:00
assert.equal(textarea.selectionStart, textarea.value.length);
assert.equal(textarea.selectionEnd, textarea.value.length);
2018-07-30 04:51:32 +08:00
this.set("value", "first line\nsecond line\nthird line");
2018-07-30 04:51:32 +08:00
textarea.selectionStart = 0;
textarea.selectionEnd = 0;
2018-07-30 04:51:32 +08:00
await click("button.code");
assert.equal(
this.value,
2018-07-30 04:51:32 +08:00
`\`${I18n.t("composer.code_title")}\`first line
second line
third line`
2018-07-30 04:51:32 +08:00
);
2018-07-30 04:51:32 +08:00
assert.equal(textarea.selectionStart, 1);
assert.equal(
textarea.selectionEnd,
I18n.t("composer.code_title").length + 1
);
2018-07-30 04:51:32 +08:00
this.set("value", "first line\nsecond line\nthird line");
2018-07-30 04:51:32 +08:00
textarea.selectionStart = 0;
textarea.selectionEnd = 10;
2018-07-30 04:51:32 +08:00
await click("button.code");
assert.equal(
this.value,
2018-07-30 04:51:32 +08:00
`\`first line\`
second line
third line`
2018-07-30 04:51:32 +08:00
);
2018-07-30 04:51:32 +08:00
assert.equal(textarea.selectionStart, 1);
assert.equal(textarea.selectionEnd, 11);
2018-07-30 04:51:32 +08:00
this.set("value", "first line\nsecond line\nthird line");
2018-07-30 04:51:32 +08:00
textarea.selectionStart = 0;
textarea.selectionEnd = 23;
2018-07-30 04:51:32 +08:00
await click("button.code");
assert.equal(
this.value,
2018-07-30 04:51:32 +08:00
`\`\`\`
first line
second line
\`\`\`
third line`
2018-07-30 04:51:32 +08:00
);
2018-07-30 04:51:32 +08:00
assert.equal(textarea.selectionStart, 30);
assert.equal(textarea.selectionEnd, 30);
2018-07-30 04:51:32 +08:00
this.set("value", "first line\nsecond line\nthird line");
2018-07-30 04:51:32 +08:00
textarea.selectionStart = 6;
textarea.selectionEnd = 17;
2018-07-30 04:51:32 +08:00
await click("button.code");
2018-07-30 04:51:32 +08:00
assert.equal(
this.value,
2018-07-30 04:51:32 +08:00
`first \n\`\`\`\nline\nsecond\n\`\`\`\n line\nthird line`
);
assert.equal(textarea.selectionStart, 27);
assert.equal(textarea.selectionEnd, 27);
}
});
componentTest("quote button - empty lines", {
2018-06-15 23:03:24 +08:00
template: "{{d-editor value=value composerEvents=true}}",
beforeEach() {
2018-06-15 23:03:24 +08:00
this.set("value", "one\n\ntwo\n\nthree");
},
2018-07-30 04:51:32 +08:00
async test(assert) {
const textarea = jumpEnd(find("textarea.d-editor-input")[0]);
2018-07-30 04:51:32 +08:00
textarea.selectionStart = 0;
2018-07-30 04:51:32 +08:00
await click("button.quote");
assert.equal(this.value, "> one\n> \n> two\n> \n> three");
2018-07-30 04:51:32 +08:00
assert.equal(textarea.selectionStart, 0);
assert.equal(textarea.selectionEnd, 25);
await click("button.quote");
assert.equal(this.value, "one\n\ntwo\n\nthree");
}
});
componentTest("quote button - selecting empty lines", {
2018-06-15 23:03:24 +08:00
template: "{{d-editor value=value composerEvents=true}}",
beforeEach() {
2018-06-15 23:03:24 +08:00
this.set("value", "one\n\n\n\ntwo");
},
2018-07-30 04:51:32 +08:00
async test(assert) {
const textarea = jumpEnd(find("textarea.d-editor-input")[0]);
2018-07-30 04:51:32 +08:00
textarea.selectionStart = 6;
textarea.selectionEnd = 10;
2018-07-30 04:51:32 +08:00
await click("button.quote");
assert.equal(this.value, "one\n\n\n> \n> two");
}
});
2018-07-30 04:51:32 +08:00
testCase("quote button", async function(assert, textarea) {
textarea.selectionStart = 6;
textarea.selectionEnd = 9;
2018-07-30 04:51:32 +08:00
await click("button.quote");
assert.equal(this.value, "hello\n\n> wor\n\nld.");
2018-07-30 04:51:32 +08:00
assert.equal(textarea.selectionStart, 7);
assert.equal(textarea.selectionEnd, 12);
2018-07-30 04:51:32 +08:00
await click("button.quote");
assert.equal(this.value, "hello\n\nwor\n\nld.");
2018-07-30 04:51:32 +08:00
assert.equal(textarea.selectionStart, 7);
assert.equal(textarea.selectionEnd, 10);
2018-07-30 04:51:32 +08:00
textarea.selectionStart = 15;
textarea.selectionEnd = 15;
2018-07-30 04:51:32 +08:00
await click("button.quote");
assert.equal(this.value, "hello\n\nwor\n\nld.\n\n> Blockquote");
});
2018-07-30 04:51:32 +08:00
testCase(`bullet button with no selection`, async function(assert, textarea) {
2018-06-15 23:03:24 +08:00
const example = I18n.t("composer.list_item");
2018-07-30 04:51:32 +08:00
await click(`button.bullet`);
assert.equal(this.value, `hello world.\n\n* ${example}`);
2018-07-30 04:51:32 +08:00
assert.equal(textarea.selectionStart, 14);
assert.equal(textarea.selectionEnd, 16 + example.length);
2018-07-30 04:51:32 +08:00
await click(`button.bullet`);
assert.equal(this.value, `hello world.\n\n${example}`);
});
2018-07-30 04:51:32 +08:00
testCase(`bullet button with a selection`, async function(assert, textarea) {
textarea.selectionStart = 6;
textarea.selectionEnd = 11;
2018-07-30 04:51:32 +08:00
await click(`button.bullet`);
assert.equal(this.value, `hello\n\n* world\n\n.`);
2018-07-30 04:51:32 +08:00
assert.equal(textarea.selectionStart, 7);
assert.equal(textarea.selectionEnd, 14);
2018-07-30 04:51:32 +08:00
await click(`button.bullet`);
assert.equal(this.value, `hello\n\nworld\n\n.`);
2018-07-30 04:51:32 +08:00
assert.equal(textarea.selectionStart, 7);
assert.equal(textarea.selectionEnd, 12);
});
2018-07-30 04:51:32 +08:00
testCase(`bullet button with a multiple line selection`, async function(
2018-06-15 23:03:24 +08:00
assert,
textarea
) {
this.set("value", "* Hello\n\nWorld\n\nEvil");
2018-07-30 04:51:32 +08:00
textarea.selectionStart = 0;
textarea.selectionEnd = 20;
2018-07-30 04:51:32 +08:00
await click(`button.bullet`);
assert.equal(this.value, "Hello\n\nWorld\n\nEvil");
2018-07-30 04:51:32 +08:00
assert.equal(textarea.selectionStart, 0);
assert.equal(textarea.selectionEnd, 18);
2018-07-30 04:51:32 +08:00
await click(`button.bullet`);
assert.equal(this.value, "* Hello\n\n* World\n\n* Evil");
2018-07-30 04:51:32 +08:00
assert.equal(textarea.selectionStart, 0);
assert.equal(textarea.selectionEnd, 24);
});
2018-07-30 04:51:32 +08:00
testCase(`list button with no selection`, async function(assert, textarea) {
2018-06-15 23:03:24 +08:00
const example = I18n.t("composer.list_item");
2018-07-30 04:51:32 +08:00
await click(`button.list`);
assert.equal(this.value, `hello world.\n\n1. ${example}`);
2018-07-30 04:51:32 +08:00
assert.equal(textarea.selectionStart, 14);
assert.equal(textarea.selectionEnd, 17 + example.length);
2018-07-30 04:51:32 +08:00
await click(`button.list`);
assert.equal(this.value, `hello world.\n\n${example}`);
2018-07-30 04:51:32 +08:00
assert.equal(textarea.selectionStart, 14);
assert.equal(textarea.selectionEnd, 14 + example.length);
});
2018-07-30 04:51:32 +08:00
testCase(`list button with a selection`, async function(assert, textarea) {
textarea.selectionStart = 6;
textarea.selectionEnd = 11;
2018-07-30 04:51:32 +08:00
await click(`button.list`);
assert.equal(this.value, `hello\n\n1. world\n\n.`);
2018-07-30 04:51:32 +08:00
assert.equal(textarea.selectionStart, 7);
assert.equal(textarea.selectionEnd, 15);
2018-07-30 04:51:32 +08:00
await click(`button.list`);
assert.equal(this.value, `hello\n\nworld\n\n.`);
2018-07-30 04:51:32 +08:00
assert.equal(textarea.selectionStart, 7);
assert.equal(textarea.selectionEnd, 12);
});
2018-07-30 04:51:32 +08:00
testCase(`list button with line sequence`, async function(assert, textarea) {
2018-06-15 23:03:24 +08:00
this.set("value", "Hello\n\nWorld\n\nEvil");
2018-07-30 04:51:32 +08:00
textarea.selectionStart = 0;
textarea.selectionEnd = 18;
2018-07-30 04:51:32 +08:00
await click(`button.list`);
assert.equal(this.value, "1. Hello\n\n2. World\n\n3. Evil");
2018-07-30 04:51:32 +08:00
assert.equal(textarea.selectionStart, 0);
assert.equal(textarea.selectionEnd, 27);
2018-07-30 04:51:32 +08:00
await click(`button.list`);
assert.equal(this.value, "Hello\n\nWorld\n\nEvil");
2018-07-30 04:51:32 +08:00
assert.equal(textarea.selectionStart, 0);
assert.equal(textarea.selectionEnd, 18);
});
2018-06-15 23:03:24 +08:00
componentTest("clicking the toggle-direction button toggles the direction", {
template: "{{d-editor value=value}}",
2018-01-30 09:42:19 +08:00
beforeEach() {
this.siteSettings.support_mixed_text_direction = true;
this.siteSettings.default_locale = "en_US";
2018-01-30 09:42:19 +08:00
},
2018-07-30 04:51:32 +08:00
async test(assert) {
const textarea = find("textarea.d-editor-input");
2018-07-30 04:51:32 +08:00
await click("button.toggle-direction");
assert.equal(textarea.attr("dir"), "rtl");
await click("button.toggle-direction");
assert.equal(textarea.attr("dir"), "ltr");
2018-01-30 09:42:19 +08:00
}
});
2018-07-30 04:51:32 +08:00
testCase(`doesn't jump to bottom with long text`, async function(
assert,
textarea
) {
2018-06-15 23:03:24 +08:00
let longText = "hello world.";
for (let i = 0; i < 8; i++) {
longText = longText + longText;
}
2018-06-15 23:03:24 +08:00
this.set("value", longText);
2018-07-30 04:51:32 +08:00
$(textarea).scrollTop(0);
textarea.selectionStart = 3;
textarea.selectionEnd = 3;
2018-07-30 04:51:32 +08:00
await click("button.bold");
assert.equal($(textarea).scrollTop(), 0, "it stays scrolled up");
});
// componentTest("emoji", {
// template: "{{d-editor value=value}}",
// beforeEach() {
// // Test adding a custom button
// withPluginApi("0.1", api => {
// api.onToolbarCreate(toolbar => {
// toolbar.addButton({
// id: "emoji",
// group: "extras",
// icon: "far-smile",
// action: () => toolbar.context.send("emoji")
// });
// });
// });
// this.set("value", "hello world.");
// },
// async test(assert) {
// jumpEnd(find("textarea.d-editor-input")[0]);
// await click("button.emoji");
//
// await click(
// '.emoji-picker .section[data-section="smileys_&_emotion"] button.emoji[title="grinning"]'
// );
// assert.equal(this.value, "hello world.:grinning:");
// }
// });
2018-07-30 04:51:32 +08:00
testCase("replace-text event by default", async function(assert) {
2018-06-15 23:03:24 +08:00
this.set("value", "red green blue");
2018-07-30 04:51:32 +08:00
await this.container
.lookup("app-events:main")
.trigger("composer:replace-text", "green", "yellow");
assert.equal(this.value, "red green blue");
});
2018-07-30 04:51:32 +08:00
composerTestCase("replace-text event for composer", async function(assert) {
2018-06-15 23:03:24 +08:00
this.set("value", "red green blue");
2018-07-30 04:51:32 +08:00
await this.container
.lookup("app-events:main")
.trigger("composer:replace-text", "green", "yellow");
assert.equal(this.value, "red yellow blue");
});
(() => {
// Tests to check cursor/selection after replace-text event.
2018-06-15 23:03:24 +08:00
const BEFORE = "red green blue";
const NEEDLE = "green";
const REPLACE = "yellow";
const AFTER = BEFORE.replace(NEEDLE, REPLACE);
const CASES = [
{
2018-06-15 23:03:24 +08:00
description: "cursor at start remains there",
before: [0, 0],
after: [0, 0]
2018-06-15 23:03:24 +08:00
},
{
description: "cursor before needle becomes cursor before replacement",
before: [BEFORE.indexOf(NEEDLE), 0],
after: [AFTER.indexOf(REPLACE), 0]
2018-06-15 23:03:24 +08:00
},
{
description: "cursor at needle start + 1 moves behind replacement",
before: [BEFORE.indexOf(NEEDLE) + 1, 0],
after: [AFTER.indexOf(REPLACE) + REPLACE.length, 0]
2018-06-15 23:03:24 +08:00
},
{
description: "cursor at needle end - 1 stays behind replacement",
before: [BEFORE.indexOf(NEEDLE) + NEEDLE.length - 1, 0],
after: [AFTER.indexOf(REPLACE) + REPLACE.length, 0]
2018-06-15 23:03:24 +08:00
},
{
description: "cursor behind needle becomes cursor behind replacement",
before: [BEFORE.indexOf(NEEDLE) + NEEDLE.length, 0],
after: [AFTER.indexOf(REPLACE) + REPLACE.length, 0]
2018-06-15 23:03:24 +08:00
},
{
description: "cursor at end remains there",
before: [BEFORE.length, 0],
after: [AFTER.length, 0]
2018-06-15 23:03:24 +08:00
},
{
description:
"selection spanning needle start becomes selection until replacement start",
before: [BEFORE.indexOf(NEEDLE) - 1, 2],
after: [AFTER.indexOf(REPLACE) - 1, 1]
},
2018-06-15 23:03:24 +08:00
{
description:
"selection spanning needle end becomes selection from replacement end",
before: [BEFORE.indexOf(NEEDLE) + NEEDLE.length - 1, 2],
after: [AFTER.indexOf(REPLACE) + REPLACE.length, 1]
2018-06-15 23:03:24 +08:00
},
{
description:
"selection spanning needle becomes selection spanning replacement",
before: [BEFORE.indexOf(NEEDLE) - 1, NEEDLE.length + 2],
after: [AFTER.indexOf(REPLACE) - 1, REPLACE.length + 2]
2018-06-15 23:03:24 +08:00
},
{
description: "complete selection remains complete",
before: [0, BEFORE.length],
after: [0, AFTER.length]
}
];
for (let i = 0; i < CASES.length; i++) {
const CASE = CASES[i];
2018-07-30 04:51:32 +08:00
// prettier-ignore
composerTestCase(`replace-text event: ${CASE.description}`, async function( // eslint-disable-line no-loop-func
2018-06-15 23:03:24 +08:00
assert,
textarea
) {
this.set("value", BEFORE);
await focus(textarea);
assert.ok(textarea.value === BEFORE);
const [start, len] = CASE.before;
setTextareaSelection(textarea, start, start + len);
2018-07-30 04:51:32 +08:00
this.container
.lookup("app-events:main")
.trigger("composer:replace-text", "green", "yellow", { forceFocus: true });
Ember.run.next(() => {
let expect = formatTextWithSelection(AFTER, CASE.after);
let actual = formatTextWithSelection(
this.value,
getTextareaSelection(textarea)
);
assert.equal(actual, expect);
});
});
}
})();