Live location sharing - basic maximised beacon map (#8310)

* open a dialog with map centered around first beacon Signed-off-by: Kerry Archibald <kerrya@element.io> * add room member markers Signed-off-by: Kerry Archibald <kerrya@element.io> * fix unmount issue in smart marker Signed-off-by: Kerry Archibald <kerrya@element.io> * dont throw on no more live locations Signed-off-by: Kerry Archibald <kerrya@element.io> * cursor on beacon maps Signed-off-by: Kerry Archibald <kerrya@element.io> * fussy import ordering Signed-off-by: Kerry Archibald <kerrya@element.io> * test dialog opening from beacon body Signed-off-by: Kerry Archibald <kerrya@element.io> * test beaconmarker Signed-off-by: Kerry Archibald <kerrya@element.io> * test BeaconViewDialog Signed-off-by: Kerry Archibald <kerrya@element.io> * comment Signed-off-by: Kerry Archibald <kerrya@element.io> * use unstable prefix for wk tile_Server Signed-off-by: Kerry Archibald <kerrya@element.io> * unstable prefix for new m.tile_server use in test Signed-off-by: Kerry Archibald <kerrya@element.io>
2022-04-14 15:14:05 +02:00 · 2022-04-14 15:14:05 +02:00 · f95106d2c6
commit f95106d2c6
parent 1c215e2b71
20 changed files with 894 additions and 56 deletions
--- a/test/components/views/beacon/BeaconMarker-test.tsx
+++ b/test/components/views/beacon/BeaconMarker-test.tsx
@ -0,0 +1,136 @@
+/*
+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 maplibregl from 'maplibre-gl';
+import { act } from 'react-dom/test-utils';
+import {
+    Beacon,
+    Room,
+    RoomMember,
+    getBeaconInfoIdentifier,
+} from 'matrix-js-sdk/src/matrix';
+
+import BeaconMarker from '../../../../src/components/views/beacon/BeaconMarker';
+import MatrixClientContext from '../../../../src/contexts/MatrixClientContext';
+import { getMockClientWithEventEmitter, makeBeaconEvent, makeBeaconInfoEvent } from '../../../test-utils';
+import { TILE_SERVER_WK_KEY } from '../../../../src/utils/WellKnownUtils';
+
+describe('<BeaconMarker />', () => {
+    // 14.03.2022 16:15
+    const now = 1647270879403;
+    // stable date for snapshots
+    jest.spyOn(global.Date, 'now').mockReturnValue(now);
+    const roomId = '!room:server';
+    const aliceId = '@alice:server';
+
+    const aliceMember = new RoomMember(roomId, aliceId);
+
+    const mockMap = new maplibregl.Map();
+
+    const mockClient = getMockClientWithEventEmitter({
+        getClientWellKnown: jest.fn().mockReturnValue({
+            [TILE_SERVER_WK_KEY.name]: { map_style_url: 'maps.com' },
+        }),
+        getUserId: jest.fn().mockReturnValue(aliceId),
+        getRoom: jest.fn(),
+        isGuest: jest.fn().mockReturnValue(false),
+    });
+
+    // make fresh rooms every time
+    // as we update room state
+    const makeRoomWithStateEvents = (stateEvents = []): Room => {
+        const room1 = new Room(roomId, mockClient, aliceId);
+
+        room1.currentState.setStateEvents(stateEvents);
+        jest.spyOn(room1, 'getMember').mockReturnValue(aliceMember);
+        mockClient.getRoom.mockReturnValue(room1);
+
+        return room1;
+    };
+
+    const defaultEvent = makeBeaconInfoEvent(aliceId,
+        roomId,
+        { isLive: true },
+        '$alice-room1-1',
+    );
+    const notLiveEvent = makeBeaconInfoEvent(aliceId,
+        roomId,
+        { isLive: false },
+        '$alice-room1-2',
+    );
+
+    const location1 = makeBeaconEvent(
+        aliceId, { beaconInfoId: defaultEvent.getId(), geoUri: 'geo:51,41', timestamp: now + 1 },
+    );
+    const location2 = makeBeaconEvent(
+        aliceId, { beaconInfoId: defaultEvent.getId(), geoUri: 'geo:52,42', timestamp: now + 10000 },
+    );
+
+    const defaultProps = {
+        map: mockMap,
+        beacon: new Beacon(defaultEvent),
+    };
+
+    const getComponent = (props = {}) =>
+        mount(<BeaconMarker {...defaultProps} {...props} />, {
+            wrappingComponent: MatrixClientContext.Provider,
+            wrappingComponentProps: { value: mockClient },
+        });
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('renders nothing when beacon is not live', () => {
+        const room = makeRoomWithStateEvents([notLiveEvent]);
+        const beacon = room.currentState.beacons.get(getBeaconInfoIdentifier(notLiveEvent));
+        const component = getComponent({ beacon });
+        expect(component.html()).toBe(null);
+    });
+
+    it('renders nothing when beacon has no location', () => {
+        const room = makeRoomWithStateEvents([defaultEvent]);
+        const beacon = room.currentState.beacons.get(getBeaconInfoIdentifier(defaultEvent));
+        const component = getComponent({ beacon });
+        expect(component.html()).toBe(null);
+    });
+
+    it('renders marker when beacon has location', () => {
+        const room = makeRoomWithStateEvents([defaultEvent]);
+        const beacon = room.currentState.beacons.get(getBeaconInfoIdentifier(defaultEvent));
+        beacon.addLocations([location1]);
+        const component = getComponent({ beacon });
+        expect(component).toMatchSnapshot();
+    });
+
+    it('updates with new locations', () => {
+        const room = makeRoomWithStateEvents([defaultEvent]);
+        const beacon = room.currentState.beacons.get(getBeaconInfoIdentifier(defaultEvent));
+        beacon.addLocations([location1]);
+        const component = getComponent({ beacon });
+        expect(component.find('SmartMarker').props()['geoUri']).toEqual('geo:51,41');
+
+        act(() => {
+            beacon.addLocations([location2]);
+        });
+        component.setProps({});
+
+        // updated to latest location
+        expect(component.find('SmartMarker').props()['geoUri']).toEqual('geo:52,42');
+    });
+});