Live location sharing - consolidate maps (#8236)

* extract location markers into generic Marker Signed-off-by: Kerry Archibald <kerrya@element.io> * wrap marker in smartmarker Signed-off-by: Kerry Archibald <kerrya@element.io> * test smartmarker Signed-off-by: Kerry Archibald <kerrya@element.io> * working map in location body Signed-off-by: Kerry Archibald <kerrya@element.io> * test Map Signed-off-by: Kerry Archibald <kerrya@element.io> * remove skinned sdk Signed-off-by: Kerry Archibald <kerrya@element.io> * update snaps with new mocks Signed-off-by: Kerry Archibald <kerrya@element.io> * use new ZoomButtons in MLocationBody Signed-off-by: Kerry Archibald <kerrya@element.io> * make LocationViewDialog map interactive Signed-off-by: Kerry Archibald <kerrya@element.io> * test MLocationBody Signed-off-by: Kerry Archibald <kerrya@element.io> * test LocationViewDialog Signed-off-by: Kerry Archibald <kerrya@element.io> * add copyrights, shrink snapshot Signed-off-by: Kerry Archibald <kerrya@element.io> * update comment Signed-off-by: Kerry Archibald <kerrya@element.io> * lint Signed-off-by: Kerry Archibald <kerrya@element.io> * lint Signed-off-by: Kerry Archibald <kerrya@element.io>
2025-08-09 08:42:50 +03:00 · 2022-04-11 18:40:06 +02:00
parent 944e11d7d6
commit 9ba55d1d14
16 changed files with 890 additions and 235 deletions
--- a/test/components/views/location/LocationPicker-test.tsx
+++ b/test/components/views/location/LocationPicker-test.tsx
@@ -283,7 +283,7 @@ describe("LocationPicker", () => {
                });

                // marker not added
-                expect(wrapper.find('.mx_MLocationBody_markerBorder').length).toBeFalsy();
+                expect(wrapper.find('Marker').length).toBeFalsy();
            });

            it('sets position on click event', () => {
--- a/test/components/views/location/LocationViewDialog-test.tsx
+++ b/test/components/views/location/LocationViewDialog-test.tsx
@@ -0,0 +1,56 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import { mount } from 'enzyme';
+import { RoomMember } from 'matrix-js-sdk/src/matrix';
+import { LocationAssetType } from 'matrix-js-sdk/src/@types/location';
+
+import LocationViewDialog from '../../../../src/components/views/location/LocationViewDialog';
+import { getMockClientWithEventEmitter, makeLocationEvent } from '../../../test-utils';
+
+describe('<LocationViewDialog />', () => {
+    const roomId = '!room:server';
+    const userId = '@user:server';
+    const mockClient = getMockClientWithEventEmitter({
+        getClientWellKnown: jest.fn().mockReturnValue({
+            "m.tile_server": { map_style_url: 'maps.com' },
+        }),
+        isGuest: jest.fn().mockReturnValue(false),
+    });
+    const defaultEvent = makeLocationEvent("geo:51.5076,-0.1276", LocationAssetType.Pin);
+    const defaultProps = {
+        matrixClient: mockClient,
+        mxEvent: defaultEvent,
+        onFinished: jest.fn(),
+    };
+    const getComponent = (props = {}) =>
+        mount(<LocationViewDialog {...defaultProps} {...props} />);
+
+    it('renders map correctly', () => {
+        const component = getComponent();
+        expect(component.find('Map')).toMatchSnapshot();
+    });
+
+    it('renders marker correctly for 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 });
+        expect(component.find('SmartMarker').props()['roomMember']).toEqual(member);
+    });
+});
--- a/test/components/views/location/Map-test.tsx
+++ b/test/components/views/location/Map-test.tsx
@@ -0,0 +1,165 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
+import maplibregl from 'maplibre-gl';
+import { ClientEvent } from 'matrix-js-sdk/src/matrix';
+import { logger } from 'matrix-js-sdk/src/logger';
+
+import Map from '../../../../src/components/views/location/Map';
+import { findByTestId, getMockClientWithEventEmitter } from '../../../test-utils';
+import MatrixClientContext from '../../../../src/contexts/MatrixClientContext';
+
+describe('<Map />', () => {
+    const defaultProps = {
+        centerGeoUri: 'geo:52,41',
+        id: 'test-123',
+        onError: jest.fn(),
+        onClick: jest.fn(),
+    };
+    const matrixClient = getMockClientWithEventEmitter({
+        getClientWellKnown: jest.fn().mockReturnValue({
+            "m.tile_server": { map_style_url: 'maps.com' },
+        }),
+    });
+    const getComponent = (props = {}) =>
+        mount(<Map {...defaultProps} {...props} />, {
+            wrappingComponent: MatrixClientContext.Provider,
+            wrappingComponentProps: { value: matrixClient },
+        });
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        matrixClient.getClientWellKnown.mockReturnValue({
+            "m.tile_server": { map_style_url: 'maps.com' },
+        });
+
+        jest.spyOn(logger, 'error').mockRestore();
+    });
+
+    const mockMap = new maplibregl.Map();
+
+    it('renders', () => {
+        const component = getComponent();
+        expect(component).toBeTruthy();
+    });
+
+    describe('onClientWellKnown emits', () => {
+        it('updates map style when style url is truthy', () => {
+            getComponent();
+
+            act(() => {
+                matrixClient.emit(ClientEvent.ClientWellKnown, {
+                    "m.tile_server": { map_style_url: 'new.maps.com' },
+                });
+            });
+
+            expect(mockMap.setStyle).toHaveBeenCalledWith('new.maps.com');
+        });
+
+        it('does not update map style when style url is truthy', () => {
+            getComponent();
+
+            act(() => {
+                matrixClient.emit(ClientEvent.ClientWellKnown, {
+                    "m.tile_server": { map_style_url: undefined },
+                });
+            });
+
+            expect(mockMap.setStyle).not.toHaveBeenCalledWith();
+        });
+    });
+
+    describe('map centering', () => {
+        it('does not try to center when no center uri provided', () => {
+            getComponent({ centerGeoUri: null });
+            expect(mockMap.setCenter).not.toHaveBeenCalled();
+        });
+
+        it('sets map center to centerGeoUri', () => {
+            getComponent({ centerGeoUri: 'geo:51,42' });
+            expect(mockMap.setCenter).toHaveBeenCalledWith({ lat: 51, lon: 42 });
+        });
+
+        it('handles invalid centerGeoUri', () => {
+            const logSpy = jest.spyOn(logger, 'error').mockImplementation();
+            getComponent({ centerGeoUri: '123 Sesame Street' });
+            expect(mockMap.setCenter).not.toHaveBeenCalled();
+            expect(logSpy).toHaveBeenCalledWith('Could not set map center', '123 Sesame Street');
+        });
+
+        it('updates map center when centerGeoUri prop changes', () => {
+            const component = getComponent({ centerGeoUri: 'geo:51,42' });
+
+            component.setProps({ centerGeoUri: 'geo:53,45' });
+            component.setProps({ centerGeoUri: 'geo:56,47' });
+            expect(mockMap.setCenter).toHaveBeenCalledWith({ lat: 51, lon: 42 });
+            expect(mockMap.setCenter).toHaveBeenCalledWith({ lat: 53, lon: 45 });
+            expect(mockMap.setCenter).toHaveBeenCalledWith({ lat: 56, lon: 47 });
+        });
+    });
+
+    describe('children', () => {
+        it('renders without children', () => {
+            const component = getComponent({ children: null });
+
+            component.setProps({});
+
+            // no error
+            expect(component).toBeTruthy();
+        });
+
+        it('renders children with map renderProp', () => {
+            const children = ({ map }) => <div data-test-id='test-child' data-map={map}>Hello, world</div>;
+
+            const component = getComponent({ children });
+
+            // renders child with map instance
+            expect(findByTestId(component, 'test-child').props()['data-map']).toEqual(mockMap);
+        });
+    });
+
+    describe('onClick', () => {
+        it('eats clicks to maplibre attribution button', () => {
+            const onClick = jest.fn();
+            const component = getComponent({ onClick });
+
+            act(() => {
+                // this is added to the dom by maplibregl
+                // which is mocked
+                // just fake the target
+                const fakeEl = document.createElement('div');
+                fakeEl.className = 'maplibregl-ctrl-attrib-button';
+                component.simulate('click', { target: fakeEl });
+            });
+
+            expect(onClick).not.toHaveBeenCalled();
+        });
+
+        it('calls onClick', () => {
+            const onClick = jest.fn();
+            const component = getComponent({ onClick });
+
+            act(() => {
+                component.simulate('click');
+            });
+
+            expect(onClick).toHaveBeenCalled();
+        });
+    });
+});
--- a/test/components/views/location/snapshots/LocationViewDialog-test.tsx.snap
+++ b/test/components/views/location/snapshots/LocationViewDialog-test.tsx.snap
@@ -0,0 +1,156 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<LocationViewDialog /> renders map correctly 1`] = `
+<Map
+  centerGeoUri="geo:51.5076,-0.1276"
+  className="mx_LocationViewDialog_map"
+  id="mx_LocationViewDialog_$2"
+  interactive={true}
+  onError={[Function]}
+>
+  <div
+    className="mx_Map mx_LocationViewDialog_map"
+    id="mx_Map_mx_LocationViewDialog_$2"
+    onClick={[Function]}
+  >
+    <SmartMarker
+      geoUri="geo:51.5076,-0.1276"
+      id="mx_LocationViewDialog_$2-marker"
+      map={
+        MockMap {
+          "_events": Object {
+            "error": [Function],
+          },
+          "_eventsCount": 1,
+          "_maxListeners": undefined,
+          "addControl": [MockFunction],
+          "removeControl": [MockFunction],
+          "setCenter": [MockFunction] {
+            "calls": Array [
+              Array [
+                Object {
+                  "lat": 51.5076,
+                  "lon": -0.1276,
+                },
+              ],
+            ],
+            "results": Array [
+              Object {
+                "type": "return",
+                "value": undefined,
+              },
+            ],
+          },
+          "setStyle": [MockFunction],
+          "zoomIn": [MockFunction],
+          "zoomOut": [MockFunction],
+          Symbol(kCapture): false,
+        }
+      }
+    >
+      <ForwardRef
+        id="mx_LocationViewDialog_$2-marker"
+      >
+        <div
+          className="mx_Marker mx_Marker_defaultColor"
+          id="mx_LocationViewDialog_$2-marker"
+        >
+          <div
+            className="mx_Marker_border"
+          >
+            <div
+              className="mx_Marker_icon"
+            />
+          </div>
+        </div>
+      </ForwardRef>
+    </SmartMarker>
+    <ZoomButtons
+      map={
+        MockMap {
+          "_events": Object {
+            "error": [Function],
+          },
+          "_eventsCount": 1,
+          "_maxListeners": undefined,
+          "addControl": [MockFunction],
+          "removeControl": [MockFunction],
+          "setCenter": [MockFunction] {
+            "calls": Array [
+              Array [
+                Object {
+                  "lat": 51.5076,
+                  "lon": -0.1276,
+                },
+              ],
+            ],
+            "results": Array [
+              Object {
+                "type": "return",
+                "value": undefined,
+              },
+            ],
+          },
+          "setStyle": [MockFunction],
+          "zoomIn": [MockFunction],
+          "zoomOut": [MockFunction],
+          Symbol(kCapture): false,
+        }
+      }
+    >
+      <div
+        className="mx_ZoomButtons"
+      >
+        <AccessibleButton
+          className="mx_ZoomButtons_button"
+          data-test-id="map-zoom-in-button"
+          element="div"
+          onClick={[Function]}
+          role="button"
+          tabIndex={0}
+          title="Zoom in"
+        >
+          <div
+            className="mx_AccessibleButton mx_ZoomButtons_button"
+            data-test-id="map-zoom-in-button"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            onKeyUp={[Function]}
+            role="button"
+            tabIndex={0}
+            title="Zoom in"
+          >
+            <div
+              className="mx_ZoomButtons_icon"
+            />
+          </div>
+        </AccessibleButton>
+        <AccessibleButton
+          className="mx_ZoomButtons_button"
+          data-test-id="map-zoom-out-button"
+          element="div"
+          onClick={[Function]}
+          role="button"
+          tabIndex={0}
+          title="Zoom out"
+        >
+          <div
+            className="mx_AccessibleButton mx_ZoomButtons_button"
+            data-test-id="map-zoom-out-button"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            onKeyUp={[Function]}
+            role="button"
+            tabIndex={0}
+            title="Zoom out"
+          >
+            <div
+              className="mx_ZoomButtons_icon"
+            />
+          </div>
+        </AccessibleButton>
+      </div>
+    </ZoomButtons>
+  </div>
+</Map>
+`;
--- a/test/components/views/location/snapshots/SmartMarker-test.tsx.snap
+++ b/test/components/views/location/snapshots/SmartMarker-test.tsx.snap
@@ -10,6 +10,8 @@ exports[`<SmartMarker /> creates a marker on mount 1`] = `
      "_maxListeners": undefined,
      "addControl": [MockFunction],
      "removeControl": [MockFunction],
