Allow editing polls (#7806)
This commit is contained in:
Andy Balaam
GitHub
parent
fa9af44523
commit
7387f3c80a
8 changed files with 310 additions and 38 deletions
|
|
@ -19,6 +19,8 @@ import '../../../skinned-sdk';
|
|||
import React from "react";
|
||||
import { mount, ReactWrapper } from "enzyme";
|
||||
import { Room } from "matrix-js-sdk/src/models/room";
|
||||
import { M_POLL_KIND_DISCLOSED, M_POLL_START, M_TEXT, PollStartEvent } from 'matrix-events-sdk';
|
||||
import { IContent, MatrixEvent } from 'matrix-js-sdk/src/models/event';
|
||||
|
||||
import * as TestUtils from "../../../test-utils";
|
||||
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
|
||||
|
|
@ -64,6 +66,27 @@ describe("PollCreateDialog", () => {
|
|||
expect(dialog.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("renders info from a previous event", () => {
|
||||
const previousEvent: MatrixEvent = new MatrixEvent(
|
||||
PollStartEvent.from(
|
||||
"Poll Q",
|
||||
["Answer 1", "Answer 2"],
|
||||
M_POLL_KIND_DISCLOSED,
|
||||
).serialize(),
|
||||
);
|
||||
|
||||
const dialog = mount(
|
||||
<PollCreateDialog
|
||||
room={createRoom()}
|
||||
onFinished={jest.fn()}
|
||||
editingMxEvent={previousEvent}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(submitIsDisabled(dialog)).toBe(false);
|
||||
expect(dialog.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("doesn't allow submitting until there are options", () => {
|
||||
const dialog = mount(
|
||||
<PollCreateDialog room={createRoom()} onFinished={jest.fn()} />,
|
||||
|
|
@ -102,6 +125,129 @@ describe("PollCreateDialog", () => {
|
|||
dialog.find("button").simulate("click");
|
||||
expect(dialog.find("Spinner").length).toBe(1);
|
||||
});
|
||||
|
||||
it("sends a poll create event when submitted", () => {
|
||||
TestUtils.stubClient();
|
||||
let sentEventContent: IContent = null;
|
||||
MatrixClientPeg.get().sendEvent = jest.fn(
|
||||
(
|
||||
_roomId: string,
|
||||
_threadId: string,
|
||||
eventType: string,
|
||||
content: IContent,
|
||||
) => {
|
||||
expect(M_POLL_START.matches(eventType)).toBeTruthy();
|
||||
sentEventContent = content;
|
||||
return Promise.resolve();
|
||||
},
|
||||
);
|
||||
|
||||
const dialog = mount(
|
||||
<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");
|
||||
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",
|
||||
},
|
||||
],
|
||||
"kind": M_POLL_KIND_DISCLOSED.name,
|
||||
"max_selections": 1,
|
||||
"question": {
|
||||
"body": "Q",
|
||||
"format": undefined,
|
||||
"formatted_body": undefined,
|
||||
"msgtype": "m.text",
|
||||
[M_TEXT.name]: "Q",
|
||||
},
|
||||
},
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
it("sends a poll edit event when editing", () => {
|
||||
TestUtils.stubClient();
|
||||
let sentEventContent: IContent = null;
|
||||
MatrixClientPeg.get().sendEvent = jest.fn(
|
||||
(
|
||||
_roomId: string,
|
||||
_threadId: string,
|
||||
eventType: string,
|
||||
content: IContent,
|
||||
) => {
|
||||
expect(M_POLL_START.matches(eventType)).toBeTruthy();
|
||||
sentEventContent = content;
|
||||
return Promise.resolve();
|
||||
},
|
||||
);
|
||||
|
||||
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 = mount(
|
||||
<PollCreateDialog
|
||||
room={createRoom()}
|
||||
onFinished={jest.fn()}
|
||||
editingMxEvent={previousEvent}
|
||||
/>,
|
||||
);
|
||||
|
||||
changeValue(dialog, "Question or topic", "Poll Q updated");
|
||||
changeValue(dialog, "Option 2", "Answer 2 updated");
|
||||
dialog.find("button").simulate("click");
|
||||
|
||||
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",
|
||||
},
|
||||
],
|
||||
"kind": M_POLL_KIND_DISCLOSED.name,
|
||||
"max_selections": 1,
|
||||
"question": {
|
||||
"body": "Poll Q updated",
|
||||
"format": undefined,
|
||||
"formatted_body": undefined,
|
||||
"msgtype": "m.text",
|
||||
[M_TEXT.name]: "Poll Q updated",
|
||||
},
|
||||
},
|
||||
},
|
||||
"m.relates_to": {
|
||||
"event_id": previousEvent.getId(),
|
||||
"rel_type": "m.replace",
|
||||
},
|
||||
},
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
function createRoom(): Room {
|
||||
|
|
|
|||
|
|
@ -3,3 +3,5 @@
|
|||
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-guard=\\"true\\" tabindex=\\"1\\" 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><div class=\\"mx_CompoundDialog_content\\"><div class=\\"mx_PollCreateDialog\\"><h2>What is your poll question or topic?</h2><div class=\\"mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint\\"><input maxlength=\\"340\\" label=\\"Question or topic\\" placeholder=\\"Write something...\\" type=\\"text\\" id=\\"mx_Field_1\\" value=\\"\\"><label for=\\"mx_Field_1\\">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 maxlength=\\"340\\" label=\\"Option 1\\" placeholder=\\"Write an option\\" type=\\"text\\" id=\\"mx_Field_2\\" value=\\"\\"><label for=\\"mx_Field_2\\">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 maxlength=\\"340\\" label=\\"Option 2\\" placeholder=\\"Write an option\\" type=\\"text\\" id=\\"mx_Field_3\\" value=\\"\\"><label for=\\"mx_Field_3\\">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\\" 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 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-guard=\\"true\\" tabindex=\\"1\\" 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><div class=\\"mx_CompoundDialog_content\\"><div class=\\"mx_PollCreateDialog\\"><h2>What is your poll question or topic?</h2><div class=\\"mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint\\"><input maxlength=\\"340\\" label=\\"Question or topic\\" placeholder=\\"Write something...\\" type=\\"text\\" id=\\"mx_Field_4\\" value=\\"How many turnips is the optimal number?\\"><label for=\\"mx_Field_4\\">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 maxlength=\\"340\\" label=\\"Option 1\\" placeholder=\\"Write an option\\" type=\\"text\\" id=\\"mx_Field_5\\" value=\\"As many as my neighbour\\"><label for=\\"mx_Field_5\\">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 maxlength=\\"340\\" label=\\"Option 2\\" placeholder=\\"Write an option\\" type=\\"text\\" id=\\"mx_Field_6\\" value=\\"The question is meaningless\\"><label for=\\"mx_Field_6\\">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 maxlength=\\"340\\" label=\\"Option 3\\" placeholder=\\"Write an option\\" type=\\"text\\" id=\\"mx_Field_7\\" value=\\"Mu\\"><label for=\\"mx_Field_7\\">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 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-guard=\\"true\\" tabindex=\\"1\\" 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><div class=\\"mx_CompoundDialog_content\\"><div class=\\"mx_PollCreateDialog\\"><h2>What is your poll question or topic?</h2><div class=\\"mx_Field mx_Field_input mx_Field_labelAlwaysTopLeft mx_Field_placeholderIsHint\\"><input maxlength=\\"340\\" label=\\"Question or topic\\" placeholder=\\"Write something...\\" type=\\"text\\" id=\\"mx_Field_8\\" value=\\"Poll Q\\"><label for=\\"mx_Field_8\\">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 maxlength=\\"340\\" label=\\"Option 1\\" placeholder=\\"Write an option\\" type=\\"text\\" id=\\"mx_Field_9\\" value=\\"Answer 1\\"><label for=\\"mx_Field_9\\">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 maxlength=\\"340\\" label=\\"Option 2\\" placeholder=\\"Write an option\\" type=\\"text\\" id=\\"mx_Field_10\\" value=\\"Answer 2\\"><label for=\\"mx_Field_10\\">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>"`;
|
||||
|
|
|
|||
|
|
@ -1110,8 +1110,8 @@ function newPollStart(
|
|||
question = "What should we order for the party?";
|
||||
}
|
||||
|
||||
const answersFallback = Array.from(answers.entries())
|
||||
.map(([i, a]) => `${i + 1}. ${a[M_TEXT.name]}`)
|
||||
const answersFallback = answers
|
||||
.map((a, i) => `${i + 1}. ${a[M_TEXT.name]}`)
|
||||
.join("\n");
|
||||
|
||||
const fallback = `${question}\n${answersFallback}`;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue