2022-10-21 17:26:33 +00:00
|
|
|
/*
|
|
|
|
Copyright 2022 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 "@testing-library/jest-dom";
|
|
|
|
import React from "react";
|
2022-11-28 15:01:49 +00:00
|
|
|
import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
|
2022-10-21 17:26:33 +00:00
|
|
|
|
|
|
|
import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
|
|
|
|
import RoomContext from "../../../../../src/contexts/RoomContext";
|
|
|
|
import defaultDispatcher from "../../../../../src/dispatcher/dispatcher";
|
|
|
|
import { Action } from "../../../../../src/dispatcher/actions";
|
|
|
|
import { IRoomState } from "../../../../../src/components/structures/RoomView";
|
2022-11-16 15:38:00 +00:00
|
|
|
import { createTestClient, flushPromises, getRoomContext, mkEvent, mkStubRoom } from "../../../../test-utils";
|
2022-10-21 17:26:33 +00:00
|
|
|
import { EditWysiwygComposer } from "../../../../../src/components/views/rooms/wysiwyg_composer";
|
|
|
|
import EditorStateTransfer from "../../../../../src/utils/EditorStateTransfer";
|
|
|
|
|
|
|
|
describe("EditWysiwygComposer", () => {
|
|
|
|
afterEach(() => {
|
|
|
|
jest.resetAllMocks();
|
|
|
|
});
|
|
|
|
|
|
|
|
const mockClient = createTestClient();
|
|
|
|
const mockEvent = mkEvent({
|
|
|
|
type: "m.room.message",
|
|
|
|
room: "myfakeroom",
|
|
|
|
user: "myfakeuser",
|
|
|
|
content: {
|
|
|
|
msgtype: "m.text",
|
|
|
|
body: "Replying to this",
|
|
|
|
format: "org.matrix.custom.html",
|
2022-11-16 15:38:00 +00:00
|
|
|
formatted_body: "Replying <b>to</b> this new content",
|
2022-10-21 17:26:33 +00:00
|
|
|
},
|
|
|
|
event: true,
|
|
|
|
});
|
|
|
|
const mockRoom = mkStubRoom("myfakeroom", "myfakeroom", mockClient) as any;
|
|
|
|
mockRoom.findEventById = jest.fn((eventId) => {
|
|
|
|
return eventId === mockEvent.getId() ? mockEvent : null;
|
|
|
|
});
|
|
|
|
|
|
|
|
const defaultRoomContext: IRoomState = getRoomContext(mockRoom, {});
|
|
|
|
|
|
|
|
const editorStateTransfer = new EditorStateTransfer(mockEvent);
|
|
|
|
|
|
|
|
const customRender = (disabled = false, _editorStateTransfer = editorStateTransfer) => {
|
|
|
|
return render(
|
|
|
|
<MatrixClientContext.Provider value={mockClient}>
|
|
|
|
<RoomContext.Provider value={defaultRoomContext}>
|
|
|
|
<EditWysiwygComposer disabled={disabled} editorStateTransfer={_editorStateTransfer} />
|
|
|
|
</RoomContext.Provider>
|
|
|
|
</MatrixClientContext.Provider>,
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
describe("Initialize with content", () => {
|
|
|
|
it("Should initialize useWysiwyg with html content", async () => {
|
|
|
|
// When
|
2022-11-16 15:38:00 +00:00
|
|
|
customRender(false, editorStateTransfer);
|
|
|
|
await waitFor(() => expect(screen.getByRole("textbox")).toHaveAttribute("contentEditable", "true"));
|
2022-10-21 17:26:33 +00:00
|
|
|
|
|
|
|
// Then
|
2022-11-16 15:38:00 +00:00
|
|
|
await waitFor(() =>
|
|
|
|
expect(screen.getByRole("textbox")).toContainHTML(mockEvent.getContent()["formatted_body"]),
|
|
|
|
);
|
2022-10-21 17:26:33 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
it("Should initialize useWysiwyg with plain text content", async () => {
|
|
|
|
// When
|
|
|
|
const mockEvent = mkEvent({
|
|
|
|
type: "m.room.message",
|
|
|
|
room: "myfakeroom",
|
|
|
|
user: "myfakeuser",
|
|
|
|
content: {
|
|
|
|
msgtype: "m.text",
|
|
|
|
body: "Replying to this",
|
|
|
|
},
|
|
|
|
event: true,
|
|
|
|
});
|
|
|
|
const editorStateTransfer = new EditorStateTransfer(mockEvent);
|
2022-11-16 15:38:00 +00:00
|
|
|
customRender(false, editorStateTransfer);
|
|
|
|
await waitFor(() => expect(screen.getByRole("textbox")).toHaveAttribute("contentEditable", "true"));
|
2022-10-21 17:26:33 +00:00
|
|
|
|
|
|
|
// Then
|
2022-11-16 15:38:00 +00:00
|
|
|
await waitFor(() => expect(screen.getByRole("textbox")).toContainHTML(mockEvent.getContent()["body"]));
|
2022-10-21 17:26:33 +00:00
|
|
|
});
|
2022-11-28 15:01:49 +00:00
|
|
|
|
|
|
|
it("Should ignore when formatted_body is not filled", async () => {
|
|
|
|
// When
|
|
|
|
const mockEvent = mkEvent({
|
|
|
|
type: "m.room.message",
|
|
|
|
room: "myfakeroom",
|
|
|
|
user: "myfakeuser",
|
|
|
|
content: {
|
|
|
|
msgtype: "m.text",
|
|
|
|
body: "Replying to this",
|
|
|
|
format: "org.matrix.custom.html",
|
|
|
|
},
|
|
|
|
event: true,
|
|
|
|
});
|
|
|
|
|
|
|
|
const editorStateTransfer = new EditorStateTransfer(mockEvent);
|
|
|
|
customRender(false, editorStateTransfer);
|
|
|
|
|
|
|
|
// Then
|
|
|
|
await waitFor(() => expect(screen.getByRole("textbox")).toHaveAttribute("contentEditable", "true"));
|
|
|
|
});
|
|
|
|
|
|
|
|
it("Should strip <mx-reply> tag from initial content", async () => {
|
|
|
|
// When
|
|
|
|
const mockEvent = mkEvent({
|
|
|
|
type: "m.room.message",
|
|
|
|
room: "myfakeroom",
|
|
|
|
user: "myfakeuser",
|
|
|
|
content: {
|
|
|
|
msgtype: "m.text",
|
|
|
|
body: "Replying to this",
|
|
|
|
format: "org.matrix.custom.html",
|
|
|
|
formatted_body: "<mx-reply>Reply</mx-reply>My content",
|
|
|
|
},
|
|
|
|
event: true,
|
|
|
|
});
|
|
|
|
|
|
|
|
const editorStateTransfer = new EditorStateTransfer(mockEvent);
|
|
|
|
customRender(false, editorStateTransfer);
|
|
|
|
await waitFor(() => expect(screen.getByRole("textbox")).toHaveAttribute("contentEditable", "true"));
|
|
|
|
|
|
|
|
// Then
|
|
|
|
await waitFor(() => {
|
|
|
|
expect(screen.getByRole("textbox")).not.toContainHTML("<mx-reply>Reply</mx-reply>");
|
|
|
|
expect(screen.getByRole("textbox")).toContainHTML("My content");
|
|
|
|
});
|
|
|
|
});
|
2022-10-21 17:26:33 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
describe("Edit and save actions", () => {
|
2022-11-16 15:38:00 +00:00
|
|
|
beforeEach(async () => {
|
|
|
|
customRender();
|
|
|
|
await waitFor(() => expect(screen.getByRole("textbox")).toHaveAttribute("contentEditable", "true"));
|
|
|
|
});
|
|
|
|
|
2022-10-21 17:26:33 +00:00
|
|
|
const spyDispatcher = jest.spyOn(defaultDispatcher, "dispatch");
|
|
|
|
afterEach(() => {
|
|
|
|
spyDispatcher.mockRestore();
|
|
|
|
});
|
|
|
|
|
|
|
|
it("Should cancel edit on cancel button click", async () => {
|
|
|
|
// When
|
2022-11-16 15:38:00 +00:00
|
|
|
screen.getByText("Cancel").click();
|
2022-10-21 17:26:33 +00:00
|
|
|
|
|
|
|
// Then
|
|
|
|
expect(spyDispatcher).toBeCalledWith({
|
|
|
|
action: Action.EditEvent,
|
|
|
|
event: null,
|
|
|
|
timelineRenderingType: defaultRoomContext.timelineRenderingType,
|
|
|
|
});
|
|
|
|
expect(spyDispatcher).toBeCalledWith({
|
|
|
|
action: Action.FocusSendMessageComposer,
|
|
|
|
context: defaultRoomContext.timelineRenderingType,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it("Should send message on save button click", async () => {
|
|
|
|
// When
|
|
|
|
const spyDispatcher = jest.spyOn(defaultDispatcher, "dispatch");
|
2022-11-16 15:38:00 +00:00
|
|
|
fireEvent.input(screen.getByRole("textbox"), {
|
|
|
|
data: "foo bar",
|
|
|
|
inputType: "insertText",
|
|
|
|
});
|
|
|
|
await waitFor(() => expect(screen.getByText("Save")).not.toHaveAttribute("disabled"));
|
2022-10-21 17:26:33 +00:00
|
|
|
|
|
|
|
// Then
|
2022-11-16 15:38:00 +00:00
|
|
|
screen.getByText("Save").click();
|
2022-10-21 17:26:33 +00:00
|
|
|
const expectedContent = {
|
2022-11-16 15:38:00 +00:00
|
|
|
"body": ` * foo bar`,
|
2022-10-21 17:26:33 +00:00
|
|
|
"format": "org.matrix.custom.html",
|
2022-11-16 15:38:00 +00:00
|
|
|
"formatted_body": ` * foo bar`,
|
2022-10-21 17:26:33 +00:00
|
|
|
"m.new_content": {
|
2022-11-16 15:38:00 +00:00
|
|
|
body: "foo bar",
|
2022-10-21 17:26:33 +00:00
|
|
|
format: "org.matrix.custom.html",
|
2022-11-16 15:38:00 +00:00
|
|
|
formatted_body: "foo bar",
|
2022-10-21 17:26:33 +00:00
|
|
|
msgtype: "m.text",
|
|
|
|
},
|
|
|
|
"m.relates_to": {
|
|
|
|
event_id: mockEvent.getId(),
|
|
|
|
rel_type: "m.replace",
|
|
|
|
},
|
|
|
|
"msgtype": "m.text",
|
|
|
|
};
|
|
|
|
expect(mockClient.sendMessage).toBeCalledWith(mockEvent.getRoomId(), null, expectedContent);
|
|
|
|
expect(spyDispatcher).toBeCalledWith({ action: "message_sent" });
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
it("Should focus when receiving an Action.FocusEditMessageComposer action", async () => {
|
|
|
|
// Given we don't have focus
|
|
|
|
customRender();
|
2022-10-26 12:53:44 +00:00
|
|
|
screen.getByLabelText("Bold").focus();
|
2022-10-21 17:26:33 +00:00
|
|
|
expect(screen.getByRole("textbox")).not.toHaveFocus();
|
|
|
|
|
|
|
|
// When we send the right action
|
|
|
|
defaultDispatcher.dispatch({
|
|
|
|
action: Action.FocusEditMessageComposer,
|
|
|
|
context: null,
|
|
|
|
});
|
|
|
|
|
|
|
|
// Then the component gets the focus
|
|
|
|
await waitFor(() => expect(screen.getByRole("textbox")).toHaveFocus());
|
|
|
|
});
|
|
|
|
|
|
|
|
it("Should not focus when disabled", async () => {
|
|
|
|
// Given we don't have focus and we are disabled
|
|
|
|
customRender(true);
|
2022-10-26 12:53:44 +00:00
|
|
|
screen.getByLabelText("Bold").focus();
|
2022-10-21 17:26:33 +00:00
|
|
|
expect(screen.getByRole("textbox")).not.toHaveFocus();
|
|
|
|
|
|
|
|
// When we send an action that would cause us to get focus
|
2022-11-28 15:01:49 +00:00
|
|
|
act(() => {
|
|
|
|
defaultDispatcher.dispatch({
|
|
|
|
action: Action.FocusEditMessageComposer,
|
|
|
|
context: null,
|
|
|
|
});
|
|
|
|
// (Send a second event to exercise the clearTimeout logic)
|
|
|
|
defaultDispatcher.dispatch({
|
|
|
|
action: Action.FocusEditMessageComposer,
|
|
|
|
context: null,
|
|
|
|
});
|
2022-10-21 17:26:33 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
// Wait for event dispatch to happen
|
2022-11-16 15:38:00 +00:00
|
|
|
await flushPromises();
|
2022-10-21 17:26:33 +00:00
|
|
|
|
|
|
|
// Then we don't get it because we are disabled
|
|
|
|
expect(screen.getByRole("textbox")).not.toHaveFocus();
|
|
|
|
});
|
|
|
|
});
|