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>
This commit is contained in:
Kerry
GitHub
parent
1c215e2b71
commit
f95106d2c6
20 changed files with 894 additions and 56 deletions
136
test/components/views/beacon/BeaconMarker-test.tsx
Normal file
136
test/components/views/beacon/BeaconMarker-test.tsx
Normal file
|
|
@ -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');
|
||||
});
|
||||
});
|
||||
121
test/components/views/beacon/BeaconViewDialog-test.tsx
Normal file
121
test/components/views/beacon/BeaconViewDialog-test.tsx
Normal file
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,229 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<BeaconMarker /> renders marker when beacon has location 1`] = `
|
||||
<BeaconMarker
|
||||
beacon={
|
||||
Beacon {
|
||||
"_beaconInfo": Object {
|
||||
"assetType": "m.self",
|
||||
"description": undefined,
|
||||
"live": true,
|
||||
"timeout": 3600000,
|
||||
"timestamp": 1647270879403,
|
||||
},
|
||||
"_events": Object {
|
||||
"Beacon.Destroy": Array [
|
||||
[Function],
|
||||
[Function],
|
||||
],
|
||||
"Beacon.LivenessChange": Array [
|
||||
[Function],
|
||||
[Function],
|
||||
],
|
||||
"Beacon.LocationUpdate": [Function],
|
||||
"Beacon.new": [Function],
|
||||
"Beacon.update": [Function],
|
||||
},
|
||||
"_eventsCount": 5,
|
||||
"_isLive": true,
|
||||
"_latestLocationState": Object {
|
||||
"description": undefined,
|
||||
"timestamp": 1647270879404,
|
||||
"uri": "geo:51,41",
|
||||
},
|
||||
"_maxListeners": undefined,
|
||||
"clearLatestLocation": [Function],
|
||||
"livenessWatchInterval": undefined,
|
||||
"roomId": "!room:server",
|
||||
"rootEvent": Object {
|
||||
"content": Object {
|
||||
"description": undefined,
|
||||
"live": true,
|
||||
"org.matrix.msc3488.asset": Object {
|
||||
"type": "m.self",
|
||||
},
|
||||
"org.matrix.msc3488.ts": 1647270879403,
|
||||
"timeout": 3600000,
|
||||
},
|
||||
"event_id": "$alice-room1-1",
|
||||
"origin_server_ts": 1647270879403,
|
||||
"room_id": "!room:server",
|
||||
"sender": "@alice:server",
|
||||
"state_key": "@alice:server",
|
||||
"type": "org.matrix.msc3672.beacon_info",
|
||||
},
|
||||
Symbol(kCapture): false,
|
||||
}
|
||||
}
|
||||
map={
|
||||
MockMap {
|
||||
"_events": Object {},
|
||||
"_eventsCount": 0,
|
||||
"_maxListeners": undefined,
|
||||
"addControl": [MockFunction],
|
||||
"removeControl": [MockFunction],
|
||||
"setCenter": [MockFunction],
|
||||
"setStyle": [MockFunction],
|
||||
"zoomIn": [MockFunction],
|
||||
"zoomOut": [MockFunction],
|
||||
Symbol(kCapture): false,
|
||||
}
|
||||
}
|
||||
>
|
||||
<SmartMarker
|
||||
geoUri="geo:51,41"
|
||||
id="!room:server_@alice:server"
|
||||
map={
|
||||
MockMap {
|
||||
"_events": Object {},
|
||||
"_eventsCount": 0,
|
||||
"_maxListeners": undefined,
|
||||
"addControl": [MockFunction],
|
||||
"removeControl": [MockFunction],
|
||||
"setCenter": [MockFunction],
|
||||
"setStyle": [MockFunction],
|
||||
"zoomIn": [MockFunction],
|
||||
"zoomOut": [MockFunction],
|
||||
Symbol(kCapture): false,
|
||||
}
|
||||
}
|
||||
roomMember={
|
||||
RoomMember {
|
||||
"_events": Object {},
|
||||
"_eventsCount": 0,
|
||||
"_isOutOfBand": false,
|
||||
"_maxListeners": undefined,
|
||||
"_modified": 1647270879403,
|
||||
"_requestedProfileInfo": undefined,
|
||||
"disambiguate": false,
|
||||
"events": Object {
|
||||
"member": null,
|
||||
},
|
||||
"membership": null,
|
||||
"name": "@alice:server",
|
||||
"powerLevel": 0,
|
||||
"powerLevelNorm": 0,
|
||||
"rawDisplayName": "@alice:server",
|
||||
"roomId": "!room:server",
|
||||
"typing": false,
|
||||
"user": null,
|
||||
"userId": "@alice:server",
|
||||
Symbol(kCapture): false,
|
||||
}
|
||||
}
|
||||
>
|
||||
<span>
|
||||
<ForwardRef
|
||||
id="!room:server_@alice:server"
|
||||
roomMember={
|
||||
RoomMember {
|
||||
"_events": Object {},
|
||||
"_eventsCount": 0,
|
||||
"_isOutOfBand": false,
|
||||
"_maxListeners": undefined,
|
||||
"_modified": 1647270879403,
|
||||
"_requestedProfileInfo": undefined,
|
||||
"disambiguate": false,
|
||||
"events": Object {
|
||||
"member": null,
|
||||
},
|
||||
"membership": null,
|
||||
"name": "@alice:server",
|
||||
"powerLevel": 0,
|
||||
"powerLevelNorm": 0,
|
||||
"rawDisplayName": "@alice:server",
|
||||
"roomId": "!room:server",
|
||||
"typing": false,
|
||||
"user": null,
|
||||
"userId": "@alice:server",
|
||||
Symbol(kCapture): false,
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="mx_Marker mx_Marker_defaultColor"
|
||||
id="!room:server_@alice:server"
|
||||
>
|
||||
<div
|
||||
className="mx_Marker_border"
|
||||
>
|
||||
<MemberAvatar
|
||||
height={36}
|
||||
member={
|
||||
RoomMember {
|
||||
"_events": Object {},
|
||||
"_eventsCount": 0,
|
||||
"_isOutOfBand": false,
|
||||
"_maxListeners": undefined,
|
||||
"_modified": 1647270879403,
|
||||
"_requestedProfileInfo": undefined,
|
||||
"disambiguate": false,
|
||||
"events": Object {
|
||||
"member": null,
|
||||
},
|
||||
"membership": null,
|
||||
"name": "@alice:server",
|
||||
"powerLevel": 0,
|
||||
"powerLevelNorm": 0,
|
||||
"rawDisplayName": "@alice:server",
|
||||
"roomId": "!room:server",
|
||||
"typing": false,
|
||||
"user": null,
|
||||
"userId": "@alice:server",
|
||||
Symbol(kCapture): false,
|
||||
}
|
||||
}
|
||||
resizeMethod="crop"
|
||||
viewUserOnClick={false}
|
||||
width={36}
|
||||
>
|
||||
<BaseAvatar
|
||||
height={36}
|
||||
idName="@alice:server"
|
||||
name="@alice:server"
|
||||
resizeMethod="crop"
|
||||
title="@alice:server"
|
||||
url={null}
|
||||
width={36}
|
||||
>
|
||||
<span
|
||||
className="mx_BaseAvatar"
|
||||
role="presentation"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="mx_BaseAvatar_initial"
|
||||
style={
|
||||
Object {
|
||||
"fontSize": "23.400000000000002px",
|
||||
"lineHeight": "36px",
|
||||
"width": "36px",
|
||||
}
|
||||
}
|
||||
>
|
||||
A
|
||||
</span>
|
||||
<img
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
className="mx_BaseAvatar_image"
|
||||
onError={[Function]}
|
||||
src="data:image/png;base64,00"
|
||||
style={
|
||||
Object {
|
||||
"height": "36px",
|
||||
"width": "36px",
|
||||
}
|
||||
}
|
||||
title="@alice:server"
|
||||
/>
|
||||
</span>
|
||||
</BaseAvatar>
|
||||
</MemberAvatar>
|
||||
</div>
|
||||
</div>
|
||||
</ForwardRef>
|
||||
</span>
|
||||
</SmartMarker>
|
||||
</BeaconMarker>
|
||||
`;
|
||||
Loading…
Add table
Add a link
Reference in a new issue