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

Commit 3243d21

Browse files
floriandurosflorianduros
authored
Remove useWysiwyg mock (#9578)
1 parent cf3c899 commit 3243d21

File tree

5 files changed

+114
-168
lines changed

5 files changed

+114
-168
lines changed

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

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -42,15 +42,6 @@ import { addTextToComposer } from "../../../test-utils/composer";
4242
import UIStore, { UI_EVENTS } from "../../../../src/stores/UIStore";
4343
import { SendWysiwygComposer } from "../../../../src/components/views/rooms/wysiwyg_composer";
4444

45-
// The wysiwyg fetch wasm bytes and a specific workaround is needed to make it works in a node (jest) environnement
46-
// See https://github.com/matrix-org/matrix-wysiwyg/blob/main/platforms/web/test.setup.ts
47-
jest.mock("@matrix-org/matrix-wysiwyg", () => ({
48-
useWysiwyg: () => {
49-
return { ref: { current: null }, isWysiwygReady: true, wysiwyg: { clear: () => void 0 },
50-
actionStates: { bold: 'enabled', italic: 'enabled', underline: 'enabled', strikeThrough: 'enabled' } };
51-
},
52-
}));
53-
5445
describe("MessageComposer", () => {
5546
stubClient();
5647
const cli = createTestClient();

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

Lines changed: 28 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -16,49 +16,21 @@ limitations under the License.
1616

1717
import "@testing-library/jest-dom";
1818
import React from "react";
19-
import { render, screen, waitFor } from "@testing-library/react";
20-
import { WysiwygProps } from "@matrix-org/matrix-wysiwyg";
19+
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
2120

2221
import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
2322
import RoomContext from "../../../../../src/contexts/RoomContext";
2423
import defaultDispatcher from "../../../../../src/dispatcher/dispatcher";
2524
import { Action } from "../../../../../src/dispatcher/actions";
2625
import { IRoomState } from "../../../../../src/components/structures/RoomView";
27-
import { createTestClient, getRoomContext, mkEvent, mkStubRoom } from "../../../../test-utils";
26+
import { createTestClient, flushPromises, getRoomContext, mkEvent, mkStubRoom } from "../../../../test-utils";
2827
import { EditWysiwygComposer }
2928
from "../../../../../src/components/views/rooms/wysiwyg_composer";
3029
import EditorStateTransfer from "../../../../../src/utils/EditorStateTransfer";
3130

32-
const mockClear = jest.fn();
33-
34-
let initialContent: string;
35-
const defaultContent = '<b>html</b>';
36-
let mockContent = defaultContent;
37-
38-
// The wysiwyg fetch wasm bytes and a specific workaround is needed to make it works in a node (jest) environnement
39-
// See https://github.com/matrix-org/matrix-wysiwyg/blob/main/platforms/web/test.setup.ts
40-
jest.mock("@matrix-org/matrix-wysiwyg", () => ({
41-
useWysiwyg: (props: WysiwygProps) => {
42-
initialContent = props.initialContent;
43-
return {
44-
ref: { current: null },
45-
content: mockContent,
46-
isWysiwygReady: true,
47-
wysiwyg: { clear: mockClear },
48-
actionStates: {
49-
bold: 'enabled',
50-
italic: 'enabled',
51-
underline: 'enabled',
52-
strikeThrough: 'enabled',
53-
},
54-
};
55-
},
56-
}));
57-
5831
describe('EditWysiwygComposer', () => {
5932
afterEach(() => {
6033
jest.resetAllMocks();
61-
mockContent = defaultContent;
6234
});
6335

6436
const mockClient = createTestClient();
@@ -70,7 +42,7 @@ describe('EditWysiwygComposer', () => {
7042
"msgtype": "m.text",
7143
"body": "Replying to this",
7244
"format": "org.matrix.custom.html",
73-
"formatted_body": "Replying <b>to</b> this new content",
45+
"formatted_body": 'Replying <b>to</b> this new content',
7446
},
7547
event: true,
7648
});
@@ -96,10 +68,12 @@ describe('EditWysiwygComposer', () => {
9668
describe('Initialize with content', () => {
9769
it('Should initialize useWysiwyg with html content', async () => {
9870
// When
99-
customRender(true);
71+
customRender(false, editorStateTransfer);
72+
await waitFor(() => expect(screen.getByRole('textbox')).toHaveAttribute('contentEditable', "true"));
10073

10174
// Then
102-
expect(initialContent).toBe(mockEvent.getContent()['formatted_body']);
75+
await waitFor(() =>
76+
expect(screen.getByRole('textbox')).toContainHTML(mockEvent.getContent()['formatted_body']));
10377
});
10478

10579
it('Should initialize useWysiwyg with plain text content', async () => {
@@ -115,24 +89,29 @@ describe('EditWysiwygComposer', () => {
11589
event: true,
11690
});
11791
const editorStateTransfer = new EditorStateTransfer(mockEvent);
118-
119-
customRender(true, editorStateTransfer);
92+
customRender(false, editorStateTransfer);
93+
await waitFor(() => expect(screen.getByRole('textbox')).toHaveAttribute('contentEditable', "true"));
12094

12195
// Then
122-
expect(initialContent).toBe(mockEvent.getContent().body);
96+
await waitFor(() =>
97+
expect(screen.getByRole('textbox')).toContainHTML(mockEvent.getContent()['body']));
12398
});
12499
});
125100

126101
describe('Edit and save actions', () => {
102+
beforeEach(async () => {
103+
customRender();
104+
await waitFor(() => expect(screen.getByRole('textbox')).toHaveAttribute('contentEditable', "true"));
105+
});
106+
127107
const spyDispatcher = jest.spyOn(defaultDispatcher, "dispatch");
128108
afterEach(() => {
129109
spyDispatcher.mockRestore();
130110
});
131111

132112
it('Should cancel edit on cancel button click', async () => {
133113
// When
134-
customRender(true);
135-
(await screen.findByText('Cancel')).click();
114+
screen.getByText('Cancel').click();
136115

137116
// Then
138117
expect(spyDispatcher).toBeCalledWith({
@@ -149,27 +128,22 @@ describe('EditWysiwygComposer', () => {
149128
it('Should send message on save button click', async () => {
150129
// When
151130
const spyDispatcher = jest.spyOn(defaultDispatcher, "dispatch");
152-
153-
const renderer = customRender(true);
154-
155-
mockContent = 'my new content';
156-
renderer.rerender(<MatrixClientContext.Provider value={mockClient}>
157-
<RoomContext.Provider value={defaultRoomContext}>
158-
<EditWysiwygComposer editorStateTransfer={editorStateTransfer} />
159-
</RoomContext.Provider>
160-
</MatrixClientContext.Provider>);
161-
162-
(await screen.findByText('Save')).click();
131+
fireEvent.input(screen.getByRole('textbox'), {
132+
data: 'foo bar',
133+
inputType: 'insertText',
134+
});
135+
await waitFor(() => expect(screen.getByText('Save')).not.toHaveAttribute('disabled'));
163136

164137
// Then
138+
screen.getByText('Save').click();
165139
const expectedContent = {
166-
"body": ` * ${mockContent}`,
140+
"body": ` * foo bar`,
167141
"format": "org.matrix.custom.html",
168-
"formatted_body": ` * ${mockContent}`,
142+
"formatted_body": ` * foo bar`,
169143
"m.new_content": {
170-
"body": mockContent,
144+
"body": "foo bar",
171145
"format": "org.matrix.custom.html",
172-
"formatted_body": mockContent,
146+
"formatted_body": "foo bar",
173147
"msgtype": "m.text",
174148
},
175149
"m.relates_to": {
@@ -217,7 +191,7 @@ describe('EditWysiwygComposer', () => {
217191
});
218192

219193
// Wait for event dispatch to happen
220-
await new Promise((r) => setTimeout(r, 200));
194+
await flushPromises();
221195

222196
// Then we don't get it because we are disabled
223197
expect(screen.getByRole('textbox')).not.toHaveFocus();

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

Lines changed: 24 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,7 @@ limitations under the License.
1616

1717
import "@testing-library/jest-dom";
1818
import React from "react";
19-
import { render, screen, waitFor } from "@testing-library/react";
20-
import { WysiwygProps } from "@matrix-org/matrix-wysiwyg";
19+
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
2120

2221
import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
2322
import RoomContext from "../../../../../src/contexts/RoomContext";
@@ -26,31 +25,8 @@ import { Action } from "../../../../../src/dispatcher/actions";
2625
import { IRoomState } from "../../../../../src/components/structures/RoomView";
2726
import { createTestClient, flushPromises, getRoomContext, mkEvent, mkStubRoom } from "../../../../test-utils";
2827
import { SendWysiwygComposer } from "../../../../../src/components/views/rooms/wysiwyg_composer";
29-
import * as useComposerFunctions
30-
from "../../../../../src/components/views/rooms/wysiwyg_composer/hooks/useComposerFunctions";
3128
import { aboveLeftOf } from "../../../../../src/components/structures/ContextMenu";
3229

33-
const mockClear = jest.fn();
34-
35-
// The wysiwyg fetch wasm bytes and a specific workaround is needed to make it works in a node (jest) environnement
36-
// See https://github.com/matrix-org/matrix-wysiwyg/blob/main/platforms/web/test.setup.ts
37-
jest.mock("@matrix-org/matrix-wysiwyg", () => ({
38-
useWysiwyg: (props: WysiwygProps) => {
39-
return {
40-
ref: { current: null },
41-
content: '<b>html</b>',
42-
isWysiwygReady: true,
43-
wysiwyg: { clear: mockClear },
44-
actionStates: {
45-
bold: 'enabled',
46-
italic: 'enabled',
47-
underline: 'enabled',
48-
strikeThrough: 'enabled',
49-
},
50-
};
51-
},
52-
}));
53-
5430
describe('SendWysiwygComposer', () => {
5531
afterEach(() => {
5632
jest.resetAllMocks();
@@ -101,16 +77,20 @@ describe('SendWysiwygComposer', () => {
10177
expect(screen.getByTestId('PlainTextComposer')).toBeTruthy();
10278
});
10379

104-
describe.each([{ isRichTextEnabled: true }, { isRichTextEnabled: false }])(
80+
describe.each([
81+
{ isRichTextEnabled: true, emptyContent: '<br>' },
82+
{ isRichTextEnabled: false, emptyContent: '' },
83+
])(
10584
'Should focus when receiving an Action.FocusSendMessageComposer action',
106-
({ isRichTextEnabled }) => {
85+
({ isRichTextEnabled, emptyContent }) => {
10786
afterEach(() => {
10887
jest.resetAllMocks();
10988
});
11089

11190
it('Should focus when receiving an Action.FocusSendMessageComposer action', async () => {
112-
// Given we don't have focus
91+
// Given we don't have focus
11392
customRender(jest.fn(), jest.fn(), false, isRichTextEnabled);
93+
await waitFor(() => expect(screen.getByRole('textbox')).toHaveAttribute('contentEditable', "true"));
11494

11595
// When we send the right action
11696
defaultDispatcher.dispatch({
@@ -123,10 +103,15 @@ describe('SendWysiwygComposer', () => {
123103
});
124104

125105
it('Should focus and clear when receiving an Action.ClearAndFocusSendMessageComposer', async () => {
126-
// Given we don't have focus
127-
const mock = jest.spyOn(useComposerFunctions, 'useComposerFunctions');
128-
mock.mockReturnValue({ clear: mockClear });
129-
customRender(jest.fn(), jest.fn(), false, isRichTextEnabled);
106+
// Given we don't have focus
107+
const onChange = jest.fn();
108+
customRender(onChange, jest.fn(), false, isRichTextEnabled);
109+
await waitFor(() => expect(screen.getByRole('textbox')).toHaveAttribute('contentEditable', "true"));
110+
111+
fireEvent.input(screen.getByRole('textbox'), {
112+
data: 'foo bar',
113+
inputType: 'insertText',
114+
});
130115

131116
// When we send the right action
132117
defaultDispatcher.dispatch({
@@ -135,15 +120,16 @@ describe('SendWysiwygComposer', () => {
135120
});
136121

137122
// Then the component gets the focus
138-
await waitFor(() => expect(screen.getByRole('textbox')).toHaveFocus());
139-
expect(mockClear).toBeCalledTimes(1);
140-
141-
mock.mockRestore();
123+
await waitFor(() => {
124+
expect(screen.getByRole('textbox')).toHaveTextContent(/^$/);
125+
expect(screen.getByRole('textbox')).toHaveFocus();
126+
});
142127
});
143128

144129
it('Should focus when receiving a reply_to_event action', async () => {
145-
// Given we don't have focus
130+
// Given we don't have focus
146131
customRender(jest.fn(), jest.fn(), false, isRichTextEnabled);
132+
await waitFor(() => expect(screen.getByRole('textbox')).toHaveAttribute('contentEditable', "true"));
147133

148134
// When we send the right action
149135
defaultDispatcher.dispatch({
@@ -156,7 +142,7 @@ describe('SendWysiwygComposer', () => {
156142
});
157143

158144
it('Should not focus when disabled', async () => {
159-
// Given we don't have focus and we are disabled
145+
// Given we don't have focus and we are disabled
160146
customRender(jest.fn(), jest.fn(), true, isRichTextEnabled);
161147
expect(screen.getByRole('textbox')).not.toHaveFocus();
162148

0 commit comments

Comments
 (0)