Fix existing tests but 3

src/components/views/messages/MPollBody.tsx

@@ -367,8 +367,8 @@ export default class MPollBody extends React.Component<IBodyProps, IState> {
                         );
                     })}
                 </div>
-                <div data-testid="totalVotes" className="mx_MPollBody_totalVotes">
+                <div className="mx_MPollBody_totalVotes">
-                    <span onClick={() => showDetailedVotes()}>{totalText}</span>
+                    <span data-testid="totalVotes" onClick={() => showDetailedVotes()}>{totalText}</span>
                     {isFetchingResponses && <Spinner w={16} h={16} />}
                 </div>
             </div>

src/components/views/polls/PollOption.tsx

@@ -12,7 +12,6 @@ import React, { ReactNode, useContext } from "react";
 
 import { Icon as TrophyIcon } from "../../../../res/img/element-icons/trophy.svg";
 import RoomContext from "../../../contexts/RoomContext";
-import { useRoomMembers } from "../../../hooks/useRoomMembers";
 import { _t } from "../../../languageHandler";
 import FacePile from "../elements/FacePile";
 import StyledRadioButton from "../elements/StyledRadioButton";
@@ -28,13 +27,13 @@ type PollOptionContentProps = {
 };
 const PollOptionContent: React.FC<PollOptionContentProps> = ({ isWinner, answer, votes, displayVoteCount }) => {
     const votesText = displayVoteCount ? _t("timeline|m.poll|count_of_votes", { count: votes.length }) : "";
-    const room = useContext(RoomContext).room!;
+    const room = useContext(RoomContext).room;
-    const members = useRoomMembers(room);
+    const members = room?.getJoinedMembers() || [];
 
     return (
         <div className="mx_PollOption_content">
             <div className="mx_PollOption_optionText">{answer.text}</div>
-            <div className="mx_PollOption_optionVoteCount">
+            <div>
                 <div style={{ display: "flex" }}>
                     {displayVoteCount
                         && members.length <= MAXIMUM_MEMBERS_FOR_FACE_PILE
@@ -45,7 +44,7 @@ const PollOptionContent: React.FC<PollOptionContentProps> = ({ isWinner, answer,
                             style={{ marginRight: "10px" }}
                         />
                     }
-                    <span>
+                    <span className="mx_PollOption_optionVoteCount">
                         {isWinner && <TrophyIcon className="mx_PollOption_winnerIcon" />}
                         {votesText}
                     </span>

src/i18n/strings/en_EN.json

@@ -1727,8 +1727,8 @@
             "other": "%(count)s votes cast. Vote to see the results"
         },
         "total_n_votes_voted": {
-            "one": "Based on %(count)s vote. Click here to see the results",
+            "one": "Based on %(count)s vote. Click here to see full results",
-            "other": "Based on %(count)s votes. Click here to see the results"
+            "other": "Based on %(count)s votes. Click here to see full results"
         },
         "total_no_votes": "No votes cast",
         "total_not_ended": "Results will be visible when the poll is ended",
@@ -1879,8 +1879,8 @@
                 "other": "There are no past polls for the past %(count)s days. Load more polls to view polls for previous months"
             },
             "final_result": {
-                "one": "Final result based on %(count)s vote. Click here to see the results",
+                "one": "Final result based on %(count)s vote. Click here to see full results",
-                "other": "Final result based on %(count)s votes. Click here to see the results"
+                "other": "Final result based on %(count)s votes. Click here to see full results"
             },
             "load_more": "Load more polls",
             "loading": "Loading polls",

test/unit-tests/components/views/messages/MPollBody-test.tsx

@@ -6,26 +6,30 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
 import { fireEvent, render, RenderResult } from "jest-matrix-react";
 import {
-    MatrixEvent,
-    Relations,
     M_POLL_KIND_DISCLOSED,
     M_POLL_KIND_UNDISCLOSED,
     M_POLL_RESPONSE,
     M_POLL_START,
-    PollStartEventContent,
-    PollAnswer,
     M_TEXT,
+    MatrixEvent,
+    PollAnswer,
+    PollStartEventContent,
+    Relations
 } from "matrix-js-sdk/src/matrix";
+import React from "react";
 
+import { IBodyProps } from "../../../../../src/components/views/messages/IBodyProps";
 import MPollBody, {
     allVotes,
     findTopAnswer,
     isPollEnded,
 } from "../../../../../src/components/views/messages/MPollBody";
-import { IBodyProps } from "../../../../../src/components/views/messages/IBodyProps";
+import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
+import * as languageHandler from "../../../../../src/languageHandler";
+import { MediaEventHelper } from "../../../../../src/utils/MediaEventHelper";
+import { RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks";
 import {
     flushPromises,
     getMockClientWithEventEmitter,
@@ -33,10 +37,6 @@ import {
     mockClientMethodsUser,
     setupRoomWithPollEvents,
 } from "../../../../test-utils";
-import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
-import { RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks";
-import { MediaEventHelper } from "../../../../../src/utils/MediaEventHelper";
-import * as languageHandler from "../../../../../src/languageHandler";
 
 const CHECKED = "mx_PollOption_checked";
 const userId = "@me:example.com";
@@ -99,7 +99,7 @@ describe("MPollBody", () => {
         expect(votesCount(renderResult, "poutine")).toBe("1 vote");
         expect(votesCount(renderResult, "italian")).toBe("0 votes");
         expect(votesCount(renderResult, "wings")).toBe("1 vote");
-        expect(renderResult.getByTestId("totalVotes").innerHTML).toBe("Based on 4 votes");
+        expect(renderResult.getByTestId("totalVotes").innerHTML).toBe("Based on 4 votes. Click here to see full results");
     });
 
     it("ignores end poll events from unauthorised users", async () => {
@@ -118,7 +118,7 @@ describe("MPollBody", () => {
         expect(votesCount(renderResult, "poutine")).toBe("1 vote");
         expect(votesCount(renderResult, "italian")).toBe("0 votes");
         expect(votesCount(renderResult, "wings")).toBe("1 vote");
-        expect(renderResult.getByTestId("totalVotes").innerHTML).toBe("Based on 4 votes");
+        expect(renderResult.getByTestId("totalVotes").innerHTML).toBe("Based on 4 votes. Click here to see full results");
     });
 
     it("hides scores if I have not voted", async () => {
@@ -159,7 +159,7 @@ describe("MPollBody", () => {
         expect(votesCount(renderResult, "poutine")).toBe("1 vote");
         expect(votesCount(renderResult, "italian")).toBe("0 votes");
         expect(votesCount(renderResult, "wings")).toBe("1 vote");
-        expect(renderResult.getByTestId("totalVotes").innerHTML).toBe("Based on 2 votes");
+        expect(renderResult.getByTestId("totalVotes").innerHTML).toBe("Based on 2 votes. Click here to see full results");
     });
 
     it("uses my local vote", async () => {
@@ -180,7 +180,7 @@ describe("MPollBody", () => {
         expect(votesCount(renderResult, "italian")).toBe("1 vote");
         expect(votesCount(renderResult, "wings")).toBe("0 votes");
 
-        expect(renderResult.getByTestId("totalVotes").innerHTML).toBe("Based on 4 votes");
+        expect(renderResult.getByTestId("totalVotes").innerHTML).toBe("Based on 4 votes. Click here to see full results");
     });
 
     it("overrides my other votes with my local vote", async () => {
@@ -202,7 +202,7 @@ describe("MPollBody", () => {
         expect(votesCount(renderResult, "italian")).toBe("1 vote");
         expect(votesCount(renderResult, "wings")).toBe("1 vote");
 
-        expect(renderResult.getByTestId("totalVotes").innerHTML).toBe("Based on 2 votes");
+        expect(renderResult.getByTestId("totalVotes").innerHTML).toBe("Based on 2 votes. Click here to see full results");
 
         // And my vote is highlighted
         expect(voteButton(renderResult, "wings").className.includes(CHECKED)).toBe(true);
@@ -234,7 +234,7 @@ describe("MPollBody", () => {
         expect(votesCount(renderResult, "italian")).toBe("0 votes");
         expect(votesCount(renderResult, "wings")).toBe("1 vote");
 
-        expect(renderResult.getByTestId("totalVotes").innerHTML).toBe("Based on 1 vote");
+        expect(renderResult.getByTestId("totalVotes").innerHTML).toBe("Based on 1 vote. Click here to see full results");
     });
 
     it("doesn't cancel my local vote if someone else votes", async () => {
@@ -266,7 +266,7 @@ describe("MPollBody", () => {
         expect(votesCount(renderResult, "italian")).toBe("0 votes");
         expect(votesCount(renderResult, "wings")).toBe("1 vote");
 
-        expect(renderResult.getByTestId("totalVotes").innerHTML).toBe("Based on 2 votes");
+        expect(renderResult.getByTestId("totalVotes").innerHTML).toBe("Based on 2 votes. Click here to see full results");
 
         // And my vote is highlighted
         expect(voteButton(renderResult, "pizza").className.includes(CHECKED)).toBe(true);
@@ -293,7 +293,7 @@ describe("MPollBody", () => {
         expect(votesCount(renderResult, "poutine")).toBe("0 votes");
         expect(votesCount(renderResult, "italian")).toBe("0 votes");
         expect(votesCount(renderResult, "wings")).toBe("1 vote");
-        expect(renderResult.getByTestId("totalVotes").innerHTML).toBe("Based on 2 votes");
+        expect(renderResult.getByTestId("totalVotes").innerHTML).toBe("Based on 2 votes. Click here to see full results");
     });
 
     it("allows un-voting by passing an empty vote", async () => {
@@ -307,7 +307,7 @@ describe("MPollBody", () => {
         expect(votesCount(renderResult, "poutine")).toBe("0 votes");
         expect(votesCount(renderResult, "italian")).toBe("1 vote");
         expect(votesCount(renderResult, "wings")).toBe("0 votes");
-        expect(renderResult.getByTestId("totalVotes").innerHTML).toBe("Based on 1 vote");
+        expect(renderResult.getByTestId("totalVotes").innerHTML).toBe("Based on 1 vote. Click here to see full results");
     });
 
     it("allows re-voting after un-voting", async () => {
@@ -322,7 +322,7 @@ describe("MPollBody", () => {
         expect(votesCount(renderResult, "poutine")).toBe("0 votes");
         expect(votesCount(renderResult, "italian")).toBe("2 votes");
         expect(votesCount(renderResult, "wings")).toBe("0 votes");
-        expect(renderResult.getByTestId("totalVotes").innerHTML).toBe("Based on 2 votes");
+        expect(renderResult.getByTestId("totalVotes").innerHTML).toBe("Based on 2 votes. Click here to see full results");
     });
 
     it("treats any invalid answer as a spoiled ballot", async () => {
@@ -340,7 +340,7 @@ describe("MPollBody", () => {
         expect(votesCount(renderResult, "poutine")).toBe("0 votes");
         expect(votesCount(renderResult, "italian")).toBe("0 votes");
         expect(votesCount(renderResult, "wings")).toBe("0 votes");
-        expect(renderResult.getByTestId("totalVotes").innerHTML).toBe("Based on 0 votes");
+        expect(renderResult.getByTestId("totalVotes").innerHTML).toBe("Based on 0 votes. Click here to see full results");
     });
 
     it("allows re-voting after a spoiled ballot", async () => {
@@ -357,7 +357,7 @@ describe("MPollBody", () => {
         expect(votesCount(renderResult, "poutine")).toBe("1 vote");
         expect(votesCount(renderResult, "italian")).toBe("0 votes");
         expect(votesCount(renderResult, "wings")).toBe("0 votes");
-        expect(renderResult.getByTestId("totalVotes").innerHTML).toBe("Based on 1 vote");
+        expect(renderResult.getByTestId("totalVotes").innerHTML).toBe("Based on 1 vote. Click here to see full results");
     });
 
     it("renders nothing if poll has no answers", async () => {
@@ -526,7 +526,7 @@ describe("MPollBody", () => {
         expect(endedVotesCount(renderResult, "poutine")).toBe('<div class="mx_PollOption_winnerIcon"></div>1 vote');
         expect(endedVotesCount(renderResult, "italian")).toBe("0 votes");
         expect(endedVotesCount(renderResult, "wings")).toBe('<div class="mx_PollOption_winnerIcon"></div>1 vote');
-        expect(renderResult.getByTestId("totalVotes").innerHTML).toBe("Final result based on 2 votes");
+        expect(renderResult.getByTestId("totalVotes").innerHTML).toBe("Final result based on 2 votes. Click here to see full results");
     });
 
     it("counts a single vote as normal if the poll is ended", async () => {
@@ -537,7 +537,7 @@ describe("MPollBody", () => {
         expect(endedVotesCount(renderResult, "poutine")).toBe('<div class="mx_PollOption_winnerIcon"></div>1 vote');
         expect(endedVotesCount(renderResult, "italian")).toBe("0 votes");
         expect(endedVotesCount(renderResult, "wings")).toBe("0 votes");
-        expect(renderResult.getByTestId("totalVotes").innerHTML).toBe("Final result based on 1 vote");
+        expect(renderResult.getByTestId("totalVotes").innerHTML).toBe("Final result based on 1 vote. Click here to see full results");
     });
 
     it("shows ended vote counts of different numbers", async () => {
@@ -557,7 +557,7 @@ describe("MPollBody", () => {
         expect(endedVotesCount(renderResult, "poutine")).toBe("0 votes");
         expect(endedVotesCount(renderResult, "italian")).toBe("0 votes");
         expect(endedVotesCount(renderResult, "wings")).toBe('<div class="mx_PollOption_winnerIcon"></div>3 votes');
-        expect(renderResult.getByTestId("totalVotes").innerHTML).toBe("Final result based on 5 votes");
+        expect(renderResult.getByTestId("totalVotes").innerHTML).toBe("Final result based on 5 votes. Click here to see full results");
     });
 
     it("ignores votes that arrived after poll ended", async () => {
@@ -577,7 +577,7 @@ describe("MPollBody", () => {
         expect(endedVotesCount(renderResult, "poutine")).toBe("0 votes");
         expect(endedVotesCount(renderResult, "italian")).toBe("0 votes");
         expect(endedVotesCount(renderResult, "wings")).toBe('<div class="mx_PollOption_winnerIcon"></div>3 votes');
-        expect(renderResult.getByTestId("totalVotes").innerHTML).toBe("Final result based on 5 votes");
+        expect(renderResult.getByTestId("totalVotes").innerHTML).toBe("Final result based on 5 votes. Click here to see full results");
     });
 
     it("counts votes that arrived after an unauthorised poll end event", async () => {
@@ -600,7 +600,7 @@ describe("MPollBody", () => {
         expect(endedVotesCount(renderResult, "poutine")).toBe("0 votes");
         expect(endedVotesCount(renderResult, "italian")).toBe("0 votes");
         expect(endedVotesCount(renderResult, "wings")).toBe('<div class="mx_PollOption_winnerIcon"></div>3 votes');
-        expect(renderResult.getByTestId("totalVotes").innerHTML).toBe("Final result based on 5 votes");
+        expect(renderResult.getByTestId("totalVotes").innerHTML).toBe("Final result based on 5 votes. Click here to see full results");
     });
 
     it("ignores votes that arrived after the first end poll event", async () => {
@@ -627,7 +627,7 @@ describe("MPollBody", () => {
         expect(endedVotesCount(renderResult, "poutine")).toBe("0 votes");
         expect(endedVotesCount(renderResult, "italian")).toBe("0 votes");
         expect(endedVotesCount(renderResult, "wings")).toBe('<div class="mx_PollOption_winnerIcon"></div>3 votes');
-        expect(renderResult.getByTestId("totalVotes").innerHTML).toBe("Final result based on 5 votes");
+        expect(renderResult.getByTestId("totalVotes").innerHTML).toBe("Final result based on 5 votes. Click here to see full results");
     });
 
     it("highlights the winning vote in an ended poll", async () => {

test/unit-tests/components/views/messages/__snapshots__/MPollBody-test.tsx.snap

@@ -29,10 +29,26 @@ exports[`MPollBody renders a finished poll 1`] = `
             >
               Pizza
             </div>
+            <div>
               <div
+                style="display: flex;"
+              >
+                <div
+                  class="mx_AccessibleButton mx_FacePile"
+                  role="button"
+                  style="margin-right: 10px;"
+                  tabindex="0"
+                >
+                  <div
+                    class="_stacked-avatars_mcap2_111"
+                  />
+                </div>
+                <span
                   class="mx_PollOption_optionVoteCount"
                 >
                   0 votes
+                </span>
+              </div>
             </div>
           </div>
         </div>
@@ -61,10 +77,26 @@ exports[`MPollBody renders a finished poll 1`] = `
             >
               Poutine
             </div>
+            <div>
               <div
+                style="display: flex;"
+              >
+                <div
+                  class="mx_AccessibleButton mx_FacePile"
+                  role="button"
+                  style="margin-right: 10px;"
+                  tabindex="0"
+                >
+                  <div
+                    class="_stacked-avatars_mcap2_111"
+                  />
+                </div>
+                <span
                   class="mx_PollOption_optionVoteCount"
                 >
                   0 votes
+                </span>
+              </div>
             </div>
           </div>
         </div>
@@ -93,13 +125,29 @@ exports[`MPollBody renders a finished poll 1`] = `
             >
               Italian
             </div>
+            <div>
               <div
+                style="display: flex;"
+              >
+                <div
+                  class="mx_AccessibleButton mx_FacePile"
+                  role="button"
+                  style="margin-right: 10px;"
+                  tabindex="0"
+                >
+                  <div
+                    class="_stacked-avatars_mcap2_111"
+                  />
+                </div>
+                <span
                   class="mx_PollOption_optionVoteCount"
                 >
                   <div
                     class="mx_PollOption_winnerIcon"
                   />
                   2 votes
+                </span>
+              </div>
             </div>
           </div>
         </div>
@@ -128,10 +176,26 @@ exports[`MPollBody renders a finished poll 1`] = `
             >
               Wings
             </div>
+            <div>
               <div
+                style="display: flex;"
+              >
+                <div
+                  class="mx_AccessibleButton mx_FacePile"
+                  role="button"
+                  style="margin-right: 10px;"
+                  tabindex="0"
+                >
+                  <div
+                    class="_stacked-avatars_mcap2_111"
+                  />
+                </div>
+                <span
                   class="mx_PollOption_optionVoteCount"
                 >
                   1 vote
+                </span>
+              </div>
             </div>
           </div>
         </div>
@@ -147,9 +211,12 @@ exports[`MPollBody renders a finished poll 1`] = `
     </div>
     <div
       class="mx_MPollBody_totalVotes"
+    >
+      <span
         data-testid="totalVotes"
       >
-      Final result based on 3 votes
+        Final result based on 3 votes. Click here to see full results
+      </span>
     </div>
   </div>
 </div>
@@ -184,13 +251,29 @@ exports[`MPollBody renders a finished poll with multiple winners 1`] = `
             >
               Pizza
             </div>
+            <div>
               <div
+                style="display: flex;"
+              >
+                <div
+                  class="mx_AccessibleButton mx_FacePile"
+                  role="button"
+                  style="margin-right: 10px;"
+                  tabindex="0"
+                >
+                  <div
+                    class="_stacked-avatars_mcap2_111"
+                  />
+                </div>
+                <span
                   class="mx_PollOption_optionVoteCount"
                 >
                   <div
                     class="mx_PollOption_winnerIcon"
                   />
                   2 votes
+                </span>
+              </div>
             </div>
           </div>
         </div>
@@ -219,10 +302,26 @@ exports[`MPollBody renders a finished poll with multiple winners 1`] = `
             >
               Poutine
             </div>
+            <div>
               <div
+                style="display: flex;"
+              >
+                <div
+                  class="mx_AccessibleButton mx_FacePile"
+                  role="button"
+                  style="margin-right: 10px;"
+                  tabindex="0"
+                >
+                  <div
+                    class="_stacked-avatars_mcap2_111"
+                  />
+                </div>
+                <span
                   class="mx_PollOption_optionVoteCount"
                 >
                   0 votes
+                </span>
+              </div>
             </div>
           </div>
         </div>
@@ -251,10 +350,26 @@ exports[`MPollBody renders a finished poll with multiple winners 1`] = `
             >
               Italian
             </div>
+            <div>
               <div
+                style="display: flex;"
+              >
+                <div
+                  class="mx_AccessibleButton mx_FacePile"
+                  role="button"
+                  style="margin-right: 10px;"
+                  tabindex="0"
+                >
+                  <div
+                    class="_stacked-avatars_mcap2_111"
+                  />
+                </div>
+                <span
                   class="mx_PollOption_optionVoteCount"
                 >
                   0 votes
+                </span>
+              </div>
             </div>
           </div>
         </div>
@@ -283,13 +398,29 @@ exports[`MPollBody renders a finished poll with multiple winners 1`] = `
             >
               Wings
             </div>
+            <div>
               <div
+                style="display: flex;"
+              >
+                <div
+                  class="mx_AccessibleButton mx_FacePile"
+                  role="button"
+                  style="margin-right: 10px;"
+                  tabindex="0"
+                >
+                  <div
+                    class="_stacked-avatars_mcap2_111"
+                  />
+                </div>
+                <span
                   class="mx_PollOption_optionVoteCount"
                 >
                   <div
                     class="mx_PollOption_winnerIcon"
                   />
                   2 votes
+                </span>
+              </div>
             </div>
           </div>
         </div>
@@ -305,9 +436,12 @@ exports[`MPollBody renders a finished poll with multiple winners 1`] = `
     </div>
     <div
       class="mx_MPollBody_totalVotes"
+    >
+      <span
         data-testid="totalVotes"
       >
-      Final result based on 4 votes
+        Final result based on 4 votes. Click here to see full results
+      </span>
     </div>
   </div>
 </div>
@@ -342,10 +476,26 @@ exports[`MPollBody renders a finished poll with no votes 1`] = `
             >
               Pizza
             </div>
+            <div>
               <div
+                style="display: flex;"
+              >
+                <div
+                  class="mx_AccessibleButton mx_FacePile"
+                  role="button"
+                  style="margin-right: 10px;"
+                  tabindex="0"
+                >
+                  <div
+                    class="_stacked-avatars_mcap2_111"
+                  />
+                </div>
+                <span
                   class="mx_PollOption_optionVoteCount"
                 >
                   0 votes
+                </span>
+              </div>
             </div>
           </div>
         </div>
@@ -374,10 +524,26 @@ exports[`MPollBody renders a finished poll with no votes 1`] = `
             >
               Poutine
             </div>
+            <div>
               <div
+                style="display: flex;"
+              >
+                <div
+                  class="mx_AccessibleButton mx_FacePile"
+                  role="button"
+                  style="margin-right: 10px;"
+                  tabindex="0"
+                >
+                  <div
+                    class="_stacked-avatars_mcap2_111"
+                  />
+                </div>
+                <span
                   class="mx_PollOption_optionVoteCount"
                 >
                   0 votes
+                </span>
+              </div>
             </div>
           </div>
         </div>
@@ -406,10 +572,26 @@ exports[`MPollBody renders a finished poll with no votes 1`] = `
             >
               Italian
             </div>
+            <div>
               <div
+                style="display: flex;"
+              >
+                <div
+                  class="mx_AccessibleButton mx_FacePile"
+                  role="button"
+                  style="margin-right: 10px;"
+                  tabindex="0"
+                >
+                  <div
+                    class="_stacked-avatars_mcap2_111"
+                  />
+                </div>
+                <span
                   class="mx_PollOption_optionVoteCount"
                 >
                   0 votes
+                </span>
+              </div>
             </div>
           </div>
         </div>
@@ -438,10 +620,26 @@ exports[`MPollBody renders a finished poll with no votes 1`] = `
             >
               Wings
             </div>
+            <div>
               <div
+                style="display: flex;"
+              >
+                <div
+                  class="mx_AccessibleButton mx_FacePile"
+                  role="button"
+                  style="margin-right: 10px;"
+                  tabindex="0"
+                >
+                  <div
+                    class="_stacked-avatars_mcap2_111"
+                  />
+                </div>
+                <span
                   class="mx_PollOption_optionVoteCount"
                 >
                   0 votes
+                </span>
+              </div>
             </div>
           </div>
         </div>
@@ -457,9 +655,12 @@ exports[`MPollBody renders a finished poll with no votes 1`] = `
     </div>
     <div
       class="mx_MPollBody_totalVotes"
+    >
+      <span
         data-testid="totalVotes"
       >
-      Final result based on 0 votes
+        Final result based on 0 votes. Click here to see full results
+      </span>
     </div>
   </div>
 </div>
@@ -504,11 +705,17 @@ exports[`MPollBody renders a poll that I have not voted in 1`] = `
               >
                 Pizza
               </div>
+              <div>
                 <div
+                  style="display: flex;"
+                >
+                  <span
                     class="mx_PollOption_optionVoteCount"
                   />
                 </div>
               </div>
+            </div>
+          </div>
           <div
             class="mx_StyledRadioButton_spacer"
           />
@@ -548,11 +755,17 @@ exports[`MPollBody renders a poll that I have not voted in 1`] = `
               >
                 Poutine
               </div>
+              <div>
                 <div
+                  style="display: flex;"
+                >
+                  <span
                     class="mx_PollOption_optionVoteCount"
                   />
                 </div>
               </div>
+            </div>
+          </div>
           <div
             class="mx_StyledRadioButton_spacer"
           />
@@ -592,11 +805,17 @@ exports[`MPollBody renders a poll that I have not voted in 1`] = `
               >
                 Italian
               </div>
+              <div>
                 <div
+                  style="display: flex;"
+                >
+                  <span
                     class="mx_PollOption_optionVoteCount"
                   />
                 </div>
               </div>
+            </div>
+          </div>
           <div
             class="mx_StyledRadioButton_spacer"
           />
@@ -606,7 +825,7 @@ exports[`MPollBody renders a poll that I have not voted in 1`] = `
         >
           <div
             class="mx_PollOption_popularityAmount"
-            style="width: 0%;"
+            style="width: 67%;"
           />
         </div>
       </div>
@@ -636,11 +855,17 @@ exports[`MPollBody renders a poll that I have not voted in 1`] = `
               >
                 Wings
               </div>
+              <div>
                 <div
+                  style="display: flex;"
+                >
+                  <span
                     class="mx_PollOption_optionVoteCount"
                   />
                 </div>
               </div>
+            </div>
+          </div>
           <div
             class="mx_StyledRadioButton_spacer"
           />
@@ -650,16 +875,19 @@ exports[`MPollBody renders a poll that I have not voted in 1`] = `
         >
           <div
             class="mx_PollOption_popularityAmount"
-            style="width: 0%;"
+            style="width: 33%;"
           />
         </div>
       </div>
     </div>
     <div
       class="mx_MPollBody_totalVotes"
+    >
+      <span
         data-testid="totalVotes"
       >
         3 votes cast. Vote to see the results
+      </span>
     </div>
   </div>
 </div>
@@ -704,10 +932,26 @@ exports[`MPollBody renders a poll with local, non-local and invalid votes 1`] =
               >
                 Pizza
               </div>
+              <div>
                 <div
+                  style="display: flex;"
+                >
+                  <div
+                    class="mx_AccessibleButton mx_FacePile"
+                    role="button"
+                    style="margin-right: 10px;"
+                    tabindex="0"
+                  >
+                    <div
+                      class="_stacked-avatars_mcap2_111"
+                    />
+                  </div>
+                  <span
                     class="mx_PollOption_optionVoteCount"
                   >
                     1 vote
+                  </span>
+                </div>
               </div>
             </div>
           </div>
@@ -750,10 +994,26 @@ exports[`MPollBody renders a poll with local, non-local and invalid votes 1`] =
               >
                 Poutine
               </div>
+              <div>
                 <div
+                  style="display: flex;"
+                >
+                  <div
+                    class="mx_AccessibleButton mx_FacePile"
+                    role="button"
+                    style="margin-right: 10px;"
+                    tabindex="0"
+                  >
+                    <div
+                      class="_stacked-avatars_mcap2_111"
+                    />
+                  </div>
+                  <span
                     class="mx_PollOption_optionVoteCount"
                   >
                     0 votes
+                  </span>
+                </div>
               </div>
             </div>
           </div>
@@ -796,10 +1056,26 @@ exports[`MPollBody renders a poll with local, non-local and invalid votes 1`] =
               >
                 Italian
               </div>
+              <div>
                 <div
+                  style="display: flex;"
+                >
+                  <div
+                    class="mx_AccessibleButton mx_FacePile"
+                    role="button"
+                    style="margin-right: 10px;"
+                    tabindex="0"
+                  >
+                    <div
+                      class="_stacked-avatars_mcap2_111"
+                    />
+                  </div>
+                  <span
                     class="mx_PollOption_optionVoteCount"
                   >
                     3 votes
+                  </span>
+                </div>
               </div>
             </div>
           </div>
@@ -842,10 +1118,26 @@ exports[`MPollBody renders a poll with local, non-local and invalid votes 1`] =
               >
                 Wings
               </div>
+              <div>
                 <div
+                  style="display: flex;"
+                >
+                  <div
+                    class="mx_AccessibleButton mx_FacePile"
+                    role="button"
+                    style="margin-right: 10px;"
+                    tabindex="0"
+                  >
+                    <div
+                      class="_stacked-avatars_mcap2_111"
+                    />
+                  </div>
+                  <span
                     class="mx_PollOption_optionVoteCount"
                   >
                     1 vote
+                  </span>
+                </div>
               </div>
             </div>
           </div>
@@ -865,9 +1157,12 @@ exports[`MPollBody renders a poll with local, non-local and invalid votes 1`] =
     </div>
     <div
       class="mx_MPollBody_totalVotes"
+    >
+      <span
         data-testid="totalVotes"
       >
-      Based on 5 votes
+        Based on 5 votes. Click here to see full results
+      </span>
     </div>
   </div>
 </div>
@@ -912,11 +1207,17 @@ exports[`MPollBody renders a poll with no votes 1`] = `
               >
                 Pizza
               </div>
+              <div>
                 <div
+                  style="display: flex;"
+                >
+                  <span
                     class="mx_PollOption_optionVoteCount"
                   />
                 </div>
               </div>
+            </div>
+          </div>
           <div
             class="mx_StyledRadioButton_spacer"
           />
@@ -956,11 +1257,17 @@ exports[`MPollBody renders a poll with no votes 1`] = `
               >
                 Poutine
               </div>
+              <div>
                 <div
+                  style="display: flex;"
+                >
+                  <span
                     class="mx_PollOption_optionVoteCount"
                   />
                 </div>
               </div>
+            </div>
+          </div>
           <div
             class="mx_StyledRadioButton_spacer"
           />
@@ -1000,11 +1307,17 @@ exports[`MPollBody renders a poll with no votes 1`] = `
               >
                 Italian
               </div>
+              <div>
                 <div
+                  style="display: flex;"
+                >
+                  <span
                     class="mx_PollOption_optionVoteCount"
                   />
                 </div>
               </div>
+            </div>
+          </div>
           <div
             class="mx_StyledRadioButton_spacer"
           />
@@ -1044,11 +1357,17 @@ exports[`MPollBody renders a poll with no votes 1`] = `
               >
                 Wings
               </div>
+              <div>
                 <div
+                  style="display: flex;"
+                >
+                  <span
                     class="mx_PollOption_optionVoteCount"
                   />
                 </div>
               </div>
+            </div>
+          </div>
           <div
             class="mx_StyledRadioButton_spacer"
           />
@@ -1065,9 +1384,12 @@ exports[`MPollBody renders a poll with no votes 1`] = `
     </div>
     <div
       class="mx_MPollBody_totalVotes"
+    >
+      <span
         data-testid="totalVotes"
       >
         No votes cast
+      </span>
     </div>
   </div>
 </div>
@@ -1112,10 +1434,26 @@ exports[`MPollBody renders a poll with only non-local votes 1`] = `
               >
                 Pizza
               </div>
+              <div>
                 <div
+                  style="display: flex;"
+                >
+                  <div
+                    class="mx_AccessibleButton mx_FacePile"
+                    role="button"
+                    style="margin-right: 10px;"
+                    tabindex="0"
+                  >
+                    <div
+                      class="_stacked-avatars_mcap2_111"
+                    />
+                  </div>
+                  <span
                     class="mx_PollOption_optionVoteCount"
                   >
                     0 votes
+                  </span>
+                </div>
               </div>
             </div>
           </div>
@@ -1158,10 +1496,26 @@ exports[`MPollBody renders a poll with only non-local votes 1`] = `
               >
                 Poutine
               </div>
+              <div>
                 <div
+                  style="display: flex;"
+                >
+                  <div
+                    class="mx_AccessibleButton mx_FacePile"
+                    role="button"
+                    style="margin-right: 10px;"
+                    tabindex="0"
+                  >
+                    <div
+                      class="_stacked-avatars_mcap2_111"
+                    />
+                  </div>
+                  <span
                     class="mx_PollOption_optionVoteCount"
                   >
                     0 votes
+                  </span>
+                </div>
               </div>
             </div>
           </div>
@@ -1204,10 +1558,26 @@ exports[`MPollBody renders a poll with only non-local votes 1`] = `
               >
                 Italian
               </div>
+              <div>
                 <div
+                  style="display: flex;"
+                >
+                  <div
+                    class="mx_AccessibleButton mx_FacePile"
+                    role="button"
+                    style="margin-right: 10px;"
+                    tabindex="0"
+                  >
+                    <div
+                      class="_stacked-avatars_mcap2_111"
+                    />
+                  </div>
+                  <span
                     class="mx_PollOption_optionVoteCount"
                   >
                     2 votes
+                  </span>
+                </div>
               </div>
             </div>
           </div>
@@ -1250,10 +1620,26 @@ exports[`MPollBody renders a poll with only non-local votes 1`] = `
               >
                 Wings
               </div>
+              <div>
                 <div
+                  style="display: flex;"
+                >
+                  <div
+                    class="mx_AccessibleButton mx_FacePile"
+                    role="button"
+                    style="margin-right: 10px;"
+                    tabindex="0"
+                  >
+                    <div
+                      class="_stacked-avatars_mcap2_111"
+                    />
+                  </div>
+                  <span
                     class="mx_PollOption_optionVoteCount"
                   >
                     1 vote
+                  </span>
+                </div>
               </div>
             </div>
           </div>
@@ -1273,9 +1659,12 @@ exports[`MPollBody renders a poll with only non-local votes 1`] = `
     </div>
     <div
       class="mx_MPollBody_totalVotes"
+    >
+      <span
         data-testid="totalVotes"
       >
-      Based on 3 votes
+        Based on 3 votes. Click here to see full results
+      </span>
     </div>
   </div>
 </div>
@@ -1310,13 +1699,29 @@ exports[`MPollBody renders an undisclosed, finished poll 1`] = `
             >
               Pizza
             </div>
+            <div>
               <div
+                style="display: flex;"
+              >
+                <div
+                  class="mx_AccessibleButton mx_FacePile"
+                  role="button"
+                  style="margin-right: 10px;"
+                  tabindex="0"
+                >
+                  <div
+                    class="_stacked-avatars_mcap2_111"
+                  />
+                </div>
+                <span
                   class="mx_PollOption_optionVoteCount"
                 >
                   <div
                     class="mx_PollOption_winnerIcon"
                   />
                   2 votes
+                </span>
+              </div>
             </div>
           </div>
         </div>
@@ -1345,10 +1750,26 @@ exports[`MPollBody renders an undisclosed, finished poll 1`] = `
             >
               Poutine
             </div>
+            <div>
               <div
+                style="display: flex;"
+              >
+                <div
+                  class="mx_AccessibleButton mx_FacePile"
+                  role="button"
+                  style="margin-right: 10px;"
+                  tabindex="0"
+                >
+                  <div
+                    class="_stacked-avatars_mcap2_111"
+                  />
+                </div>
+                <span
                   class="mx_PollOption_optionVoteCount"
                 >
                   0 votes
+                </span>
+              </div>
             </div>
           </div>
         </div>
@@ -1377,10 +1798,26 @@ exports[`MPollBody renders an undisclosed, finished poll 1`] = `
             >
               Italian
             </div>
+            <div>
               <div
+                style="display: flex;"
+              >
+                <div
+                  class="mx_AccessibleButton mx_FacePile"
+                  role="button"
+                  style="margin-right: 10px;"
+                  tabindex="0"
+                >
+                  <div
+                    class="_stacked-avatars_mcap2_111"
+                  />
+                </div>
+                <span
                   class="mx_PollOption_optionVoteCount"
                 >
                   0 votes
+                </span>
+              </div>
             </div>
           </div>
         </div>
@@ -1409,13 +1846,29 @@ exports[`MPollBody renders an undisclosed, finished poll 1`] = `
             >
               Wings
             </div>
+            <div>
               <div
+                style="display: flex;"
+              >
+                <div
+                  class="mx_AccessibleButton mx_FacePile"
+                  role="button"
+                  style="margin-right: 10px;"
+                  tabindex="0"
+                >
+                  <div
+                    class="_stacked-avatars_mcap2_111"
+                  />
+                </div>
+                <span
                   class="mx_PollOption_optionVoteCount"
                 >
                   <div
                     class="mx_PollOption_winnerIcon"
                   />
                   2 votes
+                </span>
+              </div>
             </div>
           </div>
         </div>
@@ -1431,9 +1884,12 @@ exports[`MPollBody renders an undisclosed, finished poll 1`] = `
     </div>
     <div
       class="mx_MPollBody_totalVotes"
+    >
+      <span
         data-testid="totalVotes"
       >
-      Final result based on 4 votes
+        Final result based on 4 votes. Click here to see full results
+      </span>
     </div>
   </div>
 </div>
@@ -1478,11 +1934,17 @@ exports[`MPollBody renders an undisclosed, unfinished poll 1`] = `
               >
                 Pizza
               </div>
+              <div>
                 <div
+                  style="display: flex;"
+                >
+                  <span
                     class="mx_PollOption_optionVoteCount"
                   />
                 </div>
               </div>
+            </div>
+          </div>
           <div
             class="mx_StyledRadioButton_spacer"
           />
@@ -1492,7 +1954,7 @@ exports[`MPollBody renders an undisclosed, unfinished poll 1`] = `
         >
           <div
             class="mx_PollOption_popularityAmount"
-            style="width: 0%;"
+            style="width: 50%;"
           />
         </div>
       </div>
@@ -1522,11 +1984,17 @@ exports[`MPollBody renders an undisclosed, unfinished poll 1`] = `
               >
                 Poutine
               </div>
+              <div>
                 <div
+                  style="display: flex;"
+                >
+                  <span
                     class="mx_PollOption_optionVoteCount"
                   />
                 </div>
               </div>
+            </div>
+          </div>
           <div
             class="mx_StyledRadioButton_spacer"
           />
@@ -1566,11 +2034,17 @@ exports[`MPollBody renders an undisclosed, unfinished poll 1`] = `
               >
                 Italian
               </div>
+              <div>
                 <div
+                  style="display: flex;"
+                >
+                  <span
                     class="mx_PollOption_optionVoteCount"
                   />
                 </div>
               </div>
+            </div>
+          </div>
           <div
             class="mx_StyledRadioButton_spacer"
           />
@@ -1610,11 +2084,17 @@ exports[`MPollBody renders an undisclosed, unfinished poll 1`] = `
               >
                 Wings
               </div>
+              <div>
                 <div
+                  style="display: flex;"
+                >
+                  <span
                     class="mx_PollOption_optionVoteCount"
                   />
                 </div>
               </div>
+            </div>
+          </div>
           <div
             class="mx_StyledRadioButton_spacer"
           />
@@ -1624,16 +2104,19 @@ exports[`MPollBody renders an undisclosed, unfinished poll 1`] = `
         >
           <div
             class="mx_PollOption_popularityAmount"
-            style="width: 0%;"
+            style="width: 50%;"
           />
         </div>
       </div>
     </div>
     <div
       class="mx_MPollBody_totalVotes"
+    >
+      <span
         data-testid="totalVotes"
       >
         Results will be visible when the poll is ended
+      </span>
     </div>
   </div>
 </div>