mirror of https://github.com/vector-im/riot-web
Remove useWysiwyg mock (#9578)
Florian Duros
GitHub
parent
cf3c899dd1
commit
3243d215e6
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
@ -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(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(<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": {
|
||||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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: '<b>html</b>',
|
||||
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: '<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({
|
||||
|
|
@ -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();
|
||||
|
||||
|
|
|
|||
|
|
@ -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: '<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', () => {
|
||||
// When
|
||||
customRender(jest.fn(), jest.fn(), false);
|
||||
|
||||
// Then
|
||||
expect(screen.getByRole('textbox')).toHaveFocus();
|
||||
});
|
||||
|
||||
it('Should call onChange handler', (done) => {
|
||||
const html = '<b>html</b>';
|
||||
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));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue