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: {