Update tests to prefer RTL over Enzyme (#10247
* Update tests to prefer RTL over Enzyme * Strict types
This commit is contained in:
Michael Telatyński
@@ -15,8 +15,7 @@ limitations under the License.
|
||||
*/
|
||||
|
||||
import React, { ComponentProps } from "react";
|
||||
// eslint-disable-next-line deprecate/import
|
||||
import { mount, ReactWrapper } from "enzyme";
|
||||
import { render, RenderResult } from "@testing-library/react";
|
||||
import { MatrixEvent, RoomMember } from "matrix-js-sdk/src/matrix";
|
||||
|
||||
import {
|
||||
@@ -124,8 +123,8 @@ describe("EventListSummary", function () {
|
||||
events: [],
|
||||
children: [],
|
||||
};
|
||||
const renderComponent = (props = {}): ReactWrapper => {
|
||||
return mount(
|
||||
const renderComponent = (props = {}): RenderResult => {
|
||||
return render(
|
||||
<MatrixClientContext.Provider value={mockClient}>
|
||||
<EventListSummary {...defaultProps} {...props} />
|
||||
</MatrixClientContext.Provider>,
|
||||
@@ -150,13 +149,11 @@ describe("EventListSummary", function () {
|
||||
threshold: 3,
|
||||
};
|
||||
|
||||
const wrapper = renderComponent(props); // matrix cli context wrapper
|
||||
const { container } = renderComponent(props); // matrix cli context wrapper
|
||||
|
||||
expect(wrapper.find("GenericEventListSummary").props().children).toEqual([
|
||||
<div className="event_tile" key="event0">
|
||||
Expanded membership
|
||||
</div>,
|
||||
]);
|
||||
const children = container.querySelector(".mx_GenericEventListSummary_unstyledList")!.children;
|
||||
expect(children).toHaveLength(1);
|
||||
expect(children[0]).toHaveTextContent("Expanded membership");
|
||||
});
|
||||
|
||||
it("renders expanded events if there are less than props.threshold", function () {
|
||||
@@ -172,16 +169,12 @@ describe("EventListSummary", function () {
|
||||
threshold: 3,
|
||||
};
|
||||
|
||||
const wrapper = renderComponent(props); // matrix cli context wrapper
|
||||
const { container } = renderComponent(props); // matrix cli context wrapper
|
||||
|
||||
expect(wrapper.find("GenericEventListSummary").props().children).toEqual([
|
||||
<div className="event_tile" key="event0">
|
||||
Expanded membership
|
||||
</div>,
|
||||
<div className="event_tile" key="event1">
|
||||
Expanded membership
|
||||
</div>,
|
||||
]);
|
||||
const children = container.querySelector(".mx_GenericEventListSummary_unstyledList")!.children;
|
||||
expect(children).toHaveLength(2);
|
||||
expect(children[0]).toHaveTextContent("Expanded membership");
|
||||
expect(children[1]).toHaveTextContent("Expanded membership");
|
||||
});
|
||||
|
||||
it("renders collapsed events if events.length = props.threshold", function () {
|
||||
@@ -198,11 +191,9 @@ describe("EventListSummary", function () {
|
||||
threshold: 3,
|
||||
};
|
||||
|
||||
const wrapper = renderComponent(props);
|
||||
const summary = wrapper.find(".mx_GenericEventListSummary_summary");
|
||||
const summaryText = summary.text();
|
||||
|
||||
expect(summaryText).toBe("user_1 joined and left and joined");
|
||||
const { container } = renderComponent(props);
|
||||
const summary = container.querySelector(".mx_GenericEventListSummary_summary");
|
||||
expect(summary).toHaveTextContent("user_1 joined and left and joined");
|
||||
});
|
||||
|
||||
it("truncates long join,leave repetitions", function () {
|
||||
@@ -230,11 +221,9 @@ describe("EventListSummary", function () {
|
||||
threshold: 3,
|
||||
};
|
||||
|
||||
const wrapper = renderComponent(props);
|
||||
const summary = wrapper.find(".mx_GenericEventListSummary_summary");
|
||||
const summaryText = summary.text();
|
||||
|
||||
expect(summaryText).toBe("user_1 joined and left 7 times");
|
||||
const { container } = renderComponent(props);
|
||||
const summary = container.querySelector(".mx_GenericEventListSummary_summary");
|
||||
expect(summary).toHaveTextContent("user_1 joined and left 7 times");
|
||||
});
|
||||
|
||||
it("truncates long join,leave repetitions between other events", function () {
|
||||
@@ -274,11 +263,9 @@ describe("EventListSummary", function () {
|
||||
threshold: 3,
|
||||
};
|
||||
|
||||
const wrapper = renderComponent(props);
|
||||
const summary = wrapper.find(".mx_GenericEventListSummary_summary");
|
||||
const summaryText = summary.text();
|
||||
|
||||
expect(summaryText).toBe("user_1 was unbanned, joined and left 7 times and was invited");
|
||||
const { container } = renderComponent(props);
|
||||
const summary = container.querySelector(".mx_GenericEventListSummary_summary");
|
||||
expect(summary).toHaveTextContent("user_1 was unbanned, joined and left 7 times and was invited");
|
||||
});
|
||||
|
||||
it("truncates multiple sequences of repetitions with other events between", function () {
|
||||
@@ -320,11 +307,9 @@ describe("EventListSummary", function () {
|
||||
threshold: 3,
|
||||
};
|
||||
|
||||
const wrapper = renderComponent(props);
|
||||
const summary = wrapper.find(".mx_GenericEventListSummary_summary");
|
||||
const summaryText = summary.text();
|
||||
|
||||
expect(summaryText).toBe(
|
||||
const { container } = renderComponent(props);
|
||||
const summary = container.querySelector(".mx_GenericEventListSummary_summary");
|
||||
expect(summary).toHaveTextContent(
|
||||
"user_1 was unbanned, joined and left 2 times, was banned, " + "joined and left 3 times and was invited",
|
||||
);
|
||||
});
|
||||
@@ -374,11 +359,11 @@ describe("EventListSummary", function () {
|
||||
threshold: 3,
|
||||
};
|
||||
|
||||
const wrapper = renderComponent(props);
|
||||
const summary = wrapper.find(".mx_GenericEventListSummary_summary");
|
||||
const summaryText = summary.text();
|
||||
|
||||
expect(summaryText).toBe("user_1 and one other were unbanned, joined and left 2 times and were banned");
|
||||
const { container } = renderComponent(props);
|
||||
const summary = container.querySelector(".mx_GenericEventListSummary_summary");
|
||||
expect(summary).toHaveTextContent(
|
||||
"user_1 and one other were unbanned, joined and left 2 times and were banned",
|
||||
);
|
||||
});
|
||||
|
||||
it("handles many users following the same sequence of memberships", function () {
|
||||
@@ -406,11 +391,11 @@ describe("EventListSummary", function () {
|
||||
threshold: 3,
|
||||
};
|
||||
|
||||
const wrapper = renderComponent(props);
|
||||
const summary = wrapper.find(".mx_GenericEventListSummary_summary");
|
||||
const summaryText = summary.text();
|
||||
|
||||
expect(summaryText).toBe("user_0 and 19 others were unbanned, joined and left 2 times and were banned");
|
||||
const { container } = renderComponent(props);
|
||||
const summary = container.querySelector(".mx_GenericEventListSummary_summary");
|
||||
expect(summary).toHaveTextContent(
|
||||
"user_0 and 19 others were unbanned, joined and left 2 times and were banned",
|
||||
);
|
||||
});
|
||||
|
||||
it("correctly orders sequences of transitions by the order of their first event", function () {
|
||||
@@ -450,11 +435,9 @@ describe("EventListSummary", function () {
|
||||
threshold: 3,
|
||||
};
|
||||
|
||||
const wrapper = renderComponent(props);
|
||||
const summary = wrapper.find(".mx_GenericEventListSummary_summary");
|
||||
const summaryText = summary.text();
|
||||
|
||||
expect(summaryText).toBe(
|
||||
const { container } = renderComponent(props);
|
||||
const summary = container.querySelector(".mx_GenericEventListSummary_summary");
|
||||
expect(summary).toHaveTextContent(
|
||||
"user_2 was unbanned and joined and left 2 times, user_1 was unbanned, " +
|
||||
"joined and left 2 times and was banned",
|
||||
);
|
||||
@@ -520,11 +503,9 @@ describe("EventListSummary", function () {
|
||||
threshold: 3,
|
||||
};
|
||||
|
||||
const wrapper = renderComponent(props);
|
||||
const summary = wrapper.find(".mx_GenericEventListSummary_summary");
|
||||
const summaryText = summary.text();
|
||||
|
||||
expect(summaryText).toBe(
|
||||
const { container } = renderComponent(props);
|
||||
const summary = container.querySelector(".mx_GenericEventListSummary_summary");
|
||||
expect(summary).toHaveTextContent(
|
||||
"user_1 was invited, was banned, joined, rejected their invitation, left, " +
|
||||
"had their invitation withdrawn, was unbanned, was removed, left and was removed",
|
||||
);
|
||||
@@ -563,11 +544,11 @@ describe("EventListSummary", function () {
|
||||
threshold: 3,
|
||||
};
|
||||
|
||||
const wrapper = renderComponent(props);
|
||||
const summary = wrapper.find(".mx_GenericEventListSummary_summary");
|
||||
const summaryText = summary.text();
|
||||
|
||||
expect(summaryText).toBe("user_1 and one other rejected their invitations and had their invitations withdrawn");
|
||||
const { container } = renderComponent(props);
|
||||
const summary = container.querySelector(".mx_GenericEventListSummary_summary");
|
||||
expect(summary).toHaveTextContent(
|
||||
"user_1 and one other rejected their invitations and had their invitations withdrawn",
|
||||
);
|
||||
});
|
||||
|
||||
it("handles invitation plurals correctly when there are multiple invites", function () {
|
||||
@@ -591,11 +572,9 @@ describe("EventListSummary", function () {
|
||||
threshold: 1, // threshold = 1 to force collapse
|
||||
};
|
||||
|
||||
const wrapper = renderComponent(props);
|
||||
const summary = wrapper.find(".mx_GenericEventListSummary_summary");
|
||||
const summaryText = summary.text();
|
||||
|
||||
expect(summaryText).toBe("user_1 rejected their invitation 2 times");
|
||||
const { container } = renderComponent(props);
|
||||
const summary = container.querySelector(".mx_GenericEventListSummary_summary");
|
||||
expect(summary).toHaveTextContent("user_1 rejected their invitation 2 times");
|
||||
});
|
||||
|
||||
it('handles a summary length = 2, with no "others"', function () {
|
||||
@@ -613,11 +592,9 @@ describe("EventListSummary", function () {
|
||||
threshold: 3,
|
||||
};
|
||||
|
||||
const wrapper = renderComponent(props);
|
||||
const summary = wrapper.find(".mx_GenericEventListSummary_summary");
|
||||
const summaryText = summary.text();
|
||||
|
||||
expect(summaryText).toBe("user_1 and user_2 joined 2 times");
|
||||
const { container } = renderComponent(props);
|
||||
const summary = container.querySelector(".mx_GenericEventListSummary_summary");
|
||||
expect(summary).toHaveTextContent("user_1 and user_2 joined 2 times");
|
||||
});
|
||||
|
||||
it('handles a summary length = 2, with 1 "other"', function () {
|
||||
@@ -634,11 +611,9 @@ describe("EventListSummary", function () {
|
||||
threshold: 3,
|
||||
};
|
||||
|
||||
const wrapper = renderComponent(props);
|
||||
const summary = wrapper.find(".mx_GenericEventListSummary_summary");
|
||||
const summaryText = summary.text();
|
||||
|
||||
expect(summaryText).toBe("user_1, user_2 and one other joined");
|
||||
const { container } = renderComponent(props);
|
||||
const summary = container.querySelector(".mx_GenericEventListSummary_summary");
|
||||
expect(summary).toHaveTextContent("user_1, user_2 and one other joined");
|
||||
});
|
||||
|
||||
it('handles a summary length = 2, with many "others"', function () {
|
||||
@@ -651,11 +626,9 @@ describe("EventListSummary", function () {
|
||||
threshold: 3,
|
||||
};
|
||||
|
||||
const wrapper = renderComponent(props);
|
||||
const summary = wrapper.find(".mx_GenericEventListSummary_summary");
|
||||
const summaryText = summary.text();
|
||||
|
||||
expect(summaryText).toBe("user_0, user_1 and 18 others joined");
|
||||
const { container } = renderComponent(props);
|
||||
const summary = container.querySelector(".mx_GenericEventListSummary_summary");
|
||||
expect(summary).toHaveTextContent("user_0, user_1 and 18 others joined");
|
||||
});
|
||||
|
||||
it("should not blindly group 3pid invites and treat them as distinct users instead", () => {
|
||||
@@ -703,10 +676,8 @@ describe("EventListSummary", function () {
|
||||
threshold: 3,
|
||||
};
|
||||
|
||||
const wrapper = renderComponent(props);
|
||||
const summary = wrapper.find(".mx_GenericEventListSummary_summary");
|
||||
const summaryText = summary.text();
|
||||
|
||||
expect(summaryText).toBe("n...@d... was invited 2 times, d...@w... was invited");
|
||||
const { container } = renderComponent(props);
|
||||
const summary = container.querySelector(".mx_GenericEventListSummary_summary");
|
||||
expect(summary).toHaveTextContent("n...@d... was invited 2 times, d...@w... was invited");
|
||||
});
|
||||
});
|
||||
|
||||
@@ -15,15 +15,14 @@ limitations under the License.
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
// eslint-disable-next-line deprecate/import
|
||||
import { mount, ReactWrapper } from "enzyme";
|
||||
import { fireEvent, render, RenderResult } from "@testing-library/react";
|
||||
import { Room } from "matrix-js-sdk/src/models/room";
|
||||
import { M_POLL_KIND_DISCLOSED, M_POLL_KIND_UNDISCLOSED, M_POLL_START } from "matrix-js-sdk/src/@types/polls";
|
||||
import { PollStartEvent } from "matrix-js-sdk/src/extensible_events_v1/PollStartEvent";
|
||||
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
|
||||
import { M_TEXT } from "matrix-js-sdk/src/@types/extensible_events";
|
||||
|
||||
import { findById, getMockClientWithEventEmitter } from "../../../test-utils";
|
||||
import { getMockClientWithEventEmitter } from "../../../test-utils";
|
||||
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
|
||||
import PollCreateDialog from "../../../../src/components/views/elements/PollCreateDialog";
|
||||
import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
|
||||
@@ -51,40 +50,41 @@ describe("PollCreateDialog", () => {
|
||||
});
|
||||
|
||||
it("renders a blank poll", () => {
|
||||
const dialog = mount(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />, {
|
||||
wrappingComponent: MatrixClientContext.Provider,
|
||||
wrappingComponentProps: { value: mockClient },
|
||||
});
|
||||
expect(dialog.html()).toMatchSnapshot();
|
||||
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 = mount(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
|
||||
expect(findById(dialog, "poll-topic-input").at(0).props().autoFocus).toEqual(true);
|
||||
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 = mount(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
|
||||
expect(findById(dialog, "poll-topic-input").at(0).props().autoFocus).toEqual(true);
|
||||
const dialog = render(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
|
||||
expect(dialog.container.querySelector("#poll-topic-input")).toHaveFocus();
|
||||
|
||||
dialog.find("div.mx_PollCreateDialog_addOption").simulate("click");
|
||||
fireEvent.click(dialog.container.querySelector("div.mx_PollCreateDialog_addOption")!);
|
||||
|
||||
expect(findById(dialog, "poll-topic-input").at(0).props().autoFocus).toEqual(false);
|
||||
expect(findById(dialog, "pollcreate_option_1").at(0).props().autoFocus).toEqual(false);
|
||||
expect(findById(dialog, "pollcreate_option_2").at(0).props().autoFocus).toEqual(true);
|
||||
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 = mount(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
|
||||
expect(submitIsDisabled(dialog)).toBe(true);
|
||||
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", "How many turnips is the optimal number?");
|
||||
changeValue(dialog, "Option 1", "As many as my neighbour");
|
||||
changeValue(dialog, "Option 2", "The question is meaningless");
|
||||
dialog.find("div.mx_PollCreateDialog_addOption").simulate("click");
|
||||
fireEvent.click(dialog.container.querySelector("div.mx_PollCreateDialog_addOption")!);
|
||||
changeValue(dialog, "Option 3", "Mu");
|
||||
expect(dialog.html()).toMatchSnapshot();
|
||||
expect(dialog.asFragment()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("renders info from a previous event", () => {
|
||||
@@ -92,23 +92,23 @@ describe("PollCreateDialog", () => {
|
||||
PollStartEvent.from("Poll Q", ["Answer 1", "Answer 2"], M_POLL_KIND_DISCLOSED).serialize(),
|
||||
);
|
||||
|
||||
const dialog = mount(
|
||||
const dialog = render(
|
||||
<PollCreateDialog room={createRoom()} onFinished={jest.fn()} editingMxEvent={previousEvent} />,
|
||||
);
|
||||
|
||||
expect(submitIsDisabled(dialog)).toBe(false);
|
||||
expect(dialog.html()).toMatchSnapshot();
|
||||
expectSubmitToBeDisabled(dialog, false);
|
||||
expect(dialog.asFragment()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("doesn't allow submitting until there are options", () => {
|
||||
const dialog = mount(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
|
||||
expect(submitIsDisabled(dialog)).toBe(true);
|
||||
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 = mount(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
|
||||
expect(submitIsDisabled(dialog)).toBe(true);
|
||||
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");
|
||||
@@ -116,28 +116,30 @@ describe("PollCreateDialog", () => {
|
||||
changeValue(dialog, "Option 2", "A2");
|
||||
|
||||
// Then I am able to submit
|
||||
expect(submitIsDisabled(dialog)).toBe(false);
|
||||
expectSubmitToBeDisabled(dialog, false);
|
||||
});
|
||||
|
||||
it("shows the open poll description at first", () => {
|
||||
const dialog = mount(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
|
||||
expect(dialog.find("select").prop("value")).toEqual(M_POLL_KIND_DISCLOSED.name);
|
||||
expect(dialog.find("p").text()).toEqual("Voters see results as soon as they have voted");
|
||||
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 = mount(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
|
||||
const dialog = render(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
|
||||
changeKind(dialog, M_POLL_KIND_UNDISCLOSED.name);
|
||||
expect(dialog.find("select").prop("value")).toEqual(M_POLL_KIND_UNDISCLOSED.name);
|
||||
expect(dialog.find("p").text()).toEqual("Results are only revealed when you end the poll");
|
||||
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 = mount(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
|
||||
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.find("select").prop("value")).toEqual(M_POLL_KIND_DISCLOSED.name);
|
||||
expect(dialog.find("p").text()).toEqual("Voters see results as soon as they have voted");
|
||||
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", () => {
|
||||
@@ -146,32 +148,34 @@ describe("PollCreateDialog", () => {
|
||||
);
|
||||
previousEvent.event.event_id = "$prevEventId";
|
||||
|
||||
const dialog = mount(
|
||||
const dialog = render(
|
||||
<PollCreateDialog room={createRoom()} onFinished={jest.fn()} editingMxEvent={previousEvent} />,
|
||||
);
|
||||
|
||||
expect(dialog.find("select").prop("value")).toEqual(M_POLL_KIND_UNDISCLOSED.name);
|
||||
expect(dialog.find("p").text()).toEqual("Results are only revealed when you end the poll");
|
||||
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 = mount(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
|
||||
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.find("Spinner").length).toBe(0);
|
||||
expect(dialog.container.querySelector(".mx_Spinner")).toBeFalsy();
|
||||
|
||||
dialog.find("button").simulate("click");
|
||||
expect(dialog.find("Spinner").length).toBe(1);
|
||||
fireEvent.click(dialog.container.querySelector("button")!);
|
||||
expect(dialog.container.querySelector(".mx_Spinner")).toBeDefined();
|
||||
});
|
||||
|
||||
it("sends a poll create event when submitted", () => {
|
||||
const dialog = mount(<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />);
|
||||
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");
|
||||
|
||||
dialog.find("button").simulate("click");
|
||||
fireEvent.click(dialog.container.querySelector("button")!);
|
||||
const [, , eventType, sentEventContent] = mockClient.sendEvent.mock.calls[0];
|
||||
expect(M_POLL_START.matches(eventType)).toBeTruthy();
|
||||
expect(sentEventContent).toEqual({
|
||||
@@ -206,14 +210,14 @@ describe("PollCreateDialog", () => {
|
||||
);
|
||||
previousEvent.event.event_id = "$prevEventId";
|
||||
|
||||
const dialog = mount(
|
||||
const dialog = render(
|
||||
<PollCreateDialog room={createRoom()} onFinished={jest.fn()} editingMxEvent={previousEvent} />,
|
||||
);
|
||||
|
||||
changeValue(dialog, "Question or topic", "Poll Q updated");
|
||||
changeValue(dialog, "Option 2", "Answer 2 updated");
|
||||
changeKind(dialog, M_POLL_KIND_UNDISCLOSED.name);
|
||||
dialog.find("button").simulate("click");
|
||||
fireEvent.click(dialog.container.querySelector("button")!);
|
||||
|
||||
const [, , eventType, sentEventContent] = mockClient.sendEvent.mock.calls[0];
|
||||
expect(M_POLL_START.matches(eventType)).toBeTruthy();
|
||||
@@ -255,12 +259,12 @@ describe("PollCreateDialog", () => {
|
||||
);
|
||||
previousEvent.event.event_id = "$prevEventId";
|
||||
|
||||
const dialog = mount(
|
||||
const dialog = render(
|
||||
<PollCreateDialog room={createRoom()} onFinished={jest.fn()} editingMxEvent={previousEvent} />,
|
||||
);
|
||||
|
||||
changeValue(dialog, "Question or topic", "Poll Q updated");
|
||||
dialog.find("button").simulate("click");
|
||||
fireEvent.click(dialog.container.querySelector("button")!);
|
||||
|
||||
const [, , eventType, sentEventContent] = mockClient.sendEvent.mock.calls[0];
|
||||
expect(M_POLL_START.matches(eventType)).toBeTruthy();
|
||||
@@ -273,14 +277,20 @@ function createRoom(): Room {
|
||||
return new Room("roomid", MatrixClientPeg.get(), "@name:example.com", {});
|
||||
}
|
||||
|
||||
function changeValue(wrapper: ReactWrapper, labelText: string, value: string) {
|
||||
wrapper.find(`input[label="${labelText}"]`).simulate("change", { target: { value: value } });
|
||||
function changeValue(wrapper: RenderResult, labelText: string, value: string) {
|
||||
fireEvent.change(wrapper.container.querySelector(`input[label="${labelText}"]`)!, {
|
||||
target: { value: value },
|
||||
});
|
||||
}
|
||||
|
||||
function changeKind(wrapper: ReactWrapper, value: string) {
|
||||
wrapper.find("select").simulate("change", { target: { value: value } });
|
||||
function changeKind(wrapper: RenderResult, value: string) {
|
||||
fireEvent.change(wrapper.container.querySelector("select")!, { target: { value: value } });
|
||||
}
|
||||
|
||||
function submitIsDisabled(wrapper: ReactWrapper) {
|
||||
return wrapper.find('button[type="submit"]').prop("aria-disabled") === true;
|
||||
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");
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,560 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`PollCreateDialog renders a blank poll 1`] = `"<div data-focus-guard="true" tabindex="0" style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"></div><div data-focus-lock-disabled="false" role="dialog" aria-labelledby="mx_CompoundDialog_title" aria-describedby="mx_CompoundDialog_content" class="mx_CompoundDialog mx_ScrollableBaseDialog"><div class="mx_CompoundDialog_header"><h1>Create poll</h1><div aria-label="Close dialog" role="button" tabindex="0" class="mx_AccessibleButton mx_CompoundDialog_cancelButton"></div></div><form class="mx_CompoundDialog_form"><div class="mx_CompoundDialog_content"><div class="mx_PollCreateDialog"><h2>Poll type</h2><div class="mx_Field mx_Field_select"><select type="text" id="mx_Field_1"><option value="org.matrix.msc3381.poll.disclosed">Open poll</option><option value="org.matrix.msc3381.poll.undisclosed">Closed poll</option></select><label for="mx_Field_1"></label></div><p>Voters see results as soon as they have voted</p><h2>What is your poll question or topic?</h2><div class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"><input id="poll-topic-input" maxlength="340" label="Question or topic" placeholder="Write something…" type="text" value=""><label for="poll-topic-input">Question or topic</label></div><h2>Create options</h2><div class="mx_PollCreateDialog_option"><div class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"><input id="pollcreate_option_0" maxlength="340" label="Option 1" placeholder="Write an option" type="text" value=""><label for="pollcreate_option_0">Option 1</label></div><div role="button" tabindex="0" class="mx_AccessibleButton mx_PollCreateDialog_removeOption"></div></div><div class="mx_PollCreateDialog_option"><div class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"><input id="pollcreate_option_1" maxlength="340" label="Option 2" placeholder="Write an option" type="text" value=""><label for="pollcreate_option_1">Option 2</label></div><div role="button" tabindex="0" class="mx_AccessibleButton mx_PollCreateDialog_removeOption"></div></div><div role="button" tabindex="0" class="mx_AccessibleButton mx_PollCreateDialog_addOption mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary">Add option</div></div></div><div class="mx_CompoundDialog_footer"><div role="button" tabindex="0" class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline">Cancel</div><button type="submit" role="button" tabindex="0" aria-disabled="true" disabled="" class="mx_AccessibleButton mx_Dialog_nonDialogButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary mx_AccessibleButton_disabled">Create Poll</button></div></form></div><div data-focus-guard="true" tabindex="0" style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"></div>"`;
|
||||
exports[`PollCreateDialog renders a blank poll 1`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
data-focus-guard="true"
|
||||
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
aria-describedby="mx_CompoundDialog_content"
|
||||
aria-labelledby="mx_CompoundDialog_title"
|
||||
class="mx_CompoundDialog mx_ScrollableBaseDialog"
|
||||
data-focus-lock-disabled="false"
|
||||
role="dialog"
|
||||
>
|
||||
<div
|
||||
class="mx_CompoundDialog_header"
|
||||
>
|
||||
<h1>
|
||||
Create poll
|
||||
</h1>
|
||||
<div
|
||||
aria-label="Close dialog"
|
||||
class="mx_AccessibleButton mx_CompoundDialog_cancelButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<form
|
||||
class="mx_CompoundDialog_form"
|
||||
>
|
||||
<div
|
||||
class="mx_CompoundDialog_content"
|
||||
>
|
||||
<div
|
||||
class="mx_PollCreateDialog"
|
||||
>
|
||||
<h2>
|
||||
Poll type
|
||||
</h2>
|
||||
<div
|
||||
class="mx_Field mx_Field_select"
|
||||
>
|
||||
<select
|
||||
id="mx_Field_1"
|
||||
type="text"
|
||||
>
|
||||
<option
|
||||
value="org.matrix.msc3381.poll.disclosed"
|
||||
>
|
||||
Open poll
|
||||
</option>
|
||||
<option
|
||||
value="org.matrix.msc3381.poll.undisclosed"
|
||||
>
|
||||
Closed poll
|
||||
</option>
|
||||
</select>
|
||||
<label
|
||||
for="mx_Field_1"
|
||||
/>
|
||||
</div>
|
||||
<p>
|
||||
Voters see results as soon as they have voted
|
||||
</p>
|
||||
<h2>
|
||||
What is your poll question or topic?
|
||||
</h2>
|
||||
<div
|
||||
class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"
|
||||
>
|
||||
<input
|
||||
id="poll-topic-input"
|
||||
label="Question or topic"
|
||||
maxlength="340"
|
||||
placeholder="Write something…"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<label
|
||||
for="poll-topic-input"
|
||||
>
|
||||
Question or topic
|
||||
</label>
|
||||
</div>
|
||||
<h2>
|
||||
Create options
|
||||
</h2>
|
||||
<div
|
||||
class="mx_PollCreateDialog_option"
|
||||
>
|
||||
<div
|
||||
class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"
|
||||
>
|
||||
<input
|
||||
id="pollcreate_option_0"
|
||||
label="Option 1"
|
||||
maxlength="340"
|
||||
placeholder="Write an option"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<label
|
||||
for="pollcreate_option_0"
|
||||
>
|
||||
Option 1
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_PollCreateDialog_removeOption"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mx_PollCreateDialog_option"
|
||||
>
|
||||
<div
|
||||
class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"
|
||||
>
|
||||
<input
|
||||
id="pollcreate_option_1"
|
||||
label="Option 2"
|
||||
maxlength="340"
|
||||
placeholder="Write an option"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<label
|
||||
for="pollcreate_option_1"
|
||||
>
|
||||
Option 2
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_PollCreateDialog_removeOption"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_PollCreateDialog_addOption mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Add option
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_CompoundDialog_footer"
|
||||
>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Cancel
|
||||
</div>
|
||||
<button
|
||||
aria-disabled="true"
|
||||
class="mx_AccessibleButton mx_Dialog_nonDialogButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary mx_AccessibleButton_disabled"
|
||||
disabled=""
|
||||
role="button"
|
||||
tabindex="0"
|
||||
type="submit"
|
||||
>
|
||||
Create Poll
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div
|
||||
data-focus-guard="true"
|
||||
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
|
||||
tabindex="0"
|
||||
/>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`PollCreateDialog renders a question and some options 1`] = `"<div data-focus-guard="true" tabindex="0" style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"></div><div data-focus-lock-disabled="false" role="dialog" aria-labelledby="mx_CompoundDialog_title" aria-describedby="mx_CompoundDialog_content" class="mx_CompoundDialog mx_ScrollableBaseDialog"><div class="mx_CompoundDialog_header"><h1>Create poll</h1><div aria-label="Close dialog" role="button" tabindex="0" class="mx_AccessibleButton mx_CompoundDialog_cancelButton"></div></div><form class="mx_CompoundDialog_form"><div class="mx_CompoundDialog_content"><div class="mx_PollCreateDialog"><h2>Poll type</h2><div class="mx_Field mx_Field_select"><select type="text" id="mx_Field_4"><option value="org.matrix.msc3381.poll.disclosed">Open poll</option><option value="org.matrix.msc3381.poll.undisclosed">Closed poll</option></select><label for="mx_Field_4"></label></div><p>Voters see results as soon as they have voted</p><h2>What is your poll question or topic?</h2><div class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"><input id="poll-topic-input" maxlength="340" label="Question or topic" placeholder="Write something…" type="text" value="How many turnips is the optimal number?"><label for="poll-topic-input">Question or topic</label></div><h2>Create options</h2><div class="mx_PollCreateDialog_option"><div class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"><input id="pollcreate_option_0" maxlength="340" label="Option 1" placeholder="Write an option" type="text" value="As many as my neighbour"><label for="pollcreate_option_0">Option 1</label></div><div role="button" tabindex="0" class="mx_AccessibleButton mx_PollCreateDialog_removeOption"></div></div><div class="mx_PollCreateDialog_option"><div class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"><input id="pollcreate_option_1" maxlength="340" label="Option 2" placeholder="Write an option" type="text" value="The question is meaningless"><label for="pollcreate_option_1">Option 2</label></div><div role="button" tabindex="0" class="mx_AccessibleButton mx_PollCreateDialog_removeOption"></div></div><div class="mx_PollCreateDialog_option"><div class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"><input id="pollcreate_option_2" maxlength="340" label="Option 3" placeholder="Write an option" type="text" value="Mu"><label for="pollcreate_option_2">Option 3</label></div><div role="button" tabindex="0" class="mx_AccessibleButton mx_PollCreateDialog_removeOption"></div></div><div role="button" tabindex="0" class="mx_AccessibleButton mx_PollCreateDialog_addOption mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary">Add option</div></div></div><div class="mx_CompoundDialog_footer"><div role="button" tabindex="0" class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline">Cancel</div><button type="submit" role="button" tabindex="0" class="mx_AccessibleButton mx_Dialog_nonDialogButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary">Create Poll</button></div></form></div><div data-focus-guard="true" tabindex="0" style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"></div>"`;
|
||||
exports[`PollCreateDialog renders a question and some options 1`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
data-focus-guard="true"
|
||||
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
aria-describedby="mx_CompoundDialog_content"
|
||||
aria-labelledby="mx_CompoundDialog_title"
|
||||
class="mx_CompoundDialog mx_ScrollableBaseDialog"
|
||||
data-focus-lock-disabled="false"
|
||||
role="dialog"
|
||||
>
|
||||
<div
|
||||
class="mx_CompoundDialog_header"
|
||||
>
|
||||
<h1>
|
||||
Create poll
|
||||
</h1>
|
||||
<div
|
||||
aria-label="Close dialog"
|
||||
class="mx_AccessibleButton mx_CompoundDialog_cancelButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<form
|
||||
class="mx_CompoundDialog_form"
|
||||
>
|
||||
<div
|
||||
class="mx_CompoundDialog_content"
|
||||
>
|
||||
<div
|
||||
class="mx_PollCreateDialog"
|
||||
>
|
||||
<h2>
|
||||
Poll type
|
||||
</h2>
|
||||
<div
|
||||
class="mx_Field mx_Field_select"
|
||||
>
|
||||
<select
|
||||
id="mx_Field_4"
|
||||
type="text"
|
||||
>
|
||||
<option
|
||||
value="org.matrix.msc3381.poll.disclosed"
|
||||
>
|
||||
Open poll
|
||||
</option>
|
||||
<option
|
||||
value="org.matrix.msc3381.poll.undisclosed"
|
||||
>
|
||||
Closed poll
|
||||
</option>
|
||||
</select>
|
||||
<label
|
||||
for="mx_Field_4"
|
||||
/>
|
||||
</div>
|
||||
<p>
|
||||
Voters see results as soon as they have voted
|
||||
</p>
|
||||
<h2>
|
||||
What is your poll question or topic?
|
||||
</h2>
|
||||
<div
|
||||
class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"
|
||||
>
|
||||
<input
|
||||
id="poll-topic-input"
|
||||
label="Question or topic"
|
||||
maxlength="340"
|
||||
placeholder="Write something…"
|
||||
type="text"
|
||||
value="How many turnips is the optimal number?"
|
||||
/>
|
||||
<label
|
||||
for="poll-topic-input"
|
||||
>
|
||||
Question or topic
|
||||
</label>
|
||||
</div>
|
||||
<h2>
|
||||
Create options
|
||||
</h2>
|
||||
<div
|
||||
class="mx_PollCreateDialog_option"
|
||||
>
|
||||
<div
|
||||
class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"
|
||||
>
|
||||
<input
|
||||
id="pollcreate_option_0"
|
||||
label="Option 1"
|
||||
maxlength="340"
|
||||
placeholder="Write an option"
|
||||
type="text"
|
||||
value="As many as my neighbour"
|
||||
/>
|
||||
<label
|
||||
for="pollcreate_option_0"
|
||||
>
|
||||
Option 1
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_PollCreateDialog_removeOption"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mx_PollCreateDialog_option"
|
||||
>
|
||||
<div
|
||||
class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"
|
||||
>
|
||||
<input
|
||||
id="pollcreate_option_1"
|
||||
label="Option 2"
|
||||
maxlength="340"
|
||||
placeholder="Write an option"
|
||||
type="text"
|
||||
value="The question is meaningless"
|
||||
/>
|
||||
<label
|
||||
for="pollcreate_option_1"
|
||||
>
|
||||
Option 2
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_PollCreateDialog_removeOption"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mx_PollCreateDialog_option"
|
||||
>
|
||||
<div
|
||||
class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"
|
||||
>
|
||||
<input
|
||||
id="pollcreate_option_2"
|
||||
label="Option 3"
|
||||
maxlength="340"
|
||||
placeholder="Write an option"
|
||||
type="text"
|
||||
value="Mu"
|
||||
/>
|
||||
<label
|
||||
for="pollcreate_option_2"
|
||||
>
|
||||
Option 3
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_PollCreateDialog_removeOption"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_PollCreateDialog_addOption mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Add option
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_CompoundDialog_footer"
|
||||
>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Cancel
|
||||
</div>
|
||||
<button
|
||||
class="mx_AccessibleButton mx_Dialog_nonDialogButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
type="submit"
|
||||
>
|
||||
Create Poll
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div
|
||||
data-focus-guard="true"
|
||||
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
|
||||
tabindex="0"
|
||||
/>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`PollCreateDialog renders info from a previous event 1`] = `"<div data-focus-guard="true" tabindex="0" style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"></div><div data-focus-lock-disabled="false" role="dialog" aria-labelledby="mx_CompoundDialog_title" aria-describedby="mx_CompoundDialog_content" class="mx_CompoundDialog mx_ScrollableBaseDialog"><div class="mx_CompoundDialog_header"><h1>Edit poll</h1><div aria-label="Close dialog" role="button" tabindex="0" class="mx_AccessibleButton mx_CompoundDialog_cancelButton"></div></div><form class="mx_CompoundDialog_form"><div class="mx_CompoundDialog_content"><div class="mx_PollCreateDialog"><h2>Poll type</h2><div class="mx_Field mx_Field_select"><select type="text" id="mx_Field_5"><option value="org.matrix.msc3381.poll.disclosed">Open poll</option><option value="org.matrix.msc3381.poll.undisclosed">Closed poll</option></select><label for="mx_Field_5"></label></div><p>Voters see results as soon as they have voted</p><h2>What is your poll question or topic?</h2><div class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"><input id="poll-topic-input" maxlength="340" label="Question or topic" placeholder="Write something…" type="text" value="Poll Q"><label for="poll-topic-input">Question or topic</label></div><h2>Create options</h2><div class="mx_PollCreateDialog_option"><div class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"><input id="pollcreate_option_0" maxlength="340" label="Option 1" placeholder="Write an option" type="text" value="Answer 1"><label for="pollcreate_option_0">Option 1</label></div><div role="button" tabindex="0" class="mx_AccessibleButton mx_PollCreateDialog_removeOption"></div></div><div class="mx_PollCreateDialog_option"><div class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"><input id="pollcreate_option_1" maxlength="340" label="Option 2" placeholder="Write an option" type="text" value="Answer 2"><label for="pollcreate_option_1">Option 2</label></div><div role="button" tabindex="0" class="mx_AccessibleButton mx_PollCreateDialog_removeOption"></div></div><div role="button" tabindex="0" class="mx_AccessibleButton mx_PollCreateDialog_addOption mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary">Add option</div></div></div><div class="mx_CompoundDialog_footer"><div role="button" tabindex="0" class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline">Cancel</div><button type="submit" role="button" tabindex="0" class="mx_AccessibleButton mx_Dialog_nonDialogButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary">Done</button></div></form></div><div data-focus-guard="true" tabindex="0" style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"></div>"`;
|
||||
exports[`PollCreateDialog renders info from a previous event 1`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
data-focus-guard="true"
|
||||
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
aria-describedby="mx_CompoundDialog_content"
|
||||
aria-labelledby="mx_CompoundDialog_title"
|
||||
class="mx_CompoundDialog mx_ScrollableBaseDialog"
|
||||
data-focus-lock-disabled="false"
|
||||
role="dialog"
|
||||
>
|
||||
<div
|
||||
class="mx_CompoundDialog_header"
|
||||
>
|
||||
<h1>
|
||||
Edit poll
|
||||
</h1>
|
||||
<div
|
||||
aria-label="Close dialog"
|
||||
class="mx_AccessibleButton mx_CompoundDialog_cancelButton"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<form
|
||||
class="mx_CompoundDialog_form"
|
||||
>
|
||||
<div
|
||||
class="mx_CompoundDialog_content"
|
||||
>
|
||||
<div
|
||||
class="mx_PollCreateDialog"
|
||||
>
|
||||
<h2>
|
||||
Poll type
|
||||
</h2>
|
||||
<div
|
||||
class="mx_Field mx_Field_select"
|
||||
>
|
||||
<select
|
||||
id="mx_Field_5"
|
||||
type="text"
|
||||
>
|
||||
<option
|
||||
value="org.matrix.msc3381.poll.disclosed"
|
||||
>
|
||||
Open poll
|
||||
</option>
|
||||
<option
|
||||
value="org.matrix.msc3381.poll.undisclosed"
|
||||
>
|
||||
Closed poll
|
||||
</option>
|
||||
</select>
|
||||
<label
|
||||
for="mx_Field_5"
|
||||
/>
|
||||
</div>
|
||||
<p>
|
||||
Voters see results as soon as they have voted
|
||||
</p>
|
||||
<h2>
|
||||
What is your poll question or topic?
|
||||
</h2>
|
||||
<div
|
||||
class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"
|
||||
>
|
||||
<input
|
||||
id="poll-topic-input"
|
||||
label="Question or topic"
|
||||
maxlength="340"
|
||||
placeholder="Write something…"
|
||||
type="text"
|
||||
value="Poll Q"
|
||||
/>
|
||||
<label
|
||||
for="poll-topic-input"
|
||||
>
|
||||
Question or topic
|
||||
</label>
|
||||
</div>
|
||||
<h2>
|
||||
Create options
|
||||
</h2>
|
||||
<div
|
||||
class="mx_PollCreateDialog_option"
|
||||
>
|
||||
<div
|
||||
class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"
|
||||
>
|
||||
<input
|
||||
id="pollcreate_option_0"
|
||||
label="Option 1"
|
||||
maxlength="340"
|
||||
placeholder="Write an option"
|
||||
type="text"
|
||||
value="Answer 1"
|
||||
/>
|
||||
<label
|
||||
for="pollcreate_option_0"
|
||||
>
|
||||
Option 1
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_PollCreateDialog_removeOption"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mx_PollCreateDialog_option"
|
||||
>
|
||||
<div
|
||||
class="mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint"
|
||||
>
|
||||
<input
|
||||
id="pollcreate_option_1"
|
||||
label="Option 2"
|
||||
maxlength="340"
|
||||
placeholder="Write an option"
|
||||
type="text"
|
||||
value="Answer 2"
|
||||
/>
|
||||
<label
|
||||
for="pollcreate_option_1"
|
||||
>
|
||||
Option 2
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_PollCreateDialog_removeOption"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_PollCreateDialog_addOption mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Add option
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_CompoundDialog_footer"
|
||||
>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Cancel
|
||||
</div>
|
||||
<button
|
||||
class="mx_AccessibleButton mx_Dialog_nonDialogButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
type="submit"
|
||||
>
|
||||
Done
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div
|
||||
data-focus-guard="true"
|
||||
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
|
||||
tabindex="0"
|
||||
/>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
Reference in New Issue
Block a user