From 3243d215e67fed72cc44e9de28a7b3fe8457c563 Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Wed, 16 Nov 2022 16:38:00 +0100 Subject: [PATCH] Remove useWysiwyg mock (#9578) --- .../views/rooms/MessageComposer-test.tsx | 9 -- .../EditWysiwygComposer-test.tsx | 82 ++++------- .../SendWysiwygComposer-test.tsx | 62 ++++----- .../components/WysiwygComposer-test.tsx | 130 ++++++++---------- test/setup/setupManualMocks.ts | 3 + 5 files changed, 116 insertions(+), 170 deletions(-) diff --git a/test/components/views/rooms/MessageComposer-test.tsx b/test/components/views/rooms/MessageComposer-test.tsx index bacf951dea..4ef5966a73 100644 --- a/test/components/views/rooms/MessageComposer-test.tsx +++ b/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(); diff --git a/test/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx b/test/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx index 884e8a352c..ddb691460b 100644 --- a/test/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx +++ b/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 { WysiwygProps } from "@matrix-org/matrix-wysiwyg"; +import { fireEvent, render, screen, waitFor } from "@testing-library/react"; 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 = 'html'; -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 to this new content", + "formatted_body": 'Replying to 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(true, editorStateTransfer); + customRender(false, 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); - (await screen.findByText('Cancel')).click(); + screen.getByText('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"); - - const renderer = customRender(true); - - mockContent = 'my new content'; - renderer.rerender( - - - - ); - - (await screen.findByText('Save')).click(); + fireEvent.input(screen.getByRole('textbox'), { + data: 'foo bar', + inputType: 'insertText', + }); + await waitFor(() => expect(screen.getByText('Save')).not.toHaveAttribute('disabled')); // 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(); diff --git a/test/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx b/test/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx index c88fb34a25..1a580aa49a 100644 --- a/test/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx +++ b/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 { WysiwygProps } from "@matrix-org/matrix-wysiwyg"; +import { fireEvent, render, screen, waitFor } from "@testing-library/react"; 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: 'html', - isWysiwygReady: true, - wysiwyg: { clear: mockClear }, - actionStates: { - bold: 'enabled', - italic: 'enabled', - underline: 'enabled', - strikeThrough: 'enabled', - }, - }; - }, -})); - describe('SendWysiwygComposer', () => { afterEach(() => { jest.resetAllMocks(); @@ -101,16 +77,20 @@ describe('SendWysiwygComposer', () => { expect(screen.getByTestId('PlainTextComposer')).toBeTruthy(); }); - describe.each([{ isRichTextEnabled: true }, { isRichTextEnabled: false }])( + describe.each([ + { isRichTextEnabled: true, emptyContent: '
' }, + { isRichTextEnabled: false, emptyContent: '' }, + ])( 'Should focus when receiving an Action.FocusSendMessageComposer action', - ({ isRichTextEnabled }) => { + ({ isRichTextEnabled, emptyContent }) => { afterEach(() => { jest.resetAllMocks(); }); it('Should focus when receiving an Action.FocusSendMessageComposer action', async () => { - // Given we don't have focus + // 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({ @@ -123,10 +103,15 @@ 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'); - mock.mockReturnValue({ clear: mockClear }); - customRender(jest.fn(), jest.fn(), false, isRichTextEnabled); + // Given we don't have focus + const onChange = jest.fn(); + customRender(onChange, 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()); - expect(mockClear).toBeCalledTimes(1); - - mock.mockRestore(); + await waitFor(() => { + expect(screen.getByRole('textbox')).toHaveTextContent(/^$/); + expect(screen.getByRole('textbox')).toHaveFocus(); + }); }); it('Should focus when receiving a reply_to_event action', async () => { - // Given we don't have focus + // 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({ @@ -156,7 +142,7 @@ describe('SendWysiwygComposer', () => { }); it('Should not focus when disabled', async () => { - // Given we don't have focus and we are disabled + // Given we don't have focus and we are disabled customRender(jest.fn(), jest.fn(), true, isRichTextEnabled); expect(screen.getByRole('textbox')).not.toHaveFocus(); diff --git a/test/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx b/test/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx index f7ba6aa4a8..7dad006dcc 100644 --- a/test/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx +++ b/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 { InputEventProcessor, Wysiwyg, WysiwygProps } from "@matrix-org/matrix-wysiwyg"; +import { fireEvent, render, screen, waitFor } from "@testing-library/react"; 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: 'html', - 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( , - ); }; @@ -65,69 +41,85 @@ describe('WysiwygComposer', () => { expect(screen.getByRole('textbox')).toHaveAttribute('contentEditable', "false"); }); - it('Should have focus', () => { - // When - customRender(jest.fn(), jest.fn(), false); - - // Then - expect(screen.getByRole('textbox')).toHaveFocus(); - }); - - it('Should call onChange handler', (done) => { - const html = 'html'; - customRender((content) => { - expect(content).toBe((html)); - done(); - }, jest.fn()); - }); - - it('Should call onSend when Enter is pressed ', () => { - //When + describe('Standard behavior', () => { + const onChange = jest.fn(); const onSend = jest.fn(); - customRender(jest.fn(), onSend); + beforeEach(async () => { + customRender(onChange, onSend); + await waitFor(() => expect(screen.getByRole('textbox')).toHaveAttribute('contentEditable', "true")); + }); - // 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); + afterEach(() => { + onChange.mockReset(); + onSend.mockReset(); + }); - // Then it sends a message - expect(onSend).toBeCalledTimes(1); + 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 + fireEvent.input(screen.getByRole('textbox'), { + data: 'foo bar', + inputType: 'insertText', + }); + + // Then + await waitFor(() => expect(onChange).toBeCalledWith('foo bar')); + }); + + it('Should call onSend when Enter is pressed ', async () => { + //When + fireEvent(screen.getByRole('textbox'), new InputEvent('input', { + inputType: "insertParagraph", + })); + + // Then it sends a message + 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 - const onSend = jest.fn(); - customRender(() => {}, onSend, 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); + // When + fireEvent(screen.getByRole('textbox'), new InputEvent('input', { + inputType: "insertParagraph", + })); // 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 - const onSend = jest.fn(); - customRender(() => {}, onSend, 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); + // When + fireEvent(screen.getByRole('textbox'), new InputEvent('input', { + inputType: "sendMessage", + })); // Then it sends a message - expect(onSend).toBeCalledTimes(1); + await waitFor(() => expect(onSend).toBeCalledTimes(1)); }); }); }); diff --git a/test/setup/setupManualMocks.ts b/test/setup/setupManualMocks.ts index 31afddb205..d627430ba7 100644 --- a/test/setup/setupManualMocks.ts +++ b/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: {