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
GitHub
@@ -1,82 +1,68 @@
|
||||
import componentTest, {
|
||||
setupRenderingTest,
|
||||
} from "discourse/tests/helpers/component-test";
|
||||
import {
|
||||
discourseModule,
|
||||
queryAll,
|
||||
} from "discourse/tests/helpers/qunit-helpers";
|
||||
import { module, test } from "qunit";
|
||||
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
|
||||
import { render } from "@ember/test-helpers";
|
||||
import { count } from "discourse/tests/helpers/qunit-helpers";
|
||||
import hbs from "htmlbars-inline-precompile";
|
||||
|
||||
discourseModule(
|
||||
module(
|
||||
"Integration | Component | Widget | discourse-poll-option",
|
||||
function (hooks) {
|
||||
setupRenderingTest(hooks);
|
||||
const template = hbs`{{mount-widget
|
||||
widget="discourse-poll-option"
|
||||
args=(hash option=option isMultiple=isMultiple vote=vote)}}`;
|
||||
|
||||
componentTest("single, not selected", {
|
||||
template,
|
||||
const template = hbs`
|
||||
<MountWidget
|
||||
@widget="discourse-poll-option"
|
||||
@args={{hash
|
||||
option=this.option
|
||||
isMultiple=this.isMultiple
|
||||
vote=this.vote
|
||||
}}
|
||||
/>
|
||||
`;
|
||||
|
||||
beforeEach() {
|
||||
this.set("option", { id: "opt-id" });
|
||||
this.set("vote", []);
|
||||
},
|
||||
test("single, not selected", async function (assert) {
|
||||
this.set("option", { id: "opt-id" });
|
||||
this.set("vote", []);
|
||||
|
||||
test(assert) {
|
||||
assert.ok(
|
||||
queryAll("li .d-icon-far-circle:nth-of-type(1)").length === 1
|
||||
);
|
||||
},
|
||||
await render(template);
|
||||
|
||||
assert.strictEqual(count("li .d-icon-far-circle:nth-of-type(1)"), 1);
|
||||
});
|
||||
|
||||
componentTest("single, selected", {
|
||||
template,
|
||||
test("single, selected", async function (assert) {
|
||||
this.set("option", { id: "opt-id" });
|
||||
this.set("vote", ["opt-id"]);
|
||||
|
||||
beforeEach() {
|
||||
this.set("option", { id: "opt-id" });
|
||||
this.set("vote", ["opt-id"]);
|
||||
},
|
||||
await render(template);
|
||||
|
||||
test(assert) {
|
||||
assert.ok(queryAll("li .d-icon-circle:nth-of-type(1)").length === 1);
|
||||
},
|
||||
assert.strictEqual(count("li .d-icon-circle:nth-of-type(1)"), 1);
|
||||
});
|
||||
|
||||
componentTest("multi, not selected", {
|
||||
template,
|
||||
test("multi, not selected", async function (assert) {
|
||||
this.setProperties({
|
||||
option: { id: "opt-id" },
|
||||
isMultiple: true,
|
||||
vote: [],
|
||||
});
|
||||
|
||||
beforeEach() {
|
||||
this.setProperties({
|
||||
option: { id: "opt-id" },
|
||||
isMultiple: true,
|
||||
vote: [],
|
||||
});
|
||||
},
|
||||
await render(template);
|
||||
|
||||
test(assert) {
|
||||
assert.ok(
|
||||
queryAll("li .d-icon-far-square:nth-of-type(1)").length === 1
|
||||
);
|
||||
},
|
||||
assert.strictEqual(count("li .d-icon-far-square:nth-of-type(1)"), 1);
|
||||
});
|
||||
|
||||
componentTest("multi, selected", {
|
||||
template,
|
||||
test("multi, selected", async function (assert) {
|
||||
this.setProperties({
|
||||
option: { id: "opt-id" },
|
||||
isMultiple: true,
|
||||
vote: ["opt-id"],
|
||||
});
|
||||
|
||||
beforeEach() {
|
||||
this.setProperties({
|
||||
option: { id: "opt-id" },
|
||||
isMultiple: true,
|
||||
vote: ["opt-id"],
|
||||
});
|
||||
},
|
||||
await render(template);
|
||||
|
||||
test(assert) {
|
||||
assert.ok(
|
||||
queryAll("li .d-icon-far-check-square:nth-of-type(1)").length === 1
|
||||
);
|
||||
},
|
||||
assert.strictEqual(
|
||||
count("li .d-icon-far-check-square:nth-of-type(1)"),
|
||||
1
|
||||
);
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
@@ -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"
|
||||
);
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
@@ -1,195 +1,172 @@
|
||||
import {
|
||||
count,
|
||||
discourseModule,
|
||||
exists,
|
||||
queryAll,
|
||||
} from "discourse/tests/helpers/qunit-helpers";
|
||||
import componentTest, {
|
||||
setupRenderingTest,
|
||||
} from "discourse/tests/helpers/component-test";
|
||||
import { module, test } from "qunit";
|
||||
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
|
||||
import { click, render } from "@ember/test-helpers";
|
||||
import { count, exists, query } from "discourse/tests/helpers/qunit-helpers";
|
||||
import hbs from "htmlbars-inline-precompile";
|
||||
import pretender from "discourse/tests/helpers/create-pretender";
|
||||
import EmberObject from "@ember/object";
|
||||
import I18n from "I18n";
|
||||
import pretender from "discourse/tests/helpers/create-pretender";
|
||||
import hbs from "htmlbars-inline-precompile";
|
||||
import { click } from "@ember/test-helpers";
|
||||
|
||||
let requests = 0;
|
||||
|
||||
discourseModule(
|
||||
"Integration | Component | Widget | discourse-poll",
|
||||
function (hooks) {
|
||||
setupRenderingTest(hooks);
|
||||
module("Integration | Component | Widget | discourse-poll", function (hooks) {
|
||||
setupRenderingTest(hooks);
|
||||
|
||||
pretender.put("/polls/vote", () => {
|
||||
++requests;
|
||||
return [
|
||||
200,
|
||||
{ "Content-Type": "application/json" },
|
||||
{
|
||||
poll: {
|
||||
name: "poll",
|
||||
type: "regular",
|
||||
status: "open",
|
||||
results: "always",
|
||||
options: [
|
||||
{
|
||||
id: "1f972d1df351de3ce35a787c89faad29",
|
||||
html: "yes",
|
||||
votes: 1,
|
||||
},
|
||||
{
|
||||
id: "d7ebc3a9beea2e680815a1e4f57d6db6",
|
||||
html: "no",
|
||||
votes: 0,
|
||||
},
|
||||
],
|
||||
voters: 1,
|
||||
chart_type: "bar",
|
||||
},
|
||||
vote: ["1f972d1df351de3ce35a787c89faad29"],
|
||||
pretender.put("/polls/vote", () => {
|
||||
++requests;
|
||||
return [
|
||||
200,
|
||||
{ "Content-Type": "application/json" },
|
||||
{
|
||||
poll: {
|
||||
name: "poll",
|
||||
type: "regular",
|
||||
status: "open",
|
||||
results: "always",
|
||||
options: [
|
||||
{
|
||||
id: "1f972d1df351de3ce35a787c89faad29",
|
||||
html: "yes",
|
||||
votes: 1,
|
||||
},
|
||||
{
|
||||
id: "d7ebc3a9beea2e680815a1e4f57d6db6",
|
||||
html: "no",
|
||||
votes: 0,
|
||||
},
|
||||
],
|
||||
voters: 1,
|
||||
chart_type: "bar",
|
||||
},
|
||||
];
|
||||
vote: ["1f972d1df351de3ce35a787c89faad29"],
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
const template = hbs`
|
||||
<MountWidget
|
||||
@widget="discourse-poll"
|
||||
@args={{hash
|
||||
id=this.id
|
||||
post=this.post
|
||||
poll=this.poll
|
||||
vote=this.vote
|
||||
groupableUserFields=this.groupableUserFields
|
||||
}}
|
||||
/>
|
||||
`;
|
||||
|
||||
test("can vote", async function (assert) {
|
||||
this.setProperties({
|
||||
post: EmberObject.create({
|
||||
id: 42,
|
||||
topic: {
|
||||
archived: false,
|
||||
},
|
||||
}),
|
||||
poll: EmberObject.create({
|
||||
name: "poll",
|
||||
type: "regular",
|
||||
status: "open",
|
||||
results: "always",
|
||||
options: [
|
||||
{ id: "1f972d1df351de3ce35a787c89faad29", html: "yes", votes: 0 },
|
||||
{ id: "d7ebc3a9beea2e680815a1e4f57d6db6", html: "no", votes: 0 },
|
||||
],
|
||||
voters: 0,
|
||||
chart_type: "bar",
|
||||
}),
|
||||
vote: [],
|
||||
groupableUserFields: [],
|
||||
});
|
||||
|
||||
const template = hbs`{{mount-widget
|
||||
widget="discourse-poll"
|
||||
args=(hash id=id
|
||||
post=post
|
||||
poll=poll
|
||||
vote=vote
|
||||
groupableUserFields=groupableUserFields)}}`;
|
||||
await render(template);
|
||||
|
||||
componentTest("can vote", {
|
||||
template,
|
||||
requests = 0;
|
||||
|
||||
beforeEach() {
|
||||
this.setProperties({
|
||||
post: EmberObject.create({
|
||||
id: 42,
|
||||
topic: {
|
||||
archived: false,
|
||||
},
|
||||
}),
|
||||
poll: EmberObject.create({
|
||||
name: "poll",
|
||||
type: "regular",
|
||||
status: "open",
|
||||
results: "always",
|
||||
options: [
|
||||
{ id: "1f972d1df351de3ce35a787c89faad29", html: "yes", votes: 0 },
|
||||
{ id: "d7ebc3a9beea2e680815a1e4f57d6db6", html: "no", votes: 0 },
|
||||
],
|
||||
voters: 0,
|
||||
chart_type: "bar",
|
||||
}),
|
||||
vote: [],
|
||||
groupableUserFields: [],
|
||||
});
|
||||
},
|
||||
await click("li[data-poll-option-id='1f972d1df351de3ce35a787c89faad29']");
|
||||
assert.strictEqual(requests, 1);
|
||||
assert.strictEqual(count(".chosen"), 1);
|
||||
assert.strictEqual(query(".chosen").innerText, "100%yes");
|
||||
|
||||
async test(assert) {
|
||||
requests = 0;
|
||||
await click(".toggle-results");
|
||||
assert.strictEqual(
|
||||
count("li[data-poll-option-id='1f972d1df351de3ce35a787c89faad29']"),
|
||||
1
|
||||
);
|
||||
});
|
||||
|
||||
await click(
|
||||
"li[data-poll-option-id='1f972d1df351de3ce35a787c89faad29']"
|
||||
);
|
||||
assert.strictEqual(requests, 1);
|
||||
assert.strictEqual(count(".chosen"), 1);
|
||||
assert.strictEqual(queryAll(".chosen").text(), "100%yes");
|
||||
|
||||
await click(".toggle-results");
|
||||
assert.strictEqual(
|
||||
queryAll("li[data-poll-option-id='1f972d1df351de3ce35a787c89faad29']")
|
||||
.length,
|
||||
1
|
||||
);
|
||||
},
|
||||
test("cannot vote if not member of the right group", async function (assert) {
|
||||
this.setProperties({
|
||||
post: EmberObject.create({
|
||||
id: 42,
|
||||
topic: {
|
||||
archived: false,
|
||||
},
|
||||
}),
|
||||
poll: EmberObject.create({
|
||||
name: "poll",
|
||||
type: "regular",
|
||||
status: "open",
|
||||
results: "always",
|
||||
options: [
|
||||
{ id: "1f972d1df351de3ce35a787c89faad29", html: "yes", votes: 0 },
|
||||
{ id: "d7ebc3a9beea2e680815a1e4f57d6db6", html: "no", votes: 0 },
|
||||
],
|
||||
voters: 0,
|
||||
chart_type: "bar",
|
||||
groups: "foo",
|
||||
}),
|
||||
vote: [],
|
||||
groupableUserFields: [],
|
||||
});
|
||||
|
||||
componentTest("cannot vote if not member of the right group", {
|
||||
template,
|
||||
await render(template);
|
||||
|
||||
beforeEach() {
|
||||
this.setProperties({
|
||||
post: EmberObject.create({
|
||||
id: 42,
|
||||
topic: {
|
||||
archived: false,
|
||||
},
|
||||
}),
|
||||
poll: EmberObject.create({
|
||||
name: "poll",
|
||||
type: "regular",
|
||||
status: "open",
|
||||
results: "always",
|
||||
options: [
|
||||
{ id: "1f972d1df351de3ce35a787c89faad29", html: "yes", votes: 0 },
|
||||
{ id: "d7ebc3a9beea2e680815a1e4f57d6db6", html: "no", votes: 0 },
|
||||
],
|
||||
voters: 0,
|
||||
chart_type: "bar",
|
||||
groups: "foo",
|
||||
}),
|
||||
vote: [],
|
||||
groupableUserFields: [],
|
||||
});
|
||||
},
|
||||
requests = 0;
|
||||
|
||||
async test(assert) {
|
||||
requests = 0;
|
||||
await click("li[data-poll-option-id='1f972d1df351de3ce35a787c89faad29']");
|
||||
assert.strictEqual(
|
||||
query(".poll-container .alert").innerText,
|
||||
I18n.t("poll.results.groups.title", { groups: "foo" })
|
||||
);
|
||||
assert.strictEqual(requests, 0);
|
||||
assert.ok(!exists(".chosen"));
|
||||
});
|
||||
|
||||
await click(
|
||||
"li[data-poll-option-id='1f972d1df351de3ce35a787c89faad29']"
|
||||
);
|
||||
assert.strictEqual(
|
||||
queryAll(".poll-container .alert").text(),
|
||||
I18n.t("poll.results.groups.title", { groups: "foo" })
|
||||
);
|
||||
assert.strictEqual(requests, 0);
|
||||
assert.ok(!exists(".chosen"));
|
||||
},
|
||||
test("voting on a multiple poll with no min attribute", async function (assert) {
|
||||
this.setProperties({
|
||||
post: EmberObject.create({
|
||||
id: 42,
|
||||
topic: {
|
||||
archived: false,
|
||||
},
|
||||
}),
|
||||
poll: EmberObject.create({
|
||||
name: "poll",
|
||||
type: "multiple",
|
||||
status: "open",
|
||||
results: "always",
|
||||
max: 2,
|
||||
options: [
|
||||
{ id: "1f972d1df351de3ce35a787c89faad29", html: "yes", votes: 0 },
|
||||
{ id: "d7ebc3a9beea2e680815a1e4f57d6db6", html: "no", votes: 0 },
|
||||
],
|
||||
voters: 0,
|
||||
chart_type: "bar",
|
||||
}),
|
||||
vote: [],
|
||||
groupableUserFields: [],
|
||||
});
|
||||
|
||||
componentTest("voting on a multiple poll with no min attribute", {
|
||||
template,
|
||||
await render(template);
|
||||
|
||||
beforeEach() {
|
||||
this.setProperties({
|
||||
post: EmberObject.create({
|
||||
id: 42,
|
||||
topic: {
|
||||
archived: false,
|
||||
},
|
||||
}),
|
||||
poll: EmberObject.create({
|
||||
name: "poll",
|
||||
type: "multiple",
|
||||
status: "open",
|
||||
results: "always",
|
||||
max: 2,
|
||||
options: [
|
||||
{ id: "1f972d1df351de3ce35a787c89faad29", html: "yes", votes: 0 },
|
||||
{ id: "d7ebc3a9beea2e680815a1e4f57d6db6", html: "no", votes: 0 },
|
||||
],
|
||||
voters: 0,
|
||||
chart_type: "bar",
|
||||
}),
|
||||
vote: [],
|
||||
groupableUserFields: [],
|
||||
});
|
||||
},
|
||||
assert.ok(exists(".poll-buttons .cast-votes[disabled=true]"));
|
||||
|
||||
async test(assert) {
|
||||
assert.ok(exists(".poll-buttons .cast-votes[disabled=true]"));
|
||||
await click("li[data-poll-option-id='1f972d1df351de3ce35a787c89faad29']");
|
||||
|
||||
await click(
|
||||
"li[data-poll-option-id='1f972d1df351de3ce35a787c89faad29']"
|
||||
);
|
||||
await click(".poll-buttons .cast-votes");
|
||||
|
||||
await click(".poll-buttons .cast-votes");
|
||||
|
||||
assert.ok(exists(".chosen"));
|
||||
},
|
||||
});
|
||||
}
|
||||
);
|
||||
assert.ok(exists(".chosen"));
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user