github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-25 09:42:07 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

DEV: Update checklist tests (#29553)

Browse Source
This commit is contained in:
Jarek Radosz 2024-11-03 21:04:22 +01:00 committed by GitHub
parent ba7f4e3c63
commit d2056c7fc6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 91 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

203
plugins/checklist/test/javascripts/lib/checklist-test.js
View File

@ -1,4 +1,4 @@
import $ from "jquery"; import { click } from "@ember/test-helpers";
import { test } from "qunit"; import { test } from "qunit";
import { Promise } from "rsvp"; import { Promise } from "rsvp";
import { cook } from "discourse/lib/text"; import { cook } from "discourse/lib/text";
@ -9,6 +9,8 @@ import { checklistSyntax } from "discourse/plugins/checklist/discourse/initializ
let currentRaw; let currentRaw;
async function prepare(raw) { async function prepare(raw) {
currentRaw = raw;
const cooked = await cook(raw, { const cooked = await cook(raw, {
siteSettings: { siteSettings: {
checklist_enabled: true, checklist_enabled: true,
@ -20,29 +22,30 @@ async function prepare(raw) {
const model = Post.create({ id: 42, can_edit: true }); const model = Post.create({ id: 42, can_edit: true });
const decoratorHelper = { widget, getModel: () => model }; const decoratorHelper = { widget, getModel: () => model };
const $elem = $(`<div>${cooked.toString()}</div>`); const element = document.createElement("div");
checklistSyntax($elem[0], decoratorHelper); element.innerHTML = cooked.toString();
checklistSyntax(element, decoratorHelper);
currentRaw = raw; document.querySelector("#ember-testing").append(element);
const updated = new Promise((resolve) => { const updated = new Promise((resolve) => {
model.save = async (fields) => resolve(fields.raw); model.save = async (fields) => resolve(fields.raw);
}); });
return [$elem, updated]; return { updated };
} }
acceptance("discourse-checklist | checklist", function (needs) { acceptance("discourse-checklist | checklist", function (needs) {
needs.pretender((server) => { needs.pretender((server, helper) => {
server.get("/posts/42", () => [ server.get("/posts/42", () => helper.response({ raw: currentRaw }));
200, });
{ "Content-Type": "application/json" },
{ raw: currentRaw }, needs.hooks.afterEach(function () {
]); document.querySelector("#ember-testing").innerHTML = "";
}); });
test("does not clash with date-range bbcode", async function (assert) { test("does not clash with date-range bbcode", async function (assert) {
const [$elem, updated] = await prepare(` const { updated } = await prepare(`
[date-range from=2024-03-22 to=2024-03-23] [date-range from=2024-03-22 to=2024-03-23]
[ ] task 1 [ ] task 1
@ -50,77 +53,85 @@ acceptance("discourse-checklist | checklist", function (needs) {
[x] task 3 [x] task 3
`); `);
assert.equal($elem.find(".discourse-local-date").length, 2); assert.dom(".discourse-local-date").exists({ count: 2 });
assert.equal($elem.find(".chcklst-box").length, 3); assert.dom(".chcklst-box").exists({ count: 3 });
$elem.find(".chcklst-box")[0].click(); await click(".chcklst-box");
const output = await updated; const output = await updated;
assert.ok(output.includes("[x] task 1")); assert.true(output.includes("[x] task 1"));
}); });
test("does not check an image URL", async function (assert) { test("does not check an image URL", async function (assert) {
const [$elem, updated] = await prepare(` const { updated } = await prepare(`
![](upload://zLd8FtsWc2ZSg3cZKIhwvhYxTcn.jpg) ![](upload://zLd8FtsWc2ZSg3cZKIhwvhYxTcn.jpg)
[] first [] first
[] second [] second
`); `);
$elem.find(".chcklst-box")[0].click(); await click(".chcklst-box");
const output = await updated; const output = await updated;
assert.ok(output.includes("[x] first")); assert.true(output.includes("[x] first"));
}); });
test("make checkboxes readonly while updating", async function (assert) { test("make checkboxes readonly while updating", async function (assert) {
const [$elem, updated] = await prepare(` const { updated } = await prepare(`
[ ] first [ ] first
[x] second [x] second
`); `);
const $checklist = $elem.find(".chcklst-box"); const [checkbox1, checkbox2] = [
$checklist.get(0).click(); ...document.querySelectorAll(".chcklst-box"),
const checkbox = $checklist.get(1); ];
assert.ok(checkbox.classList.contains("readonly")); checkbox1.click();
checkbox.click();
assert.dom(checkbox2).hasClass("readonly");
await click(checkbox2);
const output = await updated; const output = await updated;
assert.ok(output.includes("[x] first")); assert.true(output.includes("[x] first"));
assert.ok(output.includes("[x] second")); assert.true(output.includes("[x] second"));
}); });
test("checkbox before a code block", async function (assert) { test("checkbox before a code block", async function (assert) {
const [$elem, updated] = await prepare(` const { updated } = await prepare(`
[ ] first [ ] first
[x] actual [x] actual
\`[x] nope\` \`[x] nope\`
`); `);
assert.equal($elem.find(".chcklst-box").length, 2); assert.dom(".chcklst-box").exists({ count: 2 });
$elem.find(".chcklst-box")[1].click();
await click([...document.querySelectorAll(".chcklst-box")][1]);
const output = await updated; const output = await updated;
assert.ok(output.includes("[ ] first")); assert.true(output.includes("[ ] first"));
assert.ok(output.includes("[ ] actual")); assert.true(output.includes("[ ] actual"));
assert.ok(output.includes("[x] nope")); assert.true(output.includes("[x] nope"));
}); });
test("permanently checked checkbox", async function (assert) { test("permanently checked checkbox", async function (assert) {
const [$elem, updated] = await prepare(` const { updated } = await prepare(`
[X] perma [X] permanent
[x] not perma [x] not permanent
`); `);
assert.equal($elem.find(".chcklst-box").length, 2); assert.dom(".chcklst-box").exists({ count: 2 });
$elem.find(".chcklst-box")[0].click();
$elem.find(".chcklst-box")[1].click(); const [checkbox1, checkbox2] = [
...document.querySelectorAll(".chcklst-box"),
];
await click(checkbox1);
await click(checkbox2);
const output = await updated; const output = await updated;
assert.ok(output.includes("[X] perma")); assert.true(output.includes("[X] permanent"));
assert.ok(output.includes("[ ] not perma")); assert.true(output.includes("[ ] not permanent"));
}); });
test("checkbox before a multiline code block", async function (assert) { test("checkbox before a multiline code block", async function (assert) {
const [$elem, updated] = await prepare(` const { updated } = await prepare(`
[ ] first [ ] first
[x] actual [x] actual
\`\`\` \`\`\`
@ -129,44 +140,43 @@ acceptance("discourse-checklist | checklist", function (needs) {
\`\`\` \`\`\`
`); `);
assert.equal($elem.find(".chcklst-box").length, 2); assert.dom(".chcklst-box").exists({ count: 2 });
$elem.find(".chcklst-box")[1].click(); await click([...document.querySelectorAll(".chcklst-box")][1]);
const output = await updated; const output = await updated;
assert.ok(output.includes("[ ] first")); assert.true(output.includes("[ ] first"));
assert.ok(output.includes("[ ] actual")); assert.true(output.includes("[ ] actual"));
assert.ok(output.includes("[x] nope")); assert.true(output.includes("[x] nope"));
}); });
test("checkbox before italic/bold sequence", async function (assert) { test("checkbox before italic/bold sequence", async function (assert) {
const [$elem, updated] = await prepare(` [x] *test* const { updated } = await prepare(` [x] *test*`);
`);
assert.equal($elem.find(".chcklst-box").length, 1); assert.dom(".chcklst-box").exists({ count: 1 });
$elem.find(".chcklst-box")[0].click(); await click(".chcklst-box");
const output = await updated; const output = await updated;
assert.ok(output.includes("[ ] *test*")); assert.true(output.includes("[ ] *test*"));
}); });
test("checkboxes in an unordered list", async function (assert) { test("checkboxes in an unordered list", async function (assert) {
const [$elem, updated] = await prepare(` const { updated } = await prepare(`
* [x] checked * [x] checked
* [] test * [] test
* [] two * [] two
`); `);
assert.equal($elem.find(".chcklst-box").length, 3); assert.dom(".chcklst-box").exists({ count: 3 });
$elem.find(".chcklst-box")[1].click(); await click([...document.querySelectorAll(".chcklst-box")][1]);
const output = await updated; const output = await updated;
assert.ok(output.includes("* [x] checked")); assert.true(output.includes("* [x] checked"));
assert.ok(output.includes("* [x] test")); assert.true(output.includes("* [x] test"));
assert.ok(output.includes("* [] two")); assert.true(output.includes("* [] two"));
}); });
test("checkboxes in italic/bold-like blocks", async function (assert) { test("checkboxes in italic/bold-like blocks", async function (assert) {
const [$elem, updated] = await prepare(` const { updated } = await prepare(`
*[x *[x
*a [*] x]* *a [*] x]*
[*x] [*x]
@ -181,15 +191,15 @@ acceptance("discourse-checklist | checklist", function (needs) {
* [x] 3 * [x] 3
`); `);
assert.equal($elem.find(".chcklst-box").length, 4); assert.dom(".chcklst-box").exists({ count: 4 });
$elem.find(".chcklst-box")[3].click(); await click([...document.querySelectorAll(".chcklst-box")][3]);
const output = await updated; const output = await updated;
assert.ok(output.includes("* [ ] 3")); assert.true(output.includes("* [ ] 3"));
}); });
test("correct checkbox is selected", async function (assert) { test("correct checkbox is selected", async function (assert) {
const [$elem, updated] = await prepare(` const { updated } = await prepare(`
\`[x]\` \`[x]\`
*[x]* *[x]*
**[x]** **[x]**
@ -214,74 +224,43 @@ __[x]__
Actual checkboxes: Actual checkboxes:
[] first [] first
[x] second [x] second
* test[x]*thrid* * test[x]*third*
[x] fourth [x] fourth
[x] fifth [x] fifth
`); `);
assert.equal($elem.find(".chcklst-box").length, 5); assert.dom(".chcklst-box").exists({ count: 5 });
$elem.find(".chcklst-box")[3].click(); await click([...document.querySelectorAll(".chcklst-box")][3]);
const output = await updated; const output = await updated;
assert.ok(output.includes("[ ] fourth")); assert.true(output.includes("[ ] fourth"));
}); });
test("rendering in bullet lists", async function (assert) { test("rendering in bullet lists", async function (assert) {
const [$elem] = await prepare(` await prepare(`
- [ ] LI 1 - [ ] LI 1
- LI 2 [ ] with checkbox in middle - LI 2 [ ] with checkbox in middle
- [ ] LI 3 - [ ] LI 3
1. [ ] Ordered LI with checkbox 1. [ ] Ordered LI with checkbox
`); `);
const elem = $elem[0];
const listItems = [...elem.querySelector("ul").children]; assert.dom("ul > li").exists({ count: 3 });
assert.equal(listItems.length, 3); const listItems = [...document.querySelectorAll("ul > li")];
assert.true( assert.dom(listItems[0]).hasClass("has-checkbox");
listItems[0].classList.contains("has-checkbox"), assert.dom(".chcklst-box", listItems[0]).hasClass("list-item-checkbox");
"LI 1 has `.has-checkbox` class"
);
assert.true(
listItems[0]
.querySelector(".chcklst-box")
.classList.contains("list-item-checkbox"),
"LI 1 checkbox has `.list-item-checkbox`"
);
assert.false( assert.dom(listItems[1]).doesNotHaveClass("has-checkbox");
listItems[1].classList.contains("has-checkbox"), assert
"LI 2 does not have `.has-checkbox` class" .dom(".chcklst-box", listItems[1])
); .doesNotHaveClass("list-item-checkbox");
assert.false(
listItems[1]
.querySelector(".chcklst-box")
.classList.contains("list-item-checkbox"),
"LI 2 checkbox does not have `.list-item-checkbox`"
);
assert.true( assert.dom(listItems[2]).hasClass("has-checkbox");
listItems[2].classList.contains("has-checkbox"), assert.dom(".chcklst-box", listItems[2]).hasClass("list-item-checkbox");
"LI 3 has `.has-checkbox` class"
);
assert.true(
listItems[2]
.querySelector(".chcklst-box")
.classList.contains("list-item-checkbox"),
"LI 3 checkbox has `.list-item-checkbox`"
);
const orderedListItems = [...elem.querySelector("ol").children]; assert.dom("ol > li").exists({ count: 1 });
assert.false( assert.dom("ol > li").doesNotHaveClass("has-checkbox");
orderedListItems[0].classList.contains("has-checkbox"), assert.dom("ol .chcklst-box").doesNotHaveClass("list-item-checkbox");
"OL does not have `.has-checkbox` class"
);
assert.false(
orderedListItems[0]
.querySelector(".chcklst-box")
.classList.contains("list-item-checkbox"),
"OL checkbox does not have `.list-item-checkbox`"
);
}); });
}); });