FEATURE: Absolute Numbers in Poll (#28240)

What does this add?
===================

This PR adds an extra button to the poll to show the absolute number of
people who voted for each option. This button will only be added for
the single/multi-select bar chart.

Related meta topic: https://meta.discourse.org/t/absolute-numbers-in-polls/32771

plugins/poll/test/javascripts/component/poll-buttons-dropdown-test.js

@@ -37,7 +37,7 @@ module("Poll | Component | poll-buttons-dropdown", function (hooks) {
 
     await click(".widget-dropdown-header");
 
-    assert.strictEqual(count("li.dropdown-menu__item"), 2);
+    assert.dom("li.dropdown-menu__item").exists({ count: 2 });
 
     assert.strictEqual(
       query("li.dropdown-menu__item span").textContent.trim(),
@@ -46,6 +46,43 @@ module("Poll | Component | poll-buttons-dropdown", function (hooks) {
     );
   });
 
+  test("Renders a show-tally button when poll is a bar chart", async function (assert) {
+    this.setProperties({
+      closed: false,
+      voters: 2,
+      isStaff: false,
+      isMe: false,
+      topicArchived: false,
+      groupableUserFields: ["stuff"],
+      isAutomaticallyClosed: false,
+      dropDownClick: () => {},
+      availableDisplayMode: "showTally",
+    });
+
+    await render(hbs`<PollButtonsDropdown
+      @closed={{this.closed}}
+      @voters={{this.voters}}
+      @isStaff={{this.isStaff}}
+      @isMe={{this.isMe}}
+      @topicArchived={{this.topicArchived}}
+      @groupableUserFields={{this.groupableUserFields}}
+      @isAutomaticallyClosed={{this.isAutomaticallyClosed}}
+      @dropDownClick={{this.dropDownClick}}
+      @availableDisplayMode={{this.availableDisplayMode}}
+    />`);
+
+    await click(".widget-dropdown-header");
+
+    assert.strictEqual(count("li.dropdown-menu__item"), 2);
+
+    assert
+      .dom(query("li.dropdown-menu__item span"))
+      .hasText(
+        I18n.t("poll.show-tally.label"),
+        "displays the show absolute button"
+      );
+  });
+
   test("Renders a single button when there is only one authorised action", async function (assert) {
     this.setProperties({
       closed: false,

plugins/poll/test/javascripts/component/poll-results-standard-test.js

@@ -3,6 +3,7 @@ import hbs from "htmlbars-inline-precompile";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import { exists, queryAll } from "discourse/tests/helpers/qunit-helpers";
+import I18n from "discourse-i18n";
 
 const TWO_OPTIONS = [
   { id: "1ddc47be0d2315b9711ee8526ca9d83f", html: "This", votes: 5, rank: 0 },
@@ -160,4 +161,40 @@ module("Poll | Component | poll-results-standard", function (hooks) {
       "b"
     );
   });
+
+  test("options in ascending order, showing absolute vote number", async function (assert) {
+    this.setProperties({
+      options: FIVE_OPTIONS,
+      pollName: "Five Multi Option Poll",
+      pollType: "multiple",
+      postId: 123,
+      vote: ["1ddc47be0d2315b9711ee8526ca9d83f"],
+      voters: PRELOADEDVOTERS,
+      votersCount: 12,
+      fetchVoters: () => {},
+      showTally: true,
+    });
+
+    await render(hbs`<PollResultsStandard
+      @options={{this.options}}
+      @pollName={{this.pollName}}
+      @pollType={{this.pollType}}
+      @postId={{this.postId}}
+      @vote={{this.vote}}
+      @voters={{this.voters}}
+      @votersCount={{this.votersCount}}
+      @fetchVoters={{this.fetchVoters}}
+      @showTally={{this.showTally}}
+    />`);
+
+    let percentages = queryAll(".option .absolute");
+    assert.dom(percentages[0]).hasText(I18n.t("poll.votes", { count: 5 }));
+    assert.dom(percentages[1]).hasText(I18n.t("poll.votes", { count: 4 }));
+    assert.dom(percentages[2]).hasText(I18n.t("poll.votes", { count: 2 }));
+    assert.dom(percentages[3]).hasText(I18n.t("poll.votes", { count: 1 }));
+
+    assert.dom(queryAll(".option")[3].querySelectorAll("span")[1]).hasText("a");
+    assert.dom(percentages[4]).hasText(I18n.t("poll.votes", { count: 1 }));
+    assert.dom(queryAll(".option")[4].querySelectorAll("span")[1]).hasText("b");
+  });
 });