2020-01-22 12:56:27 +01:00
|
|
|
/*
|
|
|
|
Copyright 2020 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.
|
|
|
|
*/
|
|
|
|
|
2020-10-07 01:10:40 +02:00
|
|
|
import React from "react";
|
2022-11-18 10:22:43 +01:00
|
|
|
import { fireEvent, render, waitFor } from "@testing-library/react";
|
2023-03-23 12:47:40 +01:00
|
|
|
import { IContent, MatrixClient, MsgType } from "matrix-js-sdk/src/matrix";
|
2022-07-13 07:56:36 +02:00
|
|
|
import { mocked } from "jest-mock";
|
2023-05-09 12:56:12 +02:00
|
|
|
import userEvent from "@testing-library/user-event";
|
2021-07-01 23:55:27 +02:00
|
|
|
|
2020-11-17 23:36:58 +01:00
|
|
|
import SendMessageComposer, {
|
2023-03-23 12:47:40 +01:00
|
|
|
attachMentions,
|
2020-11-17 23:36:58 +01:00
|
|
|
createMessageContent,
|
|
|
|
isQuickReaction,
|
|
|
|
} from "../../../../src/components/views/rooms/SendMessageComposer";
|
2020-10-07 01:10:40 +02:00
|
|
|
import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
|
2021-10-01 15:35:54 +02:00
|
|
|
import RoomContext, { TimelineRenderingType } from "../../../../src/contexts/RoomContext";
|
2020-01-22 12:56:27 +01:00
|
|
|
import EditorModel from "../../../../src/editor/model";
|
2023-03-09 13:15:48 +01:00
|
|
|
import { createPartCreator } from "../../../editor/mock";
|
2023-05-09 12:56:12 +02:00
|
|
|
import { createTestClient, mkEvent, mkStubRoom, stubClient } from "../../../test-utils";
|
2021-06-29 14:11:58 +02:00
|
|
|
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
|
2020-10-07 01:10:40 +02:00
|
|
|
import defaultDispatcher from "../../../../src/dispatcher/dispatcher";
|
2022-12-12 12:24:14 +01:00
|
|
|
import DocumentOffset from "../../../../src/editor/offset";
|
|
|
|
import { Layout } from "../../../../src/settings/enums/Layout";
|
2022-03-18 11:07:33 +01:00
|
|
|
import { IRoomState } from "../../../../src/components/structures/RoomView";
|
|
|
|
import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalinks";
|
2022-03-23 11:27:28 +01:00
|
|
|
import { mockPlatformPeg } from "../../../test-utils/platform";
|
2022-07-13 07:56:36 +02:00
|
|
|
import { doMaybeLocalRoomAction } from "../../../../src/utils/local-room";
|
2022-09-16 11:10:33 +02:00
|
|
|
import { addTextToComposer } from "../../../test-utils/composer";
|
2022-07-13 07:56:36 +02:00
|
|
|
|
|
|
|
jest.mock("../../../../src/utils/local-room", () => ({
|
|
|
|
doMaybeLocalRoomAction: jest.fn(),
|
|
|
|
}));
|
2022-03-18 11:07:33 +01:00
|
|
|
|
2022-12-12 12:24:14 +01:00
|
|
|
describe("<SendMessageComposer/>", () => {
|
2022-06-10 20:41:05 +02:00
|
|
|
const defaultRoomContext: IRoomState = {
|
2021-10-01 15:35:54 +02:00
|
|
|
roomLoading: true,
|
|
|
|
peekLoading: false,
|
|
|
|
shouldPeek: true,
|
|
|
|
membersLoaded: false,
|
|
|
|
numUnreadMessages: 0,
|
|
|
|
canPeek: false,
|
|
|
|
showApps: false,
|
|
|
|
isPeeking: false,
|
|
|
|
showRightPanel: true,
|
2023-06-15 13:57:58 +02:00
|
|
|
threadRightPanel: false,
|
2021-10-01 15:35:54 +02:00
|
|
|
joining: false,
|
|
|
|
atEndOfLiveTimeline: true,
|
|
|
|
showTopUnreadMessagesBar: false,
|
|
|
|
statusBarVisible: false,
|
|
|
|
canReact: false,
|
2022-03-04 16:53:22 +01:00
|
|
|
canSendMessages: false,
|
2021-10-01 15:35:54 +02:00
|
|
|
layout: Layout.Group,
|
|
|
|
lowBandwidth: false,
|
|
|
|
alwaysShowTimestamps: false,
|
|
|
|
showTwelveHourTimestamps: false,
|
|
|
|
readMarkerInViewThresholdMs: 3000,
|
|
|
|
readMarkerOutOfViewThresholdMs: 30000,
|
2022-04-15 01:23:22 +02:00
|
|
|
showHiddenEvents: false,
|
2021-10-01 15:35:54 +02:00
|
|
|
showReadReceipts: true,
|
|
|
|
showRedactions: true,
|
|
|
|
showJoinLeaves: true,
|
|
|
|
showAvatarChanges: true,
|
|
|
|
showDisplaynameChanges: true,
|
|
|
|
matrixClientIsReady: false,
|
|
|
|
timelineRenderingType: TimelineRenderingType.Room,
|
|
|
|
liveTimeline: undefined,
|
2022-06-10 20:41:05 +02:00
|
|
|
canSelfRedact: false,
|
|
|
|
resizing: false,
|
|
|
|
narrow: false,
|
2022-10-07 04:27:28 +02:00
|
|
|
activeCall: null,
|
2023-02-10 08:40:38 +01:00
|
|
|
msc3946ProcessDynamicPredecessor: false,
|
2023-08-07 08:27:09 +02:00
|
|
|
canAskToJoin: false,
|
|
|
|
promptAskToJoin: false,
|
2021-10-01 15:35:54 +02:00
|
|
|
};
|
2020-01-22 12:56:27 +01:00
|
|
|
describe("createMessageContent", () => {
|
2021-10-01 15:35:54 +02:00
|
|
|
const permalinkCreator = jest.fn() as any;
|
2020-01-22 12:56:27 +01:00
|
|
|
|
|
|
|
it("sends plaintext messages correctly", () => {
|
2023-03-09 13:15:48 +01:00
|
|
|
const model = new EditorModel([], createPartCreator());
|
2021-10-01 15:35:54 +02:00
|
|
|
const documentOffset = new DocumentOffset(11, true);
|
|
|
|
model.update("hello world", "insertText", documentOffset);
|
2020-01-22 12:56:27 +01:00
|
|
|
|
2023-03-23 12:47:40 +01:00
|
|
|
const content = createMessageContent("@alice:test", model, undefined, undefined, permalinkCreator);
|
2020-01-22 12:56:27 +01:00
|
|
|
|
|
|
|
expect(content).toEqual({
|
2023-09-14 13:36:15 +02:00
|
|
|
"body": "hello world",
|
|
|
|
"msgtype": "m.text",
|
|
|
|
"m.mentions": {},
|
2020-01-22 12:56:27 +01:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it("sends markdown messages correctly", () => {
|
2023-03-09 13:15:48 +01:00
|
|
|
const model = new EditorModel([], createPartCreator());
|
2021-10-01 15:35:54 +02:00
|
|
|
const documentOffset = new DocumentOffset(13, true);
|
|
|
|
model.update("hello *world*", "insertText", documentOffset);
|
2020-01-22 12:56:27 +01:00
|
|
|
|
2023-03-23 12:47:40 +01:00
|
|
|
const content = createMessageContent("@alice:test", model, undefined, undefined, permalinkCreator);
|
2020-01-22 12:56:27 +01:00
|
|
|
|
|
|
|
expect(content).toEqual({
|
2023-09-14 13:36:15 +02:00
|
|
|
"body": "hello *world*",
|
|
|
|
"msgtype": "m.text",
|
|
|
|
"format": "org.matrix.custom.html",
|
|
|
|
"formatted_body": "hello <em>world</em>",
|
|
|
|
"m.mentions": {},
|
2020-01-22 12:56:27 +01:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it("strips /me from messages and marks them as m.emote accordingly", () => {
|
2023-03-09 13:15:48 +01:00
|
|
|
const model = new EditorModel([], createPartCreator());
|
2021-10-01 15:35:54 +02:00
|
|
|
const documentOffset = new DocumentOffset(22, true);
|
|
|
|
model.update("/me blinks __quickly__", "insertText", documentOffset);
|
2020-01-22 12:56:27 +01:00
|
|
|
|
2023-03-23 12:47:40 +01:00
|
|
|
const content = createMessageContent("@alice:test", model, undefined, undefined, permalinkCreator);
|
2020-01-22 12:56:27 +01:00
|
|
|
|
|
|
|
expect(content).toEqual({
|
2023-09-14 13:36:15 +02:00
|
|
|
"body": "blinks __quickly__",
|
|
|
|
"msgtype": "m.emote",
|
|
|
|
"format": "org.matrix.custom.html",
|
|
|
|
"formatted_body": "blinks <strong>quickly</strong>",
|
|
|
|
"m.mentions": {},
|
2020-01-22 12:56:27 +01:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2022-03-21 20:09:43 +01:00
|
|
|
it("allows emoting with non-text parts", () => {
|
2023-03-09 13:15:48 +01:00
|
|
|
const model = new EditorModel([], createPartCreator());
|
2022-03-21 20:09:43 +01:00
|
|
|
const documentOffset = new DocumentOffset(16, true);
|
|
|
|
model.update("/me ✨sparkles✨", "insertText", documentOffset);
|
|
|
|
expect(model.parts.length).toEqual(4); // Emoji count as non-text
|
|
|
|
|
2023-03-23 12:47:40 +01:00
|
|
|
const content = createMessageContent("@alice:test", model, undefined, undefined, permalinkCreator);
|
2022-03-21 20:09:43 +01:00
|
|
|
|
|
|
|
expect(content).toEqual({
|
2023-09-14 13:36:15 +02:00
|
|
|
"body": "✨sparkles✨",
|
|
|
|
"msgtype": "m.emote",
|
|
|
|
"m.mentions": {},
|
2022-03-21 20:09:43 +01:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2020-01-22 12:56:27 +01:00
|
|
|
it("allows sending double-slash escaped slash commands correctly", () => {
|
2023-03-09 13:15:48 +01:00
|
|
|
const model = new EditorModel([], createPartCreator());
|
2021-10-01 15:35:54 +02:00
|
|
|
const documentOffset = new DocumentOffset(32, true);
|
|
|
|
|
|
|
|
model.update("//dev/null is my favourite place", "insertText", documentOffset);
|
2020-01-22 12:56:27 +01:00
|
|
|
|
2023-03-23 12:47:40 +01:00
|
|
|
const content = createMessageContent("@alice:test", model, undefined, undefined, permalinkCreator);
|
2020-01-22 12:56:27 +01:00
|
|
|
|
|
|
|
expect(content).toEqual({
|
2023-09-14 13:36:15 +02:00
|
|
|
"body": "/dev/null is my favourite place",
|
|
|
|
"msgtype": "m.text",
|
|
|
|
"m.mentions": {},
|
2020-01-22 12:56:27 +01:00
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
2020-10-07 01:10:40 +02:00
|
|
|
|
2023-03-23 12:47:40 +01:00
|
|
|
describe("attachMentions", () => {
|
|
|
|
const partsCreator = createPartCreator();
|
|
|
|
|
|
|
|
it("no mentions", () => {
|
|
|
|
const model = new EditorModel([], partsCreator);
|
|
|
|
const content: IContent = {};
|
|
|
|
attachMentions("@alice:test", content, model, undefined);
|
|
|
|
expect(content).toEqual({
|
2023-07-12 00:29:54 +02:00
|
|
|
"m.mentions": {},
|
2023-03-23 12:47:40 +01:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it("test user mentions", () => {
|
|
|
|
const model = new EditorModel([partsCreator.userPill("Bob", "@bob:test")], partsCreator);
|
|
|
|
const content: IContent = {};
|
|
|
|
attachMentions("@alice:test", content, model, undefined);
|
|
|
|
expect(content).toEqual({
|
2023-07-12 00:29:54 +02:00
|
|
|
"m.mentions": { user_ids: ["@bob:test"] },
|
2023-03-23 12:47:40 +01:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it("test reply", () => {
|
|
|
|
// Replying to an event adds the sender to the list of mentioned users.
|
|
|
|
const model = new EditorModel([], partsCreator);
|
|
|
|
let replyToEvent = mkEvent({
|
|
|
|
type: "m.room.message",
|
|
|
|
user: "@bob:test",
|
|
|
|
room: "!abc:test",
|
2023-07-12 00:29:54 +02:00
|
|
|
content: { "m.mentions": {} },
|
2023-03-23 12:47:40 +01:00
|
|
|
event: true,
|
|
|
|
});
|
|
|
|
let content: IContent = {};
|
|
|
|
attachMentions("@alice:test", content, model, replyToEvent);
|
|
|
|
expect(content).toEqual({
|
2023-07-12 00:29:54 +02:00
|
|
|
"m.mentions": { user_ids: ["@bob:test"] },
|
2023-03-23 12:47:40 +01:00
|
|
|
});
|
|
|
|
|
|
|
|
// It also adds any other mentioned users, but removes yourself.
|
|
|
|
replyToEvent = mkEvent({
|
|
|
|
type: "m.room.message",
|
|
|
|
user: "@bob:test",
|
|
|
|
room: "!abc:test",
|
2023-07-12 00:29:54 +02:00
|
|
|
content: { "m.mentions": { user_ids: ["@alice:test", "@charlie:test"] } },
|
2023-03-23 12:47:40 +01:00
|
|
|
event: true,
|
|
|
|
});
|
|
|
|
content = {};
|
|
|
|
attachMentions("@alice:test", content, model, replyToEvent);
|
|
|
|
expect(content).toEqual({
|
2023-07-12 00:29:54 +02:00
|
|
|
"m.mentions": { user_ids: ["@bob:test", "@charlie:test"] },
|
2023-03-23 12:47:40 +01:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it("test room mention", () => {
|
|
|
|
const model = new EditorModel([partsCreator.atRoomPill("@room")], partsCreator);
|
|
|
|
const content: IContent = {};
|
|
|
|
attachMentions("@alice:test", content, model, undefined);
|
|
|
|
expect(content).toEqual({
|
2023-07-12 00:29:54 +02:00
|
|
|
"m.mentions": { room: true },
|
2023-03-23 12:47:40 +01:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it("test reply to room mention", () => {
|
|
|
|
// Replying to a room mention shouldn't automatically be a room mention.
|
|
|
|
const model = new EditorModel([], partsCreator);
|
|
|
|
const replyToEvent = mkEvent({
|
|
|
|
type: "m.room.message",
|
|
|
|
user: "@alice:test",
|
|
|
|
room: "!abc:test",
|
2023-07-12 00:29:54 +02:00
|
|
|
content: { "m.mentions": { room: true } },
|
2023-03-23 12:47:40 +01:00
|
|
|
event: true,
|
|
|
|
});
|
|
|
|
const content: IContent = {};
|
|
|
|
attachMentions("@alice:test", content, model, replyToEvent);
|
|
|
|
expect(content).toEqual({
|
2023-07-12 00:29:54 +02:00
|
|
|
"m.mentions": {},
|
2023-03-23 12:47:40 +01:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it("test broken mentions", () => {
|
|
|
|
// Replying to a room mention shouldn't automatically be a room mention.
|
|
|
|
const model = new EditorModel([], partsCreator);
|
|
|
|
const replyToEvent = mkEvent({
|
|
|
|
type: "m.room.message",
|
|
|
|
user: "@alice:test",
|
|
|
|
room: "!abc:test",
|
|
|
|
// @ts-ignore - Purposefully testing invalid data.
|
2023-07-12 00:29:54 +02:00
|
|
|
content: { "m.mentions": { user_ids: "@bob:test" } },
|
2023-03-23 12:47:40 +01:00
|
|
|
event: true,
|
|
|
|
});
|
|
|
|
const content: IContent = {};
|
|
|
|
attachMentions("@alice:test", content, model, replyToEvent);
|
|
|
|
expect(content).toEqual({
|
2023-07-12 00:29:54 +02:00
|
|
|
"m.mentions": {},
|
2023-03-23 12:47:40 +01:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe("attachMentions with edit", () => {
|
|
|
|
it("no mentions", () => {
|
|
|
|
const model = new EditorModel([], partsCreator);
|
|
|
|
const content: IContent = { "m.new_content": {} };
|
|
|
|
const prevContent: IContent = {};
|
|
|
|
attachMentions("@alice:test", content, model, undefined, prevContent);
|
|
|
|
expect(content).toEqual({
|
2023-07-12 00:29:54 +02:00
|
|
|
"m.mentions": {},
|
|
|
|
"m.new_content": { "m.mentions": {} },
|
2023-03-23 12:47:40 +01:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it("mentions do not propagate", () => {
|
|
|
|
const model = new EditorModel([], partsCreator);
|
|
|
|
const content: IContent = { "m.new_content": {} };
|
|
|
|
const prevContent: IContent = {
|
2023-07-12 00:29:54 +02:00
|
|
|
"m.mentions": { user_ids: ["@bob:test"], room: true },
|
2023-03-23 12:47:40 +01:00
|
|
|
};
|
|
|
|
attachMentions("@alice:test", content, model, undefined, prevContent);
|
|
|
|
expect(content).toEqual({
|
2023-07-12 00:29:54 +02:00
|
|
|
"m.mentions": {},
|
|
|
|
"m.new_content": { "m.mentions": {} },
|
2023-03-23 12:47:40 +01:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it("test user mentions", () => {
|
|
|
|
const model = new EditorModel([partsCreator.userPill("Bob", "@bob:test")], partsCreator);
|
|
|
|
const content: IContent = { "m.new_content": {} };
|
|
|
|
const prevContent: IContent = {};
|
|
|
|
attachMentions("@alice:test", content, model, undefined, prevContent);
|
|
|
|
expect(content).toEqual({
|
2023-07-12 00:29:54 +02:00
|
|
|
"m.mentions": { user_ids: ["@bob:test"] },
|
|
|
|
"m.new_content": { "m.mentions": { user_ids: ["@bob:test"] } },
|
2023-03-23 12:47:40 +01:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it("test prev user mentions", () => {
|
|
|
|
const model = new EditorModel([partsCreator.userPill("Bob", "@bob:test")], partsCreator);
|
|
|
|
const content: IContent = { "m.new_content": {} };
|
2023-07-12 00:29:54 +02:00
|
|
|
const prevContent: IContent = { "m.mentions": { user_ids: ["@bob:test"] } };
|
2023-03-23 12:47:40 +01:00
|
|
|
attachMentions("@alice:test", content, model, undefined, prevContent);
|
|
|
|
expect(content).toEqual({
|
2023-07-12 00:29:54 +02:00
|
|
|
"m.mentions": {},
|
|
|
|
"m.new_content": { "m.mentions": { user_ids: ["@bob:test"] } },
|
2023-03-23 12:47:40 +01:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it("test room mention", () => {
|
|
|
|
const model = new EditorModel([partsCreator.atRoomPill("@room")], partsCreator);
|
|
|
|
const content: IContent = { "m.new_content": {} };
|
|
|
|
const prevContent: IContent = {};
|
|
|
|
attachMentions("@alice:test", content, model, undefined, prevContent);
|
|
|
|
expect(content).toEqual({
|
2023-07-12 00:29:54 +02:00
|
|
|
"m.mentions": { room: true },
|
|
|
|
"m.new_content": { "m.mentions": { room: true } },
|
2023-03-23 12:47:40 +01:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it("test prev room mention", () => {
|
|
|
|
const model = new EditorModel([partsCreator.atRoomPill("@room")], partsCreator);
|
|
|
|
const content: IContent = { "m.new_content": {} };
|
2023-07-12 00:29:54 +02:00
|
|
|
const prevContent: IContent = { "m.mentions": { room: true } };
|
2023-03-23 12:47:40 +01:00
|
|
|
attachMentions("@alice:test", content, model, undefined, prevContent);
|
|
|
|
expect(content).toEqual({
|
2023-07-12 00:29:54 +02:00
|
|
|
"m.mentions": {},
|
|
|
|
"m.new_content": { "m.mentions": { room: true } },
|
2023-03-23 12:47:40 +01:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it("test broken mentions", () => {
|
|
|
|
// Replying to a room mention shouldn't automatically be a room mention.
|
|
|
|
const model = new EditorModel([], partsCreator);
|
|
|
|
const content: IContent = { "m.new_content": {} };
|
|
|
|
// @ts-ignore - Purposefully testing invalid data.
|
2023-07-12 00:29:54 +02:00
|
|
|
const prevContent: IContent = { "m.mentions": { user_ids: "@bob:test" } };
|
2023-03-23 12:47:40 +01:00
|
|
|
attachMentions("@alice:test", content, model, undefined, prevContent);
|
|
|
|
expect(content).toEqual({
|
2023-07-12 00:29:54 +02:00
|
|
|
"m.mentions": {},
|
|
|
|
"m.new_content": { "m.mentions": {} },
|
2023-03-23 12:47:40 +01:00
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2020-10-07 01:10:40 +02:00
|
|
|
describe("functions correctly mounted", () => {
|
2022-03-18 11:07:33 +01:00
|
|
|
const mockClient = createTestClient();
|
2022-12-12 12:24:14 +01:00
|
|
|
jest.spyOn(MatrixClientPeg, "get").mockReturnValue(mockClient);
|
|
|
|
const mockRoom = mkStubRoom("myfakeroom", "myfakeroom", mockClient) as any;
|
2020-10-07 01:10:40 +02:00
|
|
|
const mockEvent = mkEvent({
|
|
|
|
type: "m.room.message",
|
2022-12-12 12:24:14 +01:00
|
|
|
room: "myfakeroom",
|
|
|
|
user: "myfakeuser",
|
|
|
|
content: { msgtype: "m.text", body: "Replying to this" },
|
2020-10-07 01:10:40 +02:00
|
|
|
event: true,
|
|
|
|
});
|
2022-12-12 12:24:14 +01:00
|
|
|
mockRoom.findEventById = jest.fn((eventId) => {
|
2020-10-07 01:10:40 +02:00
|
|
|
return eventId === mockEvent.getId() ? mockEvent : null;
|
|
|
|
});
|
|
|
|
|
|
|
|
const spyDispatcher = jest.spyOn(defaultDispatcher, "dispatch");
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
localStorage.clear();
|
|
|
|
spyDispatcher.mockReset();
|
|
|
|
});
|
|
|
|
|
2022-03-18 11:07:33 +01:00
|
|
|
const defaultProps = {
|
|
|
|
room: mockRoom,
|
|
|
|
toggleStickerPickerOpen: jest.fn(),
|
|
|
|
permalinkCreator: new RoomPermalinkCreator(mockRoom),
|
|
|
|
};
|
2022-11-18 10:22:43 +01:00
|
|
|
const getRawComponent = (props = {}, roomContext = defaultRoomContext, client = mockClient) => (
|
|
|
|
<MatrixClientContext.Provider value={client}>
|
|
|
|
<RoomContext.Provider value={roomContext}>
|
|
|
|
<SendMessageComposer {...defaultProps} {...props} />
|
|
|
|
</RoomContext.Provider>
|
|
|
|
</MatrixClientContext.Provider>
|
|
|
|
);
|
2022-03-18 11:07:33 +01:00
|
|
|
const getComponent = (props = {}, roomContext = defaultRoomContext, client = mockClient) => {
|
2022-11-18 10:22:43 +01:00
|
|
|
return render(getRawComponent(props, roomContext, client));
|
2022-03-18 11:07:33 +01:00
|
|
|
};
|
|
|
|
|
2022-03-21 20:09:43 +01:00
|
|
|
it("renders text and placeholder correctly", () => {
|
2022-11-18 10:22:43 +01:00
|
|
|
const { container } = getComponent({ placeholder: "placeholder string" });
|
2020-10-07 01:10:40 +02:00
|
|
|
|
2022-11-18 10:22:43 +01:00
|
|
|
expect(container.querySelectorAll('[aria-label="placeholder string"]')).toHaveLength(1);
|
2020-10-07 01:10:40 +02:00
|
|
|
|
2022-11-18 10:22:43 +01:00
|
|
|
addTextToComposer(container, "Test Text");
|
2020-10-07 01:10:40 +02:00
|
|
|
|
2022-11-18 10:22:43 +01:00
|
|
|
expect(container.textContent).toBe("Test Text");
|
2020-10-07 01:10:40 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
it("correctly persists state to and from localStorage", () => {
|
2022-11-18 10:22:43 +01:00
|
|
|
const props = { replyToEvent: mockEvent };
|
|
|
|
const { container, unmount, rerender } = getComponent(props);
|
2020-10-07 01:10:40 +02:00
|
|
|
|
2022-11-18 10:22:43 +01:00
|
|
|
addTextToComposer(container, "Test Text");
|
2020-10-07 01:10:40 +02:00
|
|
|
|
2022-11-18 10:22:43 +01:00
|
|
|
const key = "mx_cider_state_myfakeroom";
|
2020-10-07 01:10:40 +02:00
|
|
|
|
2022-11-18 10:22:43 +01:00
|
|
|
expect(container.textContent).toBe("Test Text");
|
2020-10-07 01:10:40 +02:00
|
|
|
expect(localStorage.getItem(key)).toBeNull();
|
|
|
|
|
|
|
|
// ensure the right state was persisted to localStorage
|
2022-11-18 10:22:43 +01:00
|
|
|
unmount();
|
2023-02-15 14:36:22 +01:00
|
|
|
expect(JSON.parse(localStorage.getItem(key)!)).toStrictEqual({
|
2022-12-12 12:24:14 +01:00
|
|
|
parts: [{ type: "plain", text: "Test Text" }],
|
2020-10-07 01:10:40 +02:00
|
|
|
replyEventId: mockEvent.getId(),
|
|
|
|
});
|
|
|
|
|
|
|
|
// ensure the correct model is re-loaded
|
2022-11-18 10:22:43 +01:00
|
|
|
rerender(getRawComponent(props));
|
|
|
|
expect(container.textContent).toBe("Test Text");
|
2020-10-07 01:10:40 +02:00
|
|
|
expect(spyDispatcher).toHaveBeenCalledWith({
|
|
|
|
action: "reply_to_event",
|
|
|
|
event: mockEvent,
|
2021-10-19 17:05:34 +02:00
|
|
|
context: TimelineRenderingType.Room,
|
2020-10-07 01:10:40 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
// now try with localStorage wiped out
|
2022-11-18 10:22:43 +01:00
|
|
|
unmount();
|
2020-10-07 01:10:40 +02:00
|
|
|
localStorage.removeItem(key);
|
2022-11-18 10:22:43 +01:00
|
|
|
rerender(getRawComponent(props));
|
|
|
|
expect(container.textContent).toBe("");
|
2020-10-07 01:10:40 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
it("persists state correctly without replyToEvent onbeforeunload", () => {
|
2022-11-18 10:22:43 +01:00
|
|
|
const { container } = getComponent();
|
2020-10-07 01:10:40 +02:00
|
|
|
|
2022-11-18 10:22:43 +01:00
|
|
|
addTextToComposer(container, "Hello World");
|
2020-10-07 01:10:40 +02:00
|
|
|
|
2022-11-18 10:22:43 +01:00
|
|
|
const key = "mx_cider_state_myfakeroom";
|
2020-10-07 01:10:40 +02:00
|
|
|
|
2022-11-18 10:22:43 +01:00
|
|
|
expect(container.textContent).toBe("Hello World");
|
2020-10-07 01:10:40 +02:00
|
|
|
expect(localStorage.getItem(key)).toBeNull();
|
|
|
|
|
|
|
|
// ensure the right state was persisted to localStorage
|
2022-12-12 12:24:14 +01:00
|
|
|
window.dispatchEvent(new Event("beforeunload"));
|
2023-02-15 14:36:22 +01:00
|
|
|
expect(JSON.parse(localStorage.getItem(key)!)).toStrictEqual({
|
2022-12-12 12:24:14 +01:00
|
|
|
parts: [{ type: "plain", text: "Hello World" }],
|
2020-10-07 01:10:40 +02:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it("persists to session history upon sending", async () => {
|
2022-03-23 11:27:28 +01:00
|
|
|
mockPlatformPeg({ overrideBrowserShortcuts: jest.fn().mockReturnValue(false) });
|
2021-10-01 15:35:54 +02:00
|
|
|
|
2022-11-18 10:22:43 +01:00
|
|
|
const { container } = getComponent({ replyToEvent: mockEvent });
|
2020-10-07 01:10:40 +02:00
|
|
|
|
2022-11-18 10:22:43 +01:00
|
|
|
addTextToComposer(container, "This is a message");
|
2023-02-15 14:36:22 +01:00
|
|
|
fireEvent.keyDown(container.querySelector(".mx_SendMessageComposer")!, { key: "Enter" });
|
2022-11-18 10:22:43 +01:00
|
|
|
|
|
|
|
await waitFor(() => {
|
|
|
|
expect(spyDispatcher).toHaveBeenCalledWith({
|
|
|
|
action: "reply_to_event",
|
|
|
|
event: null,
|
|
|
|
context: TimelineRenderingType.Room,
|
|
|
|
});
|
2020-10-07 01:10:40 +02:00
|
|
|
});
|
|
|
|
|
2022-11-18 10:22:43 +01:00
|
|
|
expect(container.textContent).toBe("");
|
2023-02-15 14:36:22 +01:00
|
|
|
const str = sessionStorage.getItem(`mx_cider_history_${mockRoom.roomId}[0]`)!;
|
2020-10-07 01:10:40 +02:00
|
|
|
expect(JSON.parse(str)).toStrictEqual({
|
2022-12-12 12:24:14 +01:00
|
|
|
parts: [{ type: "plain", text: "This is a message" }],
|
2020-10-07 01:10:40 +02:00
|
|
|
replyEventId: mockEvent.getId(),
|
|
|
|
});
|
|
|
|
});
|
2021-10-01 15:35:54 +02:00
|
|
|
|
2022-07-13 07:56:36 +02:00
|
|
|
it("correctly sends a message", () => {
|
2022-12-12 12:24:14 +01:00
|
|
|
mocked(doMaybeLocalRoomAction).mockImplementation(
|
2023-02-24 16:28:40 +01:00
|
|
|
<T,>(roomId: string, fn: (actualRoomId: string) => Promise<T>, _client?: MatrixClient) => {
|
2022-12-12 12:24:14 +01:00
|
|
|
return fn(roomId);
|
|
|
|
},
|
|
|
|
);
|
2022-07-13 07:56:36 +02:00
|
|
|
|
|
|
|
mockPlatformPeg({ overrideBrowserShortcuts: jest.fn().mockReturnValue(false) });
|
2022-11-18 10:22:43 +01:00
|
|
|
const { container } = getComponent();
|
2022-07-13 07:56:36 +02:00
|
|
|
|
2022-11-18 10:22:43 +01:00
|
|
|
addTextToComposer(container, "test message");
|
2023-02-15 14:36:22 +01:00
|
|
|
fireEvent.keyDown(container.querySelector(".mx_SendMessageComposer")!, { key: "Enter" });
|
2022-07-13 07:56:36 +02:00
|
|
|
|
2022-12-12 12:24:14 +01:00
|
|
|
expect(mockClient.sendMessage).toHaveBeenCalledWith("myfakeroom", null, {
|
2023-09-14 13:36:15 +02:00
|
|
|
"body": "test message",
|
|
|
|
"msgtype": MsgType.Text,
|
|
|
|
"m.mentions": {},
|
2022-12-12 12:24:14 +01:00
|
|
|
});
|
2022-07-13 07:56:36 +02:00
|
|
|
});
|
2023-02-20 15:46:07 +01:00
|
|
|
|
|
|
|
it("shows chat effects on message sending", () => {
|
|
|
|
mocked(doMaybeLocalRoomAction).mockImplementation(
|
2023-02-24 16:28:40 +01:00
|
|
|
<T,>(roomId: string, fn: (actualRoomId: string) => Promise<T>, _client?: MatrixClient) => {
|
2023-02-20 15:46:07 +01:00
|
|
|
return fn(roomId);
|
|
|
|
},
|
|
|
|
);
|
|
|
|
|
|
|
|
mockPlatformPeg({ overrideBrowserShortcuts: jest.fn().mockReturnValue(false) });
|
|
|
|
const { container } = getComponent();
|
|
|
|
|
|
|
|
addTextToComposer(container, "🎉");
|
|
|
|
fireEvent.keyDown(container.querySelector(".mx_SendMessageComposer")!, { key: "Enter" });
|
|
|
|
|
|
|
|
expect(mockClient.sendMessage).toHaveBeenCalledWith("myfakeroom", null, {
|
2023-09-14 13:36:15 +02:00
|
|
|
"body": "test message",
|
|
|
|
"msgtype": MsgType.Text,
|
|
|
|
"m.mentions": {},
|
2023-02-20 15:46:07 +01:00
|
|
|
});
|
|
|
|
|
2023-08-03 14:56:30 +02:00
|
|
|
expect(defaultDispatcher.dispatch).toHaveBeenCalledWith({ action: `effects.confetti` });
|
2023-02-20 15:46:07 +01:00
|
|
|
});
|
|
|
|
|
|
|
|
it("not to send chat effects on message sending for threads", () => {
|
|
|
|
mocked(doMaybeLocalRoomAction).mockImplementation(
|
2023-02-24 16:28:40 +01:00
|
|
|
<T,>(roomId: string, fn: (actualRoomId: string) => Promise<T>, _client?: MatrixClient) => {
|
2023-02-20 15:46:07 +01:00
|
|
|
return fn(roomId);
|
|
|
|
},
|
|
|
|
);
|
|
|
|
|
|
|
|
mockPlatformPeg({ overrideBrowserShortcuts: jest.fn().mockReturnValue(false) });
|
|
|
|
const { container } = getComponent({
|
|
|
|
relation: {
|
|
|
|
rel_type: "m.thread",
|
|
|
|
event_id: "$yolo",
|
|
|
|
is_falling_back: true,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
addTextToComposer(container, "🎉");
|
|
|
|
fireEvent.keyDown(container.querySelector(".mx_SendMessageComposer")!, { key: "Enter" });
|
|
|
|
|
|
|
|
expect(mockClient.sendMessage).toHaveBeenCalledWith("myfakeroom", null, {
|
2023-09-14 13:36:15 +02:00
|
|
|
"body": "test message",
|
|
|
|
"msgtype": MsgType.Text,
|
|
|
|
"m.mentions": {},
|
2023-02-20 15:46:07 +01:00
|
|
|
});
|
|
|
|
|
2023-08-03 14:56:30 +02:00
|
|
|
expect(defaultDispatcher.dispatch).not.toHaveBeenCalledWith({ action: `effects.confetti` });
|
2023-02-20 15:46:07 +01:00
|
|
|
});
|
2020-10-07 01:10:40 +02:00
|
|
|
});
|
2020-11-17 23:36:58 +01:00
|
|
|
|
|
|
|
describe("isQuickReaction", () => {
|
|
|
|
it("correctly detects quick reaction", () => {
|
2023-03-09 13:15:48 +01:00
|
|
|
const model = new EditorModel([], createPartCreator());
|
2021-10-01 15:35:54 +02:00
|
|
|
model.update("+😊", "insertText", new DocumentOffset(3, true));
|
2020-11-17 23:36:58 +01:00
|
|
|
|
|
|
|
const isReaction = isQuickReaction(model);
|
|
|
|
|
|
|
|
expect(isReaction).toBeTruthy();
|
|
|
|
});
|
|
|
|
|
|
|
|
it("correctly detects quick reaction with space", () => {
|
2023-03-09 13:15:48 +01:00
|
|
|
const model = new EditorModel([], createPartCreator());
|
2021-10-01 15:35:54 +02:00
|
|
|
model.update("+ 😊", "insertText", new DocumentOffset(4, true));
|
2020-11-17 23:36:58 +01:00
|
|
|
|
|
|
|
const isReaction = isQuickReaction(model);
|
|
|
|
|
|
|
|
expect(isReaction).toBeTruthy();
|
|
|
|
});
|
|
|
|
|
|
|
|
it("correctly rejects quick reaction with extra text", () => {
|
2023-03-09 13:15:48 +01:00
|
|
|
const model = new EditorModel([], createPartCreator());
|
|
|
|
const model2 = new EditorModel([], createPartCreator());
|
|
|
|
const model3 = new EditorModel([], createPartCreator());
|
|
|
|
const model4 = new EditorModel([], createPartCreator());
|
2022-01-10 13:57:20 +01:00
|
|
|
model.update("+😊hello", "insertText", new DocumentOffset(8, true));
|
|
|
|
model2.update(" +😊", "insertText", new DocumentOffset(4, true));
|
|
|
|
model3.update("+ 😊😊", "insertText", new DocumentOffset(6, true));
|
|
|
|
model4.update("+smiley", "insertText", new DocumentOffset(7, true));
|
2020-11-17 23:36:58 +01:00
|
|
|
|
|
|
|
expect(isQuickReaction(model)).toBeFalsy();
|
|
|
|
expect(isQuickReaction(model2)).toBeFalsy();
|
|
|
|
expect(isQuickReaction(model3)).toBeFalsy();
|
|
|
|
expect(isQuickReaction(model4)).toBeFalsy();
|
|
|
|
});
|
|
|
|
});
|
2023-05-09 12:56:12 +02:00
|
|
|
|
|
|
|
it("should call prepareToEncrypt when the user is typing", async () => {
|
|
|
|
const cli = stubClient();
|
|
|
|
cli.isCryptoEnabled = jest.fn().mockReturnValue(true);
|
|
|
|
cli.isRoomEncrypted = jest.fn().mockReturnValue(true);
|
|
|
|
cli.prepareToEncrypt = jest.fn();
|
|
|
|
const room = mkStubRoom("!roomId:server", "Room", cli);
|
|
|
|
|
|
|
|
expect(cli.prepareToEncrypt).not.toHaveBeenCalled();
|
|
|
|
|
|
|
|
const { container } = render(
|
|
|
|
<MatrixClientContext.Provider value={cli}>
|
|
|
|
<SendMessageComposer room={room} toggleStickerPickerOpen={jest.fn()} />
|
|
|
|
</MatrixClientContext.Provider>,
|
|
|
|
);
|
|
|
|
|
|
|
|
const composer = container.querySelector<HTMLDivElement>(".mx_BasicMessageComposer_input")!;
|
|
|
|
|
|
|
|
// Does not trigger on keydown as that'll cause false negatives for global shortcuts
|
|
|
|
await userEvent.type(composer, "[ControlLeft>][KeyK][/ControlLeft]");
|
|
|
|
expect(cli.prepareToEncrypt).not.toHaveBeenCalled();
|
|
|
|
|
|
|
|
await userEvent.type(composer, "Hello");
|
|
|
|
expect(cli.prepareToEncrypt).toHaveBeenCalled();
|
|
|
|
});
|
2020-01-22 12:56:27 +01:00
|
|
|
});
|