IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

FEATURE: Poll breakdown 2.0 (#10345)

Browse Source 
The poll breakdown modal replaces the grouped pie charts feature.

Includes:

* MODAL: Untangle `onSelectPanel`
Previously modal-tab component would call on click the onSelectPanel callback with itself (modal-tab) as `this` which severely limited its usefulness. Now showModal binds the callback to its controller.

"The PR includes a fix/change to d-modal (b7f6ec6) that hasn't been extracted to a separate PR because it's not currently possible to test a change like this in abstract, i.e. with dynamically created controllers/components in tests. The percentage/count toggle test for the poll breakdown feature is essentially a test for that d-modal modification."
This commit is contained in:
Jarek Radosz
2020-08-06 17:57:06 +02:00
committed by GitHub
parent 76c02cac65
commit cd4f251891
26 changed files with 708 additions and 294 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
plugins/poll/test/javascripts/acceptance/poll-breakdown-test.js.es6 Normal file
View File

@@ -0,0 +1,119 @@
import { acceptance } from "helpers/qunit-helpers";
import { clearPopupMenuOptionsCallback } from "discourse/controllers/composer";
import { Promise } from "rsvp";
acceptance("Poll breakdown", {
loggedIn: true,
settings: { poll_enabled: true, poll_groupable_user_fields: "something" },
beforeEach() {
clearPopupMenuOptionsCallback();
},
pretend(server, helper) {
server.get("/polls/grouped_poll_results.json", () => {
return new Promise(resolve => {
resolve(
helper.response({
grouped_results: [
{
group: "Engineering",
options: [
{
digest: "687a1ccf3c6a260f9aeeb7f68a1d463c",
html: "This Is",
votes: 1
},
{
digest: "9377906763a1221d31d656ea0c4a4495",
html: "A test for sure",
votes: 1
},
{
digest: "ecf47c65a85a0bb20029072b1b721977",
html: "Why not give it some more",
votes: 1
}
]
},
{
group: "Marketing",
options: [
{
digest: "687a1ccf3c6a260f9aeeb7f68a1d463c",
html: "This Is",
votes: 1
},
{
digest: "9377906763a1221d31d656ea0c4a4495",
html: "A test for sure",
votes: 1
},
{
digest: "ecf47c65a85a0bb20029072b1b721977",
html: "Why not give it some more",
votes: 1
}
]
}
]
})
);
});
});
}
});
test("Displaying the poll breakdown modal", async assert => {
await visit("/t/-/topic_with_pie_chart_poll");
assert.equal(
find(".poll-show-breakdown").text(),
"Show breakdown",
"shows the breakdown button when poll_groupable_user_fields is non-empty"
);
await click(".poll-show-breakdown:first");
assert.equal(
find(".poll-breakdown-total-votes")[0].textContent.trim(),
"2 votes",
"display the correct total vote count"
);
assert.equal(
find(".poll-breakdown-chart-container").length,
2,
"renders a chart for each of the groups in group_results response"
);
assert.ok(
find(".poll-breakdown-chart-container > canvas")[0].$chartjs,
"$chartjs is defined on the pie charts"
);
});
test("Changing the display mode from percentage to count", async assert => {
await visit("/t/-/topic_with_pie_chart_poll");
await click(".poll-show-breakdown:first");
assert.equal(
find(".poll-breakdown-option-count:first")[0].textContent.trim(),
"40.0%",
"displays the correct vote percentage"
);
await click(".modal-tabs .count");
assert.equal(
find(".poll-breakdown-option-count:first")[0].textContent.trim(),
"2",
"displays the correct vote count"
);
await click(".modal-tabs .percentage");
assert.equal(
find(".poll-breakdown-option-count:last")[0].textContent.trim(),
"20.0%",
"displays the percentage again"
);
});

96
plugins/poll/test/javascripts/acceptance/poll-pie-chart-test.js.es6
View File

@@ -1,68 +1,11 @@
import { acceptance } from "helpers/qunit-helpers";
import { clearPopupMenuOptionsCallback } from "discourse/controllers/composer";
import { Promise } from "rsvp";
acceptance("Rendering polls with pie charts - desktop", {
loggedIn: true,
settings: { poll_enabled: true, poll_groupable_user_fields: "something" },
beforeEach() {
clearPopupMenuOptionsCallback();
},
pretend(server, helper) {
server.get("/polls/grouped_poll_results.json", () => {
return new Promise(resolve => {
resolve(
helper.response({
grouped_results: [
{
group: "Engineering",
options: [
{
digest: "687a1ccf3c6a260f9aeeb7f68a1d463c",
html: "This Is",
votes: 1
},
{
digest: "9377906763a1221d31d656ea0c4a4495",
html: "A test for sure",
votes: 1
},
{
digest: "ecf47c65a85a0bb20029072b1b721977",
html: "Why not give it some more",
votes: 1
}
]
},
{
group: "Marketing",
options: [
{
digest: "687a1ccf3c6a260f9aeeb7f68a1d463c",
html: "This Is",
votes: 1
},
{
digest: "9377906763a1221d31d656ea0c4a4495",
html: "A test for sure",
votes: 1
},
{
digest: "ecf47c65a85a0bb20029072b1b721977",
html: "Why not give it some more",
votes: 1
}
]
}
]
})
);
});
});
}
settings: { poll_enabled: true, poll_groupable_user_fields: "something" }
});
test("Polls", async assert => {
test("Displays the pie chart", async assert => {
await visit("/t/-/topic_with_pie_chart_poll");
const poll = find(".poll")[0];
@@ -90,39 +33,4 @@ test("Polls", async assert => {
1,
"Renders the chart div instead of bar container"
);
assert.equal(
find(".poll-group-by-toggle").text(),
"Show breakdown",
"Shows the breakdown button when poll_groupable_user_fields is non-empty"
);
await click(".poll-group-by-toggle:first");
assert.equal(
find(".poll-group-by-toggle").text(),
"Hide breakdown",
"Shows the combine breakdown button after toggle is clicked"
);
// Double click to make sure the state toggles back to combined view
await click(".toggle-results:first");
await click(".toggle-results:first");
assert.equal(
find(".poll-group-by-toggle").text(),
"Hide breakdown",
"Returns to the grouped view, after toggling results shown"
);
assert.equal(
find(".poll-grouped-pie-container").length,
2,
"Renders a chart for each of the groups in group_results response"
);
assert.ok(
find(".poll-grouped-pie-container > canvas")[0].$chartjs,
"$chartjs is defined on the pie charts"
);
});