Fix formatting

playwright/e2e/polls/polls.spec.ts

@@ -64,9 +64,7 @@ test.describe("Polls", () => {
     };
 
     const getPollResultsDialogOption = (page: Page, optionText: string): Locator => {
-        return getPollResultsDialog(page)
+        return getPollResultsDialog(page).locator(".mx_AnswerEntry").filter({ hasText: optionText });
-            .locator(".mx_AnswerEntry")
-            .filter({ hasText: optionText });
     };
 
     const expectDetailedPollOptionVoteCount = async (
@@ -290,7 +288,10 @@ test.describe("Polls", () => {
         await expectPollOptionVoteCount(page, pollId, pollParams.options[2], 2);
 
         // click the 'vote to see results' message
-        await page.locator(".mx_MPollBody_totalVotes").getByText("Based on 2 votes. Click here to see full results").click();
+        await page
+            .locator(".mx_MPollBody_totalVotes")
+            .getByText("Based on 2 votes. Click here to see full results")
+            .click();
 
         // expect the detailed results to be shown
         await expect(getPollResultsDialog(page)).toBeAttached();
@@ -300,7 +301,7 @@ test.describe("Polls", () => {
         const voterEntries = getPollResultsDialogOption(page, pollParams.options[2]).locator(".mx_VoterEntry");
         expect((await voterEntries.all()).length).toBe(2);
         expect(voterEntries.filter({ hasText: bot.credentials.displayName })).not.toBeNull();
-        expect(voterEntries.filter({hasText: user.displayName})).not.toBeNull();
+        expect(voterEntries.filter({ hasText: user.displayName })).not.toBeNull();
 
         // close the dialog
         await page.locator(".mx_Dialog").getByRole("button", { name: "Close" }).click();

res/css/components/views/dialogs/polls/_PollResultsDialog.pcss

@@ -10,7 +10,7 @@
 
 .mx_AnswerEntry_Header_answerName {
     font-weight: bolder;
-    flex-grow: 1
+    flex-grow: 1;
 }
 
 .mx_VoterEntry {

res/css/components/views/polls/_PollOption.pcss

@@ -40,7 +40,7 @@ Please see LICENSE files in the repository root for full details.
 }
 
 .mx_PollOption_facePile {
-    margin-right: $spacing-8
+    margin-right: $spacing-8;
 }
 
 .mx_PollOption_optionVoteCount {

src/components/views/dialogs/PollResultsDialog.tsx

@@ -29,43 +29,30 @@ export default function PollResultsDialog(props: IProps): JSX.Element {
             onFinished={() => Modal.closeCurrentModal()}
             className="mx_PollResultsDialog"
         >
-            {
+            {props.pollEvent.answers.map((answer) => {
-                props.pollEvent.answers.map((answer) => {
+                const votes = props.votes.get(answer.id) || [];
-                    const votes = props.votes.get(answer.id) || [];
+                if (votes.length === 0) return;
-                    if (votes.length === 0) return;
 
-                    return <AnswerEntry
+                return <AnswerEntry key={answer.id} answer={answer} members={props.members} votes={votes} />;
-                        key={answer.id}
+            })}
-                        answer={answer}
-                        members={props.members}
-                        votes={votes}
-                    />;
-                })
-            }
         </BaseDialog>
     );
 }
 
-function AnswerEntry(props: {
+function AnswerEntry(props: { answer: PollAnswerSubevent; members: RoomMember[]; votes: UserVote[] }): JSX.Element {
-    answer: PollAnswerSubevent;
-    members: RoomMember[];
-    votes: UserVote[];
-}): JSX.Element {
     const { answer, members, votes } = props;
     return (
         <div key={answer.id} className="mx_AnswerEntry">
             <div className="mx_AnswerEntry_Header">
                 <span className="mx_AnswerEntry_Header_answerName">{answer.text}</span>
-                <span className="mx_AnswerEntry_Header_voteCount">{_t("poll|result_dialog|count_of_votes", { count: votes.length })}</span>
+                <span className="mx_AnswerEntry_Header_voteCount">
+                    {_t("poll|result_dialog|count_of_votes", { count: votes.length })}
+                </span>
             </div>
             {votes.length === 0 && <div>No one voted for this.</div>}
             {votes.map((vote) => {
-                const member = members.find(m => m.userId === vote.sender);
+                const member = members.find((m) => m.userId === vote.sender);
-                if (member) return <VoterEntry
+                if (member) return <VoterEntry key={vote.sender} vote={vote} member={member} />;
-                    key={vote.sender}
-                    vote={vote}
-                    member={member}
-                />;
             })}
         </div>
     );
@@ -73,10 +60,12 @@ function AnswerEntry(props: {
 
 function VoterEntry(props: { vote: UserVote; member: RoomMember }): JSX.Element {
     const { vote, member } = props;
-    return <div key={vote.sender} className="mx_VoterEntry">
+    return (
-        <div className="mx_VoterEntry_AvatarWrapper">
+        <div key={vote.sender} className="mx_VoterEntry">
-            <MemberAvatar member={member} size="36px" aria-hidden="true" />
+            <div className="mx_VoterEntry_AvatarWrapper">
+                <MemberAvatar member={member} size="36px" aria-hidden="true" />
+            </div>
+            {member.name}
         </div>
-        {member.name}
+    );
-    </div>;
 }

src/components/views/messages/MPollBody.tsx

@@ -326,7 +326,7 @@ export default class MPollBody extends React.Component<IBodyProps, IState> {
         ) : null;
 
         const showDetailedVotes = (): void => {
-            if(!showResults) return;
+            if (!showResults) return;
 
             Modal.createDialog(PollResultsDialog, {
                 pollEvent,
@@ -368,7 +368,9 @@ export default class MPollBody extends React.Component<IBodyProps, IState> {
                     })}
                 </div>
                 <div className="mx_MPollBody_totalVotes">
-                    <span data-testid="totalVotes" 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

@@ -34,16 +34,15 @@ const PollOptionContent: React.FC<PollOptionContentProps> = ({ isWinner, answer,
         <div className="mx_PollOption_content">
             <div className="mx_PollOption_optionText">{answer.text}</div>
             <div className="mx_PollOption_votesWrapper">
-                {displayVoteCount
+                {displayVoteCount && members.length <= MAXIMUM_MEMBERS_FOR_FACE_PILE && (
-                    && members.length <= MAXIMUM_MEMBERS_FOR_FACE_PILE
+                    <div className="mx_PollOption_facePile">
-                    && <div className="mx_PollOption_facePile">
                         <FacePile
                             members={members.filter((m) => votes.some((v) => v.sender === m.userId))}
                             size="24px"
                             overflow={false}
                         />
                     </div>
-                }
+                )}
                 <span className="mx_PollOption_optionVoteCount">
                     {isWinner && <TrophyIcon className="mx_PollOption_winnerIcon" />}
                     {votesText}

src/components/views/polls/pollHistory/PollListItemEnded.tsx

@@ -35,7 +35,7 @@ const getWinningAnswers = (poll: Poll, responseRelations: Relations): EndedPollS
     const userVotes = collectUserVotes(allVotes(responseRelations));
     const votes = countVotes(userVotes, poll.pollEvent);
     const totalVoteCount = [...votes.values()].reduce((sum, vote) => sum + vote.length, 0);
-    const winCount = Math.max(...Array.from(votes.values()).map(v => v.length));
+    const winCount = Math.max(...Array.from(votes.values()).map((v) => v.length));
 
     return {
         totalVoteCount,

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

@@ -16,7 +16,7 @@ import {
     MatrixEvent,
     PollAnswer,
     PollStartEventContent,
-    Relations
+    Relations,
 } from "matrix-js-sdk/src/matrix";
 import React from "react";
 
@@ -101,7 +101,9 @@ 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. Click here to see full results");
+        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 () => {
@@ -120,7 +122,9 @@ 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. Click here to see full results");
+        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 () => {
@@ -161,7 +165,9 @@ 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. Click here to see full results");
+        expect(renderResult.getByTestId("totalVotes").innerHTML).toBe(
+            "Based on 2 votes. Click here to see full results",
+        );
     });
 
     it("uses my local vote", async () => {
@@ -182,7 +188,9 @@ 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. Click here to see full results");
+        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 () => {
@@ -204,7 +212,9 @@ 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. Click here to see full results");
+        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);
@@ -236,7 +246,9 @@ 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. Click here to see full results");
+        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 () => {
@@ -268,7 +280,9 @@ 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. Click here to see full results");
+        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);
@@ -295,7 +309,9 @@ 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. Click here to see full results");
+        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 () => {
@@ -309,7 +325,9 @@ 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. Click here to see full results");
+        expect(renderResult.getByTestId("totalVotes").innerHTML).toBe(
+            "Based on 1 vote. Click here to see full results",
+        );
     });
 
     it("allows re-voting after un-voting", async () => {
@@ -324,7 +342,9 @@ 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. Click here to see full results");
+        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 () => {
@@ -342,7 +362,9 @@ 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. Click here to see full results");
+        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 () => {
@@ -359,7 +381,9 @@ 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. Click here to see full results");
+        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 () => {
@@ -427,7 +451,9 @@ describe("MPollBody", () => {
         expect(endedVotesCount(renderResult, "poutine")).toBe("1 vote");
         expect(endedVotesCount(renderResult, "italian")).toBe("0 votes");
         expect(endedVotesCount(renderResult, "wings")).toBe("1 vote");
-        expect(renderResult.getByTestId("totalVotes").innerHTML).toBe("Final result based on 5 votes. Click here to see full results");
+        expect(renderResult.getByTestId("totalVotes").innerHTML).toBe(
+            "Final result based on 5 votes. Click here to see full results",
+        );
     });
 
     it("sends a vote event when I choose an option", async () => {
@@ -528,7 +554,9 @@ 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. Click here to see full results");
+        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 () => {
@@ -539,7 +567,9 @@ 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. Click here to see full results");
+        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 () => {
@@ -559,7 +589,9 @@ 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. Click here to see full results");
+        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 () => {
@@ -579,7 +611,9 @@ 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. Click here to see full results");
+        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 () => {
@@ -602,7 +636,9 @@ 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. Click here to see full results");
+        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 () => {
@@ -629,7 +665,9 @@ 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. Click here to see full results");
+        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 () => {
@@ -878,10 +916,7 @@ describe("MPollBody", () => {
 
         fireEvent.click(renderResult.getByTestId("totalVotes"));
 
-        expect(createDialogSpy).toHaveBeenCalledWith(
+        expect(createDialogSpy).toHaveBeenCalledWith(PollResultsDialog, expect.anything());
-            PollResultsDialog,
-            expect.anything()
-        );
     });
 });
 

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

@@ -132,7 +132,9 @@ describe("<MPollEndBody />", () => {
 
             // quick check for poll tile
             expect(getByTestId("pollQuestion").innerHTML).toEqual("Question?");
-            expect(getByTestId("totalVotes").innerHTML).toEqual("Final result based on 0 votes. Click here to see full results");
+            expect(getByTestId("totalVotes").innerHTML).toEqual(
+                "Final result based on 0 votes. Click here to see full results",
+            );
         });
 
         it("does not render a poll tile when end event is invalid", async () => {