PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Migrate some enzyme tests to RTL (#9383)

Browse source
This commit is contained in:
Michael Telatynski 2022-10-10 16:29:10 +01:00 committed by GitHub
parent c795ada78c
commit 6b30a5e1c9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 102 additions and 163 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
test/components/views/elements/Linkify-test.tsx
View file

@ -12,18 +12,17 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { fireEvent, render } from "@testing-library/react";
import React, { useState } from "react";
// eslint-disable-next-line deprecate/import
import { mount } from "enzyme";
import { Linkify } from "../../../../src/components/views/elements/Linkify";
describe("Linkify", () => {
it("linkifies the context", () => {
const wrapper = mount(<Linkify>
const { container } = render(<Linkify>
https://perdu.com
</Linkify>);
expect(wrapper.html()).toBe(
expect(container.innerHTML).toBe(
"<div><a href=\"https://perdu.com\" class=\"linkified\" target=\"_blank\" rel=\"noreferrer noopener\">"+
"https://perdu.com" +
"</a></div>",
@ -31,10 +30,10 @@ describe("Linkify", () => {
});
it("correctly linkifies a room alias", () => {
const wrapper = mount(<Linkify>
const { container } = render(<Linkify>
#element-web:matrix.org
</Linkify>);
expect(wrapper.html()).toBe(
expect(container.innerHTML).toBe(
"<div>" +
"<a href=\"https://matrix.to/#/#element-web:matrix.org\" class=\"linkified\" rel=\"noreferrer noopener\">" +
"#element-web:matrix.org" +
@ -45,11 +44,11 @@ describe("Linkify", () => {
it("changes the root tag name", () => {
const TAG_NAME = "p";
const wrapper = mount(<Linkify as={TAG_NAME}>
const { container } = render(<Linkify as={TAG_NAME}>
Hello world!
</Linkify>);
expect(wrapper.find("p")).toHaveLength(1);
expect(container.querySelectorAll("p")).toHaveLength(1);
});
it("relinkifies on update", () => {
@ -70,18 +69,18 @@ describe("Linkify", () => {
</div>;
}
const wrapper = mount(<DummyTest />);
const { container } = render(<DummyTest />);
expect(wrapper.html()).toBe(
expect(container.innerHTML).toBe(
"<div><div>" +
"<a href=\"https://perdu.com\" class=\"linkified\" target=\"_blank\" rel=\"noreferrer noopener\">" +
"https://perdu.com" +
"</a></div></div>",
);
wrapper.find('div').at(0).simulate('click');
fireEvent.click(container.querySelector("div"));
expect(wrapper.html()).toBe(
expect(container.innerHTML).toBe(
"<div><div>" +
"<a href=\"https://matrix.org\" class=\"linkified\" target=\"_blank\" rel=\"noreferrer noopener\">" +
"https://matrix.org" +

1
test/components/views/messages/CallEvent-test.tsx
View file

@ -16,7 +16,6 @@ limitations under the License.
import React from "react";
import { render, screen, act, cleanup, fireEvent, waitFor } from "@testing-library/react";
import "@testing-library/jest-dom";
import { mocked, Mocked } from "jest-mock";
import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixClient, PendingEventOrdering } from "matrix-js-sdk/src/client";

28
test/components/views/messages/DateSeparator-test.tsx
View file

@ -15,9 +15,8 @@ limitations under the License.
*/
import React from "react";
// eslint-disable-next-line deprecate/import
import { mount } from "enzyme";
import { mocked } from "jest-mock";
import { render } from "@testing-library/react";
import { formatFullDateNoTime } from "../../../../src/DateUtils";
import SettingsStore from "../../../../src/settings/SettingsStore";
@ -48,10 +47,11 @@ describe("DateSeparator", () => {
const mockClient = getMockClientWithEventEmitter({});
const getComponent = (props = {}) =>
mount(<DateSeparator {...defaultProps} {...props} />, {
wrappingComponent: MatrixClientContext.Provider,
wrappingComponentProps: { value: mockClient },
});
render((
<MatrixClientContext.Provider value={mockClient}>
<DateSeparator {...defaultProps} {...props} />
</MatrixClientContext.Provider>
));
type TestCase = [string, number, string];
const testCases: TestCase[] = [
@ -81,18 +81,19 @@ describe("DateSeparator", () => {
});
it('renders the date separator correctly', () => {
const component = getComponent();
expect(component).toMatchSnapshot();
const { asFragment } = getComponent();
expect(asFragment()).toMatchSnapshot();
expect(SettingsStore.getValue).toHaveBeenCalledWith(UIFeature.TimelineEnableRelativeDates);
});
it.each(testCases)('formats date correctly when current time is %s', (_d, ts, result) => {
expect(getComponent({ ts, forExport: false }).text()).toEqual(result);
expect(getComponent({ ts, forExport: false }).container.textContent).toEqual(result);
});
describe('when forExport is true', () => {
it.each(testCases)('formats date in full when current time is %s', (_d, ts) => {
expect(getComponent({ ts, forExport: true }).text()).toEqual(formatFullDateNoTime(new Date(ts)));
expect(getComponent({ ts, forExport: true }).container.textContent)
.toEqual(formatFullDateNoTime(new Date(ts)));
});
});
@ -105,7 +106,8 @@ describe("DateSeparator", () => {
});
});
it.each(testCases)('formats date in full when current time is %s', (_d, ts) => {
expect(getComponent({ ts, forExport: false }).text()).toEqual(formatFullDateNoTime(new Date(ts)));
expect(getComponent({ ts, forExport: false }).container.textContent)
.toEqual(formatFullDateNoTime(new Date(ts)));
});
});
@ -118,8 +120,8 @@ describe("DateSeparator", () => {
});
});
it('renders the date separator correctly', () => {
const component = getComponent();
expect(component).toMatchSnapshot();
const { asFragment } = getComponent();
expect(asFragment()).toMatchSnapshot();
});
});
});

95
test/components/views/messages/__snapshots__/DateSeparator-test.tsx.snap
View file

@ -1,16 +1,12 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`DateSeparator renders the date separator correctly 1`] = `
<DateSeparator
now="2021-12-17T08:09:00.000Z"
roomId="!unused:example.org"
ts={1639728540000}
>
<DocumentFragment>
<div
aria-label="Today"
className="mx_DateSeparator"
class="mx_DateSeparator"
role="separator"
tabIndex={-1}
tabindex="-1"
>
<hr
role="none"
@ -24,85 +20,40 @@ exports[`DateSeparator renders the date separator correctly 1`] = `
role="none"
/>
</div>
</DateSeparator>
</DocumentFragment>
`;
exports[`DateSeparator when feature_jump_to_date is enabled renders the date separator correctly 1`] = `
<DateSeparator
now="2021-12-17T08:09:00.000Z"
roomId="!unused:example.org"
ts={1639728540000}
>
<DocumentFragment>
<div
aria-label="Fri, Dec 17 2021"
className="mx_DateSeparator"
class="mx_DateSeparator"
role="separator"
tabIndex={-1}
tabindex="-1"
>
<hr
role="none"
/>
<ContextMenuTooltipButton
className="mx_DateSeparator_jumpToDateMenu"
isExpanded={false}
onClick={[Function]}
title="Jump to date"
<div
aria-expanded="false"
aria-haspopup="true"
aria-label="Jump to date"
class="mx_AccessibleButton mx_DateSeparator_jumpToDateMenu"
role="button"
tabindex="0"
>
<AccessibleTooltipButton
aria-expanded={false}
aria-haspopup={true}
className="mx_DateSeparator_jumpToDateMenu"
forceHide={false}
onClick={[Function]}
onContextMenu={[Function]}
title="Jump to date"
<h2
aria-hidden="true"
>
<AccessibleButton
aria-expanded={false}
aria-haspopup={true}
aria-label="Jump to date"
className="mx_DateSeparator_jumpToDateMenu"
element="div"
onBlur={[Function]}
onClick={[Function]}
onContextMenu={[Function]}
onFocus={[Function]}
onMouseLeave={[Function]}
onMouseOver={[Function]}
role="button"
tabIndex={0}
>
<div
aria-expanded={false}
aria-haspopup={true}
aria-label="Jump to date"
className="mx_AccessibleButton mx_DateSeparator_jumpToDateMenu"
onBlur={[Function]}
onClick={[Function]}
onContextMenu={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
onMouseLeave={[Function]}
onMouseOver={[Function]}
role="button"
tabIndex={0}
>
<h2
aria-hidden="true"
>
Fri, Dec 17 2021
</h2>
<div
className="mx_DateSeparator_chevron"
/>
</div>
</AccessibleButton>
</AccessibleTooltipButton>
</ContextMenuTooltipButton>
Fri, Dec 17 2021
</h2>
<div
class="mx_DateSeparator_chevron"
/>
</div>
<hr
role="none"
/>
</div>
</DateSeparator>
</DocumentFragment>
`;

1
test/components/views/rooms/RoomHeader-test.tsx
View file

@ -18,7 +18,6 @@ import React from 'react';
// eslint-disable-next-line deprecate/import
import { mount, ReactWrapper } from 'enzyme';
import { render, screen, act, fireEvent, waitFor, getByRole } from "@testing-library/react";
import "@testing-library/jest-dom";
import { mocked, Mocked } from "jest-mock";
import { EventType, RoomType } from "matrix-js-sdk/src/@types/event";
import { Room } from "matrix-js-sdk/src/models/room";

113
test/components/views/rooms/RoomListHeader-test.tsx
View file

@ -15,13 +15,12 @@ limitations under the License.
*/
import React from 'react';
// eslint-disable-next-line deprecate/import
import { mount, ReactWrapper, HTMLAttributes } from 'enzyme';
import { MatrixClient } from 'matrix-js-sdk/src/client';
import { Room } from 'matrix-js-sdk/src/matrix';
import { EventType } from "matrix-js-sdk/src/@types/event";
import { act } from "react-dom/test-utils";
import { mocked } from 'jest-mock';
import { render, screen, fireEvent, RenderResult } from '@testing-library/react';
import SpaceStore from "../../../../src/stores/spaces/SpaceStore";
import { MetaSpace } from "../../../../src/stores/spaces";
@ -52,55 +51,53 @@ const setupSpace = (client: MatrixClient): Room => {
return testSpace;
};
const setupMainMenu = async (client: MatrixClient, testSpace: Room): Promise<ReactWrapper> => {
const setupMainMenu = async (client: MatrixClient, testSpace: Room): Promise<RenderResult> => {
await testUtils.setupAsyncStoreWithClient(SpaceStore.instance, client);
act(() => {
SpaceStore.instance.setActiveSpace(testSpace.roomId);
});
const wrapper = mount(<RoomListHeader />);
const wrapper = render(<RoomListHeader />);
expect(wrapper.text()).toBe("Test Space");
expect(wrapper.container.textContent).toBe("Test Space");
act(() => {
wrapper.find('[aria-label="Test Space menu"]').hostNodes().simulate("click");
wrapper.container.querySelector<HTMLElement>('[aria-label="Test Space menu"]').click();
});
wrapper.update();
return wrapper;
};
const setupPlusMenu = async (client: MatrixClient, testSpace: Room): Promise<ReactWrapper> => {
const setupPlusMenu = async (client: MatrixClient, testSpace: Room): Promise<RenderResult> => {
await testUtils.setupAsyncStoreWithClient(SpaceStore.instance, client);
act(() => {
SpaceStore.instance.setActiveSpace(testSpace.roomId);
});
const wrapper = mount(<RoomListHeader />);
const wrapper = render(<RoomListHeader />);
expect(wrapper.text()).toBe("Test Space");
expect(wrapper.container.textContent).toBe("Test Space");
act(() => {
wrapper.find('[aria-label="Add"]').hostNodes().simulate("click");
wrapper.container.querySelector<HTMLElement>('[aria-label="Add"]').click();
});
wrapper.update();
return wrapper;
};
const checkIsDisabled = (menuItem: ReactWrapper<HTMLAttributes>): void => {
expect(menuItem.props().disabled).toBeTruthy();
expect(menuItem.props()['aria-disabled']).toBeTruthy();
const checkIsDisabled = (menuItem: HTMLElement): void => {
expect(menuItem).toHaveAttribute("disabled");
expect(menuItem).toHaveAttribute("aria-disabled", "true");
};
const checkMenuLabels = (items: ReactWrapper<HTMLAttributes>, labelArray: Array<string>) => {
const checkMenuLabels = (items: NodeListOf<Element>, labelArray: Array<string>) => {
expect(items).toHaveLength(labelArray.length);
const checkLabel = (item: ReactWrapper<HTMLAttributes>, label: string) => {
expect(item.find(".mx_IconizedContextMenu_label").text()).toBe(label);
const checkLabel = (item: Element, label: string) => {
expect(item.querySelector(".mx_IconizedContextMenu_label").textContent).toBe(label);
};
labelArray.forEach((label, index) => {
console.log('index', index, 'label', label);
checkLabel(items.at(index), label);
checkLabel(items[index], label);
});
};
@ -125,26 +122,23 @@ describe("RoomListHeader", () => {
SpaceStore.instance.setActiveSpace(MetaSpace.Home);
});
const wrapper = mount(<RoomListHeader />);
const { container } = render(<RoomListHeader />);
expect(wrapper.text()).toBe("Home");
act(() => {
wrapper.find('[aria-label="Home options"]').hostNodes().simulate("click");
});
wrapper.update();
expect(container.textContent).toBe("Home");
fireEvent.click(screen.getByLabelText("Home options"));
const menu = wrapper.find(".mx_IconizedContextMenu");
const items = menu.find(".mx_IconizedContextMenu_item").hostNodes();
const menu = screen.getByRole("menu");
const items = menu.querySelectorAll(".mx_IconizedContextMenu_item");
expect(items).toHaveLength(1);
expect(items.at(0).text()).toBe("Show all rooms");
expect(items[0].textContent).toBe("Show all rooms");
});
it("renders a main menu for spaces", async () => {
const testSpace = setupSpace(client);
const wrapper = await setupMainMenu(client, testSpace);
await setupMainMenu(client, testSpace);
const menu = wrapper.find(".mx_IconizedContextMenu");
const items = menu.find(".mx_IconizedContextMenu_item").hostNodes();
const menu = screen.getByRole("menu");
const items = menu.querySelectorAll(".mx_IconizedContextMenu_item");
checkMenuLabels(items, [
"Space home",
@ -158,10 +152,10 @@ describe("RoomListHeader", () => {
it("renders a plus menu for spaces", async () => {
const testSpace = setupSpace(client);
const wrapper = await setupPlusMenu(client, testSpace);
await setupPlusMenu(client, testSpace);
const menu = wrapper.find(".mx_IconizedContextMenu");
const items = menu.find(".mx_IconizedContextMenu_item").hostNodes();
const menu = screen.getByRole("menu");
const items = menu.querySelectorAll(".mx_IconizedContextMenu_item");
checkMenuLabels(items, [
"New room",
@ -178,17 +172,14 @@ describe("RoomListHeader", () => {
});
const testSpace = setupSpace(client);
const wrapper = await setupMainMenu(client, testSpace);
await setupMainMenu(client, testSpace);
act(() => {
SpaceStore.instance.setActiveSpace(MetaSpace.Favourites);
});
wrapper.update();
expect(wrapper.text()).toBe("Favourites");
const menu = wrapper.find(".mx_IconizedContextMenu");
expect(menu).toHaveLength(0);
screen.getByText("Favourites");
expect(screen.queryByRole("menu")).toBeFalsy();
});
describe('UIComponents', () => {
@ -198,10 +189,10 @@ describe("RoomListHeader", () => {
blockUIComponent(UIComponent.CreateSpaces);
const testSpace = setupSpace(client);
const wrapper = await setupMainMenu(client, testSpace);
await setupMainMenu(client, testSpace);
const menu = wrapper.find(".mx_IconizedContextMenu");
const items = menu.find(".mx_IconizedContextMenu_item").hostNodes();
const menu = screen.getByRole("menu");
const items = menu.querySelectorAll(".mx_IconizedContextMenu_item");
checkMenuLabels(items, [
"Space home",
"Manage & explore rooms",
@ -217,10 +208,10 @@ describe("RoomListHeader", () => {
blockUIComponent(UIComponent.CreateRooms);
const testSpace = setupSpace(client);
const wrapper = await setupMainMenu(client, testSpace);
await setupMainMenu(client, testSpace);
const menu = wrapper.find(".mx_IconizedContextMenu");
const items = menu.find(".mx_IconizedContextMenu_item").hostNodes();
const menu = screen.getByRole("menu");
const items = menu.querySelectorAll(".mx_IconizedContextMenu_item");
checkMenuLabels(items, [
"Space home",
"Explore rooms", // not Manage & explore rooms
@ -238,10 +229,10 @@ describe("RoomListHeader", () => {
blockUIComponent(UIComponent.CreateSpaces);
const testSpace = setupSpace(client);
const wrapper = await setupPlusMenu(client, testSpace);
await setupPlusMenu(client, testSpace);
const menu = wrapper.find(".mx_IconizedContextMenu");
const items = menu.find(".mx_IconizedContextMenu_item").hostNodes();
const menu = screen.getByRole("menu");
const items = menu.querySelectorAll(".mx_IconizedContextMenu_item");
checkMenuLabels(items, [
"New room",
@ -256,10 +247,10 @@ describe("RoomListHeader", () => {
blockUIComponent(UIComponent.CreateRooms);
const testSpace = setupSpace(client);
const wrapper = await setupPlusMenu(client, testSpace);
await setupPlusMenu(client, testSpace);
const menu = wrapper.find(".mx_IconizedContextMenu");
const items = menu.find(".mx_IconizedContextMenu_item").hostNodes();
const menu = screen.getByRole("menu");
const items = menu.querySelectorAll<HTMLElement>(".mx_IconizedContextMenu_item");
checkMenuLabels(items, [
"New room",
@ -269,7 +260,7 @@ describe("RoomListHeader", () => {
]);
// "Add existing room" is disabled
checkIsDisabled(items.at(2));
checkIsDisabled(items[2]);
});
});
});
@ -280,10 +271,10 @@ describe("RoomListHeader", () => {
mocked(testSpace.currentState.maySendStateEvent).mockImplementation(
(stateEventType, userId) => stateEventType !== EventType.SpaceChild);
const wrapper = await setupMainMenu(client, testSpace);
await setupMainMenu(client, testSpace);
const menu = wrapper.find(".mx_IconizedContextMenu");
const items = menu.find(".mx_IconizedContextMenu_item").hostNodes();
const menu = screen.getByRole("menu");
const items = menu.querySelectorAll(".mx_IconizedContextMenu_item");
checkMenuLabels(items, [
"Space home",
"Explore rooms", // not Manage & explore rooms
@ -299,10 +290,10 @@ describe("RoomListHeader", () => {
mocked(testSpace.currentState.maySendStateEvent).mockImplementation(
(stateEventType, userId) => stateEventType !== EventType.SpaceChild);
const wrapper = await setupPlusMenu(client, testSpace);
await setupPlusMenu(client, testSpace);
const menu = wrapper.find(".mx_IconizedContextMenu");
const items = menu.find(".mx_IconizedContextMenu_item").hostNodes();
const menu = screen.getByRole("menu");
const items = menu.querySelectorAll<HTMLElement>(".mx_IconizedContextMenu_item");
checkMenuLabels(items, [
"New room",
@ -312,9 +303,9 @@ describe("RoomListHeader", () => {
]);
// "Add existing room" is disabled
checkIsDisabled(items.at(2));
checkIsDisabled(items[2]);
// "Add space" is disabled
checkIsDisabled(items.at(3));
checkIsDisabled(items[3]);
});
});
});

1
test/components/views/settings/tabs/user/PreferencesUserSettingsTab-test.tsx
View file

@ -16,7 +16,6 @@ limitations under the License.
import React from "react";
import { fireEvent, render, RenderResult, waitFor } from "@testing-library/react";
import "@testing-library/jest-dom";
import PreferencesUserSettingsTab from
"../../../../../../src/components/views/settings/tabs/user/PreferencesUserSettingsTab";

1
test/components/views/voip/CallView-test.tsx
View file

@ -22,7 +22,6 @@ import { MatrixClient, PendingEventOrdering } from "matrix-js-sdk/src/client";
import { Room } from "matrix-js-sdk/src/models/room";
import { RoomStateEvent } from "matrix-js-sdk/src/models/room-state";
import { Widget } from "matrix-widget-api";
import "@testing-library/jest-dom";
import type { RoomMember } from "matrix-js-sdk/src/models/room-member";
import type { ClientWidgetApi } from "matrix-widget-api";

1
test/setupTests.js
View file

@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import "@testing-library/jest-dom";
import Adapter from "@wojtekmaj/enzyme-adapter-react-17";
// eslint-disable-next-line deprecate/import
import { configure } from "enzyme";

1
test/toasts/IncomingCallToast-test.tsx
View file

@ -16,7 +16,6 @@ limitations under the License.
import React from "react";
import { render, screen, cleanup, fireEvent, waitFor } from "@testing-library/react";
import "@testing-library/jest-dom";
import { mocked, Mocked } from "jest-mock";
import { Room } from "matrix-js-sdk/src/models/room";
import { MatrixClient } from "matrix-js-sdk/src/client";