+      "setCenter": [MockFunction],
+      "setStyle": [MockFunction],
      "zoomIn": [MockFunction],
      "zoomOut": [MockFunction],
      Symbol(kCapture): false,
@@ -42,6 +44,8 @@ exports[`<SmartMarker /> removes marker on unmount 1`] = `
      "_maxListeners": undefined,
      "addControl": [MockFunction],
      "removeControl": [MockFunction],
+      "setCenter": [MockFunction],
+      "setStyle": [MockFunction],
      "zoomIn": [MockFunction],
      "zoomOut": [MockFunction],
      Symbol(kCapture): false,
--- a/test/components/views/location/snapshots/ZoomButtons-test.tsx.snap
+++ b/test/components/views/location/snapshots/ZoomButtons-test.tsx.snap
@@ -9,6 +9,8 @@ exports[`<ZoomButtons /> renders buttons 1`] = `
      "_maxListeners": undefined,
      "addControl": [MockFunction],
      "removeControl": [MockFunction],
+      "setCenter": [MockFunction],
+      "setStyle": [MockFunction],
      "zoomIn": [MockFunction],
      "zoomOut": [MockFunction],
      Symbol(kCapture): false,
--- a/test/components/views/messages/MLocationBody-test.tsx
+++ b/test/components/views/messages/MLocationBody-test.tsx
@@ -16,50 +16,52 @@ limitations under the License.

 import React from 'react';
 import { mount } from "enzyme";
