Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Remove useWysiwyg mock (#9578)
Browse files Browse the repository at this point in the history
  • Loading branch information
@florianduros
florianduros authored Nov 16, 2022
1 parent cf3c899 commit 3243d21
Show file tree
Hide file tree
Showing 5 changed files with 114 additions and 168 deletions.
9 changes: 0 additions & 9 deletions test/components/views/rooms/MessageComposer-test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
82 changes: 28 additions & 54 deletions test/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = '<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();
Expand All @@ -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,
});
Expand All @@ -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 () => {
Expand All @@ -115,24 +89,29 @@ 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();
});

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({
Expand All @@ -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(<MatrixClientContext.Provider value={mockClient}>
<RoomContext.Provider value={defaultRoomContext}>
<EditWysiwygComposer editorStateTransfer={editorStateTransfer} />
</RoomContext.Provider>
</MatrixClientContext.Provider>);

(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": {
Expand Down Expand Up @@ -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();
Expand Down
62 changes: 24 additions & 38 deletions test/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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();
Expand Down Expand Up @@ -101,16 +77,20 @@ 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();
});

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({
Expand All @@ -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({
Expand All @@ -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({
Expand All @@ -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();

Expand Down
Loading

0 comments on commit 3243d21

Please sign in to comment.