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

Remove Enzyme tests in favour of React testing-library (#10289)

Browse source
This commit is contained in:
Michael Telatynski 2023-03-06 12:13:17 +00:00 • committed by GitHub
parent 303b878b17
commit 667ec166d7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 432 additions and 3163 deletions
Download patch file Download diff file Expand all files Collapse all files

141
test/components/views/dialogs/ExportDialog-test.tsx
View file

@ -15,11 +15,8 @@ limitations under the License.
*/
import React from "react";
// eslint-disable-next-line deprecate/import
import { mount, ReactWrapper } from "enzyme";
import { fireEvent, render, RenderResult, waitFor } from "@testing-library/react";
import { mocked } from "jest-mock";
// eslint-disable-next-line deprecate/import
import { act } from "react-dom/test-utils";
import { Room } from "matrix-js-sdk/src/matrix";
import ExportDialog from "../../../../src/components/views/dialogs/ExportDialog";
@ -59,49 +56,28 @@ describe("<ExportDialog />", () => {
onFinished: jest.fn(),
};
const getComponent = (props = {}) => mount(<ExportDialog {...defaultProps} {...props} />);
const getComponent = (props = {}) => render(<ExportDialog {...defaultProps} {...props} />);
const getSizeInput = (component: ReactWrapper) => component.find('input[id="size-limit"]');
const getExportTypeInput = (component: ReactWrapper) => component.find('select[id="export-type"]');
const getAttachmentsCheckbox = (component: ReactWrapper) => component.find('input[id="include-attachments"]');
const getMessageCountInput = (component: ReactWrapper) => component.find('input[id="message-count"]');
const getExportFormatInput = (component: ReactWrapper, format: ExportFormat) =>
component.find(`input[id="exportFormat-${format}"]`);
const getPrimaryButton = (component: ReactWrapper) => component.find('[data-testid="dialog-primary-button"]');
const getSecondaryButton = (component: ReactWrapper) => component.find('[data-testid="dialog-cancel-button"]');
const getSizeInput = ({ container }: RenderResult) => container.querySelector('input[id="size-limit"]')!;
const getExportTypeInput = ({ container }: RenderResult) => container.querySelector('select[id="export-type"]')!;
const getAttachmentsCheckbox = ({ container }: RenderResult) =>
container.querySelector('input[id="include-attachments"]')!;
const getMessageCountInput = ({ container }: RenderResult) => container.querySelector('input[id="message-count"]')!;
const getExportFormatInput = ({ container }: RenderResult, format: ExportFormat) =>
container.querySelector(`input[id="exportFormat-${format}"]`)!;
const getPrimaryButton = ({ getByTestId }: RenderResult) => getByTestId("dialog-primary-button")!;
const getSecondaryButton = ({ getByTestId }: RenderResult) => getByTestId("dialog-cancel-button")!;
const submitForm = async (component: ReactWrapper) =>
act(async () => {
getPrimaryButton(component).simulate("click");
component.setProps({});
});
const selectExportFormat = async (component: ReactWrapper, format: ExportFormat) =>
act(async () => {
getExportFormatInput(component, format).simulate("change");
component.setProps({});
});
const selectExportType = async (component: ReactWrapper, type: ExportType) =>
act(async () => {
getExportTypeInput(component).simulate("change", { target: { value: type } });
component.setProps({});
});
const setMessageCount = async (component: ReactWrapper, count: number) =>
act(async () => {
getMessageCountInput(component).simulate("change", { target: { value: count } });
component.setProps({});
});
const submitForm = async (component: RenderResult) => fireEvent.click(getPrimaryButton(component));
const selectExportFormat = async (component: RenderResult, format: ExportFormat) =>
fireEvent.click(getExportFormatInput(component, format));
const selectExportType = async (component: RenderResult, type: ExportType) =>
fireEvent.change(getExportTypeInput(component), { target: { value: type } });
const setMessageCount = async (component: RenderResult, count: number) =>
fireEvent.change(getMessageCountInput(component), { target: { value: count } });
const setSizeLimit = async (component: ReactWrapper, limit: number) =>
act(async () => {
getSizeInput(component).simulate("change", { target: { value: limit } });
component.setProps({});
});
const setIncludeAttachments = async (component: ReactWrapper, checked: boolean) =>
act(async () => {
getAttachmentsCheckbox(component).simulate("change", { target: { checked } });
component.setProps({});
});
const setSizeLimit = async (component: RenderResult, limit: number) =>
fireEvent.change(getSizeInput(component), { target: { value: limit } });
beforeEach(() => {
HTMLExporterMock.mockClear().mockImplementation(jest.fn().mockReturnValue(htmlExporterInstance));
@ -115,15 +91,13 @@ describe("<ExportDialog />", () => {
it("renders export dialog", () => {
const component = getComponent();
expect(component.find(".mx_ExportDialog")).toMatchSnapshot();
expect(component.container.querySelector(".mx_ExportDialog")).toMatchSnapshot();
});
it("calls onFinished when cancel button is clicked", () => {
const onFinished = jest.fn();
const component = getComponent({ onFinished });
act(() => {
getSecondaryButton(component).simulate("click");
});
fireEvent.click(getSecondaryButton(component));
expect(onFinished).toHaveBeenCalledWith(false);
});
@ -131,17 +105,19 @@ describe("<ExportDialog />", () => {
const component = getComponent();
await submitForm(component);
// 4th arg is an component function
const exportConstructorProps = HTMLExporterMock.mock.calls[0].slice(0, 3);
expect(exportConstructorProps).toEqual([
defaultProps.room,
ExportType.Timeline,
{
attachmentsIncluded: false,
maxSize: 8388608, // 8MB to bytes
numberOfMessages: 100,
},
]);
await waitFor(() => {
// 4th arg is an component function
const exportConstructorProps = HTMLExporterMock.mock.calls[0].slice(0, 3);
expect(exportConstructorProps).toEqual([
defaultProps.room,
ExportType.Timeline,
{
attachmentsIncluded: false,
maxSize: 8388608, // 8MB to bytes
numberOfMessages: 100,
},
]);
});
expect(htmlExporterInstance.export).toHaveBeenCalled();
});
@ -173,29 +149,28 @@ describe("<ExportDialog />", () => {
it("renders success screen when export is finished", async () => {
const component = getComponent();
await submitForm(component);
component.setProps({});
jest.runAllTimers();
expect(component.find(".mx_InfoDialog .mx_Dialog_content")).toMatchSnapshot();
expect(component.container.querySelector(".mx_InfoDialog .mx_Dialog_content")).toMatchSnapshot();
});
describe("export format", () => {
it("renders export format with html selected by default", () => {
const component = getComponent();
expect(getExportFormatInput(component, ExportFormat.Html).props().checked).toBeTruthy();
expect(getExportFormatInput(component, ExportFormat.Html)).toBeChecked();
});
it("sets export format on radio button click", async () => {
const component = getComponent();
await selectExportFormat(component, ExportFormat.PlainText);
expect(getExportFormatInput(component, ExportFormat.PlainText).props().checked).toBeTruthy();
expect(getExportFormatInput(component, ExportFormat.Html).props().checked).toBeFalsy();
expect(getExportFormatInput(component, ExportFormat.PlainText)).toBeChecked();
expect(getExportFormatInput(component, ExportFormat.Html)).not.toBeChecked();
});
it("hides export format input when format is valid in ForceRoomExportParameters", () => {
const component = getComponent();
expect(getExportFormatInput(component, ExportFormat.Html).props().checked).toBeTruthy();
expect(getExportFormatInput(component, ExportFormat.Html)).toBeChecked();
});
it("does not render export format when set in ForceRoomExportParameters", () => {
@ -203,20 +178,20 @@ describe("<ExportDialog />", () => {
format: ExportFormat.PlainText,
});
const component = getComponent();
expect(getExportFormatInput(component, ExportFormat.Html).length).toBeFalsy();
expect(getExportFormatInput(component, ExportFormat.Html)).toBeFalsy();
});
});
describe("export type", () => {
it("renders export type with timeline selected by default", () => {
const component = getComponent();
expect(getExportTypeInput(component).props().value).toEqual(ExportType.Timeline);
expect(getExportTypeInput(component)).toHaveValue(ExportType.Timeline);
});
it("sets export type on change", async () => {
const component = getComponent();
await selectExportType(component, ExportType.Beginning);
expect(getExportTypeInput(component).props().value).toEqual(ExportType.Beginning);
expect(getExportTypeInput(component)).toHaveValue(ExportType.Beginning);
});
it("does not render export type when set in ForceRoomExportParameters", () => {
@ -224,25 +199,25 @@ describe("<ExportDialog />", () => {
range: ExportType.Beginning,
});
const component = getComponent();
expect(getExportTypeInput(component).length).toBeFalsy();
expect(getExportTypeInput(component)).toBeFalsy();
});
it("does not render message count input", async () => {
const component = getComponent();
expect(getMessageCountInput(component).length).toBeFalsy();
expect(getMessageCountInput(component)).toBeFalsy();
});
it("renders message count input with default value 100 when export type is lastNMessages", async () => {
const component = getComponent();
await selectExportType(component, ExportType.LastNMessages);
expect(getMessageCountInput(component).props().value).toEqual("100");
expect(getMessageCountInput(component)).toHaveValue(100);
});
it("sets message count on change", async () => {
const component = getComponent();
await selectExportType(component, ExportType.LastNMessages);
await setMessageCount(component, 10);
expect(getMessageCountInput(component).props().value).toEqual("10");
expect(getMessageCountInput(component)).toHaveValue(10);
});
it("does not export when export type is lastNMessages and message count is falsy", async () => {
@ -270,20 +245,22 @@ describe("<ExportDialog />", () => {
await selectExportType(component, ExportType.Timeline);
await submitForm(component);
expect(htmlExporterInstance.export).toHaveBeenCalled();
await waitFor(() => {
expect(htmlExporterInstance.export).toHaveBeenCalled();
});
});
});
describe("size limit", () => {
it("renders size limit input with default value", () => {
const component = getComponent();
expect(getSizeInput(component).props().value).toEqual("8");
expect(getSizeInput(component)).toHaveValue(8);
});
it("updates size limit on change", async () => {
const component = getComponent();
await setSizeLimit(component, 20);
expect(getSizeInput(component).props().value).toEqual("20");
expect(getSizeInput(component)).toHaveValue(20);
});
it("does not export when size limit is falsy", async () => {
@ -307,7 +284,9 @@ describe("<ExportDialog />", () => {
await setSizeLimit(component, 2000);
await submitForm(component);
expect(htmlExporterInstance.export).toHaveBeenCalled();
await waitFor(() => {
expect(htmlExporterInstance.export).toHaveBeenCalled();
});
});
it("does not render size limit input when set in ForceRoomExportParameters", () => {
@ -315,7 +294,7 @@ describe("<ExportDialog />", () => {
sizeMb: 10000,
});
const component = getComponent();
expect(getSizeInput(component).length).toBeFalsy();
expect(getSizeInput(component)).toBeFalsy();
});
/**
@ -335,13 +314,13 @@ describe("<ExportDialog />", () => {
describe("include attachments", () => {
it("renders input with default value of false", () => {
const component = getComponent();
expect(getAttachmentsCheckbox(component).props().checked).toEqual(false);
expect(getAttachmentsCheckbox(component)).not.toBeChecked();
});
it("updates include attachments on change", async () => {
const component = getComponent();
await setIncludeAttachments(component, true);
expect(getAttachmentsCheckbox(component).props().checked).toEqual(true);
fireEvent.click(getAttachmentsCheckbox(component));
expect(getAttachmentsCheckbox(component)).toBeChecked();
});
it("does not render input when set in ForceRoomExportParameters", () => {
@ -349,7 +328,7 @@ describe("<ExportDialog />", () => {
includeAttachments: false,
});
const component = getComponent();
expect(getAttachmentsCheckbox(component).length).toBeFalsy();
expect(getAttachmentsCheckbox(component)).toBeFalsy();
});
});
});

3047
test/components/views/dialogs/__snapshots__/ExportDialog-test.tsx.snap
View file

File diff suppressed because it is too large Load diff