Merge remote-tracking branch 'origin/develop' into feat/add-message-edition-wysiwyg-composer

test/components/views/rooms/MessageComposer-test.tsx

@@ -147,7 +147,7 @@ describe("MessageComposer", () => {
 
                     beforeEach(() => {
                         SettingsStore.setValue(setting, null, SettingLevel.DEVICE, value);
-                        wrapper = wrapAndRender({ room, showVoiceBroadcastButton: true });
+                        wrapper = wrapAndRender({ room });
                     });
 
                     it(`should pass the prop ${prop} = ${value}`, () => {
@@ -174,17 +174,6 @@ describe("MessageComposer", () => {
             });
         });
 
-        [false, undefined].forEach((value) => {
-            it(`should pass showVoiceBroadcastButton = false if the MessageComposer prop is ${value}`, () => {
-                SettingsStore.setValue(Features.VoiceBroadcast, null, SettingLevel.DEVICE, true);
-                const wrapper = wrapAndRender({
-                    room,
-                    showVoiceBroadcastButton: value,
-                });
-                expect(wrapper.find(MessageComposerButtons).props().showVoiceBroadcastButton).toBe(false);
-            });
-        });
-
         it("should not render the send button", () => {
             const wrapper = wrapAndRender({ room });
             expect(wrapper.find("SendButton")).toHaveLength(0);

test/components/views/rooms/MessageComposerButtons-test.tsx

@@ -250,7 +250,6 @@ function createRoomState(room: Room, narrow: boolean): IRoomState {
         statusBarVisible: false,
         canReact: false,
         canSendMessages: false,
-        canSendVoiceBroadcasts: false,
         layout: Layout.Group,
         lowBandwidth: false,
         alwaysShowTimestamps: false,

test/components/views/rooms/SendMessageComposer-test.tsx

@@ -72,7 +72,6 @@ describe('<SendMessageComposer/>', () => {
         statusBarVisible: false,
         canReact: false,
         canSendMessages: false,
-        canSendVoiceBroadcasts: false,
         layout: Layout.Group,
         lowBandwidth: false,
         alwaysShowTimestamps: false,

test/components/views/rooms/wysiwyg_composer/WysiwygComposer-test.tsx

@@ -17,6 +17,7 @@ limitations under the License.
 import "@testing-library/jest-dom";
 import React from "react";
 import { act, render, screen, waitFor } from "@testing-library/react";
+import { InputEventProcessor, Wysiwyg, WysiwygProps } from "@matrix-org/matrix-wysiwyg";
 
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
 import RoomContext, { TimelineRenderingType } from "../../../../../src/contexts/RoomContext";
@@ -26,13 +27,31 @@ import { IRoomState } from "../../../../../src/components/structures/RoomView";
 import { Layout } from "../../../../../src/settings/enums/Layout";
 import { WysiwygComposer } from "../../../../../src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer";
 import { createTestClient, mkEvent, mkStubRoom } from "../../../../test-utils";
+import SettingsStore from "../../../../../src/settings/SettingsStore";
+
+// Work around missing ClipboardEvent type
+class MyClipbardEvent {}
+window.ClipboardEvent = MyClipbardEvent as any;
+
+let inputEventProcessor: InputEventProcessor | null = null;
 
 // The wysiwyg fetch wasm bytes and a specific workaround is needed to make it works in a node (jest) environnement
 // See https://github.com/matrix-org/matrix-wysiwyg/blob/main/platforms/web/test.setup.ts
 jest.mock("@matrix-org/matrix-wysiwyg", () => ({
-    useWysiwyg: () => {
-        return { ref: { current: null }, content: '<b>html</b>', isWysiwygReady: true, wysiwyg: { clear: () => void 0 },
-            formattingStates: { bold: 'enabled', italic: 'enabled', underline: 'enabled', strikeThrough: 'enabled' } };
+    useWysiwyg: (props: WysiwygProps) => {
+        inputEventProcessor = props.inputEventProcessor ?? null;
+        return {
+            ref: { current: null },
+            content: '<b>html</b>',
+            isWysiwygReady: true,
+            wysiwyg: { clear: () => void 0 },
+            formattingStates: {
+                bold: 'enabled',
+                italic: 'enabled',
+                underline: 'enabled',
+                strikeThrough: 'enabled',
+            },
+        };
     },
 }));
 
@@ -72,7 +91,6 @@ describe('WysiwygComposer', () => {
         statusBarVisible: false,
         canReact: false,
         canSendMessages: false,
-        canSendVoiceBroadcasts: false,
         layout: Layout.Group,
         lowBandwidth: false,
         alwaysShowTimestamps: false,
@@ -196,5 +214,62 @@ describe('WysiwygComposer', () => {
         // Then we don't get it because we are disabled
         expect(screen.getByRole('textbox')).not.toHaveFocus();
     });
+
+    it('sends a message when Enter is pressed', async () => {
+        // Given a composer
+        customRender(() => {}, false);
+
+        // When we tell its inputEventProcesser that the user pressed Enter
+        const event = new InputEvent("insertParagraph", { inputType: "insertParagraph" });
+        const wysiwyg = { actions: { clear: () => {} } } as Wysiwyg;
+        inputEventProcessor(event, wysiwyg);
+
+        // Then it sends a message
+        expect(mockClient.sendMessage).toBeCalledWith(
+            "myfakeroom",
+            null,
+            {
+                "body": "<b>html</b>",
+                "format": "org.matrix.custom.html",
+                "formatted_body": "<b>html</b>",
+                "msgtype": "m.text",
+            },
+        );
+        // TODO: plain text body above is wrong - will be fixed when we provide markdown for it
+    });
+
+    describe('when settings require Ctrl+Enter to send', () => {
+        beforeEach(() => {
+            jest.spyOn(SettingsStore, "getValue").mockImplementation((name: string) => {
+                if (name === "MessageComposerInput.ctrlEnterToSend") return true;
+            });
+        });
+
+        it('does not send a message when Enter is pressed', async () => {
+            // Given a composer
+            customRender(() => {}, false);
+
+            // When we tell its inputEventProcesser that the user pressed Enter
+            const event = new InputEvent("input", { inputType: "insertParagraph" });
+            const wysiwyg = { actions: { clear: () => {} } } as Wysiwyg;
+            inputEventProcessor(event, wysiwyg);
+
+            // Then it does not send a message
+            expect(mockClient.sendMessage).toBeCalledTimes(0);
+        });
+
+        it('sends a message when Ctrl+Enter is pressed', async () => {
+            // Given a composer
+            customRender(() => {}, false);
+
+            // When we tell its inputEventProcesser that the user pressed Ctrl+Enter
+            const event = new InputEvent("input", { inputType: "sendMessage" });
+            const wysiwyg = { actions: { clear: () => {} } } as Wysiwyg;
+            inputEventProcessor(event, wysiwyg);
+
+            // Then it sends a message
+            expect(mockClient.sendMessage).toBeCalledTimes(1);
+        });
+    });
 });
 

test/components/views/rooms/wysiwyg_composer/message-test.ts

@@ -123,7 +123,6 @@ describe('message', () => {
             statusBarVisible: false,
             canReact: false,
             canSendMessages: false,
-            canSendVoiceBroadcasts: false,
             layout: Layout.Group,
             lowBandwidth: false,
             alwaysShowTimestamps: false,