Poll history - extract poll option display components (#10107)

* wip

* remove dupe

* use poll model relations in all cases

* update mpollbody tests to use poll instance

* update poll fetching login in pinned messages card

* add pinned polls to room polls state

* add spinner while relations are still loading

* handle no poll in end poll dialog

* strict errors

* render a poll body that errors for poll end events

* add fetching logic to pollend tile

* extract poll testing utilities

* test mpollend

* strict fix

* more strict fix

* strict fix for forwardref

* add filter component

* update poll test utils

* add unstyled filter tab group

* filtertabgroup snapshot

* lint

* update test util setupRoomWithPollEvents to allow testing multiple polls in one room

* style filter tabs

* test error message for past polls

* sort polls list by latest

* extract poll option display components

* strict fixes

cypress/e2e/polls/polls.spec.ts

@@ -54,12 +54,12 @@ describe("Polls", () => {
     };
 
     const getPollOption = (pollId: string, optionText: string): Chainable<JQuery> => {
-        return getPollTile(pollId).contains(".mx_MPollBody_option .mx_StyledRadioButton", optionText);
+        return getPollTile(pollId).contains(".mx_PollOption .mx_StyledRadioButton", optionText);
     };
 
     const expectPollOptionVoteCount = (pollId: string, optionText: string, votes: number): void => {
         getPollOption(pollId, optionText).within(() => {
-            cy.get(".mx_MPollBody_optionVoteCount").should("contain", `${votes} vote`);
+            cy.get(".mx_PollOption_optionVoteCount").should("contain", `${votes} vote`);
         });
     };
 

res/css/_components.pcss

@@ -33,6 +33,7 @@
 @import "./components/views/messages/_MBeaconBody.pcss";
 @import "./components/views/messages/shared/_MediaProcessingError.pcss";
 @import "./components/views/pips/_WidgetPip.pcss";
+@import "./components/views/polls/_PollOption.pcss";
 @import "./components/views/settings/devices/_CurrentDeviceSection.pcss";
 @import "./components/views/settings/devices/_DeviceDetailHeading.pcss";
 @import "./components/views/settings/devices/_DeviceDetails.pcss";

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

@@ -0,0 +1,109 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_PollOption {
+    border: 1px solid $quinary-content;
+    border-radius: 8px;
+    padding: 6px 12px;
+    max-width: 550px;
+    background-color: $background;
+
+    .mx_StyledRadioButton_content,
+    .mx_PollOption_endedOption {
+        padding-top: 2px;
+        margin-right: 0px;
+    }
+
+    .mx_StyledRadioButton_spacer {
+        display: none;
+    }
+}
+
+.mx_PollOption,
+/* label has cursor: default in user-agent stylesheet */
+/* override */
+.mx_PollOption_live-option {
+    cursor: pointer;
+}
+
+.mx_PollOption_content {
+    display: flex;
+    justify-content: space-between;
+}
+
+.mx_PollOption_optionVoteCount {
+    color: $secondary-content;
+    font-size: $font-12px;
+    white-space: nowrap;
+}
+
+.mx_PollOption_winnerIcon {
+    height: 12px;
+    width: 12px;
+    color: $accent;
+    margin-right: $spacing-4;
+    vertical-align: middle;
+}
+
+.mx_PollOption_checked {
+    border-color: $accent;
+
+    .mx_PollOption_popularityBackground {
+        .mx_PollOption_popularityAmount {
+            background-color: $accent;
+        }
+    }
+
+    // override checked radio button styling
+    // to show checkmark instead
+    .mx_StyledRadioButton_checked {
+        input[type="radio"] + div {
+            border-width: 2px;
+            border-color: $accent;
+            background-color: $accent;
+            background-image: url("$(res)/img/element-icons/check-white.svg");
+            background-size: 12px;
+            background-repeat: no-repeat;
+            background-position: center;
+
+            div {
+                visibility: hidden;
+            }
+        }
+    }
+}
+
+/* options not actionable in these states */
+.mx_PollOption_checked,
+.mx_PollOption_ended {
+    pointer-events: none;
+}
+
+.mx_PollOption_popularityBackground {
+    width: 100%;
+    height: 8px;
+    margin-right: 12px;
+    border-radius: 8px;
+    background-color: $system;
+    margin-top: $spacing-8;
+
+    .mx_PollOption_popularityAmount {
+        width: 0%;
+        height: 8px;
+        border-radius: 8px;
+        background-color: $quaternary-content;
+    }
+}

res/css/views/messages/_MPollBody.pcss

@@ -47,108 +47,6 @@ limitations under the License.
         mask-image: url("$(res)/img/element-icons/room/composer/poll.svg");
     }
 
-    .mx_MPollBody_option {
-        border: 1px solid $quinary-content;
-        border-radius: 8px;
-        margin-bottom: 16px;
-        padding: 6px 12px;
-        max-width: 550px;
-        background-color: $background;
-
-        .mx_StyledRadioButton,
-        .mx_MPollBody_endedOption {
-            margin-bottom: 8px;
-        }
-
-        .mx_StyledRadioButton_content,
-        .mx_MPollBody_endedOption {
-            padding-top: 2px;
-            margin-right: 0px;
-        }
-
-        .mx_StyledRadioButton_spacer {
-            display: none;
-        }
-
-        .mx_MPollBody_optionDescription {
-            display: flex;
-            justify-content: space-between;
-
-            .mx_MPollBody_optionVoteCount {
-                color: $secondary-content;
-                font-size: $font-12px;
-                white-space: nowrap;
-            }
-        }
-
-        .mx_MPollBody_popularityBackground {
-            width: 100%;
-            height: 8px;
-            margin-right: 12px;
-            border-radius: 8px;
-            background-color: $system;
-
-            .mx_MPollBody_popularityAmount {
-                width: 0%;
-                height: 8px;
-                border-radius: 8px;
-                background-color: $quaternary-content;
-            }
-        }
-    }
-
-    .mx_MPollBody_option:last-child {
-        margin-bottom: 8px;
-    }
-
-    .mx_MPollBody_option_checked {
-        border-color: $accent;
-
-        .mx_MPollBody_popularityBackground {
-            .mx_MPollBody_popularityAmount {
-                background-color: $accent;
-            }
-        }
-    }
-
-    /* options not actionable in these states */
-    .mx_MPollBody_option_checked,
-    .mx_MPollBody_option_ended {
-        pointer-events: none;
-    }
-
-    .mx_StyledRadioButton_checked,
-    .mx_MPollBody_endedOptionWinner {
-        input[type="radio"] + div {
-            border-width: 2px;
-            border-color: $accent;
-            background-color: $accent;
-            background-image: url("$(res)/img/element-icons/check-white.svg");
-            background-size: 12px;
-            background-repeat: no-repeat;
-            background-position: center;
-
-            div {
-                visibility: hidden;
-            }
-        }
-    }
-
-    .mx_MPollBody_endedOptionWinner .mx_MPollBody_optionDescription .mx_MPollBody_optionVoteCount::before {
-        content: "";
-        position: relative;
-        display: inline-block;
-        margin-right: 4px;
-        top: 2px;
-        height: 12px;
-        width: 12px;
-        background-color: $accent;
-        mask-repeat: no-repeat;
-        mask-size: contain;
-        mask-position: center;
-        mask-image: url("$(res)/img/element-icons/trophy.svg");
-    }
-
     .mx_MPollBody_totalVotes {
         display: flex;
         flex-direction: inline;
@@ -168,9 +66,8 @@ limitations under the License.
     pointer-events: none;
 }
 
-.mx_MPollBody_option,
-/* label has cursor: default in user-agent stylesheet */
-/* override */
-.mx_MPollBody_live-option {
-    cursor: pointer;
+.mx_MPollBody_allOptions {
+    display: grid;
+    grid-gap: $spacing-16;
+    margin-bottom: $spacing-8;
 }

res/img/element-icons/trophy.svg

@@ -1,3 +1,3 @@
 <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.6667 1.33333H9.33333V0.666667C9.33333 0.3 9.03333 0 8.66667 0H3.33333C2.96667 0 2.66667 0.3 2.66667 0.666667V1.33333H1.33333C0.6 1.33333 0 1.93333 0 2.66667V3.33333C0 5.03333 1.28 6.42 2.92667 6.62667C3.34667 7.62667 4.24667 8.38 5.33333 8.6V10.6667H3.33333C2.96667 10.6667 2.66667 10.9667 2.66667 11.3333C2.66667 11.7 2.96667 12 3.33333 12H8.66667C9.03333 12 9.33333 11.7 9.33333 11.3333C9.33333 10.9667 9.03333 10.6667 8.66667 10.6667H6.66667V8.6C7.75333 8.38 8.65333 7.62667 9.07333 6.62667C10.72 6.42 12 5.03333 12 3.33333V2.66667C12 1.93333 11.4 1.33333 10.6667 1.33333ZM1.33333 3.33333V2.66667H2.66667V5.21333C1.89333 4.93333 1.33333 4.2 1.33333 3.33333ZM10.6667 3.33333C10.6667 4.2 10.1067 4.93333 9.33333 5.21333V2.66667H10.6667V3.33333Z" fill="#0DBD8B"/>
+<path d="M10.6667 1.33333H9.33333V0.666667C9.33333 0.3 9.03333 0 8.66667 0H3.33333C2.96667 0 2.66667 0.3 2.66667 0.666667V1.33333H1.33333C0.6 1.33333 0 1.93333 0 2.66667V3.33333C0 5.03333 1.28 6.42 2.92667 6.62667C3.34667 7.62667 4.24667 8.38 5.33333 8.6V10.6667H3.33333C2.96667 10.6667 2.66667 10.9667 2.66667 11.3333C2.66667 11.7 2.96667 12 3.33333 12H8.66667C9.03333 12 9.33333 11.7 9.33333 11.3333C9.33333 10.9667 9.03333 10.6667 8.66667 10.6667H6.66667V8.6C7.75333 8.38 8.65333 7.62667 9.07333 6.62667C10.72 6.42 12 5.03333 12 3.33333V2.66667C12 1.93333 11.4 1.33333 10.6667 1.33333ZM1.33333 3.33333V2.66667H2.66667V5.21333C1.89333 4.93333 1.33333 4.2 1.33333 3.33333ZM10.6667 3.33333C10.6667 4.2 10.1067 4.93333 9.33333 5.21333V2.66667H10.6667V3.33333Z" fill="currentColor"/>
 </svg>

src/components/views/messages/MPollBody.tsx

@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 import React, { ReactNode } from "react";
-import classNames from "classnames";
 import { logger } from "matrix-js-sdk/src/logger";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { Relations } from "matrix-js-sdk/src/models/relations";
@@ -30,13 +29,13 @@ import { _t } from "../../../languageHandler";
 import Modal from "../../../Modal";
 import { IBodyProps } from "./IBodyProps";
 import { formatCommaSeparatedList } from "../../../utils/FormattingUtils";
-import StyledRadioButton from "../elements/StyledRadioButton";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import ErrorDialog from "../dialogs/ErrorDialog";
 import { GetRelationsForEvent } from "../rooms/EventTile";
 import PollCreateDialog from "../elements/PollCreateDialog";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import Spinner from "../elements/Spinner";
+import { PollOption } from "../polls/PollOption";
 
 interface IState {
     poll?: Poll;
@@ -230,10 +229,6 @@ export default class MPollBody extends React.Component<IBodyProps, IState> {
         this.setState({ selected: answerId });
     }
 
-    private onOptionSelected = (e: React.FormEvent<HTMLInputElement>): void => {
-        this.selectOption(e.currentTarget.value);
-    };
-
     /**
      * @returns userId -> UserVote
      */
@@ -329,47 +324,26 @@ export default class MPollBody extends React.Component<IBodyProps, IState> {
                 <div className="mx_MPollBody_allOptions">
                     {pollEvent.answers.map((answer: PollAnswerSubevent) => {
                         let answerVotes = 0;
-                        let votesText = "";
 
                         if (showResults) {
                             answerVotes = votes.get(answer.id) ?? 0;
-                            votesText = _t("%(count)s votes", { count: answerVotes });
                         }
 
                         const checked =
                             (!poll.isEnded && myVote === answer.id) || (poll.isEnded && answerVotes === winCount);
-                        const cls = classNames({
-                            mx_MPollBody_option: true,
-                            mx_MPollBody_option_checked: checked,
-                            mx_MPollBody_option_ended: poll.isEnded,
-                        });
 
-                        const answerPercent = totalVotes === 0 ? 0 : Math.round((100.0 * answerVotes) / totalVotes);
                         return (
-                            <div
-                                data-testid={`pollOption-${answer.id}`}
+                            <PollOption
                                 key={answer.id}
-                                className={cls}
-                                onClick={() => this.selectOption(answer.id)}
-                            >
-                                {poll.isEnded ? (
-                                    <EndedPollOption answer={answer} checked={checked} votesText={votesText} />
-                                ) : (
-                                    <LivePollOption
-                                        pollId={pollId}
-                                        answer={answer}
-                                        checked={checked}
-                                        votesText={votesText}
-                                        onOptionSelected={this.onOptionSelected}
-                                    />
-                                )}
-                                <div className="mx_MPollBody_popularityBackground">
-                                    <div
-                                        className="mx_MPollBody_popularityAmount"
-                                        style={{ width: `${answerPercent}%` }}
-                                    />
-                                </div>
-                            </div>
+                                pollId={pollId}
+                                answer={answer}
+                                isChecked={checked}
+                                isEnded={poll.isEnded}
+                                voteCount={answerVotes}
+                                totalVoteCount={totalVotes}
+                                displayVoteCount={showResults}
+                                onOptionSelected={this.selectOption.bind(this)}
+                            />
                         );
                     })}
                 </div>
@@ -381,53 +355,6 @@ export default class MPollBody extends React.Component<IBodyProps, IState> {
         );
     }
 }
-
-interface IEndedPollOptionProps {
-    answer: PollAnswerSubevent;
-    checked: boolean;
-    votesText: string;
-}
-
-function EndedPollOption(props: IEndedPollOptionProps): JSX.Element {
-    const cls = classNames({
-        mx_MPollBody_endedOption: true,
-        mx_MPollBody_endedOptionWinner: props.checked,
-    });
-    return (
-        <div className={cls} data-value={props.answer.id}>
-            <div className="mx_MPollBody_optionDescription">
-                <div className="mx_MPollBody_optionText">{props.answer.text}</div>
-                <div className="mx_MPollBody_optionVoteCount">{props.votesText}</div>
-            </div>
-        </div>
-    );
-}
-
-interface ILivePollOptionProps {
-    pollId: string;
-    answer: PollAnswerSubevent;
-    checked: boolean;
-    votesText: string;
-    onOptionSelected: (e: React.FormEvent<HTMLInputElement>) => void;
-}
-
-function LivePollOption(props: ILivePollOptionProps): JSX.Element {
-    return (
-        <StyledRadioButton
-            className="mx_MPollBody_live-option"
-            name={`poll_answer_select-${props.pollId}`}
-            value={props.answer.id}
-            checked={props.checked}
-            onChange={props.onOptionSelected}
-        >
-            <div className="mx_MPollBody_optionDescription">
-                <div className="mx_MPollBody_optionText">{props.answer.text}</div>
-                <div className="mx_MPollBody_optionVoteCount">{props.votesText}</div>
-            </div>
-        </StyledRadioButton>
-    );
-}
-
 export class UserVote {
     public constructor(public readonly ts: number, public readonly sender: string, public readonly answers: string[]) {}
 }

src/components/views/polls/PollOption.tsx

@@ -0,0 +1,123 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import classNames from "classnames";
+import { PollAnswerSubevent } from "matrix-js-sdk/src/extensible_events_v1/PollStartEvent";
+
+import { _t } from "../../../languageHandler";
+import { Icon as TrophyIcon } from "../../../../res/img/element-icons/trophy.svg";
+import StyledRadioButton from "../elements/StyledRadioButton";
+
+type PollOptionContentProps = {
+    answer: PollAnswerSubevent;
+    voteCount: number;
+    displayVoteCount?: boolean;
+    isWinner?: boolean;
+};
+const PollOptionContent: React.FC<PollOptionContentProps> = ({ isWinner, answer, voteCount, displayVoteCount }) => {
+    const votesText = displayVoteCount ? _t("%(count)s votes", { count: voteCount }) : "";
+    return (
+        <div className="mx_PollOption_content">
+            <div className="mx_PollOption_optionText">{answer.text}</div>
+            <div className="mx_PollOption_optionVoteCount">
+                {isWinner && <TrophyIcon className="mx_PollOption_winnerIcon" />}
+                {votesText}
+            </div>
+        </div>
+    );
+};
+
+interface PollOptionProps extends PollOptionContentProps {
+    pollId: string;
+    totalVoteCount: number;
+    isEnded?: boolean;
+    isChecked?: boolean;
+    onOptionSelected?: (id: string) => void;
+}
+
+const EndedPollOption: React.FC<Omit<PollOptionProps, "voteCount" | "totalVoteCount">> = ({
+    isChecked,
+    children,
+    answer,
+}) => (
+    <div
+        className={classNames("mx_PollOption_endedOption", {
+            mx_PollOption_endedOptionWinner: isChecked,
+        })}
+        data-value={answer.id}
+    >
+        {children}
+    </div>
+);
+
+const ActivePollOption: React.FC<Omit<PollOptionProps, "voteCount" | "totalVoteCount">> = ({
+    pollId,
+    isChecked,
+    children,
+    answer,
+    onOptionSelected,
+}) => (
+    <StyledRadioButton
+        className="mx_PollOption_live-option"
+        name={`poll_answer_select-${pollId}`}
+        value={answer.id}
+        checked={isChecked}
+        onChange={() => onOptionSelected?.(answer.id)}
+    >
+        {children}
+    </StyledRadioButton>
+);
+
+export const PollOption: React.FC<PollOptionProps> = ({
+    pollId,
+    answer,
+    voteCount,
+    totalVoteCount,
+    displayVoteCount,
+    isEnded,
+    isChecked,
+    onOptionSelected,
+}) => {
+    const cls = classNames({
+        mx_PollOption: true,
+        mx_PollOption_checked: isChecked,
+        mx_PollOption_ended: isEnded,
+    });
+    const isWinner = isEnded && isChecked;
+    const answerPercent = totalVoteCount === 0 ? 0 : Math.round((100.0 * voteCount) / totalVoteCount);
+    const PollOptionWrapper = isEnded ? EndedPollOption : ActivePollOption;
+    return (
+        <div data-testid={`pollOption-${answer.id}`} className={cls} onClick={() => onOptionSelected?.(answer.id)}>
+            <PollOptionWrapper
+                pollId={pollId}
+                answer={answer}
+                isChecked={isChecked}
+                onOptionSelected={onOptionSelected}
+            >
+                <PollOptionContent
+                    isWinner={isWinner}
+                    answer={answer}
+                    voteCount={voteCount}
+                    displayVoteCount={displayVoteCount}
+                />
+            </PollOptionWrapper>
+            <div className="mx_PollOption_popularityBackground">
+                <div className="mx_PollOption_popularityAmount" style={{ width: `${answerPercent}%` }} />
+            </div>
+        </div>
+    );
+};

src/i18n/strings/en_EN.json

@@ -2315,6 +2315,8 @@
     "%(displayName)s cancelled verification.": "%(displayName)s cancelled verification.",
     "You cancelled verification.": "You cancelled verification.",
     "Verification cancelled": "Verification cancelled",
+    "%(count)s votes|other": "%(count)s votes",
+    "%(count)s votes|one": "%(count)s vote",
     "%(name)s started a video call": "%(name)s started a video call",
     "Video call ended": "Video call ended",
     "Sunday": "Sunday",
@@ -2416,8 +2418,6 @@
     "Based on %(count)s votes|other": "Based on %(count)s votes",
     "Based on %(count)s votes|one": "Based on %(count)s vote",
     "edited": "edited",
-    "%(count)s votes|other": "%(count)s votes",
-    "%(count)s votes|one": "%(count)s vote",
     "Error decrypting video": "Error decrypting video",
     "Error processing voice message": "Error processing voice message",
     "Add reaction": "Add reaction",

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

@@ -42,7 +42,7 @@ import MPollBody from "../../../../src/components/views/messages/MPollBody";
 import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalinks";
 import { MediaEventHelper } from "../../../../src/utils/MediaEventHelper";
 
-const CHECKED = "mx_MPollBody_option_checked";
+const CHECKED = "mx_PollOption_checked";
 const userId = "@me:example.com";
 
 const mockClient = getMockClientWithEventEmitter({
@@ -383,7 +383,7 @@ describe("MPollBody", () => {
         const votes: MatrixEvent[] = [];
         const ends: MatrixEvent[] = [];
         const { container } = await newMPollBody(votes, ends, answers);
-        expect(container.querySelectorAll(".mx_MPollBody_option").length).toBe(20);
+        expect(container.querySelectorAll(".mx_PollOption").length).toBe(20);
     });
 
     it("hides scores if I voted but the poll is undisclosed", async () => {
@@ -429,7 +429,7 @@ describe("MPollBody", () => {
         ];
         const ends = [newPollEndEvent("@me:example.com", 12)];
         const renderResult = await newMPollBody(votes, ends, undefined, false);
-        expect(endedVotesCount(renderResult, "pizza")).toBe("3 votes");
+        expect(endedVotesCount(renderResult, "pizza")).toBe('<div class="mx_PollOption_winnerIcon"></div>3 votes');
         expect(endedVotesCount(renderResult, "poutine")).toBe("1 vote");
         expect(endedVotesCount(renderResult, "italian")).toBe("0 votes");
         expect(endedVotesCount(renderResult, "wings")).toBe("1 vote");
@@ -531,9 +531,9 @@ describe("MPollBody", () => {
         const ends = [newPollEndEvent("@me:example.com", 25)];
         const renderResult = await newMPollBody(votes, ends);
         expect(endedVotesCount(renderResult, "pizza")).toBe("0 votes");
-        expect(endedVotesCount(renderResult, "poutine")).toBe("1 vote");
+        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("1 vote");
+        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");
     });
 
@@ -542,7 +542,7 @@ describe("MPollBody", () => {
         const ends = [newPollEndEvent("@me:example.com", 25)];
         const renderResult = await newMPollBody(votes, ends);
         expect(endedVotesCount(renderResult, "pizza")).toBe("0 votes");
-        expect(endedVotesCount(renderResult, "poutine")).toBe("1 vote");
+        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");
@@ -564,7 +564,7 @@ describe("MPollBody", () => {
         expect(endedVotesCount(renderResult, "pizza")).toBe("2 votes");
         expect(endedVotesCount(renderResult, "poutine")).toBe("0 votes");
         expect(endedVotesCount(renderResult, "italian")).toBe("0 votes");
-        expect(endedVotesCount(renderResult, "wings")).toBe("3 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");
     });
 
@@ -584,7 +584,7 @@ describe("MPollBody", () => {
         expect(endedVotesCount(renderResult, "pizza")).toBe("2 votes");
         expect(endedVotesCount(renderResult, "poutine")).toBe("0 votes");
         expect(endedVotesCount(renderResult, "italian")).toBe("0 votes");
-        expect(endedVotesCount(renderResult, "wings")).toBe("3 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");
     });
 
@@ -607,7 +607,7 @@ describe("MPollBody", () => {
         expect(endedVotesCount(renderResult, "pizza")).toBe("2 votes");
         expect(endedVotesCount(renderResult, "poutine")).toBe("0 votes");
         expect(endedVotesCount(renderResult, "italian")).toBe("0 votes");
-        expect(endedVotesCount(renderResult, "wings")).toBe("3 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");
     });
 
@@ -634,7 +634,7 @@ describe("MPollBody", () => {
         expect(endedVotesCount(renderResult, "pizza")).toBe("2 votes");
         expect(endedVotesCount(renderResult, "poutine")).toBe("0 votes");
         expect(endedVotesCount(renderResult, "italian")).toBe("0 votes");
-        expect(endedVotesCount(renderResult, "wings")).toBe("3 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");
     });
 
@@ -653,8 +653,8 @@ describe("MPollBody", () => {
         expect(endedVoteChecked(renderResult, "pizza")).toBe(false);
 
         // Double-check by looking for the endedOptionWinner class
-        expect(endedVoteDiv(renderResult, "wings").className.includes("mx_MPollBody_endedOptionWinner")).toBe(true);
-        expect(endedVoteDiv(renderResult, "pizza").className.includes("mx_MPollBody_endedOptionWinner")).toBe(false);
+        expect(endedVoteDiv(renderResult, "wings").className.includes("mx_PollOption_endedOptionWinner")).toBe(true);
+        expect(endedVoteDiv(renderResult, "pizza").className.includes("mx_PollOption_endedOptionWinner")).toBe(false);
     });
 
     it("highlights multiple winning votes", async () => {
@@ -670,13 +670,13 @@ describe("MPollBody", () => {
         expect(endedVoteChecked(renderResult, "wings")).toBe(true);
         expect(endedVoteChecked(renderResult, "poutine")).toBe(true);
         expect(endedVoteChecked(renderResult, "italian")).toBe(false);
-        expect(renderResult.container.getElementsByClassName("mx_MPollBody_option_checked")).toHaveLength(3);
+        expect(renderResult.container.getElementsByClassName(CHECKED)).toHaveLength(3);
     });
 
     it("highlights nothing if poll has no votes", async () => {
         const ends = [newPollEndEvent("@me:example.com", 25)];
         const renderResult = await newMPollBody([], ends);
-        expect(renderResult.container.getElementsByClassName("mx_MPollBody_option_checked")).toHaveLength(0);
+        expect(renderResult.container.getElementsByClassName(CHECKED)).toHaveLength(0);
     });
 
     it("says poll is not ended if there is no end event", async () => {
@@ -745,7 +745,7 @@ describe("MPollBody", () => {
         expect(inputs[0].getAttribute("value")).toEqual("n1");
         expect(inputs[1].getAttribute("value")).toEqual("n2");
         expect(inputs[2].getAttribute("value")).toEqual("n3");
-        const options = container.querySelectorAll(".mx_MPollBody_optionText");
+        const options = container.querySelectorAll(".mx_PollOption_optionText");
         expect(options).toHaveLength(3);
         expect(options[0].innerHTML).toEqual("new answer 1");
         expect(options[1].innerHTML).toEqual("new answer 2");
@@ -934,11 +934,11 @@ function voteButton({ getByTestId }: RenderResult, value: string): Element {
 }
 
 function votesCount({ getByTestId }: RenderResult, value: string): string {
-    return getByTestId(`pollOption-${value}`).querySelector(".mx_MPollBody_optionVoteCount")!.innerHTML;
+    return getByTestId(`pollOption-${value}`).querySelector(".mx_PollOption_optionVoteCount")!.innerHTML;
 }
 
 function endedVoteChecked({ getByTestId }: RenderResult, value: string): boolean {
-    return getByTestId(`pollOption-${value}`).className.includes("mx_MPollBody_option_checked");
+    return getByTestId(`pollOption-${value}`).className.includes(CHECKED);
 }
 
 function endedVoteDiv({ getByTestId }: RenderResult, value: string): Element {

test/components/views/messages/__snapshots__/MPollEndBody-test.tsx.snap

@@ -22,65 +22,65 @@ exports[`<MPollEndBody /> when poll start event exists in current timeline rende
       class="mx_MPollBody_allOptions"
     >
       <div
-        class="mx_MPollBody_option mx_MPollBody_option_ended"
+        class="mx_PollOption mx_PollOption_ended"
         data-testid="pollOption-socks"
       >
         <div
-          class="mx_MPollBody_endedOption"
+          class="mx_PollOption_endedOption"
           data-value="socks"
         >
           <div
-            class="mx_MPollBody_optionDescription"
+            class="mx_PollOption_content"
           >
             <div
-              class="mx_MPollBody_optionText"
+              class="mx_PollOption_optionText"
             >
               Socks
             </div>
             <div
-              class="mx_MPollBody_optionVoteCount"
+              class="mx_PollOption_optionVoteCount"
             >
               0 votes
             </div>
           </div>
         </div>
         <div
-          class="mx_MPollBody_popularityBackground"
+          class="mx_PollOption_popularityBackground"
         >
           <div
-            class="mx_MPollBody_popularityAmount"
+            class="mx_PollOption_popularityAmount"
             style="width: 0%;"
           />
         </div>
       </div>
       <div
-        class="mx_MPollBody_option mx_MPollBody_option_ended"
+        class="mx_PollOption mx_PollOption_ended"
         data-testid="pollOption-shoes"
       >
         <div
-          class="mx_MPollBody_endedOption"
+          class="mx_PollOption_endedOption"
           data-value="shoes"
         >
           <div
-            class="mx_MPollBody_optionDescription"
+            class="mx_PollOption_content"
           >
             <div
-              class="mx_MPollBody_optionText"
+              class="mx_PollOption_optionText"
             >
               Shoes
             </div>
             <div
-              class="mx_MPollBody_optionVoteCount"
+              class="mx_PollOption_optionVoteCount"
             >
               0 votes
             </div>
           </div>
         </div>
         <div
-          class="mx_MPollBody_popularityBackground"
+          class="mx_PollOption_popularityBackground"
         >
           <div
-            class="mx_MPollBody_popularityAmount"
+            class="mx_PollOption_popularityAmount"
             style="width: 0%;"
           />
         </div>

test/components/views/right_panel/PinnedMessagesCard-test.tsx

@@ -287,8 +287,8 @@ describe("<PinnedMessagesCard />", () => {
         const pinTile = pins.find(MPollBody);
 
         expect(pinTile.length).toEqual(1);
-        expect(pinTile.find(".mx_MPollBody_option_ended").length).toEqual(2);
-        expect(pinTile.find(".mx_MPollBody_optionVoteCount").first().text()).toEqual("2 votes");
-        expect(pinTile.find(".mx_MPollBody_optionVoteCount").last().text()).toEqual("1 vote");
+        expect(pinTile.find(".mx_PollOption_ended").length).toEqual(2);
+        expect(pinTile.find(".mx_PollOption_optionVoteCount").first().text()).toEqual("2 votes");
+        expect(pinTile.find(".mx_PollOption_optionVoteCount").last().text()).toEqual("1 vote");
     });
 });

test/components/views/settings/devices/FilteredDeviceList-test.tsx

@@ -26,6 +26,9 @@ mockPlatformPeg();
 
 const MS_DAY = 86400000;
 describe("<FilteredDeviceList />", () => {
+    // 14.03.2022 16:15
+    const now = 1647270879403;
+    jest.spyOn(global.Date, "now").mockReturnValue(now);
     const newDevice = {
         device_id: "new",
         last_seen_ts: Date.now() - 500,
@@ -81,6 +84,10 @@ describe("<FilteredDeviceList />", () => {
 
     const getComponent = (props = {}) => <FilteredDeviceList {...defaultProps} {...props} />;
 
+    afterAll(() => {
+        jest.spyOn(global.Date, "now").mockRestore();
+    });
+
     it("renders devices in correct order", () => {
         const { container } = render(getComponent());
         const tiles = container.querySelectorAll(".mx_DeviceTile");