riot-web/test/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx

341 lines
13 KiB
TypeScript
Raw Normal View History

2022-10-21 19:26:33 +02: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";
import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
2022-10-21 19:26:33 +02: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-10-26 19:05:11 +02:00
import { createTestClient, flushPromises, getRoomContext, mkEvent, mkStubRoom } from "../../../../test-utils";
import { SendWysiwygComposer } from "../../../../../src/components/views/rooms/wysiwyg_composer/";
import { aboveLeftOf } from "../../../../../src/components/structures/ContextMenu";
2022-12-06 16:38:25 +01:00
import { ComposerInsertPayload, ComposerType } from "../../../../../src/dispatcher/payloads/ComposerInsertPayload";
import { setSelection } from "../../../../../src/components/views/rooms/wysiwyg_composer/utils/selection";
jest.mock("../../../../../src/components/views/rooms/EmojiButton", () => ({
2022-12-12 12:24:14 +01:00
EmojiButton: ({ addEmoji }: { addEmoji: (emoji: string) => void }) => {
return (
<button aria-label="Emoji" type="button" onClick={() => addEmoji("🦫")}>
Emoji
</button>
);
2022-12-06 16:38:25 +01:00
},
}));
2022-10-21 19:26:33 +02:00
2022-12-12 12:24:14 +01:00
describe("SendWysiwygComposer", () => {
2022-10-21 19:26:33 +02:00
afterEach(() => {
jest.resetAllMocks();
});
const mockClient = createTestClient();
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" },
2022-10-21 19:26:33 +02:00
event: true,
});
2022-12-12 12:24:14 +01:00
const mockRoom = mkStubRoom("myfakeroom", "myfakeroom", mockClient) as any;
mockRoom.findEventById = jest.fn((eventId) => {
2022-10-21 19:26:33 +02:00
return eventId === mockEvent.getId() ? mockEvent : null;
});
const defaultRoomContext: IRoomState = getRoomContext(mockRoom, {});
2022-12-06 16:38:25 +01:00
const registerId = defaultDispatcher.register((payload) => {
switch (payload.action) {
case Action.ComposerInsert: {
if (payload.composerType) break;
// re-dispatch to the correct composer
defaultDispatcher.dispatch<ComposerInsertPayload>({
...(payload as ComposerInsertPayload),
composerType: ComposerType.Send,
});
break;
}
}
});
afterAll(() => {
defaultDispatcher.unregister(registerId);
});
2022-10-26 17:16:13 +02:00
const customRender = (
2022-12-06 16:45:25 +01:00
onChange = (_content: string): void => void 0,
onSend = (): void => void 0,
2022-10-26 17:16:13 +02:00
disabled = false,
isRichTextEnabled = true,
2022-12-12 12:24:14 +01:00
placeholder?: string,
) => {
2022-10-21 19:26:33 +02:00
return render(
<MatrixClientContext.Provider value={mockClient}>
<RoomContext.Provider value={defaultRoomContext}>
2022-12-12 12:24:14 +01:00
<SendWysiwygComposer
onChange={onChange}
onSend={onSend}
disabled={disabled}
isRichTextEnabled={isRichTextEnabled}
menuPosition={aboveLeftOf({ top: 0, bottom: 0, right: 0 })}
placeholder={placeholder}
/>
2022-10-21 19:26:33 +02:00
</RoomContext.Provider>
</MatrixClientContext.Provider>,
);
};
it("Should render WysiwygComposer when isRichTextEnabled is at true", async () => {
2022-10-26 17:16:13 +02:00
// When
customRender(jest.fn(), jest.fn(), false, true);
2022-10-21 19:26:33 +02:00
2022-10-26 17:16:13 +02:00
// Then
await waitFor(() => expect(screen.getByTestId("WysiwygComposer")).toBeTruthy());
2022-10-21 19:26:33 +02:00
});
2022-12-12 12:24:14 +01:00
it("Should render PlainTextComposer when isRichTextEnabled is at false", () => {
2022-10-26 17:16:13 +02:00
// When
customRender(jest.fn(), jest.fn(), false, false);
2022-10-21 19:26:33 +02:00
2022-10-26 17:16:13 +02:00
// Then
2022-12-12 12:24:14 +01:00
expect(screen.getByTestId("PlainTextComposer")).toBeTruthy();
2022-10-21 19:26:33 +02:00
});
describe.each([{ isRichTextEnabled: true }, { isRichTextEnabled: false }])(
2022-12-12 12:24:14 +01:00
"Should focus when receiving an Action.FocusSendMessageComposer action",
({ isRichTextEnabled }) => {
2022-10-26 17:16:13 +02:00
afterEach(() => {
jest.resetAllMocks();
});
2022-12-12 12:24:14 +01:00
it("Should focus when receiving an Action.FocusSendMessageComposer action", async () => {
2022-11-16 16:38:00 +01:00
// Given we don't have focus
2022-10-26 17:16:13 +02:00
customRender(jest.fn(), jest.fn(), false, isRichTextEnabled);
2022-12-12 12:24:14 +01:00
await waitFor(() => expect(screen.getByRole("textbox")).toHaveAttribute("contentEditable", "true"));
2022-10-26 17:16:13 +02:00
// When we send the right action
defaultDispatcher.dispatch({
action: Action.FocusSendMessageComposer,
context: null,
});
// Then the component gets the focus
2022-12-12 12:24:14 +01:00
await waitFor(() => expect(screen.getByRole("textbox")).toHaveFocus());
2022-10-26 17:16:13 +02:00
});
2022-12-12 12:24:14 +01:00
it("Should focus and clear when receiving an Action.ClearAndFocusSendMessageComposer", async () => {
2022-11-16 16:38:00 +01:00
// Given we don't have focus
const onChange = jest.fn();
customRender(onChange, jest.fn(), false, isRichTextEnabled);
2022-12-12 12:24:14 +01:00
await waitFor(() => expect(screen.getByRole("textbox")).toHaveAttribute("contentEditable", "true"));
2022-11-16 16:38:00 +01:00
2022-12-12 12:24:14 +01:00
fireEvent.input(screen.getByRole("textbox"), {
data: "foo bar",
inputType: "insertText",
2022-11-16 16:38:00 +01:00
});
2022-10-26 17:16:13 +02:00
// When we send the right action
defaultDispatcher.dispatch({
action: Action.ClearAndFocusSendMessageComposer,
2023-01-23 15:36:40 +01:00
timelineRenderingType: defaultRoomContext.timelineRenderingType,
2022-10-26 17:16:13 +02:00
});
// Then the component gets the focus
2022-11-16 16:38:00 +01:00
await waitFor(() => {
2022-12-12 12:24:14 +01:00
expect(screen.getByRole("textbox")).toHaveTextContent(/^$/);
expect(screen.getByRole("textbox")).toHaveFocus();
2022-11-16 16:38:00 +01:00
});
2022-10-26 17:16:13 +02:00
});
2022-12-12 12:24:14 +01:00
it("Should focus when receiving a reply_to_event action", async () => {
2022-11-16 16:38:00 +01:00
// Given we don't have focus
2022-10-26 17:16:13 +02:00
customRender(jest.fn(), jest.fn(), false, isRichTextEnabled);
2022-12-12 12:24:14 +01:00
await waitFor(() => expect(screen.getByRole("textbox")).toHaveAttribute("contentEditable", "true"));
2022-10-26 17:16:13 +02:00
// When we send the right action
defaultDispatcher.dispatch({
action: "reply_to_event",
context: null,
});
// Then the component gets the focus
2022-12-12 12:24:14 +01:00
await waitFor(() => expect(screen.getByRole("textbox")).toHaveFocus());
2022-10-26 17:16:13 +02:00
});
2022-12-12 12:24:14 +01:00
it("Should not focus when disabled", async () => {
2022-11-16 16:38:00 +01:00
// Given we don't have focus and we are disabled
2022-10-26 17:16:13 +02:00
customRender(jest.fn(), jest.fn(), true, isRichTextEnabled);
2022-12-12 12:24:14 +01:00
expect(screen.getByRole("textbox")).not.toHaveFocus();
2022-10-26 17:16:13 +02:00
// When we send an action that would cause us to get focus
defaultDispatcher.dispatch({
action: Action.FocusSendMessageComposer,
context: null,
});
// (Send a second event to exercise the clearTimeout logic)
defaultDispatcher.dispatch({
action: Action.FocusSendMessageComposer,
context: null,
});
// Wait for event dispatch to happen
await act(async () => {
await flushPromises();
});
2022-10-26 17:16:13 +02:00
// Then we don't get it because we are disabled
2022-12-12 12:24:14 +01:00
expect(screen.getByRole("textbox")).not.toHaveFocus();
2022-10-26 17:16:13 +02:00
});
2022-12-12 12:24:14 +01:00
},
);
2022-12-12 12:24:14 +01:00
describe.each([{ isRichTextEnabled: true }, { isRichTextEnabled: false }])(
"Placeholder when %s",
({ isRichTextEnabled }) => {
afterEach(() => {
jest.resetAllMocks();
});
2022-12-12 12:24:14 +01:00
it("Should not has placeholder", async () => {
// When
customRender(jest.fn(), jest.fn(), false, isRichTextEnabled);
2022-12-12 12:24:14 +01:00
await waitFor(() => expect(screen.getByRole("textbox")).toHaveAttribute("contentEditable", "true"));
// Then
2022-12-12 12:24:14 +01:00
expect(screen.getByRole("textbox")).not.toHaveClass("mx_WysiwygComposer_Editor_content_placeholder");
});
2022-12-12 12:24:14 +01:00
it("Should has placeholder", async () => {
// When
2022-12-12 12:24:14 +01:00
customRender(jest.fn(), jest.fn(), false, isRichTextEnabled, "my placeholder");
await waitFor(() => expect(screen.getByRole("textbox")).toHaveAttribute("contentEditable", "true"));
// Then
2022-12-12 12:24:14 +01:00
expect(screen.getByRole("textbox")).toHaveClass("mx_WysiwygComposer_Editor_content_placeholder");
});
2022-12-12 12:24:14 +01:00
it("Should display or not placeholder when editor content change", async () => {
// When
2022-12-12 12:24:14 +01:00
customRender(jest.fn(), jest.fn(), false, isRichTextEnabled, "my placeholder");
await waitFor(() => expect(screen.getByRole("textbox")).toHaveAttribute("contentEditable", "true"));
screen.getByRole("textbox").innerHTML = "f";
fireEvent.input(screen.getByRole("textbox"), {
data: "f",
inputType: "insertText",
});
// Then
await waitFor(() =>
2022-12-12 12:24:14 +01:00
expect(screen.getByRole("textbox")).not.toHaveClass(
"mx_WysiwygComposer_Editor_content_placeholder",
),
);
// When
2022-12-12 12:24:14 +01:00
screen.getByRole("textbox").innerHTML = "";
fireEvent.input(screen.getByRole("textbox"), {
inputType: "deleteContentBackward",
});
// Then
await waitFor(() =>
2022-12-12 12:24:14 +01:00
expect(screen.getByRole("textbox")).toHaveClass("mx_WysiwygComposer_Editor_content_placeholder"),
);
});
2022-12-12 12:24:14 +01:00
},
);
2022-12-06 16:38:25 +01:00
2022-12-12 12:24:14 +01:00
describe.each([{ isRichTextEnabled: true }, { isRichTextEnabled: false }])(
"Emoji when %s",
({ isRichTextEnabled }) => {
let emojiButton: HTMLElement;
beforeEach(async () => {
customRender(jest.fn(), jest.fn(), false, isRichTextEnabled);
await waitFor(() => expect(screen.getByRole("textbox")).toHaveAttribute("contentEditable", "true"));
emojiButton = screen.getByLabelText("Emoji");
2022-12-06 16:38:25 +01:00
});
2022-12-12 12:24:14 +01:00
afterEach(() => {
jest.resetAllMocks();
2022-12-06 16:38:25 +01:00
});
2022-12-12 12:24:14 +01:00
it("Should add an emoji in an empty composer", async () => {
// When
emojiButton.click();
2022-12-06 16:38:25 +01:00
2022-12-12 12:24:14 +01:00
// Then
await waitFor(() => expect(screen.getByRole("textbox")).toHaveTextContent(/🦫/));
});
it("Should add an emoji in the middle of a word", async () => {
// When
screen.getByRole("textbox").focus();
screen.getByRole("textbox").innerHTML = "word";
fireEvent.input(screen.getByRole("textbox"), {
data: "word",
inputType: "insertText",
});
2022-10-21 19:26:33 +02:00
2022-12-12 12:24:14 +01:00
const textNode = screen.getByRole("textbox").firstChild;
await setSelection({
2022-12-12 12:24:14 +01:00
anchorNode: textNode,
anchorOffset: 2,
focusNode: textNode,
focusOffset: 2,
isForward: true,
2022-12-12 12:24:14 +01:00
});
// the event is not automatically fired by jest
document.dispatchEvent(new CustomEvent("selectionchange"));
emojiButton.click();
// Then
await waitFor(() => expect(screen.getByRole("textbox")).toHaveTextContent(/wo🦫rd/));
});
it("Should add an emoji when a word is selected", async () => {
// When
screen.getByRole("textbox").focus();
screen.getByRole("textbox").innerHTML = "word";
fireEvent.input(screen.getByRole("textbox"), {
data: "word",
inputType: "insertText",
});
const textNode = screen.getByRole("textbox").firstChild;
await setSelection({
anchorNode: textNode,
anchorOffset: 3,
focusNode: textNode,
focusOffset: 2,
isForward: false,
});
// the event is not automatically fired by jest
document.dispatchEvent(new CustomEvent("selectionchange"));
emojiButton.click();
// Then
await waitFor(() => expect(screen.getByRole("textbox")).toHaveTextContent(/wo🦫d/));
});
2022-12-12 12:24:14 +01:00
},
);
});