Poll history - read only list of polls in current timeline (#10055)

* add settings while under development

* very basic tests for roomsummarycard

* empty poll history dialog and option in room summary

* pollS history in settings

* render an ugly list of polls in current timeline

* readonly poll history list items

* fix scroll window

* use short year code in date format, tidy

* no results message + tests

* strict fix

* mock intldatetimeformat for stable date formatting

* extract date format fn into date-utils

* jsdoc

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

@@ -0,0 +1,86 @@
+/*
+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, Room } from "matrix-js-sdk/src/matrix";
+
+import { PollHistoryDialog } from "../../../../../src/components/views/dialogs/polls/PollHistoryDialog";
+import {
+    getMockClientWithEventEmitter,
+    makePollStartEvent,
+    mockClientMethodsUser,
+    mockIntlDateTimeFormat,
+    unmockIntlDateTimeFormat,
+} from "../../../../test-utils";
+
+describe("<PollHistoryDialog />", () => {
+    const userId = "@alice:domain.org";
+    const roomId = "!room:domain.org";
+    const mockClient = getMockClientWithEventEmitter({
+        ...mockClientMethodsUser(userId),
+        getRoom: jest.fn(),
+    });
+    const room = new Room(roomId, mockClient, userId);
+
+    const defaultProps = {
+        roomId,
+        matrixClient: mockClient,
+        onFinished: jest.fn(),
+    };
+    const getComponent = () => render(<PollHistoryDialog {...defaultProps} />);
+
+    beforeAll(() => {
+        mockIntlDateTimeFormat();
+    });
+
+    beforeEach(() => {
+        mockClient.getRoom.mockReturnValue(room);
+        const timeline = room.getLiveTimeline();
+        jest.spyOn(timeline, "getEvents").mockReturnValue([]);
+    });
+
+    afterAll(() => {
+        unmockIntlDateTimeFormat();
+    });
+
+    it("throws when room is not found", () => {
+        mockClient.getRoom.mockReturnValue(null);
+
+        expect(() => getComponent()).toThrow("Cannot find room");
+    });
+
+    it("renders a no polls message when there are no polls in the timeline", () => {
+        const { getByText } = getComponent();
+
+        expect(getByText("There are no polls in this room")).toBeTruthy();
+    });
+
+    it("renders a list of polls when there are polls in the timeline", () => {
+        const pollStart1 = makePollStartEvent("Question?", userId, undefined, 1675300825090, "$1");
+        const pollStart2 = makePollStartEvent("Where?", userId, undefined, 1675300725090, "$2");
+        const pollStart3 = makePollStartEvent("What?", userId, undefined, 1675200725090, "$3");
+        const message = new MatrixEvent({
+            type: "m.room.message",
+            content: {},
+        });
+        const timeline = room.getLiveTimeline();
+        jest.spyOn(timeline, "getEvents").mockReturnValue([pollStart1, pollStart2, pollStart3, message]);
+        const { container } = getComponent();
+
+        expect(container).toMatchSnapshot();
+    });
+});

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

@@ -0,0 +1,53 @@
+/*
+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 } from "matrix-js-sdk/src/matrix";
+
+import PollListItem from "../../../../../src/components/views/dialogs/polls/PollListItem";
+import { makePollStartEvent, mockIntlDateTimeFormat, unmockIntlDateTimeFormat } from "../../../../test-utils";
+
+describe("<PollListItem />", () => {
+    const event = makePollStartEvent("Question?", "@me:domain.org");
+    event.getContent().origin;
+    const defaultProps = { event };
+    const getComponent = (props = {}) => render(<PollListItem {...defaultProps} {...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", () => {
+        const { container } = getComponent();
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders null when event does not have an extensible poll start event", () => {
+        const event = new MatrixEvent({
+            type: "m.room.message",
+            content: {},
+        });
+        const { container } = getComponent({ event });
+        expect(container.firstElementChild).toBeFalsy();
+    });
+});

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

@@ -0,0 +1,99 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<PollHistoryDialog /> renders a list of polls when there are polls in the timeline 1`] = `
+<div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+  <div
+    aria-labelledby="mx_BaseDialog_title"
+    class="undefined mx_Dialog_fixedWidth"
+    data-focus-lock-disabled="false"
+    role="dialog"
+  >
+    <div
+      class="mx_Dialog_header mx_Dialog_headerWithCancel"
+    >
+      <h2
+        class="mx_Heading_h2 mx_Dialog_title"
+        id="mx_BaseDialog_title"
+      >
+        Polls history
+      </h2>
+      <div
+        aria-label="Close dialog"
+        class="mx_AccessibleButton mx_Dialog_cancelButton"
+        role="button"
+        tabindex="0"
+      />
+    </div>
+    <div
+      class="mx_PollHistoryDialog_content"
+    >
+      <div
+        class="mx_PollHistoryList"
+      >
+        <ol
+          class="mx_PollHistoryList_list"
+        >
+          <li
+            class="mx_PollListItem"
+            data-testid="pollListItem-$1"
+          >
+            <span>
+              02/02/23
+            </span>
+            <div
+              class="mx_PollListItem_icon"
+            />
+            <span
+              class="mx_PollListItem_question"
+            >
+              Question?
+            </span>
+          </li>
+          <li
+            class="mx_PollListItem"
+            data-testid="pollListItem-$2"
+          >
+            <span>
+              02/02/23
+            </span>
+            <div
+              class="mx_PollListItem_icon"
+            />
+            <span
+              class="mx_PollListItem_question"
+            >
+              Where?
+            </span>
+          </li>
+          <li
+            class="mx_PollListItem"
+            data-testid="pollListItem-$3"
+          >
+            <span>
+              31/01/23
+            </span>
+            <div
+              class="mx_PollListItem_icon"
+            />
+            <span
+              class="mx_PollListItem_question"
+            >
+              What?
+            </span>
+          </li>
+        </ol>
+      </div>
+    </div>
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+</div>
+`;

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

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<PollListItem /> renders a poll 1`] = `
+<div>
+  <li
+    class="mx_PollListItem"
+    data-testid="pollListItem-$mypoll"
+  >
+    <span>
+      01/01/70
+    </span>
+    <div
+      class="mx_PollListItem_icon"
+    />
+    <span
+      class="mx_PollListItem_question"
+    >
+      Question?
+    </span>
+  </li>
+</div>
+`;

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

@@ -145,7 +145,7 @@ describe("<RoomSummaryCard />", () => {
 
             fireEvent.click(getByText("Polls history"));
 
-            expect(modalSpy).toHaveBeenCalledWith(PollHistoryDialog, { roomId });
+            expect(modalSpy).toHaveBeenCalledWith(PollHistoryDialog, { roomId, matrixClient: mockClient });
         });
     });
 

test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap

@@ -92,6 +92,7 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         </div>
         <div
           class="mx_AccessibleButton mx_BaseCard_Button mx_RoomSummaryCard_Button mx_RoomSummaryCard_icon_share"
+          data-testid="shareRoomButton"
           role="button"
           tabindex="0"
         >

test/test-utils/date.ts

@@ -15,3 +15,21 @@ limitations under the License.
 */
 
 export const REPEATABLE_DATE = new Date(2022, 10, 17, 16, 58, 32, 517);
+
+// allow setting default locale and set timezone
+// defaults to en-GB / Europe/London
+// so tests run the same everywhere
+export const mockIntlDateTimeFormat = (defaultLocale = "en-GB", defaultTimezone = "Europe/London"): void => {
+    // unmock so we can use real DateTimeFormat in mockImplementation
+    if (jest.isMockFunction(global.Intl.DateTimeFormat)) {
+        unmockIntlDateTimeFormat();
+    }
+    const DateTimeFormat = Intl.DateTimeFormat;
+    jest.spyOn(global.Intl, "DateTimeFormat").mockImplementation(
+        (locale, options) => new DateTimeFormat(locale || defaultLocale, { ...options, timeZone: defaultTimezone }),
+    );
+};
+
+export const unmockIntlDateTimeFormat = (): void => {
+    jest.spyOn(global.Intl, "DateTimeFormat").mockRestore();
+};

test/test-utils/poll.ts

@@ -18,7 +18,13 @@ import { MatrixEvent } from "matrix-js-sdk/src/matrix";
 import { M_POLL_START, PollAnswer, M_POLL_KIND_DISCLOSED } from "matrix-js-sdk/src/@types/polls";
 import { M_TEXT } from "matrix-js-sdk/src/@types/extensible_events";
 
-export const makePollStartEvent = (question: string, sender: string, answers?: PollAnswer[]): MatrixEvent => {
+export const makePollStartEvent = (
+    question: string,
+    sender: string,
+    answers?: PollAnswer[],
+    ts?: number,
+    id?: string,
+): MatrixEvent => {
     if (!answers) {
         answers = [
             { id: "socks", [M_TEXT.name]: "Socks" },
@@ -27,7 +33,7 @@ export const makePollStartEvent = (question: string, sender: string, answers?: P
     }
 
     return new MatrixEvent({
-        event_id: "$mypoll",
+        event_id: id || "$mypoll",
         room_id: "#myroom:example.com",
         sender: sender,
         type: M_POLL_START.name,
@@ -41,5 +47,6 @@ export const makePollStartEvent = (question: string, sender: string, answers?: P
             },
             [M_TEXT.name]: `${question}: answers`,
         },
+        origin_server_ts: ts || 0,
     });
 };

test/utils/DateUtils-test.ts

@@ -21,8 +21,9 @@ import {
     formatFullDateNoDayISO,
     formatTimeLeft,
     formatPreciseDuration,
+    formatLocalDateShort,
 } from "../../src/DateUtils";
-import { REPEATABLE_DATE } from "../test-utils";
+import { REPEATABLE_DATE, mockIntlDateTimeFormat, unmockIntlDateTimeFormat } from "../test-utils";
 
 describe("formatSeconds", () => {
     it("correctly formats time with hours", () => {
@@ -137,3 +138,22 @@ describe("formatTimeLeft", () => {
         expect(formatTimeLeft(seconds)).toBe(expected);
     });
 });
+
+describe("formatLocalDateShort()", () => {
+    afterAll(() => {
+        unmockIntlDateTimeFormat();
+    });
+    const timestamp = new Date("Fri Dec 17 2021 09:09:00 GMT+0100 (Central European Standard Time)").getTime();
+    it("formats date correctly by locale", () => {
+        // format is DD/MM/YY
+        mockIntlDateTimeFormat("en-UK");
+        expect(formatLocalDateShort(timestamp)).toEqual("17/12/21");
+
+        // US date format is MM/DD/YY
+        mockIntlDateTimeFormat("en-US");
+        expect(formatLocalDateShort(timestamp)).toEqual("12/17/21");
+
+        mockIntlDateTimeFormat("de-DE");
+        expect(formatLocalDateShort(timestamp)).toEqual("17.12.21");
+    });
+});