DEV: Modernize component tests (#17368)

* Use QUnit `module` instead of `discourseModule`
* Use QUnit `test` instead of `componentTest`
* Use angle-bracket syntax
* Remove jQuery usage
* Improve assertions (and actually fix some of them)
This commit is contained in:
Jarek Radosz
2022-07-11 12:29:44 +02:00
committed by GitHub
parent 5b70b67e78
commit 189bebb2e4
122 changed files with 8203 additions and 9999 deletions

View File

@ -1,98 +1,86 @@
import componentTest, {
setupRenderingTest,
} from "discourse/tests/helpers/component-test";
import { module, test } from "qunit";
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
import { render } from "@ember/test-helpers";
import EmberObject from "@ember/object";
import {
discourseModule,
queryAll,
} from "discourse/tests/helpers/qunit-helpers";
import { queryAll } from "discourse/tests/helpers/qunit-helpers";
import hbs from "htmlbars-inline-precompile";
discourseModule(
module(
"Integration | Component | Widget | discourse-poll-standard-results",
function (hooks) {
setupRenderingTest(hooks);
const template = hbs`{{mount-widget
widget="discourse-poll-standard-results"
args=(hash poll=poll isMultiple=isMultiple)}}`;
const template = hbs`
<MountWidget
@widget="discourse-poll-standard-results"
@args={{hash poll=this.poll isMultiple=this.isMultiple}}
/>
`;
componentTest("options in descending order", {
template,
test("options in descending order", async function (assert) {
this.set(
"poll",
EmberObject.create({
options: [{ votes: 5 }, { votes: 4 }],
voters: 9,
})
);
beforeEach() {
this.set(
"poll",
EmberObject.create({
options: [{ votes: 5 }, { votes: 4 }],
voters: 9,
})
);
},
await render(template);
test(assert) {
assert.strictEqual(queryAll(".option .percentage")[0].innerText, "56%");
assert.strictEqual(queryAll(".option .percentage")[1].innerText, "44%");
},
assert.strictEqual(queryAll(".option .percentage")[0].innerText, "56%");
assert.strictEqual(queryAll(".option .percentage")[1].innerText, "44%");
});
componentTest("options in ascending order", {
template,
test("options in ascending order", async function (assert) {
this.set(
"poll",
EmberObject.create({
options: [{ votes: 4 }, { votes: 5 }],
voters: 9,
})
);
beforeEach() {
this.set(
"poll",
EmberObject.create({
options: [{ votes: 4 }, { votes: 5 }],
voters: 9,
})
);
},
await render(template);
test(assert) {
assert.strictEqual(queryAll(".option .percentage")[0].innerText, "56%");
assert.strictEqual(queryAll(".option .percentage")[1].innerText, "44%");
},
assert.strictEqual(queryAll(".option .percentage")[0].innerText, "56%");
assert.strictEqual(queryAll(".option .percentage")[1].innerText, "44%");
});
componentTest("multiple options in descending order", {
template,
test("multiple options in descending order", async function (assert) {
this.set("isMultiple", true);
this.set(
"poll",
EmberObject.create({
type: "multiple",
options: [
{ votes: 5, html: "a" },
{ votes: 2, html: "b" },
{ votes: 4, html: "c" },
{ votes: 1, html: "b" },
{ votes: 1, html: "a" },
],
voters: 12,
})
);
beforeEach() {
this.set("isMultiple", true);
this.set(
"poll",
EmberObject.create({
type: "multiple",
options: [
{ votes: 5, html: "a" },
{ votes: 2, html: "b" },
{ votes: 4, html: "c" },
{ votes: 1, html: "b" },
{ votes: 1, html: "a" },
],
voters: 12,
})
);
},
await render(template);
test(assert) {
let percentages = queryAll(".option .percentage");
assert.strictEqual(percentages[0].innerText, "41%");
assert.strictEqual(percentages[1].innerText, "33%");
assert.strictEqual(percentages[2].innerText, "16%");
assert.strictEqual(percentages[3].innerText, "8%");
let percentages = queryAll(".option .percentage");
assert.strictEqual(percentages[0].innerText, "41%");
assert.strictEqual(percentages[1].innerText, "33%");
assert.strictEqual(percentages[2].innerText, "16%");
assert.strictEqual(percentages[3].innerText, "8%");
assert.strictEqual(
queryAll(".option")[3].querySelectorAll("span")[1].innerText,
"a"
);
assert.strictEqual(percentages[4].innerText, "8%");
assert.strictEqual(
queryAll(".option")[4].querySelectorAll("span")[1].innerText,
"b"
);
},
assert.strictEqual(
queryAll(".option")[3].querySelectorAll("span")[1].innerText,
"a"
);
assert.strictEqual(percentages[4].innerText, "8%");
assert.strictEqual(
queryAll(".option")[4].querySelectorAll("span")[1].innerText,
"b"
);
});
}
);