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 13:14:05 +00:00
parent 1c215e2b71
commit f95106d2c6
20 changed files with 894 additions and 56 deletions
@@ -0,0 +1,121 @@
+/*
+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 {
+    MatrixClient,
+    Room,
+    RoomMember,
+    getBeaconInfoIdentifier,
+} from 'matrix-js-sdk/src/matrix';
+
+import BeaconViewDialog from '../../../../src/components/views/beacon/BeaconViewDialog';
+import {
+    getMockClientWithEventEmitter,
+    makeBeaconEvent,
+    makeBeaconInfoEvent,
+} from '../../../test-utils';
+import { TILE_SERVER_WK_KEY } from '../../../../src/utils/WellKnownUtils';
+
+describe('<BeaconViewDialog />', () => {
+    // 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 bobId = '@bob:server';
+
+    const aliceMember = new RoomMember(roomId, aliceId);
+
+    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 location1 = makeBeaconEvent(
+        aliceId, { beaconInfoId: defaultEvent.getId(), geoUri: 'geo:51,41', timestamp: now + 1 },
+    );
+
+    const defaultProps = {
+        onFinished: jest.fn(),
+        roomId,
+        matrixClient: mockClient as MatrixClient,
+    };
+
+    const getComponent = (props = {}) =>
+        mount(<BeaconViewDialog {...defaultProps} {...props} />);
+
+    it('renders a map with markers', () => {
+        const room = makeRoomWithStateEvents([defaultEvent]);
+        const beacon = room.currentState.beacons.get(getBeaconInfoIdentifier(defaultEvent));
+        beacon.addLocations([location1]);
+        const component = getComponent();
+        expect(component.find('Map').props()).toEqual(expect.objectContaining({
+            centerGeoUri: 'geo:51,41',
+            interactive: true,
+        }));
+        expect(component.find('SmartMarker').length).toEqual(1);
+    });
+
+    it('updates markers on changes to beacons', () => {
+        const room = makeRoomWithStateEvents([defaultEvent]);
+        const beacon = room.currentState.beacons.get(getBeaconInfoIdentifier(defaultEvent));
+        beacon.addLocations([location1]);
+        const component = getComponent();
+        expect(component.find('BeaconMarker').length).toEqual(1);
+
+        const anotherBeaconEvent = makeBeaconInfoEvent(bobId,
+            roomId,
+            { isLive: true },
+            '$bob-room1-1',
+        );
+
+        act(() => {
+            // emits RoomStateEvent.BeaconLiveness
+            room.currentState.setStateEvents([anotherBeaconEvent]);
+        });
+
+        component.setProps({});
+
+        // two markers now!
+        expect(component.find('BeaconMarker').length).toEqual(2);
+    });
+});