Update tests to prefer RTL over Enzyme (#10247
* Update tests to prefer RTL over Enzyme * Strict types
This commit is contained in:
Michael Telatyński
GitHub
parent
dd6fc124d7
commit
f40d15388c
20 changed files with 1095 additions and 632 deletions
|
|
@ -15,9 +15,7 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import React, { ComponentProps } from "react";
|
||||
// eslint-disable-next-line deprecate/import
|
||||
import { mount } from "enzyme";
|
||||
import { act } from "react-dom/test-utils";
|
||||
import { act, fireEvent, render } from "@testing-library/react";
|
||||
import * as maplibregl from "maplibre-gl";
|
||||
import { BeaconEvent, getBeaconInfoIdentifier, RelationType, MatrixEvent, EventType } from "matrix-js-sdk/src/matrix";
|
||||
import { Relations } from "matrix-js-sdk/src/models/relations";
|
||||
|
|
@ -36,7 +34,6 @@ import { MediaEventHelper } from "../../../../src/utils/MediaEventHelper";
|
|||
import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
|
||||
import Modal from "../../../../src/Modal";
|
||||
import { TILE_SERVER_WK_KEY } from "../../../../src/utils/WellKnownUtils";
|
||||
import { MapError } from "../../../../src/components/views/location/MapError";
|
||||
import * as mapUtilHooks from "../../../../src/utils/location/useMap";
|
||||
import { LocationShareError } from "../../../../src/utils/location";
|
||||
|
||||
|
|
@ -75,10 +72,11 @@ describe("<MBeaconBody />", () => {
|
|||
};
|
||||
|
||||
const getComponent = (props = {}) =>
|
||||
mount(<MBeaconBody {...defaultProps} {...props} />, {
|
||||
wrappingComponent: MatrixClientContext.Provider,
|
||||
wrappingComponentProps: { value: mockClient },
|
||||
});
|
||||
render(
|
||||
<MatrixClientContext.Provider value={mockClient}>
|
||||
<MBeaconBody {...defaultProps} {...props} />
|
||||
</MatrixClientContext.Provider>,
|
||||
);
|
||||
|
||||
const modalSpy = jest.spyOn(Modal, "createDialog").mockReturnValue({
|
||||
finished: Promise.resolve([true]),
|
||||
|
|
@ -94,7 +92,7 @@ describe("<MBeaconBody />", () => {
|
|||
const beaconInfoEvent = makeBeaconInfoEvent(aliceId, roomId, { isLive: false }, "$alice-room1-1");
|
||||
makeRoomWithStateEvents([beaconInfoEvent], { roomId, mockClient });
|
||||
const component = getComponent({ mxEvent: beaconInfoEvent });
|
||||
expect(component.text()).toEqual("Live location ended");
|
||||
expect(component.container).toHaveTextContent("Live location ended");
|
||||
});
|
||||
|
||||
it("renders stopped beacon UI for an expired beacon", () => {
|
||||
|
|
@ -107,7 +105,7 @@ describe("<MBeaconBody />", () => {
|
|||
);
|
||||
makeRoomWithStateEvents([beaconInfoEvent], { roomId, mockClient });
|
||||
const component = getComponent({ mxEvent: beaconInfoEvent });
|
||||
expect(component.text()).toEqual("Live location ended");
|
||||
expect(component.container).toHaveTextContent("Live location ended");
|
||||
});
|
||||
|
||||
it("renders loading beacon UI for a beacon that has not started yet", () => {
|
||||
|
|
@ -120,7 +118,7 @@ describe("<MBeaconBody />", () => {
|
|||
);
|
||||
makeRoomWithStateEvents([beaconInfoEvent], { roomId, mockClient });
|
||||
const component = getComponent({ mxEvent: beaconInfoEvent });
|
||||
expect(component.text()).toEqual("Loading live location…");
|
||||
expect(component.container).toHaveTextContent("Loading live location…");
|
||||
});
|
||||
|
||||
it("does not open maximised map when on click when beacon is stopped", () => {
|
||||
|
|
@ -133,9 +131,7 @@ describe("<MBeaconBody />", () => {
|
|||
);
|
||||
makeRoomWithStateEvents([beaconInfoEvent], { roomId, mockClient });
|
||||
const component = getComponent({ mxEvent: beaconInfoEvent });
|
||||
act(() => {
|
||||
component.find(".mx_MBeaconBody_map").at(0).simulate("click");
|
||||
});
|
||||
fireEvent.click(component.container.querySelector(".mx_MBeaconBody_map")!);
|
||||
|
||||
expect(modalSpy).not.toHaveBeenCalled();
|
||||
});
|
||||
|
|
@ -155,7 +151,7 @@ describe("<MBeaconBody />", () => {
|
|||
|
||||
const component = getComponent({ mxEvent: aliceBeaconInfo1 });
|
||||
// beacon1 has been superceded by beacon2
|
||||
expect(component.text()).toEqual("Live location ended");
|
||||
expect(component.container).toHaveTextContent("Live location ended");
|
||||
});
|
||||
|
||||
it("renders stopped UI when a beacon event is replaced", () => {
|
||||
|
|
@ -179,10 +175,8 @@ describe("<MBeaconBody />", () => {
|
|||
beaconInstance.update(aliceBeaconInfo2);
|
||||
});
|
||||
|
||||
component.setProps({});
|
||||
|
||||
// beacon1 has been superceded by beacon2
|
||||
expect(component.text()).toEqual("Live location ended");
|
||||
expect(component.container).toHaveTextContent("Live location ended");
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -202,10 +196,8 @@ describe("<MBeaconBody />", () => {
|
|||
beaconInstance.emit(BeaconEvent.LivenessChange, false, beaconInstance);
|
||||
});
|
||||
|
||||
component.setProps({});
|
||||
|
||||
// stopped UI
|
||||
expect(component.text()).toEqual("Live location ended");
|
||||
expect(component.container).toHaveTextContent("Live location ended");
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -227,16 +219,14 @@ describe("<MBeaconBody />", () => {
|
|||
makeRoomWithStateEvents([aliceBeaconInfo], { roomId, mockClient });
|
||||
const component = getComponent({ mxEvent: aliceBeaconInfo });
|
||||
|
||||
expect(component.text()).toEqual("Loading live location…");
|
||||
expect(component.container).toHaveTextContent("Loading live location…");
|
||||
});
|
||||
|
||||
it("does nothing on click when a beacon has no location", () => {
|
||||
makeRoomWithStateEvents([aliceBeaconInfo], { roomId, mockClient });
|
||||
const component = getComponent({ mxEvent: aliceBeaconInfo });
|
||||
|
||||
act(() => {
|
||||
component.find(".mx_MBeaconBody_map").at(0).simulate("click");
|
||||
});
|
||||
fireEvent.click(component.container.querySelector(".mx_MBeaconBody_map")!);
|
||||
|
||||
expect(modalSpy).not.toHaveBeenCalled();
|
||||
});
|
||||
|
|
@ -247,7 +237,7 @@ describe("<MBeaconBody />", () => {
|
|||
beaconInstance.addLocations([location1]);
|
||||
const component = getComponent({ mxEvent: aliceBeaconInfo });
|
||||
|
||||
expect(component.find("Map").length).toBeTruthy;
|
||||
expect(component.container.querySelector(".maplibregl-canvas-container")).toBeDefined();
|
||||
});
|
||||
|
||||
it("opens maximised map view on click when beacon has a live location", () => {
|
||||
|
|
@ -256,9 +246,7 @@ describe("<MBeaconBody />", () => {
|
|||
beaconInstance.addLocations([location1]);
|
||||
const component = getComponent({ mxEvent: aliceBeaconInfo });
|
||||
|
||||
act(() => {
|
||||
component.find("Map").simulate("click");
|
||||
});
|
||||
fireEvent.click(component.container.querySelector(".mx_Map")!);
|
||||
|
||||
// opens modal
|
||||
expect(modalSpy).toHaveBeenCalled();
|
||||
|
|
@ -268,44 +256,18 @@ describe("<MBeaconBody />", () => {
|
|||
makeRoomWithStateEvents([aliceBeaconInfo], { roomId, mockClient });
|
||||
const component = getComponent({ mxEvent: aliceBeaconInfo });
|
||||
|
||||
act(() => {
|
||||
component.find(".mx_MBeaconBody_map").at(0).simulate("click");
|
||||
});
|
||||
fireEvent.click(component.container.querySelector(".mx_MBeaconBody_map")!);
|
||||
|
||||
expect(modalSpy).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("renders a live beacon with a location correctly", () => {
|
||||
const room = makeRoomWithStateEvents([aliceBeaconInfo], { roomId, mockClient });
|
||||
const beaconInstance = room.currentState.beacons.get(getBeaconInfoIdentifier(aliceBeaconInfo))!;
|
||||
beaconInstance.addLocations([location1]);
|
||||
const component = getComponent({ mxEvent: aliceBeaconInfo });
|
||||
|
||||
expect(component.find("Map").length).toBeTruthy;
|
||||
});
|
||||
|
||||
it("opens maximised map view on click when beacon has a live location", () => {
|
||||
const room = makeRoomWithStateEvents([aliceBeaconInfo], { roomId, mockClient });
|
||||
const beaconInstance = room.currentState.beacons.get(getBeaconInfoIdentifier(aliceBeaconInfo))!;
|
||||
beaconInstance.addLocations([location1]);
|
||||
const component = getComponent({ mxEvent: aliceBeaconInfo });
|
||||
|
||||
act(() => {
|
||||
component.find("Map").simulate("click");
|
||||
});
|
||||
|
||||
// opens modal
|
||||
expect(modalSpy).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("updates latest location", () => {
|
||||
const room = makeRoomWithStateEvents([aliceBeaconInfo], { roomId, mockClient });
|
||||
const component = getComponent({ mxEvent: aliceBeaconInfo });
|
||||
getComponent({ mxEvent: aliceBeaconInfo });
|
||||
|
||||
const beaconInstance = room.currentState.beacons.get(getBeaconInfoIdentifier(aliceBeaconInfo))!;
|
||||
act(() => {
|
||||
beaconInstance.addLocations([location1]);
|
||||
component.setProps({});
|
||||
});
|
||||
|
||||
expect(mockMap.setCenter).toHaveBeenCalledWith({ lat: 51, lon: 41 });
|
||||
|
|
@ -313,7 +275,6 @@ describe("<MBeaconBody />", () => {
|
|||
|
||||
act(() => {
|
||||
beaconInstance.addLocations([location2]);
|
||||
component.setProps({});
|
||||
});
|
||||
|
||||
expect(mockMap.setCenter).toHaveBeenCalledWith({ lat: 52, lon: 42 });
|
||||
|
|
@ -455,7 +416,7 @@ describe("<MBeaconBody />", () => {
|
|||
makeRoomWithBeacons(roomId, mockClient, [beaconInfoEvent], [location1]);
|
||||
|
||||
const component = getComponent({ mxEvent: beaconInfoEvent });
|
||||
expect(component.find(MapError)).toMatchSnapshot();
|
||||
expect(component.getByTestId("map-rendering-error")).toMatchSnapshot();
|
||||
});
|
||||
|
||||
// test that statuses display as expected with a map display error
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ 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";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,35 +1,22 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<MBeaconBody /> when map display is not configured renders maps unavailable error for a live beacon with location 1`] = `
|
||||
<MapError
|
||||
className="mx_MBeaconBody_mapError mx_MBeaconBody_mapErrorInteractive"
|
||||
error="MapStyleUrlNotConfigured"
|
||||
isMinimised={true}
|
||||
onClick={[Function]}
|
||||
<div
|
||||
class="mx_MapError mx_MBeaconBody_mapError mx_MBeaconBody_mapErrorInteractive mx_MapError_isMinimised"
|
||||
data-testid="map-rendering-error"
|
||||
>
|
||||
<div
|
||||
className="mx_MapError mx_MBeaconBody_mapError mx_MBeaconBody_mapErrorInteractive mx_MapError_isMinimised"
|
||||
data-testid="map-rendering-error"
|
||||
onClick={[Function]}
|
||||
class="mx_MapError_icon"
|
||||
/>
|
||||
<h3
|
||||
class="mx_Heading_h3 mx_MapError_heading"
|
||||
>
|
||||
<div
|
||||
className="mx_MapError_icon"
|
||||
/>
|
||||
<Heading
|
||||
className="mx_MapError_heading"
|
||||
size="h3"
|
||||
>
|
||||
<h3
|
||||
className="mx_Heading_h3 mx_MapError_heading"
|
||||
>
|
||||
Unable to load map
|
||||
</h3>
|
||||
</Heading>
|
||||
<p
|
||||
className="mx_MapError_message"
|
||||
>
|
||||
This homeserver is not configured to display maps.
|
||||
</p>
|
||||
</div>
|
||||
</MapError>
|
||||
Unable to load map
|
||||
</h3>
|
||||
<p
|
||||
class="mx_MapError_message"
|
||||
>
|
||||
This homeserver is not configured to display maps.
|
||||
</p>
|
||||
</div>
|
||||
`;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue