Poll history - ended polls list items (#10119)

* 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 from pollbody

* add ended poll list item component

* use named export for polllistitem

* test POllListItemEnded

* comments

* strict fixes

* extract poll option display components

* strict fixes

* strict

test/components/views/dialogs/polls/PollListItem-test.tsx

@@ -18,7 +18,7 @@ import React from "react";
 import { render } from "@testing-library/react";
 import { MatrixEvent } from "matrix-js-sdk/src/matrix";
 
-import PollListItem from "../../../../../src/components/views/dialogs/polls/PollListItem";
+import { PollListItem } from "../../../../../src/components/views/dialogs/polls/PollListItem";
 import { makePollStartEvent, mockIntlDateTimeFormat, unmockIntlDateTimeFormat } from "../../../../test-utils";
 
 describe("<PollListItem />", () => {

test/components/views/dialogs/polls/PollListItemEnded-test.tsx

@@ -0,0 +1,181 @@
+/*
+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 { render } from "@testing-library/react";
+import { MatrixEvent, Poll, Room } from "matrix-js-sdk/src/matrix";
+import { M_TEXT } from "matrix-js-sdk/src/@types/extensible_events";
+
+import { PollListItemEnded } from "../../../../../src/components/views/dialogs/polls/PollListItemEnded";
+import {
+    flushPromises,
+    getMockClientWithEventEmitter,
+    makePollEndEvent,
+    makePollResponseEvent,
+    makePollStartEvent,
+    mockClientMethodsUser,
+    mockIntlDateTimeFormat,
+    setupRoomWithPollEvents,
+    unmockIntlDateTimeFormat,
+} from "../../../../test-utils";
+
+describe("<PollListItemEnded />", () => {
+    const userId = "@alice:domain.org";
+    const roomId = "!room:domain.org";
+    const mockClient = getMockClientWithEventEmitter({
+        ...mockClientMethodsUser(userId),
+        getRoom: jest.fn(),
+        relations: jest.fn(),
+        decryptEventIfNeeded: jest.fn(),
+    });
+    const room = new Room(roomId, mockClient, userId);
+    const timestamp = 1675300825090;
+
+    const pollId = "1";
+    const answerOne = {
+        id: "answerOneId",
+        [M_TEXT.name]: "Nissan Silvia S15",
+    };
+    const answerTwo = {
+        id: "answerTwoId",
+        [M_TEXT.name]: "Mitsubishi Lancer Evolution IX",
+    };
+    const pollStartEvent = makePollStartEvent("Question?", userId, [answerOne, answerTwo], {
+        roomId,
+        id: pollId,
+        ts: timestamp,
+    });
+    const pollEndEvent = makePollEndEvent(pollId, roomId, userId, timestamp + 60000);
+
+    const getComponent = (props: { event: MatrixEvent; poll: Poll }) => render(<PollListItemEnded {...props} />);
+
+    beforeAll(() => {
+        // mock default locale to en-GB and set timezone
+        // so these tests run the same everywhere
+        mockIntlDateTimeFormat();
+    });
+
+    afterAll(() => {
+        unmockIntlDateTimeFormat();
+    });
+
+    it("renders a poll with no responses", async () => {
+        await setupRoomWithPollEvents([pollStartEvent], [], [pollEndEvent], mockClient, room);
+        const poll = room.polls.get(pollId)!;
+
+        const { container } = getComponent({ event: pollStartEvent, poll });
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders a poll with one winning answer", async () => {
+        const responses = [
+            makePollResponseEvent(pollId, [answerOne.id], userId, roomId, timestamp + 1),
+            makePollResponseEvent(pollId, [answerOne.id], "@bob:domain.org", roomId, timestamp + 1),
+            makePollResponseEvent(pollId, [answerTwo.id], "@charlie:domain.org", roomId, timestamp + 1),
+        ];
+        await setupRoomWithPollEvents([pollStartEvent], responses, [pollEndEvent], mockClient, room);
+        const poll = room.polls.get(pollId)!;
+
+        const { getByText } = getComponent({ event: pollStartEvent, poll });
+        // fetch relations
+        await flushPromises();
+        expect(getByText("Final result based on 3 votes")).toBeInTheDocument();
+        // winning answer
+        expect(getByText("Nissan Silvia S15")).toBeInTheDocument();
+    });
+
+    it("renders a poll with two winning answers", async () => {
+        const responses = [
+            makePollResponseEvent(pollId, [answerOne.id], userId, roomId, timestamp + 1),
+            makePollResponseEvent(pollId, [answerOne.id], "@han:domain.org", roomId, timestamp + 1),
+            makePollResponseEvent(pollId, [answerTwo.id], "@sean:domain.org", roomId, timestamp + 1),
+            makePollResponseEvent(pollId, [answerTwo.id], "@dk:domain.org", roomId, timestamp + 1),
+        ];
+        await setupRoomWithPollEvents([pollStartEvent], responses, [pollEndEvent], mockClient, room);
+        const poll = room.polls.get(pollId)!;
+
+        const { getByText } = getComponent({ event: pollStartEvent, poll });
+        // fetch relations
+        await flushPromises();
+        expect(getByText("Final result based on 4 votes")).toBeInTheDocument();
+        // both answers answer
+        expect(getByText("Nissan Silvia S15")).toBeInTheDocument();
+        expect(getByText("Mitsubishi Lancer Evolution IX")).toBeInTheDocument();
+    });
+
+    it("counts one unique vote per user", async () => {
+        const responses = [
+            makePollResponseEvent(pollId, [answerTwo.id], userId, roomId, timestamp + 1),
+            makePollResponseEvent(pollId, [answerTwo.id], userId, roomId, timestamp + 1),
+            makePollResponseEvent(pollId, [answerTwo.id], userId, roomId, timestamp + 1),
+            makePollResponseEvent(pollId, [answerOne.id], userId, roomId, timestamp + 2),
+            makePollResponseEvent(pollId, [answerOne.id], "@bob:domain.org", roomId, timestamp + 1),
+            makePollResponseEvent(pollId, [answerTwo.id], "@charlie:domain.org", roomId, timestamp + 1),
+        ];
+        await setupRoomWithPollEvents([pollStartEvent], responses, [pollEndEvent], mockClient, room);
+        const poll = room.polls.get(pollId)!;
+
+        const { getByText } = getComponent({ event: pollStartEvent, poll });
+        // fetch relations
+        await flushPromises();
+
+        // still only 3 unique votes
+        expect(getByText("Final result based on 3 votes")).toBeInTheDocument();
+        // only latest vote counted
+        expect(getByText("Nissan Silvia S15")).toBeInTheDocument();
+    });
+
+    it("excludes malformed responses", async () => {
+        const responses = [
+            makePollResponseEvent(pollId, ["bad-answer-id"], userId, roomId, timestamp + 1),
+            makePollResponseEvent(pollId, [answerOne.id], "@bob:domain.org", roomId, timestamp + 1),
+            makePollResponseEvent(pollId, [answerTwo.id], "@charlie:domain.org", roomId, timestamp + 1),
+        ];
+        await setupRoomWithPollEvents([pollStartEvent], responses, [pollEndEvent], mockClient, room);
+        const poll = room.polls.get(pollId)!;
+
+        const { getByText } = getComponent({ event: pollStartEvent, poll });
+        // fetch relations
+        await flushPromises();
+
+        // invalid vote excluded
+        expect(getByText("Final result based on 2 votes")).toBeInTheDocument();
+    });
+
+    it("updates on new responses", async () => {
+        const responses = [
+            makePollResponseEvent(pollId, [answerOne.id], "@bob:domain.org", roomId, timestamp + 1),
+            makePollResponseEvent(pollId, [answerTwo.id], "@charlie:domain.org", roomId, timestamp + 1),
+        ];
+        await setupRoomWithPollEvents([pollStartEvent], responses, [pollEndEvent], mockClient, room);
+        const poll = room.polls.get(pollId)!;
+
+        const { getByText, queryByText } = getComponent({ event: pollStartEvent, poll });
+        // fetch relations
+        await flushPromises();
+
+        expect(getByText("Final result based on 2 votes")).toBeInTheDocument();
+
+        await room.processPollEvents([
+            makePollResponseEvent(pollId, [answerOne.id], "@han:domain.org", roomId, timestamp + 1),
+        ]);
+
+        // updated with more responses
+        expect(getByText("Final result based on 3 votes")).toBeInTheDocument();
+        expect(getByText("Nissan Silvia S15")).toBeInTheDocument();
+        expect(queryByText("Mitsubishi Lancer Evolution IX")).not.toBeInTheDocument();
+    });
+});

test/components/views/dialogs/polls/__snapshots__/PollHistoryDialog-test.tsx.snap

@@ -65,7 +65,7 @@ exports[`<PollHistoryDialog /> renders a list of active polls when there are pol
           </label>
         </fieldset>
         <ol
-          class="mx_PollHistoryList_list"
+          class="mx_PollHistoryList_list mx_PollHistoryList_list_ACTIVE"
         >
           <li
             class="mx_PollListItem"

test/components/views/dialogs/polls/__snapshots__/PollListItemEnded-test.tsx.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<PollListItemEnded /> renders a poll with no responses 1`] = `
+<div>
+  <li
+    class="mx_PollListItemEnded"
+    data-testid="pollListItem-1"
+  >
+    <div
+      class="mx_PollListItemEnded_title"
+    >
+      <div
+        class="mx_PollListItemEnded_icon"
+      />
+      <span
+        class="mx_PollListItemEnded_question"
+      >
+        Question?
+      </span>
+      <span
+        class="mx_Caption"
+      >
+        02/02/23
+      </span>
+    </div>
+    <div
+      class="mx_PollListItemEnded_voteCount"
+    >
+      <span
+        class="mx_Caption"
+      >
+        Final result based on 0 votes
+      </span>
+    </div>
+  </li>
+</div>
+`;

test/test-utils/poll.ts

@@ -17,7 +17,13 @@ limitations under the License.
 import { Mocked } from "jest-mock";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
-import { M_POLL_START, PollAnswer, M_POLL_KIND_DISCLOSED, M_POLL_END } from "matrix-js-sdk/src/@types/polls";
+import {
+    M_POLL_START,
+    PollAnswer,
+    M_POLL_KIND_DISCLOSED,
+    M_POLL_END,
+    M_POLL_RESPONSE,
+} from "matrix-js-sdk/src/@types/polls";
 import { M_TEXT } from "matrix-js-sdk/src/@types/extensible_events";
 import { uuid4 } from "@sentry/utils";
 
@@ -78,6 +84,30 @@ export const makePollEndEvent = (pollStartEventId: string, roomId: string, sende
     });
 };
 
+export const makePollResponseEvent = (
+    pollId: string,
+    answerIds: string[],
+    sender: string,
+    roomId: string,
+    ts = 0,
+): MatrixEvent =>
+    new MatrixEvent({
+        event_id: uuid4(),
+        room_id: roomId,
+        origin_server_ts: ts,
+        type: M_POLL_RESPONSE.name,
+        sender,
+        content: {
+            "m.relates_to": {
+                rel_type: "m.reference",
+                event_id: pollId,
+            },
+            [M_POLL_RESPONSE.name]: {
+                answers: answerIds,
+            },
+        },
+    });
+
 /**
  * Creates a room with attached poll events
  * Returns room from mockClient