Kill off enzyme in preference of react testing library (#10255)
This commit is contained in:
Michael Telatynski
GitHub
parent
394bffbae4
commit
bda54a8b20
7 changed files with 123 additions and 447 deletions
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@
|
|||
|
||||
exports[`MLocationBody <MLocationBody> with error displays correct fallback content when map_style_url is misconfigured 1`] = `
|
||||
<div
|
||||
className="mx_EventTile_body mx_MLocationBody"
|
||||
class="mx_EventTile_body mx_MLocationBody"
|
||||
>
|
||||
<span
|
||||
className="mx_EventTile_tileError"
|
||||
class="mx_EventTile_tileError"
|
||||
>
|
||||
Unable to load map: This homeserver is not configured correctly to display maps, or the configured map server may be unreachable.
|
||||
</span>
|
||||
|
|
@ -16,10 +16,10 @@ exports[`MLocationBody <MLocationBody> with error displays correct fallback cont
|
|||
|
||||
exports[`MLocationBody <MLocationBody> with error displays correct fallback content without error style when map_style_url is not configured 1`] = `
|
||||
<div
|
||||
className="mx_EventTile_body mx_MLocationBody"
|
||||
class="mx_EventTile_body mx_MLocationBody"
|
||||
>
|
||||
<span
|
||||
className=""
|
||||
class=""
|
||||
>
|
||||
Unable to load map: This homeserver is not configured to display maps.
|
||||
</span>
|
||||
|
|
@ -29,188 +29,83 @@ exports[`MLocationBody <MLocationBody> with error displays correct fallback cont
|
|||
`;
|
||||
|
||||
exports[`MLocationBody <MLocationBody> without error renders map correctly 1`] = `
|
||||
<MLocationBody
|
||||
highlightLink=""
|
||||
highlights={[]}
|
||||
mediaEventHelper={{}}
|
||||
mxEvent={
|
||||
{
|
||||
"content": {
|
||||
"body": "Found at geo:51.5076,-0.1276 at 2021-12-21T12:22+0000",
|
||||
"geo_uri": "geo:51.5076,-0.1276",
|
||||
"msgtype": "m.location",
|
||||
"org.matrix.msc1767.text": "Found at geo:51.5076,-0.1276 at 2021-12-21T12:22+0000",
|
||||
"org.matrix.msc3488.asset": {
|
||||
"type": "m.pin",
|
||||
},
|
||||
"org.matrix.msc3488.location": {
|
||||
"description": "Human-readable label",
|
||||
"uri": "geo:51.5076,-0.1276",
|
||||
},
|
||||
"org.matrix.msc3488.ts": 252523,
|
||||
},
|
||||
"event_id": "$2",
|
||||
"type": "org.matrix.msc3488.location",
|
||||
}
|
||||
}
|
||||
onHeightChanged={[MockFunction]}
|
||||
onMessageAllowed={[MockFunction]}
|
||||
permalinkCreator={{}}
|
||||
>
|
||||
<LocationBodyContent
|
||||
mapId="mx_MLocationBody_$2_HHHHHHHH"
|
||||
mxEvent={
|
||||
{
|
||||
"content": {
|
||||
"body": "Found at geo:51.5076,-0.1276 at 2021-12-21T12:22+0000",
|
||||
"geo_uri": "geo:51.5076,-0.1276",
|
||||
"msgtype": "m.location",
|
||||
"org.matrix.msc1767.text": "Found at geo:51.5076,-0.1276 at 2021-12-21T12:22+0000",
|
||||
"org.matrix.msc3488.asset": {
|
||||
"type": "m.pin",
|
||||
},
|
||||
"org.matrix.msc3488.location": {
|
||||
"description": "Human-readable label",
|
||||
"uri": "geo:51.5076,-0.1276",
|
||||
},
|
||||
"org.matrix.msc3488.ts": 252523,
|
||||
},
|
||||
"event_id": "$2",
|
||||
"type": "org.matrix.msc3488.location",
|
||||
}
|
||||
}
|
||||
onClick={[Function]}
|
||||
onError={[Function]}
|
||||
tooltip="Expand map"
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="mx_MLocationBody"
|
||||
>
|
||||
<div
|
||||
className="mx_MLocationBody"
|
||||
tabindex="0"
|
||||
>
|
||||
<TooltipTarget
|
||||
alignment={5}
|
||||
label="Expand map"
|
||||
maxParentWidth={450}
|
||||
<div
|
||||
class="mx_Map mx_MLocationBody_map"
|
||||
id="mx_Map_mx_MLocationBody_$2_abdefghi"
|
||||
>
|
||||
<div
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseLeave={[Function]}
|
||||
onMouseMove={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
tabIndex={0}
|
||||
>
|
||||
<Map
|
||||
centerGeoUri="geo:51.5076,-0.1276"
|
||||
className="mx_MLocationBody_map"
|
||||
id="mx_MLocationBody_$2_HHHHHHHH"
|
||||
onClick={[Function]}
|
||||
onError={[Function]}
|
||||
<span>
|
||||
<div
|
||||
class="mx_Marker mx_Marker_defaultColor"
|
||||
id="mx_MLocationBody_$2_abdefghi-marker"
|
||||
>
|
||||
<div
|
||||
className="mx_Map mx_MLocationBody_map"
|
||||
id="mx_Map_mx_MLocationBody_$2_HHHHHHHH"
|
||||
onClick={[Function]}
|
||||
class="mx_Marker_border"
|
||||
>
|
||||
<SmartMarker
|
||||
geoUri="geo:51.5076,-0.1276"
|
||||
id="mx_MLocationBody_$2_HHHHHHHH-marker"
|
||||
map={
|
||||
MockMap {
|
||||
"_events": {
|
||||
"error": [
|
||||
[Function],
|
||||
[Function],
|
||||
[Function],
|
||||
[Function],
|
||||
[Function],
|
||||
[Function],
|
||||
],
|
||||
},
|
||||
"_eventsCount": 1,
|
||||
"_maxListeners": undefined,
|
||||
"addControl": [MockFunction] {
|
||||
"calls": [
|
||||
[
|
||||
MockAttributionControl {},
|
||||
"top-right",
|
||||
],
|
||||
[
|
||||
MockAttributionControl {},
|
||||
"top-right",
|
||||
],
|
||||
],
|
||||
"results": [
|
||||
{
|
||||
"type": "return",
|
||||
"value": undefined,
|
||||
},
|
||||
{
|
||||
"type": "return",
|
||||
"value": undefined,
|
||||
},
|
||||
],
|
||||
},
|
||||
"fitBounds": [MockFunction],
|
||||
"removeControl": [MockFunction],
|
||||
"setCenter": [MockFunction] {
|
||||
"calls": [
|
||||
[
|
||||
{
|
||||
"lat": 51.5076,
|
||||
"lon": -0.1276,
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
"lat": 51.5076,
|
||||
"lon": -0.1276,
|
||||
},
|
||||
],
|
||||
],
|
||||
"results": [
|
||||
{
|
||||
"type": "return",
|
||||
"value": undefined,
|
||||
},
|
||||
{
|
||||
"type": "return",
|
||||
"value": undefined,
|
||||
},
|
||||
],
|
||||
},
|
||||
"setStyle": [MockFunction],
|
||||
"zoomIn": [MockFunction],
|
||||
"zoomOut": [MockFunction],
|
||||
Symbol(kCapture): false,
|
||||
}
|
||||
}
|
||||
>
|
||||
<span>
|
||||
<ForwardRef
|
||||
id="mx_MLocationBody_$2_HHHHHHHH-marker"
|
||||
>
|
||||
<div
|
||||
className="mx_Marker mx_Marker_defaultColor"
|
||||
id="mx_MLocationBody_$2_HHHHHHHH-marker"
|
||||
>
|
||||
<OptionalTooltip>
|
||||
<div
|
||||
className="mx_Marker_border"
|
||||
>
|
||||
<div
|
||||
className="mx_Marker_icon"
|
||||
/>
|
||||
</div>
|
||||
</OptionalTooltip>
|
||||
</div>
|
||||
</ForwardRef>
|
||||
</span>
|
||||
</SmartMarker>
|
||||
<div
|
||||
class="mx_Marker_icon"
|
||||
/>
|
||||
</div>
|
||||
</Map>
|
||||
</div>
|
||||
</TooltipTarget>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</LocationBodyContent>
|
||||
</MLocationBody>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`MLocationBody <MLocationBody> without error renders marker correctly for a self share 1`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="mx_MLocationBody"
|
||||
>
|
||||
<div
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="mx_Map mx_MLocationBody_map"
|
||||
id="mx_Map_mx_MLocationBody_$3_abdefghi"
|
||||
>
|
||||
<span>
|
||||
<div
|
||||
class="mx_Marker mx_Marker_defaultColor"
|
||||
id="mx_MLocationBody_$3_abdefghi-marker"
|
||||
>
|
||||
<div
|
||||
class="mx_Marker_border"
|
||||
>
|
||||
<span
|
||||
class="mx_BaseAvatar"
|
||||
role="presentation"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="mx_BaseAvatar_initial"
|
||||
style="font-size: 23.400000000000002px; width: 36px; line-height: 36px;"
|
||||
>
|
||||
U
|
||||
</span>
|
||||
<img
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="mx_BaseAvatar_image"
|
||||
data-testid="avatar-img"
|
||||
src="data:image/png;base64,00"
|
||||
style="width: 36px; height: 36px;"
|
||||
title="@user:server"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -15,14 +15,8 @@ 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";
|
||||
import "blob-polyfill"; // https://github.com/jsdom/jsdom/issues/2555
|
||||
|
||||
// Enable the enzyme mocks
|
||||
configure({ adapter: new Adapter() });
|
||||
|
||||
// Very carefully enable the mocks for everything else in
|
||||
// a specific order. We use this order to ensure we properly
|
||||
// establish an application state that actually works.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue