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