Remove useWysiwyg mock (#9578)

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

@@ -42,15 +42,6 @@ import { addTextToComposer } from "../../../test-utils/composer";
 import UIStore, { UI_EVENTS } from "../../../../src/stores/UIStore";
 import { SendWysiwygComposer } from "../../../../src/components/views/rooms/wysiwyg_composer";
 
-// 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 }, isWysiwygReady: true, wysiwyg: { clear: () => void 0 },
-            actionStates: { bold: 'enabled', italic: 'enabled', underline: 'enabled', strikeThrough: 'enabled' } };
-    },
-}));
-
 describe("MessageComposer", () => {
     stubClient();
     const cli = createTestClient();

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

@@ -16,49 +16,21 @@ limitations under the License.
 
 import "@testing-library/jest-dom";
 import React from "react";
-import { render, screen, waitFor } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-import { WysiwygProps } from "@matrix-org/matrix-wysiwyg";
 
 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";
-import { createTestClient, getRoomContext, mkEvent, mkStubRoom } from "../../../../test-utils";
+import { createTestClient, flushPromises, getRoomContext, mkEvent, mkStubRoom } from "../../../../test-utils";
 import { EditWysiwygComposer }
     from "../../../../../src/components/views/rooms/wysiwyg_composer";
 import EditorStateTransfer from "../../../../../src/utils/EditorStateTransfer";
 
-const mockClear = jest.fn();
-
-let initialContent: string;
-const defaultContent = '<b>html</b>';
-let mockContent = defaultContent;
-
-// 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: (props: WysiwygProps) => {
-        initialContent = props.initialContent;
-        return {
-            ref: { current: null },
-            content: mockContent,
-            isWysiwygReady: true,
-            wysiwyg: { clear: mockClear },
-            actionStates: {
-                bold: 'enabled',
-                italic: 'enabled',
-                underline: 'enabled',
-                strikeThrough: 'enabled',
-            },
-        };
-    },
-}));
-
 describe('EditWysiwygComposer', () => {
     afterEach(() => {
         jest.resetAllMocks();
-        mockContent = defaultContent;
     });
 
     const mockClient = createTestClient();
@@ -70,7 +42,7 @@ describe('EditWysiwygComposer', () => {
             "msgtype": "m.text",
             "body": "Replying to this",
             "format": "org.matrix.custom.html",
-            "formatted_body": "Replying <b>to</b> this new content",
+            "formatted_body": 'Replying <b>to</b> this new content',
         },
         event: true,
     });
@@ -96,10 +68,12 @@ describe('EditWysiwygComposer', () => {
     describe('Initialize with content', () => {
         it('Should initialize useWysiwyg with html content', async () => {
             // When
-            customRender(true);
+            customRender(false, editorStateTransfer);
+            await waitFor(() => expect(screen.getByRole('textbox')).toHaveAttribute('contentEditable', "true"));
 
             // Then
-            expect(initialContent).toBe(mockEvent.getContent()['formatted_body']);
+            await waitFor(() =>
+                expect(screen.getByRole('textbox')).toContainHTML(mockEvent.getContent()['formatted_body']));
         });
 
         it('Should initialize useWysiwyg with plain text content', async () => {
@@ -115,15 +89,21 @@ describe('EditWysiwygComposer', () => {
                 event: true,
             });
             const editorStateTransfer = new EditorStateTransfer(mockEvent);
-
+            customRender(false, editorStateTransfer);
-            customRender(true, editorStateTransfer);
+            await waitFor(() => expect(screen.getByRole('textbox')).toHaveAttribute('contentEditable', "true"));
 
             // Then
-            expect(initialContent).toBe(mockEvent.getContent().body);
+            await waitFor(() =>
+                expect(screen.getByRole('textbox')).toContainHTML(mockEvent.getContent()['body']));
         });
     });
 
     describe('Edit and save actions', () => {
+        beforeEach(async () => {
+            customRender();
+            await waitFor(() => expect(screen.getByRole('textbox')).toHaveAttribute('contentEditable', "true"));
+        });
+
         const spyDispatcher = jest.spyOn(defaultDispatcher, "dispatch");
         afterEach(() => {
             spyDispatcher.mockRestore();
@@ -131,8 +111,7 @@ describe('EditWysiwygComposer', () => {
 
         it('Should cancel edit on cancel button click', async () => {
             // When
-            customRender(true);
+            screen.getByText('Cancel').click();
-            (await screen.findByText('Cancel')).click();
 
             // Then
             expect(spyDispatcher).toBeCalledWith({
@@ -149,27 +128,22 @@ describe('EditWysiwygComposer', () => {
         it('Should send message on save button click', async () => {
             // When
             const spyDispatcher = jest.spyOn(defaultDispatcher, "dispatch");
-
+            fireEvent.input(screen.getByRole('textbox'), {
-            const renderer = customRender(true);
+                data: 'foo bar',
-
+                inputType: 'insertText',
-            mockContent = 'my new content';
+            });
-            renderer.rerender(<MatrixClientContext.Provider value={mockClient}>
+            await waitFor(() => expect(screen.getByText('Save')).not.toHaveAttribute('disabled'));
-                <RoomContext.Provider value={defaultRoomContext}>
-                    <EditWysiwygComposer editorStateTransfer={editorStateTransfer} />
-                </RoomContext.Provider>
-            </MatrixClientContext.Provider>);
-
-            (await screen.findByText('Save')).click();
 
             // Then
+            screen.getByText('Save').click();
             const expectedContent = {
-                "body": ` * ${mockContent}`,
+                "body": ` * foo bar`,
                 "format": "org.matrix.custom.html",
-                "formatted_body": ` * ${mockContent}`,
+                "formatted_body": ` * foo bar`,
                 "m.new_content": {
-                    "body": mockContent,
+                    "body": "foo bar",
                     "format": "org.matrix.custom.html",
-                    "formatted_body": mockContent,
+                    "formatted_body": "foo bar",
                     "msgtype": "m.text",
                 },
                 "m.relates_to": {
@@ -217,7 +191,7 @@ describe('EditWysiwygComposer', () => {
         });
 
         // Wait for event dispatch to happen
-        await new Promise((r) => setTimeout(r, 200));
+        await flushPromises();
 
         // Then we don't get it because we are disabled
         expect(screen.getByRole('textbox')).not.toHaveFocus();

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

@@ -16,8 +16,7 @@ limitations under the License.
 
 import "@testing-library/jest-dom";
 import React from "react";
-import { render, screen, waitFor } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-import { WysiwygProps } from "@matrix-org/matrix-wysiwyg";
 
 import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
 import RoomContext from "../../../../../src/contexts/RoomContext";
@@ -26,31 +25,8 @@ import { Action } from "../../../../../src/dispatcher/actions";
 import { IRoomState } from "../../../../../src/components/structures/RoomView";
 import { createTestClient, flushPromises, getRoomContext, mkEvent, mkStubRoom } from "../../../../test-utils";
 import { SendWysiwygComposer } from "../../../../../src/components/views/rooms/wysiwyg_composer";
-import * as useComposerFunctions
-    from "../../../../../src/components/views/rooms/wysiwyg_composer/hooks/useComposerFunctions";
 import { aboveLeftOf } from "../../../../../src/components/structures/ContextMenu";
 
-const mockClear = jest.fn();
-
-// 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: (props: WysiwygProps) => {
-        return {
-            ref: { current: null },
-            content: '<b>html</b>',
-            isWysiwygReady: true,
-            wysiwyg: { clear: mockClear },
-            actionStates: {
-                bold: 'enabled',
-                italic: 'enabled',
-                underline: 'enabled',
-                strikeThrough: 'enabled',
-            },
-        };
-    },
-}));
-
 describe('SendWysiwygComposer', () => {
     afterEach(() => {
         jest.resetAllMocks();
@@ -101,9 +77,12 @@ describe('SendWysiwygComposer', () => {
         expect(screen.getByTestId('PlainTextComposer')).toBeTruthy();
     });
 
-    describe.each([{ isRichTextEnabled: true }, { isRichTextEnabled: false }])(
+    describe.each([
+        { isRichTextEnabled: true, emptyContent: '<br>' },
+        { isRichTextEnabled: false, emptyContent: '' },
+    ])(
         'Should focus when receiving an Action.FocusSendMessageComposer action',
-        ({ isRichTextEnabled }) => {
+        ({ isRichTextEnabled, emptyContent }) => {
             afterEach(() => {
                 jest.resetAllMocks();
             });
@@ -111,6 +90,7 @@ describe('SendWysiwygComposer', () => {
             it('Should focus when receiving an Action.FocusSendMessageComposer action', async () => {
                 // Given we don't have focus
                 customRender(jest.fn(), jest.fn(), false, isRichTextEnabled);
+                await waitFor(() => expect(screen.getByRole('textbox')).toHaveAttribute('contentEditable', "true"));
 
                 // When we send the right action
                 defaultDispatcher.dispatch({
@@ -124,9 +104,14 @@ describe('SendWysiwygComposer', () => {
 
             it('Should focus and clear when receiving an Action.ClearAndFocusSendMessageComposer', async () => {
                 // Given we don't have focus
-                const mock = jest.spyOn(useComposerFunctions, 'useComposerFunctions');
+                const onChange = jest.fn();
-                mock.mockReturnValue({ clear: mockClear });
+                customRender(onChange, jest.fn(), false, isRichTextEnabled);
-                customRender(jest.fn(), jest.fn(), false, isRichTextEnabled);
+                await waitFor(() => expect(screen.getByRole('textbox')).toHaveAttribute('contentEditable', "true"));
+
+                fireEvent.input(screen.getByRole('textbox'), {
+                    data: 'foo bar',
+                    inputType: 'insertText',
+                });
 
                 // When we send the right action
                 defaultDispatcher.dispatch({
@@ -135,15 +120,16 @@ describe('SendWysiwygComposer', () => {
                 });
 
                 // Then the component gets the focus
-                await waitFor(() => expect(screen.getByRole('textbox')).toHaveFocus());
+                await waitFor(() => {
-                expect(mockClear).toBeCalledTimes(1);
+                    expect(screen.getByRole('textbox')).toHaveTextContent(/^$/);
-
+                    expect(screen.getByRole('textbox')).toHaveFocus();
-                mock.mockRestore();
+                });
             });
 
             it('Should focus when receiving a reply_to_event action', async () => {
                 // Given we don't have focus
                 customRender(jest.fn(), jest.fn(), false, isRichTextEnabled);
+                await waitFor(() => expect(screen.getByRole('textbox')).toHaveAttribute('contentEditable', "true"));
 
                 // When we send the right action
                 defaultDispatcher.dispatch({

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

@@ -16,35 +16,12 @@ limitations under the License.
 
 import "@testing-library/jest-dom";
 import React from "react";
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-import { InputEventProcessor, Wysiwyg, WysiwygProps } from "@matrix-org/matrix-wysiwyg";
 
 import { WysiwygComposer }
     from "../../../../../../src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer";
 import SettingsStore from "../../../../../../src/settings/SettingsStore";
 
-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: (props: WysiwygProps) => {
-        inputEventProcessor = props.inputEventProcessor ?? null;
-        return {
-            ref: { current: null },
-            content: '<b>html</b>',
-            isWysiwygReady: true,
-            wysiwyg: { clear: () => void 0 },
-            actionStates: {
-                bold: 'enabled',
-                italic: 'enabled',
-                underline: 'enabled',
-                strikeThrough: 'enabled',
-            },
-        };
-    },
-}));
-
 describe('WysiwygComposer', () => {
     const customRender = (
         onChange = (_content: string) => void 0,
@@ -53,7 +30,6 @@ describe('WysiwygComposer', () => {
         initialContent?: string) => {
         return render(
             <WysiwygComposer onChange={onChange} onSend={onSend} disabled={disabled} initialContent={initialContent} />,
-
         );
     };
 
@@ -65,69 +41,85 @@ describe('WysiwygComposer', () => {
         expect(screen.getByRole('textbox')).toHaveAttribute('contentEditable', "false");
     });
 
-    it('Should have focus', () => {
+    describe('Standard behavior', () => {
+        const onChange = jest.fn();
+        const onSend = jest.fn();
+        beforeEach(async () => {
+            customRender(onChange, onSend);
+            await waitFor(() => expect(screen.getByRole('textbox')).toHaveAttribute('contentEditable', "true"));
+        });
+
+        afterEach(() => {
+            onChange.mockReset();
+            onSend.mockReset();
+        });
+
+        it('Should have contentEditable at true', async () => {
+            // Then
+            await waitFor(() => expect(screen.getByRole('textbox')).toHaveAttribute('contentEditable', "true"));
+        });
+
+        it('Should have focus', async () => {
+            // Then
+            await waitFor(() => expect(screen.getByRole('textbox')).toHaveFocus());
+        });
+
+        it('Should call onChange handler', async () => {
             // When
-        customRender(jest.fn(), jest.fn(), false);
+            fireEvent.input(screen.getByRole('textbox'), {
+                data: 'foo bar',
+                inputType: 'insertText',
+            });
 
             // Then
-        expect(screen.getByRole('textbox')).toHaveFocus();
+            await waitFor(() => expect(onChange).toBeCalledWith('foo bar'));
         });
 
-    it('Should call onChange handler', (done) => {
+        it('Should call onSend when Enter is pressed ', async () => {
-        const html = '<b>html</b>';
-        customRender((content) => {
-            expect(content).toBe((html));
-            done();
-        }, jest.fn());
-    });
-
-    it('Should call onSend when Enter is pressed ', () => {
         //When
-        const onSend = jest.fn();
+            fireEvent(screen.getByRole('textbox'), new InputEvent('input', {
-        customRender(jest.fn(), onSend);
+                inputType: "insertParagraph",
-
+            }));
-        // When we tell its inputEventProcessor 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(onSend).toBeCalledTimes(1);
+            await waitFor(() => expect(onSend).toBeCalledTimes(1));
+        });
     });
 
     describe('When settings require Ctrl+Enter to send', () => {
-        beforeEach(() => {
+        const onChange = jest.fn();
+        const onSend = jest.fn();
+        beforeEach(async () => {
             jest.spyOn(SettingsStore, "getValue").mockImplementation((name: string) => {
                 if (name === "MessageComposerInput.ctrlEnterToSend") return true;
             });
+            customRender(onChange, onSend);
+            await waitFor(() => expect(screen.getByRole('textbox')).toHaveAttribute('contentEditable', "true"));
+        });
+
+        afterEach(() => {
+            onChange.mockReset();
+            onSend.mockReset();
         });
 
         it('Should not call onSend when Enter is pressed', async () => {
-            // Given a composer
+            // When
-            const onSend = jest.fn();
+            fireEvent(screen.getByRole('textbox'), new InputEvent('input', {
-            customRender(() => {}, onSend, false);
+                inputType: "insertParagraph",
-
+            }));
-            // 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(onSend).toBeCalledTimes(0);
+            await waitFor(() => expect(onSend).toBeCalledTimes(0));
         });
 
         it('Should send a message when Ctrl+Enter is pressed', async () => {
-            // Given a composer
+            // When
-            const onSend = jest.fn();
+            fireEvent(screen.getByRole('textbox'), new InputEvent('input', {
-            customRender(() => {}, onSend, false);
+                inputType: "sendMessage",
-
+            }));
-            // 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(onSend).toBeCalledTimes(1);
+            await waitFor(() => expect(onSend).toBeCalledTimes(1));
         });
     });
 });

test/setup/setupManualMocks.ts

@@ -16,6 +16,7 @@ limitations under the License.
 
 import fetchMock from "fetch-mock-jest";
 import { TextDecoder, TextEncoder } from "util";
+import fetch from 'node-fetch';
 
 // jest 27 removes setImmediate from jsdom
 // polyfill until setImmediate use in client can be removed
@@ -87,6 +88,8 @@ fetchMock.get("/image-file-stub", "image file stub");
 // @ts-ignore
 window.fetch = fetchMock.sandbox();
 
+window.Response = fetch.Response;
+
 // set up mediaDevices mock
 Object.defineProperty(navigator, "mediaDevices", {
     value: {