Add test for plain mode

This commit is contained in:
Florian Duros 2022-10-26 17:16:13 +02:00
parent f1610dae3d
commit fb751c3c7b
No known key found for this signature in database
GPG key ID: 9700AA5870258A0B
7 changed files with 213 additions and 107 deletions

View file

@ -26,6 +26,8 @@ import { Action } from "../../../../../src/dispatcher/actions";
import { IRoomState } from "../../../../../src/components/structures/RoomView";
import { createTestClient, 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";
const mockClear = jest.fn();
@ -68,86 +70,119 @@ describe('SendWysiwygComposer', () => {
const defaultRoomContext: IRoomState = getRoomContext(mockRoom, {});
const customRender = (onChange = (_content: string) => void 0, onSend = () => void 0, disabled = false) => {
const customRender = (
onChange = (_content: string) => void 0,
onSend = () => void 0,
disabled = false,
isRichTextEnabled = true) => {
return render(
<MatrixClientContext.Provider value={mockClient}>
<RoomContext.Provider value={defaultRoomContext}>
<SendWysiwygComposer onChange={onChange} onSend={onSend} disabled={disabled} isRichTextEnabled={true} />
<SendWysiwygComposer onChange={onChange} onSend={onSend} disabled={disabled} isRichTextEnabled={isRichTextEnabled} />
</RoomContext.Provider>
</MatrixClientContext.Provider>,
);
};
it('Should focus when receiving an Action.FocusSendMessageComposer action', async () => {
// Given we don't have focus
customRender(jest.fn(), jest.fn());
screen.getByLabelText('Bold').focus();
expect(screen.getByRole('textbox')).not.toHaveFocus();
it('Should render WysiwygComposer when isRichTextEnabled is at true', () => {
// When
customRender(jest.fn(), jest.fn(), false, true);
// When we send the right action
defaultDispatcher.dispatch({
action: Action.FocusSendMessageComposer,
context: null,
});
// Then the component gets the focus
await waitFor(() => expect(screen.getByRole('textbox')).toHaveFocus());
// Then
expect(screen.getByTestId('WysiwygComposer')).toBeTruthy();
});
it('Should focus and clear when receiving an Action.ClearAndFocusSendMessageComposer', async () => {
// Given we don't have focus
customRender(jest.fn(), jest.fn());
screen.getByLabelText('Bold').focus();
expect(screen.getByRole('textbox')).not.toHaveFocus();
it('Should render PlainTextComposer when isRichTextEnabled is at false', () => {
// When
customRender(jest.fn(), jest.fn(), false, false);
// When we send the right action
defaultDispatcher.dispatch({
action: Action.ClearAndFocusSendMessageComposer,
context: null,
});
// Then the component gets the focus
await waitFor(() => expect(screen.getByRole('textbox')).toHaveFocus());
expect(mockClear).toBeCalledTimes(1);
// Then
expect(screen.getByTestId('PlainTextComposer')).toBeTruthy();
});
it('Should focus when receiving a reply_to_event action', async () => {
// Given we don't have focus
customRender(jest.fn(), jest.fn());
screen.getByLabelText('Bold').focus();
expect(screen.getByRole('textbox')).not.toHaveFocus();
describe.each([{ isRichTextEnabled: true }, { isRichTextEnabled: false }])(
'Should focus when receiving an Action.FocusSendMessageComposer action',
({ isRichTextEnabled }) => {
afterEach(() => {
jest.resetAllMocks();
});
// When we send the right action
defaultDispatcher.dispatch({
action: "reply_to_event",
context: null,
it('Should focus when receiving an Action.FocusSendMessageComposer action', async () => {
// Given we don't have focus
customRender(jest.fn(), jest.fn(), false, isRichTextEnabled);
document.head.focus();
// screen.getByLabelText('Bold').focus();
// expect(screen.getByRole('textbox')).not.toHaveFocus();
// When we send the right action
defaultDispatcher.dispatch({
action: Action.FocusSendMessageComposer,
context: null,
});
// Then the component gets the focus
await waitFor(() => expect(screen.getByRole('textbox')).toHaveFocus());
});
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);
// screen.getByLabelText('Bold').focus();
// expect(screen.getByRole('textbox')).not.toHaveFocus();
// When we send the right action
defaultDispatcher.dispatch({
action: Action.ClearAndFocusSendMessageComposer,
context: null,
});
// Then the component gets the focus
await waitFor(() => expect(screen.getByRole('textbox')).toHaveFocus());
expect(mockClear).toBeCalledTimes(1);
mock.mockRestore();
});
it('Should focus when receiving a reply_to_event action', async () => {
// Given we don't have focus
customRender(jest.fn(), jest.fn(), false, isRichTextEnabled);
// screen.getByLabelText('Bold').focus();
// expect(screen.getByRole('textbox')).not.toHaveFocus();
// When we send the right action
defaultDispatcher.dispatch({
action: "reply_to_event",
context: null,
});
// Then the component gets the focus
await waitFor(() => expect(screen.getByRole('textbox')).toHaveFocus());
});
it('Should not focus when disabled', async () => {
// Given we don't have focus and we are disabled
customRender(jest.fn(), jest.fn(), true, isRichTextEnabled);
expect(screen.getByRole('textbox')).not.toHaveFocus();
// When we send an action that would cause us to get focus
defaultDispatcher.dispatch({
action: Action.FocusSendMessageComposer,
context: null,
});
// (Send a second event to exercise the clearTimeout logic)
defaultDispatcher.dispatch({
action: Action.FocusSendMessageComposer,
context: null,
});
// Wait for event dispatch to happen
await new Promise((r) => setTimeout(r, 200));
// Then we don't get it because we are disabled
expect(screen.getByRole('textbox')).not.toHaveFocus();
});
});
// Then the component gets the focus
await waitFor(() => expect(screen.getByRole('textbox')).toHaveFocus());
});
it('Should not focus when disabled', async () => {
// Given we don't have focus and we are disabled
customRender(jest.fn(), jest.fn(), true);
expect(screen.getByRole('textbox')).not.toHaveFocus();
// When we send an action that would cause us to get focus
defaultDispatcher.dispatch({
action: Action.FocusSendMessageComposer,
context: null,
});
// (Send a second event to exercise the clearTimeout logic)
defaultDispatcher.dispatch({
action: Action.FocusSendMessageComposer,
context: null,
});
// Wait for event dispatch to happen
await new Promise((r) => setTimeout(r, 200));
// Then we don't get it because we are disabled
expect(screen.getByRole('textbox')).not.toHaveFocus();
});
});