From 51671e5670dc5a618daf8db757276406d98a5617 Mon Sep 17 00:00:00 2001 From: Tim Vahlbrock Date: Fri, 22 Nov 2024 12:19:50 +0100 Subject: [PATCH] Fix formatting --- playwright/e2e/polls/polls.spec.ts | 11 +-- .../dialogs/polls/_PollResultsDialog.pcss | 2 +- .../components/views/polls/_PollOption.pcss | 2 +- .../views/dialogs/PollResultsDialog.tsx | 47 ++++------- src/components/views/messages/MPollBody.tsx | 6 +- src/components/views/polls/PollOption.tsx | 7 +- .../polls/pollHistory/PollListItemEnded.tsx | 2 +- .../views/messages/MPollBody-test.tsx | 83 +++++++++++++------ .../views/messages/MPollEndBody-test.tsx | 4 +- 9 files changed, 96 insertions(+), 68 deletions(-) diff --git a/playwright/e2e/polls/polls.spec.ts b/playwright/e2e/polls/polls.spec.ts index 858ee38eb1..6dedaacb41 100644 --- a/playwright/e2e/polls/polls.spec.ts +++ b/playwright/e2e/polls/polls.spec.ts @@ -64,9 +64,7 @@ test.describe("Polls", () => { }; const getPollResultsDialogOption = (page: Page, optionText: string): Locator => { - return getPollResultsDialog(page) - .locator(".mx_AnswerEntry") - .filter({ hasText: optionText }); + return getPollResultsDialog(page).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(); diff --git a/res/css/components/views/dialogs/polls/_PollResultsDialog.pcss b/res/css/components/views/dialogs/polls/_PollResultsDialog.pcss index 3e349c33ea..d6f0efdf6d 100644 --- a/res/css/components/views/dialogs/polls/_PollResultsDialog.pcss +++ b/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 { diff --git a/res/css/components/views/polls/_PollOption.pcss b/res/css/components/views/polls/_PollOption.pcss index 0060906e30..aa1963fe8a 100644 --- a/res/css/components/views/polls/_PollOption.pcss +++ b/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 { diff --git a/src/components/views/dialogs/PollResultsDialog.tsx b/src/components/views/dialogs/PollResultsDialog.tsx index 713f66d98f..88712b4f1c 100644 --- a/src/components/views/dialogs/PollResultsDialog.tsx +++ b/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) => { - const votes = props.votes.get(answer.id) || []; - if (votes.length === 0) return; + {props.pollEvent.answers.map((answer) => { + const votes = props.votes.get(answer.id) || []; + if (votes.length === 0) return; - return ; - }) - } + return ; + })} ); } -function AnswerEntry(props: { - answer: PollAnswerSubevent; - members: RoomMember[]; - votes: UserVote[]; -}): JSX.Element { +function AnswerEntry(props: { answer: PollAnswerSubevent; members: RoomMember[]; votes: UserVote[] }): JSX.Element { const { answer, members, votes } = props; return (
{answer.text} - {_t("poll|result_dialog|count_of_votes", { count: votes.length })} + + {_t("poll|result_dialog|count_of_votes", { count: votes.length })} +
{votes.length === 0 &&
No one voted for this.
} {votes.map((vote) => { - const member = members.find(m => m.userId === vote.sender); - if (member) return ; + const member = members.find((m) => m.userId === vote.sender); + if (member) return ; })}
); @@ -73,10 +60,12 @@ function AnswerEntry(props: { function VoterEntry(props: { vote: UserVote; member: RoomMember }): JSX.Element { const { vote, member } = props; - return
-
-
; + ); } diff --git a/src/components/views/messages/MPollBody.tsx b/src/components/views/messages/MPollBody.tsx index 38ef6ccdbf..39e09f4e29 100644 --- a/src/components/views/messages/MPollBody.tsx +++ b/src/components/views/messages/MPollBody.tsx @@ -326,7 +326,7 @@ export default class MPollBody extends React.Component { ) : 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 { })}
- showDetailedVotes()}>{totalText} + showDetailedVotes()}> + {totalText} + {isFetchingResponses && }
diff --git a/src/components/views/polls/PollOption.tsx b/src/components/views/polls/PollOption.tsx index a2030a78ac..c379f88b15 100644 --- a/src/components/views/polls/PollOption.tsx +++ b/src/components/views/polls/PollOption.tsx @@ -34,16 +34,15 @@ const PollOptionContent: React.FC = ({ isWinner, answer,
{answer.text}
- {displayVoteCount - && members.length <= MAXIMUM_MEMBERS_FOR_FACE_PILE - &&
+ {displayVoteCount && members.length <= MAXIMUM_MEMBERS_FOR_FACE_PILE && ( +
votes.some((v) => v.sender === m.userId))} size="24px" overflow={false} />
- } + )} {isWinner && } {votesText} diff --git a/src/components/views/polls/pollHistory/PollListItemEnded.tsx b/src/components/views/polls/pollHistory/PollListItemEnded.tsx index 41dcc27ef4..23c27335b5 100644 --- a/src/components/views/polls/pollHistory/PollListItemEnded.tsx +++ b/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, diff --git a/test/unit-tests/components/views/messages/MPollBody-test.tsx b/test/unit-tests/components/views/messages/MPollBody-test.tsx index b51409b382..2e64de7422 100644 --- a/test/unit-tests/components/views/messages/MPollBody-test.tsx +++ b/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('
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 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('
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('
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('
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('
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('
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( - PollResultsDialog, - expect.anything() - ); + expect(createDialogSpy).toHaveBeenCalledWith(PollResultsDialog, expect.anything()); }); }); diff --git a/test/unit-tests/components/views/messages/MPollEndBody-test.tsx b/test/unit-tests/components/views/messages/MPollEndBody-test.tsx index 73328333c2..1de9361de9 100644 --- a/test/unit-tests/components/views/messages/MPollEndBody-test.tsx +++ b/test/unit-tests/components/views/messages/MPollEndBody-test.tsx @@ -132,7 +132,9 @@ describe("", () => { // 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 () => {