element-web/test/components/views/elements/PollCreateDialog-test.tsx

296 lines
12 KiB
TypeScript
Raw Normal View History

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { fireEvent, render, RenderResult } from "@testing-library/react";
import {
Room,
MatrixEvent,
M_POLL_KIND_DISCLOSED,
M_POLL_KIND_UNDISCLOSED,
M_POLL_START,
M_TEXT,
} from "matrix-js-sdk/src/matrix";
import { PollStartEvent } from "matrix-js-sdk/src/extensible_events_v1/PollStartEvent";
2024-03-25 12:48:48 +00:00
import { ReplacementEvent } from "matrix-js-sdk/src/types";
import { getMockClientWithEventEmitter } from "../../../test-utils";
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
import PollCreateDialog from "../../../../src/components/views/elements/PollCreateDialog";
2022-12-12 11:24:14 +00:00
import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
// Fake date to give a predictable snapshot
const realDateNow = Date.now;
const realDateToISOString = Date.prototype.toISOString;
Date.now = jest.fn(() => 2345678901234);
// eslint-disable-next-line no-extend-native
Date.prototype.toISOString = jest.fn(() => "2021-11-23T14:35:14.240Z");
afterAll(() => {
Date.now = realDateNow;
// eslint-disable-next-line no-extend-native
Date.prototype.toISOString = realDateToISOString;
});
describe("PollCreateDialog", () => {
const mockClient = getMockClientWithEventEmitter({
2022-12-12 11:24:14 +00:00
sendEvent: jest.fn().mockResolvedValue({ event_id: "1" }),
});
beforeEach(() => {
mockClient.sendEvent.mockClear();
});
it("renders a blank poll", () => {
const dialog = render(
<MatrixClientContext.Provider value={mockClient}>
<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />
</MatrixClientContext.Provider>,
);
expect(dialog.asFragment()).toMatchSnapshot();
});
it("autofocuses the poll topic on mount", () => {
const dialog = render(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
expect(dialog.container.querySelector("#poll-topic-input")).toHaveFocus();
});
it("autofocuses the new poll option field after clicking add option button", () => {
const dialog = render(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
expect(dialog.container.querySelector("#poll-topic-input")).toHaveFocus();
fireEvent.click(dialog.container.querySelector("div.mx_PollCreateDialog_addOption")!);
expect(dialog.container.querySelector("#poll-topic-input")).not.toHaveFocus();
expect(dialog.container.querySelector("#pollcreate_option_1")).not.toHaveFocus();
expect(dialog.container.querySelector("#pollcreate_option_2")).toHaveFocus();
});
it("renders a question and some options", () => {
const dialog = render(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
expectSubmitToBeDisabled(dialog, true);
// When I set some values in the boxes
2022-12-12 11:24:14 +00:00
changeValue(dialog, "Question or topic", "How many turnips is the optimal number?");
changeValue(dialog, "Option 1", "As many as my neighbour");
changeValue(dialog, "Option 2", "The question is meaningless");
fireEvent.click(dialog.container.querySelector("div.mx_PollCreateDialog_addOption")!);
changeValue(dialog, "Option 3", "Mu");
expect(dialog.asFragment()).toMatchSnapshot();
});
2022-02-17 09:13:05 +00:00
it("renders info from a previous event", () => {
const previousEvent: MatrixEvent = new MatrixEvent(
2022-12-12 11:24:14 +00:00
PollStartEvent.from("Poll Q", ["Answer 1", "Answer 2"], M_POLL_KIND_DISCLOSED).serialize(),
2022-02-17 09:13:05 +00:00
);
const dialog = render(
2022-12-12 11:24:14 +00:00
<PollCreateDialog room={createRoom()} onFinished={jest.fn()} editingMxEvent={previousEvent} />,
2022-02-17 09:13:05 +00:00
);
expectSubmitToBeDisabled(dialog, false);
expect(dialog.asFragment()).toMatchSnapshot();
2022-02-17 09:13:05 +00:00
});
it("doesn't allow submitting until there are options", () => {
const dialog = render(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
expectSubmitToBeDisabled(dialog, true);
});
it("does allow submitting when there are options and a question", () => {
// Given a dialog with no info in (which I am unable to submit)
const dialog = render(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
expectSubmitToBeDisabled(dialog, true);
// When I set some values in the boxes
changeValue(dialog, "Question or topic", "Q");
changeValue(dialog, "Option 1", "A1");
changeValue(dialog, "Option 2", "A2");
// Then I am able to submit
expectSubmitToBeDisabled(dialog, false);
});
it("shows the open poll description at first", () => {
const dialog = render(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
expect(dialog.container.querySelector("select")).toHaveValue(M_POLL_KIND_DISCLOSED.name);
expect(dialog.container.querySelector("p")).toHaveTextContent("Voters see results as soon as they have voted");
});
it("shows the closed poll description if we choose it", () => {
const dialog = render(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
changeKind(dialog, M_POLL_KIND_UNDISCLOSED.name);
expect(dialog.container.querySelector("select")).toHaveValue(M_POLL_KIND_UNDISCLOSED.name);
expect(dialog.container.querySelector("p")).toHaveTextContent(
"Results are only revealed when you end the poll",
);
});
it("shows the open poll description if we choose it", () => {
const dialog = render(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
changeKind(dialog, M_POLL_KIND_UNDISCLOSED.name);
changeKind(dialog, M_POLL_KIND_DISCLOSED.name);
expect(dialog.container.querySelector("select")).toHaveValue(M_POLL_KIND_DISCLOSED.name);
expect(dialog.container.querySelector("p")).toHaveTextContent("Voters see results as soon as they have voted");
});
it("shows the closed poll description when editing a closed poll", () => {
const previousEvent: MatrixEvent = new MatrixEvent(
2022-12-12 11:24:14 +00:00
PollStartEvent.from("Poll Q", ["Answer 1", "Answer 2"], M_POLL_KIND_UNDISCLOSED).serialize(),
);
previousEvent.event.event_id = "$prevEventId";
const dialog = render(
2022-12-12 11:24:14 +00:00
<PollCreateDialog room={createRoom()} onFinished={jest.fn()} editingMxEvent={previousEvent} />,
);
expect(dialog.container.querySelector("select")).toHaveValue(M_POLL_KIND_UNDISCLOSED.name);
expect(dialog.container.querySelector("p")).toHaveTextContent(
"Results are only revealed when you end the poll",
);
});
it("displays a spinner after submitting", () => {
const dialog = render(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
changeValue(dialog, "Question or topic", "Q");
changeValue(dialog, "Option 1", "A1");
changeValue(dialog, "Option 2", "A2");
expect(dialog.container.querySelector(".mx_Spinner")).toBeFalsy();
fireEvent.click(dialog.container.querySelector("button")!);
expect(dialog.container.querySelector(".mx_Spinner")).toBeDefined();
});
2022-02-17 09:13:05 +00:00
it("sends a poll create event when submitted", () => {
const dialog = render(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
2022-02-17 09:13:05 +00:00
changeValue(dialog, "Question or topic", "Q");
changeValue(dialog, "Option 1", "A1");
changeValue(dialog, "Option 2", "A2");
fireEvent.click(dialog.container.querySelector("button")!);
const [, , eventType, sentEventContent] = mockClient.sendEvent.mock.calls[0];
expect(M_POLL_START.matches(eventType)).toBeTruthy();
2022-12-12 11:24:14 +00:00
expect(sentEventContent).toEqual({
[M_TEXT.name]: "Q\n1. A1\n2. A2",
[M_POLL_START.name]: {
answers: [
{
id: expect.any(String),
[M_TEXT.name]: "A1",
},
{
id: expect.any(String),
[M_TEXT.name]: "A2",
2022-02-17 09:13:05 +00:00
},
2022-12-12 11:24:14 +00:00
],
kind: M_POLL_KIND_DISCLOSED.name,
max_selections: 1,
question: {
body: "Q",
format: undefined,
formatted_body: undefined,
msgtype: "m.text",
[M_TEXT.name]: "Q",
2022-02-17 09:13:05 +00:00
},
},
2022-12-12 11:24:14 +00:00
});
2022-02-17 09:13:05 +00:00
});
it("sends a poll edit event when editing", () => {
const previousEvent: MatrixEvent = new MatrixEvent(
2022-12-12 11:24:14 +00:00
PollStartEvent.from("Poll Q", ["Answer 1", "Answer 2"], M_POLL_KIND_DISCLOSED).serialize(),
2022-02-17 09:13:05 +00:00
);
previousEvent.event.event_id = "$prevEventId";
const dialog = render(
2022-12-12 11:24:14 +00:00
<PollCreateDialog room={createRoom()} onFinished={jest.fn()} editingMxEvent={previousEvent} />,
2022-02-17 09:13:05 +00:00
);
changeValue(dialog, "Question or topic", "Poll Q updated");
changeValue(dialog, "Option 2", "Answer 2 updated");
changeKind(dialog, M_POLL_KIND_UNDISCLOSED.name);
fireEvent.click(dialog.container.querySelector("button")!);
2022-02-17 09:13:05 +00:00
const [, , eventType, sentEventContent] = mockClient.sendEvent.mock.calls[0];
expect(M_POLL_START.matches(eventType)).toBeTruthy();
2022-12-12 11:24:14 +00:00
expect(sentEventContent).toEqual({
"m.new_content": {
[M_TEXT.name]: "Poll Q updated\n1. Answer 1\n2. Answer 2 updated",
[M_POLL_START.name]: {
answers: [
{
id: expect.any(String),
[M_TEXT.name]: "Answer 1",
},
{
id: expect.any(String),
[M_TEXT.name]: "Answer 2 updated",
2022-02-17 09:13:05 +00:00
},
2022-12-12 11:24:14 +00:00
],
kind: M_POLL_KIND_UNDISCLOSED.name,
max_selections: 1,
question: {
body: "Poll Q updated",
format: undefined,
formatted_body: undefined,
msgtype: "m.text",
[M_TEXT.name]: "Poll Q updated",
2022-02-17 09:13:05 +00:00
},
},
},
2022-12-12 11:24:14 +00:00
"m.relates_to": {
event_id: previousEvent.getId(),
rel_type: "m.replace",
},
});
2022-02-17 09:13:05 +00:00
});
it("retains poll disclosure type when editing", () => {
const previousEvent: MatrixEvent = new MatrixEvent(
PollStartEvent.from("Poll Q", ["Answer 1", "Answer 2"], M_POLL_KIND_DISCLOSED).serialize(),
);
previousEvent.event.event_id = "$prevEventId";
const dialog = render(
<PollCreateDialog room={createRoom()} onFinished={jest.fn()} editingMxEvent={previousEvent} />,
);
changeValue(dialog, "Question or topic", "Poll Q updated");
fireEvent.click(dialog.container.querySelector("button")!);
const [, , eventType, sentEventContent] = mockClient.sendEvent.mock.calls[0];
expect(M_POLL_START.matches(eventType)).toBeTruthy();
// didnt change
2024-03-25 12:48:48 +00:00
expect((sentEventContent as ReplacementEvent<any>)["m.new_content"][M_POLL_START.name].kind).toEqual(
M_POLL_KIND_DISCLOSED.name,
);
});
});
function createRoom(): Room {
return new Room("roomid", MatrixClientPeg.safeGet(), "@name:example.com", {});
}
function changeValue(wrapper: RenderResult, labelText: string, value: string) {
fireEvent.change(wrapper.container.querySelector(`input[label="${labelText}"]`)!, {
target: { value: value },
});
}
function changeKind(wrapper: RenderResult, value: string) {
fireEvent.change(wrapper.container.querySelector("select")!, { target: { value: value } });
}
function expectSubmitToBeDisabled(wrapper: RenderResult, disabled: boolean) {
if (disabled) {
expect(wrapper.container.querySelector('button[type="submit"]')).toHaveAttribute("aria-disabled", "true");
} else {
expect(wrapper.container.querySelector('button[type="submit"]')).not.toHaveAttribute("aria-disabled", "true");
}
}