Live location sharing - smart location marker (#8232)

* 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>

* remove skinned-sdk

Signed-off-by: Kerry Archibald <kerrya@element.io>

* lint

Signed-off-by: Kerry Archibald <kerrya@element.io>

* better types for LocationBodyContent

Signed-off-by: Kerry Archibald <kerrya@element.io>

test/components/views/location/SmartMarker-test.tsx

@@ -0,0 +1,80 @@
+/*
+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 { mocked } from 'jest-mock';
+import maplibregl from 'maplibre-gl';
+
+import SmartMarker from '../../../../src/components/views/location/SmartMarker';
+
+jest.mock('../../../../src/utils/location/findMapStyleUrl', () => ({
+    findMapStyleUrl: jest.fn().mockReturnValue('tileserver.com'),
+}));
+
+describe('<SmartMarker />', () => {
+    const mockMap = new maplibregl.Map();
+    const mockMarker = new maplibregl.Marker();
+
+    const defaultProps = {
+        map: mockMap,
+        geoUri: 'geo:43.2,54.6',
+    };
+    const getComponent = (props = {}) =>
+        mount(<SmartMarker {...defaultProps} {...props} />);
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('creates a marker on mount', () => {
+        const component = getComponent();
+        expect(component).toMatchSnapshot();
+
+        component.setProps({});
+
+        // marker added only once
+        expect(maplibregl.Marker).toHaveBeenCalledTimes(1);
+        // set to correct position
+        expect(mockMarker.setLngLat).toHaveBeenCalledWith({ lon: 54.6, lat: 43.2 });
+        // added to map
+        expect(mockMarker.addTo).toHaveBeenCalledWith(mockMap);
+    });
+
+    it('updates marker position on change', () => {
+        const component = getComponent({ geoUri: 'geo:40,50' });
+
+        component.setProps({ geoUri: 'geo:41,51' });
+        component.setProps({ geoUri: 'geo:42,52' });
+
+        // marker added only once
+        expect(maplibregl.Marker).toHaveBeenCalledTimes(1);
+        // set positions
+        expect(mocked(mockMarker.setLngLat)).toHaveBeenCalledWith({ lat: 40, lon: 50 });
+        expect(mocked(mockMarker.setLngLat)).toHaveBeenCalledWith({ lat: 41, lon: 51 });
+        expect(mocked(mockMarker.setLngLat)).toHaveBeenCalledWith({ lat: 42, lon: 52 });
+    });
+
+    it('removes marker on unmount', () => {
+        const component = getComponent();
+        expect(component).toMatchSnapshot();
+
+        component.setProps({});
+
+        component.unmount();
+        expect(mockMarker.remove).toHaveBeenCalled();
+    });
+});

test/components/views/location/__snapshots__/Marker-test.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Marker /> renders with location icon when no room member 1`] = `
-<Marker
+<ForwardRef
   id="abc123"
 >
   <div
@@ -16,5 +16,5 @@ exports[`<Marker /> renders with location icon when no room member 1`] = `
       />
     </div>
   </div>
-</Marker>
+</ForwardRef>
 `;

test/components/views/location/__snapshots__/SmartMarker-test.tsx.snap

@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SmartMarker /> creates a marker on mount 1`] = `
+<SmartMarker
+  geoUri="geo:43.2,54.6"
+  map={
+    MockMap {
+      "_events": Object {},
+      "_eventsCount": 0,
+      "_maxListeners": undefined,
+      "addControl": [MockFunction],
+      "removeControl": [MockFunction],
+      Symbol(kCapture): false,
+    }
+  }
+>
+  <ForwardRef>
+    <div
+      className="mx_Marker mx_Marker_defaultColor"
+    >
+      <div
+        className="mx_Marker_border"
+      >
+        <div
+          className="mx_Marker_icon"
+        />
+      </div>
+    </div>
+  </ForwardRef>
+</SmartMarker>
+`;
+
+exports[`<SmartMarker /> removes marker on unmount 1`] = `
+<SmartMarker
+  geoUri="geo:43.2,54.6"
+  map={
+    MockMap {
+      "_events": Object {},
+      "_eventsCount": 0,
+      "_maxListeners": undefined,
+      "addControl": [MockFunction],
+      "removeControl": [MockFunction],
+      Symbol(kCapture): false,
+    }
+  }
+>
+  <ForwardRef>
+    <div
+      className="mx_Marker mx_Marker_defaultColor"
+    >
+      <div
+        className="mx_Marker_border"
+      >
+        <div
+          className="mx_Marker_icon"
+        />
+      </div>
+    </div>
+  </ForwardRef>
+</SmartMarker>
+`;