-import { mocked } from 'jest-mock';
 import { LocationAssetType } from "matrix-js-sdk/src/@types/location";
+import { RoomMember } from 'matrix-js-sdk/src/matrix';
 import maplibregl from 'maplibre-gl';
 import { logger } from 'matrix-js-sdk/src/logger';
+import { act } from 'react-dom/test-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 { getTileServerWellKnown } from "../../../../src/utils/WellKnownUtils";
+import Modal from '../../../../src/Modal';
 import SdkConfig from "../../../../src/SdkConfig";
 import { makeLocationEvent } from "../../../test-utils/location";
-
-jest.mock("../../../../src/utils/WellKnownUtils", () => ({
-    getTileServerWellKnown: jest.fn(),
-}));
+import { getMockClientWithEventEmitter } from '../../../test-utils';

 describe("MLocationBody", () => {
    describe('<MLocationBody>', () => {
+        const roomId = '!room:server';
+        const userId = '@user:server';
+        const mockClient = getMockClientWithEventEmitter({
+            getClientWellKnown: jest.fn().mockReturnValue({
+                "m.tile_server": { map_style_url: 'maps.com' },
+            }),
+            isGuest: jest.fn().mockReturnValue(false),
+        });
+        const defaultEvent = makeLocationEvent("geo:51.5076,-0.1276", LocationAssetType.Pin);
+        const defaultProps = {
+            mxEvent: defaultEvent,
+            highlights: [],
+            highlightLink: '',
+            onHeightChanged: jest.fn(),
+            onMessageAllowed: jest.fn(),
+            permalinkCreator: {} as RoomPermalinkCreator,
+            mediaEventHelper: {} as MediaEventHelper,
+        };
+        const getComponent = (props = {}) => mount(<MLocationBody {...defaultProps} {...props} />, {
+            wrappingComponent: MatrixClientContext.Provider,
+            wrappingComponentProps: { value: mockClient },
+        });
        describe('with error', () => {
-            const mockClient = {
-                on: jest.fn(),
-                off: jest.fn(),
-            };
-            const defaultEvent = makeLocationEvent("geo:51.5076,-0.1276", LocationAssetType.Pin);
-            const defaultProps = {
-                mxEvent: defaultEvent,
-                highlights: [],
-                highlightLink: '',
-                onHeightChanged: jest.fn(),
-                onMessageAllowed: jest.fn(),
-                permalinkCreator: {} as RoomPermalinkCreator,
-                mediaEventHelper: {} as MediaEventHelper,
-            };
-            const getComponent = (props = {}) => mount(<MLocationBody {...defaultProps} {...props} />, {
-                wrappingComponent: MatrixClientContext.Provider,
-                wrappingComponentProps: { value: mockClient },
-            });
            let sdkConfigSpy;

            beforeEach(() => {
                // eat expected errors to keep console clean
                jest.spyOn(logger, 'error').mockImplementation(() => { });
-                mocked(getTileServerWellKnown).mockReturnValue({});
+                mockClient.getClientWellKnown.mockReturnValue({});
                sdkConfigSpy = jest.spyOn(SdkConfig, 'get').mockReturnValue({});
            });

@@ -75,7 +77,9 @@ describe("MLocationBody", () => {

            it('displays correct fallback content when map_style_url is misconfigured', () => {
                const mockMap = new maplibregl.Map();
-                mocked(getTileServerWellKnown).mockReturnValue({ map_style_url: 'bad-tile-server.com' });
+                mockClient.getClientWellKnown.mockReturnValue({
+                    "m.tile_server": { map_style_url: 'bad-tile-server.com' },
+                });
                const component = getComponent();

                // simulate error initialising map in maplibregl
@@ -85,5 +89,69 @@ describe("MLocationBody", () => {
                expect(component.find(".mx_EventTile_body")).toMatchSnapshot();
            });
        });
+
+        describe('without error', () => {
+            beforeEach(() => {
+                mockClient.getClientWellKnown.mockReturnValue({
+                    "m.tile_server": { map_style_url: 'maps.com' },
+                });
+
+                // MLocationBody uses random number for map id
+                // stabilise for test
+                jest.spyOn(global.Math, 'random').mockReturnValue(0.123456);
+            });
+
+            afterAll(() => {
+                jest.spyOn(global.Math, 'random').mockRestore();
+            });
+
+            it('renders map correctly', () => {
+                const mockMap = new maplibregl.Map();
+                const component = getComponent();
+
+                expect(component).toMatchSnapshot();
+                // map was centered
+                expect(mockMap.setCenter).toHaveBeenCalledWith({
+                    lat: 51.5076, lon: -0.1276,
+                });
+            });
+
+            it('opens map dialog on click', () => {
+                const modalSpy = jest.spyOn(Modal, 'createTrackedDialog').mockReturnValue(undefined);
+                const component = getComponent();
+
+                act(() => {
+                    component.find('Map').at(0).simulate('click');
+                });
+
+                expect(modalSpy).toHaveBeenCalled();
+            });
+
+            it('renders marker correctly for a non-self share', () => {
+                const mockMap = new maplibregl.Map();
+                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);
+                // @ts-ignore cheat assignment to property
+                selfShareEvent.sender = member;
+                const component = getComponent({ mxEvent: selfShareEvent });
+
+                // render self locations with user avatars
+                expect(component.find('SmartMarker').at(0).props()['roomMember']).toEqual(
+                    member,
+                );
+            });
+        });
    });
 });
--- a/test/components/views/messages/snapshots/MLocationBody-test.tsx.snap
+++ b/test/components/views/messages/snapshots/MLocationBody-test.tsx.snap
@@ -27,3 +27,159 @@ exports[`MLocationBody <MLocationBody> with error displays correct fallback cont
  Shared a location: Found at geo:51.5076,-0.1276 at 2021-12-21T12:22+0000
 </div>
 `;
+
+exports[`MLocationBody <MLocationBody> without error renders map correctly 1`] = `
+<MLocationBody
+  highlightLink=""
+  highlights={Array []}
+  mediaEventHelper={Object {}}
+  mxEvent={
+    Object {
+      "content": Object {
+        "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": Object {
+          "type": "m.pin",
+        },
+        "org.matrix.msc3488.location": Object {
+          "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={Object {}}
+>
+  <LocationBodyContent
+    mapId="mx_MLocationBody_$2_1f9acffa"
+    mxEvent={
+      Object {
+        "content": Object {
+          "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": Object {
+            "type": "m.pin",
+          },
+          "org.matrix.msc3488.location": Object {
+            "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"
+  >
+    <div
+      className="mx_MLocationBody"
+    >
+      <TooltipTarget
+        alignment={5}
+        label="Expand map"
+        maxParentWidth={450}
+      >
+        <div
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onMouseLeave={[Function]}
+          onMouseOver={[Function]}
+          tabIndex={0}
+        >
+          <Map
+            centerGeoUri="geo:51.5076,-0.1276"
+            className="mx_MLocationBody_map"
+            id="mx_MLocationBody_$2_1f9acffa"
+            onClick={[Function]}
+            onError={[Function]}
+          >
+            <div
+              className="mx_Map mx_MLocationBody_map"
+              id="mx_Map_mx_MLocationBody_$2_1f9acffa"
+              onClick={[Function]}
+            >
+              <SmartMarker
+                geoUri="geo:51.5076,-0.1276"
+                id="mx_MLocationBody_$2_1f9acffa-marker"
+                map={
+                  MockMap {
+                    "_events": Object {
+                      "error": Array [
+                        [Function],
+                        [Function],
+                      ],
+                    },
+                    "_eventsCount": 1,
+                    "_maxListeners": undefined,
+                    "addControl": [MockFunction],
+                    "removeControl": [MockFunction],
+                    "setCenter": [MockFunction] {
+                      "calls": Array [
+                        Array [
+                          Object {
+                            "lat": 51.5076,
+                            "lon": -0.1276,
+                          },
+                        ],
+                        Array [
+                          Object {
+                            "lat": 51.5076,
+                            "lon": -0.1276,
+                          },
+                        ],
+                      ],
+                      "results": Array [
+                        Object {
+                          "type": "return",
+                          "value": undefined,
+                        },
+                        Object {
+                          "type": "return",
+                          "value": undefined,
+                        },
+                      ],
+                    },
+                    "setStyle": [MockFunction],
+                    "zoomIn": [MockFunction],
+                    "zoomOut": [MockFunction],
+                    Symbol(kCapture): false,
+                  }
+                }
+              >
+                <ForwardRef
+                  id="mx_MLocationBody_$2_1f9acffa-marker"
+                >
+                  <div
+                    className="mx_Marker mx_Marker_defaultColor"
+                    id="mx_MLocationBody_$2_1f9acffa-marker"
+                  >
+                    <div
+                      className="mx_Marker_border"
+                    >
+                      <div
+                        className="mx_Marker_icon"
+                      />
+                    </div>
+                  </div>
+                </ForwardRef>
+              </SmartMarker>
+            </div>
+          </Map>
+        </div>
+      </TooltipTarget>
+    </div>
+  </LocationBodyContent>
+</MLocationBody>
+`;