mirror of
https://github.com/vector-im/element-web.git
synced 2024-11-18 06:35:35 +08:00
271 lines
11 KiB
JavaScript
271 lines
11 KiB
JavaScript
/*
|
|
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.
|
|
*/
|
|
|
|
import '../../../skinned-sdk'; // Must be first for skinning to work
|
|
import Adapter from "@wojtekmaj/enzyme-adapter-react-17";
|
|
import { configure, mount } from "enzyme";
|
|
import React from "react";
|
|
import { act } from "react-dom/test-utils";
|
|
import SendMessageComposer, {
|
|
createMessageContent,
|
|
isQuickReaction,
|
|
} from "../../../../src/components/views/rooms/SendMessageComposer";
|
|
import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
|
|
import EditorModel from "../../../../src/editor/model";
|
|
import { createPartCreator, createRenderer } from "../../../editor/mock";
|
|
import { createTestClient, mkEvent, mkStubRoom } from "../../../test-utils";
|
|
import BasicMessageComposer from "../../../../src/components/views/rooms/BasicMessageComposer";
|
|
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
|
|
import { sleep } from "../../../../src/utils/promise";
|
|
import SpecPermalinkConstructor from "../../../../src/utils/permalinks/SpecPermalinkConstructor";
|
|
import defaultDispatcher from "../../../../src/dispatcher/dispatcher";
|
|
|
|
jest.mock("../../../../src/stores/RoomViewStore");
|
|
|
|
configure({ adapter: new Adapter() });
|
|
|
|
describe('<SendMessageComposer/>', () => {
|
|
describe("createMessageContent", () => {
|
|
const permalinkCreator = jest.fn();
|
|
|
|
it("sends plaintext messages correctly", () => {
|
|
const model = new EditorModel([], createPartCreator(), createRenderer());
|
|
model.update("hello world", "insertText", { offset: 11, atNodeEnd: true });
|
|
|
|
const content = createMessageContent(model, permalinkCreator);
|
|
|
|
expect(content).toEqual({
|
|
body: "hello world",
|
|
msgtype: "m.text",
|
|
});
|
|
});
|
|
|
|
it("sends markdown messages correctly", () => {
|
|
const model = new EditorModel([], createPartCreator(), createRenderer());
|
|
model.update("hello *world*", "insertText", { offset: 13, atNodeEnd: true });
|
|
|
|
const content = createMessageContent(model, permalinkCreator);
|
|
|
|
expect(content).toEqual({
|
|
body: "hello *world*",
|
|
msgtype: "m.text",
|
|
format: "org.matrix.custom.html",
|
|
formatted_body: "hello <em>world</em>",
|
|
});
|
|
});
|
|
|
|
it("strips /me from messages and marks them as m.emote accordingly", () => {
|
|
const model = new EditorModel([], createPartCreator(), createRenderer());
|
|
model.update("/me blinks __quickly__", "insertText", { offset: 22, atNodeEnd: true });
|
|
|
|
const content = createMessageContent(model, permalinkCreator);
|
|
|
|
expect(content).toEqual({
|
|
body: "blinks __quickly__",
|
|
msgtype: "m.emote",
|
|
format: "org.matrix.custom.html",
|
|
formatted_body: "blinks <strong>quickly</strong>",
|
|
});
|
|
});
|
|
|
|
it("allows sending double-slash escaped slash commands correctly", () => {
|
|
const model = new EditorModel([], createPartCreator(), createRenderer());
|
|
model.update("//dev/null is my favourite place", "insertText", { offset: 32, atNodeEnd: true });
|
|
|
|
const content = createMessageContent(model, permalinkCreator);
|
|
|
|
expect(content).toEqual({
|
|
body: "/dev/null is my favourite place",
|
|
msgtype: "m.text",
|
|
});
|
|
});
|
|
});
|
|
|
|
describe("functions correctly mounted", () => {
|
|
const mockClient = MatrixClientPeg.matrixClient = createTestClient();
|
|
const mockRoom = mkStubRoom();
|
|
const mockEvent = mkEvent({
|
|
type: "m.room.message",
|
|
content: "Replying to this",
|
|
event: true,
|
|
});
|
|
mockRoom.findEventById = jest.fn(eventId => {
|
|
return eventId === mockEvent.getId() ? mockEvent : null;
|
|
});
|
|
|
|
const spyDispatcher = jest.spyOn(defaultDispatcher, "dispatch");
|
|
|
|
beforeEach(() => {
|
|
localStorage.clear();
|
|
spyDispatcher.mockReset();
|
|
});
|
|
|
|
it("renders text and placeholder correctly", () => {
|
|
const wrapper = mount(<MatrixClientContext.Provider value={mockClient}>
|
|
<SendMessageComposer
|
|
room={mockRoom}
|
|
placeholder="placeholder string"
|
|
permalinkCreator={new SpecPermalinkConstructor()}
|
|
/>
|
|
</MatrixClientContext.Provider>);
|
|
|
|
expect(wrapper.find('[aria-label="placeholder string"]')).toHaveLength(1);
|
|
|
|
act(() => {
|
|
wrapper.find(BasicMessageComposer).instance().insertText("Test Text");
|
|
wrapper.update();
|
|
});
|
|
|
|
expect(wrapper.text()).toBe("Test Text");
|
|
});
|
|
|
|
it("correctly persists state to and from localStorage", () => {
|
|
const wrapper = mount(<MatrixClientContext.Provider value={mockClient}>
|
|
<SendMessageComposer
|
|
room={mockRoom}
|
|
placeholder=""
|
|
permalinkCreator={new SpecPermalinkConstructor()}
|
|
replyToEvent={mockEvent}
|
|
/>
|
|
</MatrixClientContext.Provider>);
|
|
|
|
act(() => {
|
|
wrapper.find(BasicMessageComposer).instance().insertText("Test Text");
|
|
wrapper.update();
|
|
});
|
|
|
|
const key = wrapper.find(SendMessageComposer).instance().editorStateKey;
|
|
|
|
expect(wrapper.text()).toBe("Test Text");
|
|
expect(localStorage.getItem(key)).toBeNull();
|
|
|
|
// ensure the right state was persisted to localStorage
|
|
wrapper.unmount();
|
|
expect(JSON.parse(localStorage.getItem(key))).toStrictEqual({
|
|
parts: [{ "type": "plain", "text": "Test Text" }],
|
|
replyEventId: mockEvent.getId(),
|
|
});
|
|
|
|
// ensure the correct model is re-loaded
|
|
wrapper.mount();
|
|
expect(wrapper.text()).toBe("Test Text");
|
|
expect(spyDispatcher).toHaveBeenCalledWith({
|
|
action: "reply_to_event",
|
|
event: mockEvent,
|
|
});
|
|
|
|
// now try with localStorage wiped out
|
|
wrapper.unmount();
|
|
localStorage.removeItem(key);
|
|
wrapper.mount();
|
|
expect(wrapper.text()).toBe("");
|
|
});
|
|
|
|
it("persists state correctly without replyToEvent onbeforeunload", () => {
|
|
const wrapper = mount(<MatrixClientContext.Provider value={mockClient}>
|
|
<SendMessageComposer
|
|
room={mockRoom}
|
|
placeholder=""
|
|
permalinkCreator={new SpecPermalinkConstructor()}
|
|
/>
|
|
</MatrixClientContext.Provider>);
|
|
|
|
act(() => {
|
|
wrapper.find(BasicMessageComposer).instance().insertText("Hello World");
|
|
wrapper.update();
|
|
});
|
|
|
|
const key = wrapper.find(SendMessageComposer).instance().editorStateKey;
|
|
|
|
expect(wrapper.text()).toBe("Hello World");
|
|
expect(localStorage.getItem(key)).toBeNull();
|
|
|
|
// ensure the right state was persisted to localStorage
|
|
window.dispatchEvent(new Event('beforeunload'));
|
|
expect(JSON.parse(localStorage.getItem(key))).toStrictEqual({
|
|
parts: [{ "type": "plain", "text": "Hello World" }],
|
|
});
|
|
});
|
|
|
|
it("persists to session history upon sending", async () => {
|
|
const wrapper = mount(<MatrixClientContext.Provider value={mockClient}>
|
|
<SendMessageComposer
|
|
room={mockRoom}
|
|
placeholder="placeholder"
|
|
permalinkCreator={new SpecPermalinkConstructor()}
|
|
replyToEvent={mockEvent}
|
|
/>
|
|
</MatrixClientContext.Provider>);
|
|
|
|
act(() => {
|
|
wrapper.find(BasicMessageComposer).instance().insertText("This is a message");
|
|
wrapper.find(".mx_SendMessageComposer").simulate("keydown", { key: "Enter" });
|
|
wrapper.update();
|
|
});
|
|
await sleep(10); // await the async _sendMessage
|
|
wrapper.update();
|
|
expect(spyDispatcher).toHaveBeenCalledWith({
|
|
action: "reply_to_event",
|
|
event: null,
|
|
});
|
|
|
|
expect(wrapper.text()).toBe("");
|
|
const str = sessionStorage.getItem(`mx_cider_history_${mockRoom.roomId}[0]`);
|
|
expect(JSON.parse(str)).toStrictEqual({
|
|
parts: [{ "type": "plain", "text": "This is a message" }],
|
|
replyEventId: mockEvent.getId(),
|
|
});
|
|
});
|
|
});
|
|
|
|
describe("isQuickReaction", () => {
|
|
it("correctly detects quick reaction", () => {
|
|
const model = new EditorModel([], createPartCreator(), createRenderer());
|
|
model.update("+😊", "insertText", { offset: 3, atNodeEnd: true });
|
|
|
|
const isReaction = isQuickReaction(model);
|
|
|
|
expect(isReaction).toBeTruthy();
|
|
});
|
|
|
|
it("correctly detects quick reaction with space", () => {
|
|
const model = new EditorModel([], createPartCreator(), createRenderer());
|
|
model.update("+ 😊", "insertText", { offset: 4, atNodeEnd: true });
|
|
|
|
const isReaction = isQuickReaction(model);
|
|
|
|
expect(isReaction).toBeTruthy();
|
|
});
|
|
|
|
it("correctly rejects quick reaction with extra text", () => {
|
|
const model = new EditorModel([], createPartCreator(), createRenderer());
|
|
const model2 = new EditorModel([], createPartCreator(), createRenderer());
|
|
const model3 = new EditorModel([], createPartCreator(), createRenderer());
|
|
const model4 = new EditorModel([], createPartCreator(), createRenderer());
|
|
model.update("+😊hello", "insertText", { offset: 8, atNodeEnd: true });
|
|
model2.update(" +😊", "insertText", { offset: 4, atNodeEnd: true });
|
|
model3.update("+ 😊😊", "insertText", { offset: 6, atNodeEnd: true });
|
|
model4.update("+smiley", "insertText", { offset: 7, atNodeEnd: true });
|
|
|
|
expect(isQuickReaction(model)).toBeFalsy();
|
|
expect(isQuickReaction(model2)).toBeFalsy();
|
|
expect(isQuickReaction(model3)).toBeFalsy();
|
|
expect(isQuickReaction(model4)).toBeFalsy();
|
|
});
|
|
});
|
|
});
|
|
|