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

Migrate some tests to React Testing Library (#9584)

Browse source
This commit is contained in:
Germain 2022-11-18 09:16:11 +00:00 • committed by GitHub
parent ef548a4843
commit 38dbe8ed33
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 325 additions and 527 deletions
Download patch file Download diff file Expand all files Collapse all files

117
test/components/views/dialogs/ForwardDialog-test.tsx
View file

@ -15,12 +15,12 @@ limitations under the License.
*/
import React from "react";
// eslint-disable-next-line deprecate/import
import { mount, ReactWrapper } from "enzyme";
import { act } from "react-dom/test-utils";
import { MatrixEvent, EventType } from "matrix-js-sdk/src/matrix";
import { LocationAssetType, M_ASSET, M_LOCATION, M_TIMESTAMP } from "matrix-js-sdk/src/@types/location";
import { TEXT_NODE_TYPE } from "matrix-js-sdk/src/@types/extensible_events";
import { fireEvent, getByTestId, render, RenderResult, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
import ForwardDialog from "../../../../src/components/views/dialogs/ForwardDialog";
@ -34,6 +34,7 @@ import {
mkEvent,
mkMessage,
mkStubRoom,
mockPlatformPeg,
} from "../../../test-utils";
import { TILE_SERVER_WK_KEY } from "../../../../src/utils/WellKnownUtils";
@ -71,24 +72,18 @@ describe("ForwardDialog", () => {
});
const defaultRooms = ["a", "A", "b"].map(name => mkStubRoom(name, name, mockClient));
const mountForwardDialog = async (message = defaultMessage, rooms = defaultRooms) => {
const mountForwardDialog = (message = defaultMessage, rooms = defaultRooms) => {
mockClient.getVisibleRooms.mockReturnValue(rooms);
mockClient.getRoom.mockImplementation(roomId => rooms.find(room => room.roomId === roomId));
let wrapper;
await act(async () => {
wrapper = mount(
<ForwardDialog
matrixClient={mockClient}
event={message}
permalinkCreator={new RoomPermalinkCreator(undefined, sourceRoom)}
onFinished={jest.fn()}
/>,
);
// Wait one tick for our profile data to load so the state update happens within act
await new Promise(resolve => setImmediate(resolve));
});
wrapper.update();
const wrapper: RenderResult = render(
<ForwardDialog
matrixClient={mockClient}
event={message}
permalinkCreator={new RoomPermalinkCreator(undefined, sourceRoom)}
onFinished={jest.fn()}
/>,
);
return wrapper;
};
@ -105,30 +100,29 @@ describe("ForwardDialog", () => {
});
it("shows a preview with us as the sender", async () => {
const wrapper = await mountForwardDialog();
const { container } = mountForwardDialog();
const previewBody = wrapper.find(".mx_EventTile_body");
expect(previewBody.text()).toBe("Hello world!");
expect(screen.queryByText("Hello world!")).toBeInTheDocument();
// We would just test SenderProfile for the user ID, but it's stubbed
const previewAvatar = wrapper.find(".mx_EventTile_avatar .mx_BaseAvatar_image");
expect(previewAvatar.prop("title")).toBe("@bob:example.org");
const previewAvatar = container.querySelector(".mx_EventTile_avatar .mx_BaseAvatar_image");
expect(previewAvatar?.getAttribute("title")).toBe("@bob:example.org");
});
it("filters the rooms", async () => {
const wrapper = await mountForwardDialog();
const { container } = mountForwardDialog();
expect(wrapper.find("Entry")).toHaveLength(3);
expect(container.querySelectorAll(".mx_ForwardList_entry")).toHaveLength(3);
const searchInput = wrapper.find("SearchBox input");
searchInput.instance().value = "a";
searchInput.simulate("change");
const searchInput = getByTestId(container, "searchbox-input");
act(() => userEvent.type(searchInput, "a"));
expect(wrapper.find("Entry")).toHaveLength(2);
expect(container.querySelectorAll(".mx_ForwardList_entry")).toHaveLength(3);
});
it("tracks message sending progress across multiple rooms", async () => {
const wrapper = await mountForwardDialog();
mockPlatformPeg();
const { container } = mountForwardDialog();
// Make sendEvent require manual resolution so we can see the sending state
let finishSend;
@ -141,17 +135,15 @@ describe("ForwardDialog", () => {
let firstButton;
let secondButton;
const update = () => {
wrapper.update();
firstButton = wrapper.find("AccessibleButton.mx_ForwardList_sendButton").first();
secondButton = wrapper.find("AccessibleButton.mx_ForwardList_sendButton").at(1);
[firstButton, secondButton] = container.querySelectorAll(".mx_ForwardList_sendButton");
};
update();
expect(firstButton.is(".mx_ForwardList_canSend")).toBe(true);
expect(firstButton.className).toContain("mx_ForwardList_canSend");
act(() => { firstButton.simulate("click"); });
act(() => { fireEvent.click(firstButton); });
update();
expect(firstButton.is(".mx_ForwardList_sending")).toBe(true);
expect(firstButton.className).toContain("mx_ForwardList_sending");
await act(async () => {
cancelSend();
@ -159,13 +151,13 @@ describe("ForwardDialog", () => {
await new Promise(resolve => setImmediate(resolve));
});
update();
expect(firstButton.is(".mx_ForwardList_sendFailed")).toBe(true);
expect(firstButton.className).toContain("mx_ForwardList_sendFailed");
expect(secondButton.is(".mx_ForwardList_canSend")).toBe(true);
expect(secondButton.className).toContain("mx_ForwardList_canSend");
act(() => { secondButton.simulate("click"); });
act(() => { fireEvent.click(secondButton); });
update();
expect(secondButton.is(".mx_ForwardList_sending")).toBe(true);
expect(secondButton.className).toContain("mx_ForwardList_sending");
await act(async () => {
finishSend();
@ -173,7 +165,7 @@ describe("ForwardDialog", () => {
await new Promise(resolve => setImmediate(resolve));
});
update();
expect(secondButton.is(".mx_ForwardList_sent")).toBe(true);
expect(secondButton.className).toContain("mx_ForwardList_sent");
});
it("can render replies", async () => {
@ -193,8 +185,9 @@ describe("ForwardDialog", () => {
event: true,
});
const wrapper = await mountForwardDialog(replyMessage);
expect(wrapper.find("ReplyChain")).toBeTruthy();
mountForwardDialog(replyMessage);
expect(screen.queryByText("Hi Alice!", { exact: false })).toBeInTheDocument();
});
it("disables buttons for rooms without send permissions", async () => {
@ -202,12 +195,12 @@ describe("ForwardDialog", () => {
readOnlyRoom.maySendMessage = jest.fn().mockReturnValue(false);
const rooms = [readOnlyRoom, mkStubRoom("b", "b", mockClient)];
const wrapper = await mountForwardDialog(undefined, rooms);
const { container } = mountForwardDialog(undefined, rooms);
const firstButton = wrapper.find("AccessibleButton.mx_ForwardList_sendButton").first();
expect(firstButton.prop("disabled")).toBe(true);
const secondButton = wrapper.find("AccessibleButton.mx_ForwardList_sendButton").last();
expect(secondButton.prop("disabled")).toBe(false);
const [firstButton, secondButton] = container.querySelectorAll<HTMLButtonElement>(".mx_ForwardList_sendButton");
expect(firstButton.getAttribute("aria-disabled")).toBeTruthy();
expect(secondButton.getAttribute("aria-disabled")).toBeFalsy();
});
describe('Location events', () => {
@ -229,17 +222,17 @@ describe("ForwardDialog", () => {
jest.spyOn(Date, 'now').mockRestore();
});
const sendToFirstRoom = (wrapper: ReactWrapper): void =>
const sendToFirstRoom = (container: HTMLElement): void =>
act(() => {
const sendToFirstRoomButton = wrapper.find("AccessibleButton.mx_ForwardList_sendButton").first();
sendToFirstRoomButton.simulate("click");
const sendToFirstRoomButton = container.querySelector(".mx_ForwardList_sendButton");
fireEvent.click(sendToFirstRoomButton!);
});
it('converts legacy location events to pin drop shares', async () => {
const wrapper = await mountForwardDialog(legacyLocationEvent);
const { container } = mountForwardDialog(legacyLocationEvent);
expect(wrapper.find('MLocationBody').length).toBeTruthy();
sendToFirstRoom(wrapper);
expect(container.querySelector(".mx_MLocationBody")).toBeTruthy();
sendToFirstRoom(container);
// text and description from original event are removed
// text gets new default message from event values
@ -262,10 +255,10 @@ describe("ForwardDialog", () => {
});
it('removes personal information from static self location shares', async () => {
const wrapper = await mountForwardDialog(modernLocationEvent);
const { container } = mountForwardDialog(modernLocationEvent);
expect(wrapper.find('MLocationBody').length).toBeTruthy();
sendToFirstRoom(wrapper);
expect(container.querySelector(".mx_MLocationBody")).toBeTruthy();
sendToFirstRoom(container);
const timestamp = M_TIMESTAMP.findIn<number>(modernLocationEvent.getContent());
// text and description from original event are removed
@ -302,11 +295,11 @@ describe("ForwardDialog", () => {
geo_uri: geoUri,
[M_TIMESTAMP.name]: timestamp,
};
const wrapper = await mountForwardDialog(beaconEvent);
const { container } = mountForwardDialog(beaconEvent);
expect(wrapper.find('MLocationBody').length).toBeTruthy();
expect(container.querySelector(".mx_MLocationBody")).toBeTruthy();
sendToFirstRoom(wrapper);
sendToFirstRoom(container);
expect(mockClient.sendEvent).toHaveBeenCalledWith(
roomId, EventType.RoomMessage, expectedContent,
@ -314,11 +307,11 @@ describe("ForwardDialog", () => {
});
it('forwards pin drop event', async () => {
const wrapper = await mountForwardDialog(pinDropLocationEvent);
const { container } = mountForwardDialog(pinDropLocationEvent);
expect(wrapper.find('MLocationBody').length).toBeTruthy();
expect(container.querySelector(".mx_MLocationBody")).toBeTruthy();
sendToFirstRoom(wrapper);
sendToFirstRoom(container);
expect(mockClient.sendEvent).toHaveBeenCalledWith(
roomId, pinDropLocationEvent.getType(), pinDropLocationEvent.getContent(),