element-web/test/unit-tests/components/views/messages/MLocationBody-test.tsx

163 lines
6.9 KiB
TypeScript
Raw Normal View History

2021-12-16 15:20:55 +01:00
/*
Copyright 2024 New Vector Ltd.
2021-12-16 15:20:55 +01:00
Copyright 2021 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
2021-12-16 15:20:55 +01:00
*/
2024-08-01 14:01:05 +02:00
import React from "react";
import { fireEvent, render, waitFor } from "jest-matrix-react";
import { LocationAssetType, ClientEvent, RoomMember, SyncState } from "matrix-js-sdk/src/matrix";
import * as maplibregl from "maplibre-gl";
2022-12-12 12:24:14 +01:00
import { logger } from "matrix-js-sdk/src/logger";
import { sleep } from "matrix-js-sdk/src/utils";
import MLocationBody from "../../../../../src/components/views/messages/MLocationBody";
import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext";
import { RoomPermalinkCreator } from "../../../../../src/utils/permalinks/Permalinks";
import { MediaEventHelper } from "../../../../../src/utils/MediaEventHelper";
import Modal from "../../../../../src/Modal";
import SdkConfig from "../../../../../src/SdkConfig";
import { TILE_SERVER_WK_KEY } from "../../../../../src/utils/WellKnownUtils";
import { makeLocationEvent } from "../../../../test-utils/location";
import { getMockClientWithEventEmitter } from "../../../../test-utils";
2021-12-16 15:20:55 +01:00
describe("MLocationBody", () => {
const mapOptions = { container: {} as unknown as HTMLElement, style: "" };
2022-12-12 12:24:14 +01:00
describe("<MLocationBody>", () => {
const roomId = "!room:server";
const userId = "@user:server";
const mockClient = getMockClientWithEventEmitter({
getClientWellKnown: jest.fn().mockReturnValue({
2022-12-12 12:24:14 +01:00
[TILE_SERVER_WK_KEY.name]: { map_style_url: "maps.com" },
}),
isGuest: jest.fn().mockReturnValue(false),
});
const defaultEvent = makeLocationEvent("geo:51.5076,-0.1276", LocationAssetType.Pin);
2024-08-01 14:01:05 +02:00
const defaultProps: MLocationBody["props"] = {
mxEvent: defaultEvent,
highlights: [],
2022-12-12 12:24:14 +01:00
highlightLink: "",
onHeightChanged: jest.fn(),
onMessageAllowed: jest.fn(),
permalinkCreator: {} as RoomPermalinkCreator,
mediaEventHelper: {} as MediaEventHelper,
};
2022-12-12 12:24:14 +01:00
const getComponent = (props = {}) =>
render(
<MatrixClientContext.Provider value={mockClient}>
<MLocationBody {...defaultProps} {...props} />
</MatrixClientContext.Provider>,
);
const getMapErrorComponent = () => {
const mockMap = new maplibregl.Map(mapOptions);
mockClient.getClientWellKnown.mockReturnValue({
2022-12-12 12:24:14 +01:00
[TILE_SERVER_WK_KEY.name]: { map_style_url: "bad-tile-server.com" },
});
const component = getComponent();
sleep(10).then(() => {
// simulate error initialising map in maplibregl
// @ts-ignore
mockMap.emit("error", { status: 404 });
});
return component;
};
beforeEach(() => {
jest.clearAllMocks();
});
2022-12-12 12:24:14 +01:00
describe("with error", () => {
let sdkConfigSpy: jest.SpyInstance<any>;
fallback to event text in location body when map unavailable (#7982) * center icon better Signed-off-by: Kerry Archibald <kerrya@element.io> * remove debug Signed-off-by: Kerry Archibald <kerrya@element.io> * retrigger all builds Signed-off-by: Kerry Archibald <kerrya@element.io> * set assetType on share event Signed-off-by: Kerry Archibald <kerrya@element.io> * use pin marker on map for pin drop share Signed-off-by: Kerry Archibald <kerrya@element.io> * lint Signed-off-by: Kerry Archibald <kerrya@element.io> * test events Signed-off-by: Kerry Archibald <kerrya@element.io> * pin drop helper text Signed-off-by: Kerry Archibald <kerrya@element.io> * use generic location type Signed-off-by: Kerry Archibald <kerrya@element.io> * add navigationcontrol when in pin mode Signed-off-by: Kerry Archibald <kerrya@element.io> * allow pin drop without location permissions Signed-off-by: Kerry Archibald <kerrya@element.io> * remove geolocate control when pin dropping without geo perms Signed-off-by: Kerry Archibald <kerrya@element.io> * test locationpicker Signed-off-by: Kerry Archibald <kerrya@element.io> * test marker type, tidy Signed-off-by: Kerry Archibald <kerrya@element.io> * move findMapStyleUrl Signed-off-by: Kerry Archibald <kerrya@element.io> * fallback to event content when cant render map Signed-off-by: Kerry Archibald <kerrya@element.io> * update mocks in location picker, show same messages as timeline Signed-off-by: Kerry Archibald <kerrya@element.io> * style error message in location share menu Signed-off-by: Kerry Archibald <kerrya@element.io> * i18n Signed-off-by: Kerry Archibald <kerrya@element.io> * forgotten copyright Signed-off-by: Kerry Archibald <kerrya@element.io> * add copyright Signed-off-by: Kerry Archibald <kerrya@element.io> * update style Signed-off-by: Kerry Archibald <kerrya@element.io> * icon bigger Signed-off-by: Kerry Archibald <kerrya@element.io>
2022-03-11 09:52:57 +01:00
beforeEach(() => {
// eat expected errors to keep console clean
2022-12-12 12:24:14 +01:00
jest.spyOn(logger, "error").mockImplementation(() => {});
mockClient.getClientWellKnown.mockReturnValue({});
2022-12-12 12:24:14 +01:00
sdkConfigSpy = jest.spyOn(SdkConfig, "get").mockReturnValue({});
fallback to event text in location body when map unavailable (#7982) * center icon better Signed-off-by: Kerry Archibald <kerrya@element.io> * remove debug Signed-off-by: Kerry Archibald <kerrya@element.io> * retrigger all builds Signed-off-by: Kerry Archibald <kerrya@element.io> * set assetType on share event Signed-off-by: Kerry Archibald <kerrya@element.io> * use pin marker on map for pin drop share Signed-off-by: Kerry Archibald <kerrya@element.io> * lint Signed-off-by: Kerry Archibald <kerrya@element.io> * test events Signed-off-by: Kerry Archibald <kerrya@element.io> * pin drop helper text Signed-off-by: Kerry Archibald <kerrya@element.io> * use generic location type Signed-off-by: Kerry Archibald <kerrya@element.io> * add navigationcontrol when in pin mode Signed-off-by: Kerry Archibald <kerrya@element.io> * allow pin drop without location permissions Signed-off-by: Kerry Archibald <kerrya@element.io> * remove geolocate control when pin dropping without geo perms Signed-off-by: Kerry Archibald <kerrya@element.io> * test locationpicker Signed-off-by: Kerry Archibald <kerrya@element.io> * test marker type, tidy Signed-off-by: Kerry Archibald <kerrya@element.io> * move findMapStyleUrl Signed-off-by: Kerry Archibald <kerrya@element.io> * fallback to event content when cant render map Signed-off-by: Kerry Archibald <kerrya@element.io> * update mocks in location picker, show same messages as timeline Signed-off-by: Kerry Archibald <kerrya@element.io> * style error message in location share menu Signed-off-by: Kerry Archibald <kerrya@element.io> * i18n Signed-off-by: Kerry Archibald <kerrya@element.io> * forgotten copyright Signed-off-by: Kerry Archibald <kerrya@element.io> * add copyright Signed-off-by: Kerry Archibald <kerrya@element.io> * update style Signed-off-by: Kerry Archibald <kerrya@element.io> * icon bigger Signed-off-by: Kerry Archibald <kerrya@element.io>
2022-03-11 09:52:57 +01:00
});
afterAll(() => {
sdkConfigSpy.mockRestore();
2022-12-12 12:24:14 +01:00
jest.spyOn(logger, "error").mockRestore();
fallback to event text in location body when map unavailable (#7982) * center icon better Signed-off-by: Kerry Archibald <kerrya@element.io> * remove debug Signed-off-by: Kerry Archibald <kerrya@element.io> * retrigger all builds Signed-off-by: Kerry Archibald <kerrya@element.io> * set assetType on share event Signed-off-by: Kerry Archibald <kerrya@element.io> * use pin marker on map for pin drop share Signed-off-by: Kerry Archibald <kerrya@element.io> * lint Signed-off-by: Kerry Archibald <kerrya@element.io> * test events Signed-off-by: Kerry Archibald <kerrya@element.io> * pin drop helper text Signed-off-by: Kerry Archibald <kerrya@element.io> * use generic location type Signed-off-by: Kerry Archibald <kerrya@element.io> * add navigationcontrol when in pin mode Signed-off-by: Kerry Archibald <kerrya@element.io> * allow pin drop without location permissions Signed-off-by: Kerry Archibald <kerrya@element.io> * remove geolocate control when pin dropping without geo perms Signed-off-by: Kerry Archibald <kerrya@element.io> * test locationpicker Signed-off-by: Kerry Archibald <kerrya@element.io> * test marker type, tidy Signed-off-by: Kerry Archibald <kerrya@element.io> * move findMapStyleUrl Signed-off-by: Kerry Archibald <kerrya@element.io> * fallback to event content when cant render map Signed-off-by: Kerry Archibald <kerrya@element.io> * update mocks in location picker, show same messages as timeline Signed-off-by: Kerry Archibald <kerrya@element.io> * style error message in location share menu Signed-off-by: Kerry Archibald <kerrya@element.io> * i18n Signed-off-by: Kerry Archibald <kerrya@element.io> * forgotten copyright Signed-off-by: Kerry Archibald <kerrya@element.io> * add copyright Signed-off-by: Kerry Archibald <kerrya@element.io> * update style Signed-off-by: Kerry Archibald <kerrya@element.io> * icon bigger Signed-off-by: Kerry Archibald <kerrya@element.io>
2022-03-11 09:52:57 +01:00
});
it("displays correct fallback content without error style when map_style_url is not configured", async () => {
fallback to event text in location body when map unavailable (#7982) * center icon better Signed-off-by: Kerry Archibald <kerrya@element.io> * remove debug Signed-off-by: Kerry Archibald <kerrya@element.io> * retrigger all builds Signed-off-by: Kerry Archibald <kerrya@element.io> * set assetType on share event Signed-off-by: Kerry Archibald <kerrya@element.io> * use pin marker on map for pin drop share Signed-off-by: Kerry Archibald <kerrya@element.io> * lint Signed-off-by: Kerry Archibald <kerrya@element.io> * test events Signed-off-by: Kerry Archibald <kerrya@element.io> * pin drop helper text Signed-off-by: Kerry Archibald <kerrya@element.io> * use generic location type Signed-off-by: Kerry Archibald <kerrya@element.io> * add navigationcontrol when in pin mode Signed-off-by: Kerry Archibald <kerrya@element.io> * allow pin drop without location permissions Signed-off-by: Kerry Archibald <kerrya@element.io> * remove geolocate control when pin dropping without geo perms Signed-off-by: Kerry Archibald <kerrya@element.io> * test locationpicker Signed-off-by: Kerry Archibald <kerrya@element.io> * test marker type, tidy Signed-off-by: Kerry Archibald <kerrya@element.io> * move findMapStyleUrl Signed-off-by: Kerry Archibald <kerrya@element.io> * fallback to event content when cant render map Signed-off-by: Kerry Archibald <kerrya@element.io> * update mocks in location picker, show same messages as timeline Signed-off-by: Kerry Archibald <kerrya@element.io> * style error message in location share menu Signed-off-by: Kerry Archibald <kerrya@element.io> * i18n Signed-off-by: Kerry Archibald <kerrya@element.io> * forgotten copyright Signed-off-by: Kerry Archibald <kerrya@element.io> * add copyright Signed-off-by: Kerry Archibald <kerrya@element.io> * update style Signed-off-by: Kerry Archibald <kerrya@element.io> * icon bigger Signed-off-by: Kerry Archibald <kerrya@element.io>
2022-03-11 09:52:57 +01:00
const component = getComponent();
// The map code needs to be lazy loaded so this will take some time to appear
await waitFor(() =>
expect(component.container.querySelector(".mx_EventTile_body")).toBeInTheDocument(),
);
expect(component.container.querySelector(".mx_EventTile_body")).toMatchSnapshot();
fallback to event text in location body when map unavailable (#7982) * center icon better Signed-off-by: Kerry Archibald <kerrya@element.io> * remove debug Signed-off-by: Kerry Archibald <kerrya@element.io> * retrigger all builds Signed-off-by: Kerry Archibald <kerrya@element.io> * set assetType on share event Signed-off-by: Kerry Archibald <kerrya@element.io> * use pin marker on map for pin drop share Signed-off-by: Kerry Archibald <kerrya@element.io> * lint Signed-off-by: Kerry Archibald <kerrya@element.io> * test events Signed-off-by: Kerry Archibald <kerrya@element.io> * pin drop helper text Signed-off-by: Kerry Archibald <kerrya@element.io> * use generic location type Signed-off-by: Kerry Archibald <kerrya@element.io> * add navigationcontrol when in pin mode Signed-off-by: Kerry Archibald <kerrya@element.io> * allow pin drop without location permissions Signed-off-by: Kerry Archibald <kerrya@element.io> * remove geolocate control when pin dropping without geo perms Signed-off-by: Kerry Archibald <kerrya@element.io> * test locationpicker Signed-off-by: Kerry Archibald <kerrya@element.io> * test marker type, tidy Signed-off-by: Kerry Archibald <kerrya@element.io> * move findMapStyleUrl Signed-off-by: Kerry Archibald <kerrya@element.io> * fallback to event content when cant render map Signed-off-by: Kerry Archibald <kerrya@element.io> * update mocks in location picker, show same messages as timeline Signed-off-by: Kerry Archibald <kerrya@element.io> * style error message in location share menu Signed-off-by: Kerry Archibald <kerrya@element.io> * i18n Signed-off-by: Kerry Archibald <kerrya@element.io> * forgotten copyright Signed-off-by: Kerry Archibald <kerrya@element.io> * add copyright Signed-off-by: Kerry Archibald <kerrya@element.io> * update style Signed-off-by: Kerry Archibald <kerrya@element.io> * icon bigger Signed-off-by: Kerry Archibald <kerrya@element.io>
2022-03-11 09:52:57 +01:00
});
it("displays correct fallback content when map_style_url is misconfigured", async () => {
const component = getMapErrorComponent();
await waitFor(() => expect(component.container.querySelector(".mx_EventTile_body")).toBeTruthy());
await waitFor(() => expect(component.container.querySelector(".mx_EventTile_body")).toMatchSnapshot());
fallback to event text in location body when map unavailable (#7982) * center icon better Signed-off-by: Kerry Archibald <kerrya@element.io> * remove debug Signed-off-by: Kerry Archibald <kerrya@element.io> * retrigger all builds Signed-off-by: Kerry Archibald <kerrya@element.io> * set assetType on share event Signed-off-by: Kerry Archibald <kerrya@element.io> * use pin marker on map for pin drop share Signed-off-by: Kerry Archibald <kerrya@element.io> * lint Signed-off-by: Kerry Archibald <kerrya@element.io> * test events Signed-off-by: Kerry Archibald <kerrya@element.io> * pin drop helper text Signed-off-by: Kerry Archibald <kerrya@element.io> * use generic location type Signed-off-by: Kerry Archibald <kerrya@element.io> * add navigationcontrol when in pin mode Signed-off-by: Kerry Archibald <kerrya@element.io> * allow pin drop without location permissions Signed-off-by: Kerry Archibald <kerrya@element.io> * remove geolocate control when pin dropping without geo perms Signed-off-by: Kerry Archibald <kerrya@element.io> * test locationpicker Signed-off-by: Kerry Archibald <kerrya@element.io> * test marker type, tidy Signed-off-by: Kerry Archibald <kerrya@element.io> * move findMapStyleUrl Signed-off-by: Kerry Archibald <kerrya@element.io> * fallback to event content when cant render map Signed-off-by: Kerry Archibald <kerrya@element.io> * update mocks in location picker, show same messages as timeline Signed-off-by: Kerry Archibald <kerrya@element.io> * style error message in location share menu Signed-off-by: Kerry Archibald <kerrya@element.io> * i18n Signed-off-by: Kerry Archibald <kerrya@element.io> * forgotten copyright Signed-off-by: Kerry Archibald <kerrya@element.io> * add copyright Signed-off-by: Kerry Archibald <kerrya@element.io> * update style Signed-off-by: Kerry Archibald <kerrya@element.io> * icon bigger Signed-off-by: Kerry Archibald <kerrya@element.io>
2022-03-11 09:52:57 +01:00
});
2022-12-12 12:24:14 +01:00
it("should clear the error on reconnect", () => {
const component = getMapErrorComponent();
expect(component.container.querySelector(".mx_EventTile_tileError")).toBeDefined();
mockClient.emit(ClientEvent.Sync, SyncState.Reconnecting, SyncState.Error);
expect(component.container.querySelector(".mx_EventTile_tileError")).toBeFalsy();
});
fallback to event text in location body when map unavailable (#7982) * center icon better Signed-off-by: Kerry Archibald <kerrya@element.io> * remove debug Signed-off-by: Kerry Archibald <kerrya@element.io> * retrigger all builds Signed-off-by: Kerry Archibald <kerrya@element.io> * set assetType on share event Signed-off-by: Kerry Archibald <kerrya@element.io> * use pin marker on map for pin drop share Signed-off-by: Kerry Archibald <kerrya@element.io> * lint Signed-off-by: Kerry Archibald <kerrya@element.io> * test events Signed-off-by: Kerry Archibald <kerrya@element.io> * pin drop helper text Signed-off-by: Kerry Archibald <kerrya@element.io> * use generic location type Signed-off-by: Kerry Archibald <kerrya@element.io> * add navigationcontrol when in pin mode Signed-off-by: Kerry Archibald <kerrya@element.io> * allow pin drop without location permissions Signed-off-by: Kerry Archibald <kerrya@element.io> * remove geolocate control when pin dropping without geo perms Signed-off-by: Kerry Archibald <kerrya@element.io> * test locationpicker Signed-off-by: Kerry Archibald <kerrya@element.io> * test marker type, tidy Signed-off-by: Kerry Archibald <kerrya@element.io> * move findMapStyleUrl Signed-off-by: Kerry Archibald <kerrya@element.io> * fallback to event content when cant render map Signed-off-by: Kerry Archibald <kerrya@element.io> * update mocks in location picker, show same messages as timeline Signed-off-by: Kerry Archibald <kerrya@element.io> * style error message in location share menu Signed-off-by: Kerry Archibald <kerrya@element.io> * i18n Signed-off-by: Kerry Archibald <kerrya@element.io> * forgotten copyright Signed-off-by: Kerry Archibald <kerrya@element.io> * add copyright Signed-off-by: Kerry Archibald <kerrya@element.io> * update style Signed-off-by: Kerry Archibald <kerrya@element.io> * icon bigger Signed-off-by: Kerry Archibald <kerrya@element.io>
2022-03-11 09:52:57 +01:00
});
2022-12-12 12:24:14 +01:00
describe("without error", () => {
beforeEach(() => {
mockClient.getClientWellKnown.mockReturnValue({
2022-12-12 12:24:14 +01:00
[TILE_SERVER_WK_KEY.name]: { map_style_url: "maps.com" },
});
// MLocationBody uses random number for map id
// stabilise for test
2022-12-12 12:24:14 +01:00
jest.spyOn(global.Math, "random").mockReturnValue(0.123456);
});
afterAll(() => {
2022-12-12 12:24:14 +01:00
jest.spyOn(global.Math, "random").mockRestore();
});
2022-12-12 12:24:14 +01:00
it("renders map correctly", () => {
const mockMap = new maplibregl.Map(mapOptions);
const component = getComponent();
expect(component.asFragment()).toMatchSnapshot();
// map was centered
expect(mockMap.setCenter).toHaveBeenCalledWith({
2022-12-12 12:24:14 +01:00
lat: 51.5076,
lon: -0.1276,
});
});
it("opens map dialog on click", async () => {
const modalSpy = jest
.spyOn(Modal, "createDialog")
.mockReturnValue({ finished: new Promise(() => {}), close: jest.fn() });
const component = getComponent();
await fireEvent.click(component.container.querySelector(".mx_Map")!);
expect(modalSpy).toHaveBeenCalled();
});
2022-12-12 12:24:14 +01:00
it("renders marker correctly for a self share", () => {
const selfShareEvent = makeLocationEvent("geo:51.5076,-0.1276", LocationAssetType.Self);
const member = new RoomMember(roomId, userId);
// @ts-ignore cheat assignment to property
selfShareEvent.sender = member;
const component = getComponent({ mxEvent: selfShareEvent });
// render self locations with user avatars
expect(component.asFragment()).toMatchSnapshot();
});
});
fallback to event text in location body when map unavailable (#7982) * center icon better Signed-off-by: Kerry Archibald <kerrya@element.io> * remove debug Signed-off-by: Kerry Archibald <kerrya@element.io> * retrigger all builds Signed-off-by: Kerry Archibald <kerrya@element.io> * set assetType on share event Signed-off-by: Kerry Archibald <kerrya@element.io> * use pin marker on map for pin drop share Signed-off-by: Kerry Archibald <kerrya@element.io> * lint Signed-off-by: Kerry Archibald <kerrya@element.io> * test events Signed-off-by: Kerry Archibald <kerrya@element.io> * pin drop helper text Signed-off-by: Kerry Archibald <kerrya@element.io> * use generic location type Signed-off-by: Kerry Archibald <kerrya@element.io> * add navigationcontrol when in pin mode Signed-off-by: Kerry Archibald <kerrya@element.io> * allow pin drop without location permissions Signed-off-by: Kerry Archibald <kerrya@element.io> * remove geolocate control when pin dropping without geo perms Signed-off-by: Kerry Archibald <kerrya@element.io> * test locationpicker Signed-off-by: Kerry Archibald <kerrya@element.io> * test marker type, tidy Signed-off-by: Kerry Archibald <kerrya@element.io> * move findMapStyleUrl Signed-off-by: Kerry Archibald <kerrya@element.io> * fallback to event content when cant render map Signed-off-by: Kerry Archibald <kerrya@element.io> * update mocks in location picker, show same messages as timeline Signed-off-by: Kerry Archibald <kerrya@element.io> * style error message in location share menu Signed-off-by: Kerry Archibald <kerrya@element.io> * i18n Signed-off-by: Kerry Archibald <kerrya@element.io> * forgotten copyright Signed-off-by: Kerry Archibald <kerrya@element.io> * add copyright Signed-off-by: Kerry Archibald <kerrya@element.io> * update style Signed-off-by: Kerry Archibald <kerrya@element.io> * icon bigger Signed-off-by: Kerry Archibald <kerrya@element.io>
2022-03-11 09:52:57 +01:00
});
2021-12-16 15:20:55 +01:00
});