imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Apply prettier formatting

Browse source
This commit is contained in:
Michael Weimann 2022-12-12 12:24:14 +01:00
parent 1cac306093
commit 526645c791
No known key found for this signature in database
GPG key ID: 53F535A266BB9584
1576 changed files with 65385 additions and 62478 deletions
Download patch file Download diff file Expand all files Collapse all files

61
test/components/views/rooms/wysiwyg_composer/components/FormattingButtons-test.tsx
View file

@ -14,15 +14,14 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import React from "react";
import { render, screen } from "@testing-library/react";
import userEvent from '@testing-library/user-event';
import { AllActionStates, FormattingFunctions } from '@matrix-org/matrix-wysiwyg';
import userEvent from "@testing-library/user-event";
import { AllActionStates, FormattingFunctions } from "@matrix-org/matrix-wysiwyg";
import { FormattingButtons }
from "../../../../../../src/components/views/rooms/wysiwyg_composer/components/FormattingButtons";
import { FormattingButtons } from "../../../../../../src/components/views/rooms/wysiwyg_composer/components/FormattingButtons";
describe('FormattingButtons', () => {
describe("FormattingButtons", () => {
const wysiwyg = {
bold: jest.fn(),
italic: jest.fn(),
@ -32,37 +31,37 @@ describe('FormattingButtons', () => {
} as unknown as FormattingFunctions;
const actionStates = {
bold: 'reversed',
italic: 'reversed',
underline: 'enabled',
strikeThrough: 'enabled',
inlineCode: 'enabled',
bold: "reversed",
italic: "reversed",
underline: "enabled",
strikeThrough: "enabled",
inlineCode: "enabled",
} as AllActionStates;
afterEach(() => {
jest.resetAllMocks();
});
it('Should have the correspond CSS classes', () => {
it("Should have the correspond CSS classes", () => {
// When
render(<FormattingButtons composer={wysiwyg} actionStates={actionStates} />);
// Then
expect(screen.getByLabelText('Bold')).toHaveClass('mx_FormattingButtons_active');
expect(screen.getByLabelText('Italic')).toHaveClass('mx_FormattingButtons_active');
expect(screen.getByLabelText('Underline')).not.toHaveClass('mx_FormattingButtons_active');
expect(screen.getByLabelText('Strikethrough')).not.toHaveClass('mx_FormattingButtons_active');
expect(screen.getByLabelText('Code')).not.toHaveClass('mx_FormattingButtons_active');
expect(screen.getByLabelText("Bold")).toHaveClass("mx_FormattingButtons_active");
expect(screen.getByLabelText("Italic")).toHaveClass("mx_FormattingButtons_active");
expect(screen.getByLabelText("Underline")).not.toHaveClass("mx_FormattingButtons_active");
expect(screen.getByLabelText("Strikethrough")).not.toHaveClass("mx_FormattingButtons_active");
expect(screen.getByLabelText("Code")).not.toHaveClass("mx_FormattingButtons_active");
});
it('Should call wysiwyg function on button click', () => {
it("Should call wysiwyg function on button click", () => {
// When
render(<FormattingButtons composer={wysiwyg} actionStates={actionStates} />);
screen.getByLabelText('Bold').click();
screen.getByLabelText('Italic').click();
screen.getByLabelText('Underline').click();
screen.getByLabelText('Strikethrough').click();
screen.getByLabelText('Code').click();
screen.getByLabelText("Bold").click();
screen.getByLabelText("Italic").click();
screen.getByLabelText("Underline").click();
screen.getByLabelText("Strikethrough").click();
screen.getByLabelText("Code").click();
// Then
expect(wysiwyg.bold).toHaveBeenCalledTimes(1);
@ -72,29 +71,29 @@ describe('FormattingButtons', () => {
expect(wysiwyg.inlineCode).toHaveBeenCalledTimes(1);
});
it('Should display the tooltip on mouse over', async () => {
it("Should display the tooltip on mouse over", async () => {
// When
const user = userEvent.setup();
render(<FormattingButtons composer={wysiwyg} actionStates={actionStates} />);
await user.hover(screen.getByLabelText('Bold'));
await user.hover(screen.getByLabelText("Bold"));
// Then
expect(await screen.findByText('Bold')).toBeTruthy();
expect(await screen.findByText("Bold")).toBeTruthy();
});
it('Should not have hover style when active', async () => {
it("Should not have hover style when active", async () => {
// When
const user = userEvent.setup();
render(<FormattingButtons composer={wysiwyg} actionStates={actionStates} />);
await user.hover(screen.getByLabelText('Bold'));
await user.hover(screen.getByLabelText("Bold"));
// Then
expect(screen.getByLabelText('Bold')).not.toHaveClass('mx_FormattingButtons_Button_hover');
expect(screen.getByLabelText("Bold")).not.toHaveClass("mx_FormattingButtons_Button_hover");
// When
await user.hover(screen.getByLabelText('Underline'));
await user.hover(screen.getByLabelText("Underline"));
// Then
expect(screen.getByLabelText('Underline')).toHaveClass('mx_FormattingButtons_Button_hover');
expect(screen.getByLabelText("Underline")).toHaveClass("mx_FormattingButtons_Button_hover");
});
});

66
test/components/views/rooms/wysiwyg_composer/components/PlainTextComposer-test.tsx
View file

@ -14,84 +14,89 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React from 'react';
import React from "react";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { PlainTextComposer }
from "../../../../../../src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer";
import { PlainTextComposer } from "../../../../../../src/components/views/rooms/wysiwyg_composer/components/PlainTextComposer";
describe('PlainTextComposer', () => {
describe("PlainTextComposer", () => {
const customRender = (
onChange = (_content: string) => void 0,
onSend = () => void 0,
disabled = false,
initialContent?: string) => {
initialContent?: string,
) => {
return render(
<PlainTextComposer onChange={onChange} onSend={onSend} disabled={disabled} initialContent={initialContent} />,
<PlainTextComposer
onChange={onChange}
onSend={onSend}
disabled={disabled}
initialContent={initialContent}
/>,
);
};
it('Should have contentEditable at false when disabled', () => {
it("Should have contentEditable at false when disabled", () => {
// When
customRender(jest.fn(), jest.fn(), true);
// Then
expect(screen.getByRole('textbox')).toHaveAttribute('contentEditable', "false");
expect(screen.getByRole("textbox")).toHaveAttribute("contentEditable", "false");
});
it('Should have focus', () => {
it("Should have focus", () => {
// When
customRender(jest.fn(), jest.fn(), false);
// Then
expect(screen.getByRole('textbox')).toHaveFocus();
expect(screen.getByRole("textbox")).toHaveFocus();
});
it('Should call onChange handler', async () => {
it("Should call onChange handler", async () => {
// When
const content = 'content';
const content = "content";
const onChange = jest.fn();
customRender(onChange, jest.fn());
await userEvent.type(screen.getByRole('textbox'), content);
await userEvent.type(screen.getByRole("textbox"), content);
// Then
expect(onChange).toBeCalledWith(content);
});
it('Should call onSend when Enter is pressed', async () => {
it("Should call onSend when Enter is pressed", async () => {
//When
const onSend = jest.fn();
customRender(jest.fn(), onSend);
await userEvent.type(screen.getByRole('textbox'), '{enter}');
await userEvent.type(screen.getByRole("textbox"), "{enter}");
// Then it sends a message
expect(onSend).toBeCalledTimes(1);
});
it('Should clear textbox content when clear is called', async () => {
it("Should clear textbox content when clear is called", async () => {
//When
let composer;
render(
<PlainTextComposer onChange={jest.fn()} onSend={jest.fn()}>
{ (ref, composerFunctions) => {
{(ref, composerFunctions) => {
composer = composerFunctions;
return null;
} }
}}
</PlainTextComposer>,
);
await userEvent.type(screen.getByRole('textbox'), 'content');
expect(screen.getByRole('textbox').innerHTML).toBe('content');
await userEvent.type(screen.getByRole("textbox"), "content");
expect(screen.getByRole("textbox").innerHTML).toBe("content");
composer.clear();
// Then
expect(screen.getByRole('textbox').innerHTML).toBeFalsy();
expect(screen.getByRole("textbox").innerHTML).toBeFalsy();
});
it('Should have data-is-expanded when it has two lines', async () => {
it("Should have data-is-expanded when it has two lines", async () => {
let resizeHandler: ResizeObserverCallback = jest.fn();
let editor: Element | null = null;
jest.spyOn(global, 'ResizeObserver').mockImplementation((handler) => {
jest.spyOn(global, "ResizeObserver").mockImplementation((handler) => {
resizeHandler = handler;
return {
observe: (element) => {
@ -100,21 +105,18 @@ describe('PlainTextComposer', () => {
unobserve: jest.fn(),
disconnect: jest.fn(),
};
},
);
jest.spyOn(global, 'requestAnimationFrame').mockImplementation(cb => {
});
jest.spyOn(global, "requestAnimationFrame").mockImplementation((cb) => {
cb(0);
return 0;
});
//When
render(
<PlainTextComposer onChange={jest.fn()} onSend={jest.fn()} />,
);
render(<PlainTextComposer onChange={jest.fn()} onSend={jest.fn()} />);
// Then
expect(screen.getByTestId('WysiwygComposerEditor').attributes['data-is-expanded'].value).toBe('false');
expect(editor).toBe(screen.getByRole('textbox'));
expect(screen.getByTestId("WysiwygComposerEditor").attributes["data-is-expanded"].value).toBe("false");
expect(editor).toBe(screen.getByRole("textbox"));
// When
resizeHandler(
@ -124,7 +126,7 @@ describe('PlainTextComposer', () => {
jest.runAllTimers();
// Then
expect(screen.getByTestId('WysiwygComposerEditor').attributes['data-is-expanded'].value).toBe('true');
expect(screen.getByTestId("WysiwygComposerEditor").attributes["data-is-expanded"].value).toBe("true");
(global.ResizeObserver as jest.Mock).mockRestore();
(global.requestAnimationFrame as jest.Mock).mockRestore();

74
test/components/views/rooms/wysiwyg_composer/components/WysiwygComposer-test.tsx
View file

@ -18,35 +18,35 @@ import "@testing-library/jest-dom";
import React from "react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import { WysiwygComposer }
from "../../../../../../src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer";
import { WysiwygComposer } from "../../../../../../src/components/views/rooms/wysiwyg_composer/components/WysiwygComposer";
import SettingsStore from "../../../../../../src/settings/SettingsStore";
describe('WysiwygComposer', () => {
describe("WysiwygComposer", () => {
const customRender = (
onChange = (_content: string) => void 0,
onSend = () => void 0,
disabled = false,
initialContent?: string) => {
initialContent?: string,
) => {
return render(
<WysiwygComposer onChange={onChange} onSend={onSend} disabled={disabled} initialContent={initialContent} />,
);
};
it('Should have contentEditable at false when disabled', () => {
it("Should have contentEditable at false when disabled", () => {
// When
customRender(jest.fn(), jest.fn(), true);
// Then
expect(screen.getByRole('textbox')).toHaveAttribute('contentEditable', "false");
expect(screen.getByRole("textbox")).toHaveAttribute("contentEditable", "false");
});
describe('Standard behavior', () => {
describe("Standard behavior", () => {
const onChange = jest.fn();
const onSend = jest.fn();
beforeEach(async () => {
customRender(onChange, onSend);
await waitFor(() => expect(screen.getByRole('textbox')).toHaveAttribute('contentEditable', "true"));
await waitFor(() => expect(screen.getByRole("textbox")).toHaveAttribute("contentEditable", "true"));
});
afterEach(() => {
@ -54,39 +54,42 @@ describe('WysiwygComposer', () => {
onSend.mockReset();
});
it('Should have contentEditable at true', async () => {
it("Should have contentEditable at true", async () => {
// Then
await waitFor(() => expect(screen.getByRole('textbox')).toHaveAttribute('contentEditable', "true"));
await waitFor(() => expect(screen.getByRole("textbox")).toHaveAttribute("contentEditable", "true"));
});
it('Should have focus', async () => {
it("Should have focus", async () => {
// Then
await waitFor(() => expect(screen.getByRole('textbox')).toHaveFocus());
await waitFor(() => expect(screen.getByRole("textbox")).toHaveFocus());
});
it('Should call onChange handler', async () => {
it("Should call onChange handler", async () => {
// When
fireEvent.input(screen.getByRole('textbox'), {
data: 'foo bar',
inputType: 'insertText',
fireEvent.input(screen.getByRole("textbox"), {
data: "foo bar",
inputType: "insertText",
});
// Then
await waitFor(() => expect(onChange).toBeCalledWith('foo bar'));
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",
}));
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', () => {
describe("When settings require Ctrl+Enter to send", () => {
const onChange = jest.fn();
const onSend = jest.fn();
beforeEach(async () => {
@ -94,7 +97,7 @@ describe('WysiwygComposer', () => {
if (name === "MessageComposerInput.ctrlEnterToSend") return true;
});
customRender(onChange, onSend);
await waitFor(() => expect(screen.getByRole('textbox')).toHaveAttribute('contentEditable', "true"));
await waitFor(() => expect(screen.getByRole("textbox")).toHaveAttribute("contentEditable", "true"));
});
afterEach(() => {
@ -102,25 +105,30 @@ describe('WysiwygComposer', () => {
onSend.mockReset();
});
it('Should not call onSend when Enter is pressed', async () => {
it("Should not call onSend when Enter is pressed", async () => {
// When
fireEvent(screen.getByRole('textbox'), new InputEvent('input', {
inputType: "insertParagraph",
}));
fireEvent(
screen.getByRole("textbox"),
new InputEvent("input", {
inputType: "insertParagraph",
}),
);
// Then it does not send a message
await waitFor(() => expect(onSend).toBeCalledTimes(0));
});
it('Should send a message when Ctrl+Enter is pressed', async () => {
it("Should send a message when Ctrl+Enter is pressed", async () => {
// When
fireEvent(screen.getByRole('textbox'), new InputEvent('input', {
inputType: "sendMessage",
}));
fireEvent(
screen.getByRole("textbox"),
new InputEvent("input", {
inputType: "sendMessage",
}),
);
// Then it sends a message
await waitFor(() => expect(onSend).toBeCalledTimes(1));
});
});
});