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

Kill off enzyme in preference of react testing library (#10255)

Browse source
This commit is contained in:
Michael Telatynski 2023-03-06 15:17:46 +00:00 • committed by GitHub
parent 394bffbae4
commit bda54a8b20
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 123 additions and 447 deletions
Download patch file Download diff file Expand all files Collapse all files

53
test/components/views/messages/MLocationBody-test.tsx
View file

@ -15,14 +15,11 @@ limitations under the License.
*/
import React, { ComponentProps } from "react";
// eslint-disable-next-line deprecate/import
import { mount } from "enzyme";
import { fireEvent, render } from "@testing-library/react";
import { LocationAssetType } from "matrix-js-sdk/src/@types/location";
import { ClientEvent, RoomMember } from "matrix-js-sdk/src/matrix";
import * as maplibregl from "maplibre-gl";
import { logger } from "matrix-js-sdk/src/logger";
// eslint-disable-next-line deprecate/import
import { act } from "react-dom/test-utils";
import { SyncState } from "matrix-js-sdk/src/sync";
import MLocationBody from "../../../../src/components/views/messages/MLocationBody";
@ -35,6 +32,13 @@ import { TILE_SERVER_WK_KEY } from "../../../../src/utils/WellKnownUtils";
import { makeLocationEvent } from "../../../test-utils/location";
import { getMockClientWithEventEmitter } from "../../../test-utils";
// Fake random strings to give a predictable snapshot
jest.mock("matrix-js-sdk/src/randomstring", () => {
return {
randomString: () => "abdefghi",
};
});
describe("MLocationBody", () => {
const mapOptions = { container: {} as unknown as HTMLElement, style: "" };
describe("<MLocationBody>", () => {
@ -57,10 +61,11 @@ describe("MLocationBody", () => {
mediaEventHelper: {} as MediaEventHelper,
};
const getComponent = (props = {}) =>
mount(<MLocationBody {...defaultProps} {...props} />, {
wrappingComponent: MatrixClientContext.Provider,
wrappingComponentProps: { value: mockClient },
});
render(
<MatrixClientContext.Provider value={mockClient}>
<MLocationBody {...defaultProps} {...props} />
</MatrixClientContext.Provider>,
);
const getMapErrorComponent = () => {
const mockMap = new maplibregl.Map(mapOptions);
mockClient.getClientWellKnown.mockReturnValue({
@ -96,20 +101,19 @@ describe("MLocationBody", () => {
it("displays correct fallback content without error style when map_style_url is not configured", () => {
const component = getComponent();
expect(component.find(".mx_EventTile_body")).toMatchSnapshot();
expect(component.container.querySelector(".mx_EventTile_body")).toMatchSnapshot();
});
it("displays correct fallback content when map_style_url is misconfigured", () => {
const component = getMapErrorComponent();
component.setProps({});
expect(component.find(".mx_EventTile_body")).toMatchSnapshot();
expect(component.container.querySelector(".mx_EventTile_body")).toMatchSnapshot();
});
it("should clear the error on reconnect", () => {
const component = getMapErrorComponent();
expect((component.state() as React.ComponentState).error).toBeDefined();
expect(component.container.querySelector(".mx_EventTile_tileError")).toBeDefined();
mockClient.emit(ClientEvent.Sync, SyncState.Reconnecting, SyncState.Error);
expect((component.state() as React.ComponentState).error).toBeUndefined();
expect(component.container.querySelector(".mx_EventTile_tileError")).toBeFalsy();
});
});
@ -132,7 +136,7 @@ describe("MLocationBody", () => {
const mockMap = new maplibregl.Map(mapOptions);
const component = getComponent();
expect(component).toMatchSnapshot();
expect(component.asFragment()).toMatchSnapshot();
// map was centered
expect(mockMap.setCenter).toHaveBeenCalledWith({
lat: 51.5076,
@ -140,32 +144,17 @@ describe("MLocationBody", () => {
});
});
it("opens map dialog on click", () => {
it("opens map dialog on click", async () => {
const modalSpy = jest
.spyOn(Modal, "createDialog")
.mockReturnValue({ finished: new Promise(() => {}), close: jest.fn() });
const component = getComponent();
act(() => {
component.find("Map").at(0).simulate("click");
});
await fireEvent.click(component.container.querySelector(".mx_Map")!);
expect(modalSpy).toHaveBeenCalled();
});
it("renders marker correctly for a non-self share", () => {
const mockMap = new maplibregl.Map(mapOptions);
const component = getComponent();
expect(component.find("SmartMarker").at(0).props()).toEqual(
expect.objectContaining({
map: mockMap,
geoUri: "geo:51.5076,-0.1276",
roomMember: undefined,
}),
);
});
it("renders marker correctly for a self share", () => {
const selfShareEvent = makeLocationEvent("geo:51.5076,-0.1276", LocationAssetType.Self);
const member = new RoomMember(roomId, userId);
@ -174,7 +163,7 @@ describe("MLocationBody", () => {
const component = getComponent({ mxEvent: selfShareEvent });
// render self locations with user avatars
expect(component.find("SmartMarker").at(0).prop("roomMember")).toEqual(member);
expect(component.asFragment()).toMatchSnapshot();
});
});
});