Live location sharing - update beacon tile with latest location (#8265)
* add useBeacon hook Signed-off-by: Kerry Archibald <kerrya@element.io> * update message tile types to work with function comp with ref Signed-off-by: Kerry Archibald <kerrya@element.io> * use beacon hook in beacon body Signed-off-by: Kerry Archibald <kerrya@element.io> * update beacon body with (textual) latest locations, test Signed-off-by: Kerry Archibald <kerrya@element.io> * language in comment Signed-off-by: Kerry Archibald <kerrya@element.io> * comments Signed-off-by: Kerry Archibald <kerrya@element.io> * copyright Signed-off-by: Kerry Archibald <kerrya@element.io>
This commit is contained in:
Kerry
GitHub
parent
7ba991cd8c
commit
aecd71ad15
9 changed files with 424 additions and 29 deletions
235
test/components/views/messages/MBeaconBody-test.tsx
Normal file
235
test/components/views/messages/MBeaconBody-test.tsx
Normal file
|
|
@ -0,0 +1,235 @@
|
|||
/*
|
||||
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 {
|
||||
BeaconEvent,
|
||||
Room,
|
||||
getBeaconInfoIdentifier,
|
||||
} from 'matrix-js-sdk/src/matrix';
|
||||
|
||||
import MBeaconBody from '../../../../src/components/views/messages/MBeaconBody';
|
||||
import { findByTestId, getMockClientWithEventEmitter, makeBeaconEvent, makeBeaconInfoEvent } from '../../../test-utils';
|
||||
import { RoomPermalinkCreator } from '../../../../src/utils/permalinks/Permalinks';
|
||||
import { MediaEventHelper } from '../../../../src/utils/MediaEventHelper';
|
||||
import MatrixClientContext from '../../../../src/contexts/MatrixClientContext';
|
||||
|
||||
describe('<MBeaconBody />', () => {
|
||||
// 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 mockClient = getMockClientWithEventEmitter({
|
||||
getUserId: jest.fn().mockReturnValue(aliceId),
|
||||
getRoom: jest.fn(),
|
||||
});
|
||||
|
||||
// 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);
|
||||
mockClient.getRoom.mockReturnValue(room1);
|
||||
|
||||
return room1;
|
||||
};
|
||||
|
||||
const defaultEvent = makeBeaconInfoEvent(aliceId,
|
||||
roomId,
|
||||
{ isLive: true },
|
||||
'$alice-room1-1',
|
||||
);
|
||||
const defaultProps = {
|
||||
mxEvent: defaultEvent,
|
||||
highlights: [],
|
||||
highlightLink: '',
|
||||
onHeightChanged: jest.fn(),
|
||||
onMessageAllowed: jest.fn(),
|
||||
// we dont use these and they pollute the snapshots
|
||||
permalinkCreator: {} as unknown as RoomPermalinkCreator,
|
||||
mediaEventHelper: {} as unknown as MediaEventHelper,
|
||||
};
|
||||
const getComponent = (props = {}) =>
|
||||
mount(<MBeaconBody {...defaultProps} {...props} />, {
|
||||
wrappingComponent: MatrixClientContext.Provider,
|
||||
wrappingComponentProps: { value: mockClient },
|
||||
});
|
||||
|
||||
it('renders a live beacon with basic stub', () => {
|
||||
const beaconInfoEvent = makeBeaconInfoEvent(aliceId,
|
||||
roomId,
|
||||
{ isLive: true },
|
||||
'$alice-room1-1',
|
||||
);
|
||||
makeRoomWithStateEvents([beaconInfoEvent]);
|
||||
const component = getComponent({ mxEvent: beaconInfoEvent });
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders stopped beacon UI for an explicitly stopped beacon', () => {
|
||||
const beaconInfoEvent = makeBeaconInfoEvent(aliceId,
|
||||
roomId,
|
||||
{ isLive: false },
|
||||
'$alice-room1-1',
|
||||
);
|
||||
makeRoomWithStateEvents([beaconInfoEvent]);
|
||||
const component = getComponent({ mxEvent: beaconInfoEvent });
|
||||
expect(component.text()).toEqual("Beacon stopped or replaced");
|
||||
});
|
||||
|
||||
it('renders stopped beacon UI for an expired beacon', () => {
|
||||
const beaconInfoEvent = makeBeaconInfoEvent(aliceId,
|
||||
roomId,
|
||||
// puts this beacons live period in the past
|
||||
{ isLive: true, timestamp: now - 600000, timeout: 500 },
|
||||
'$alice-room1-1',
|
||||
);
|
||||
makeRoomWithStateEvents([beaconInfoEvent]);
|
||||
const component = getComponent({ mxEvent: beaconInfoEvent });
|
||||
expect(component.text()).toEqual("Beacon stopped or replaced");
|
||||
});
|
||||
|
||||
it('renders stopped UI when a beacon event is not the latest beacon for a user', () => {
|
||||
const aliceBeaconInfo1 = makeBeaconInfoEvent(
|
||||
aliceId,
|
||||
roomId,
|
||||
// this one is a little older
|
||||
{ isLive: true, timestamp: now - 500 },
|
||||
'$alice-room1-1',
|
||||
);
|
||||
aliceBeaconInfo1.event.origin_server_ts = now - 500;
|
||||
const aliceBeaconInfo2 = makeBeaconInfoEvent(
|
||||
aliceId,
|
||||
roomId,
|
||||
{ isLive: true },
|
||||
'$alice-room1-2',
|
||||
);
|
||||
|
||||
makeRoomWithStateEvents([aliceBeaconInfo1, aliceBeaconInfo2]);
|
||||
|
||||
const component = getComponent({ mxEvent: aliceBeaconInfo1 });
|
||||
// beacon1 has been superceded by beacon2
|
||||
expect(component.text()).toEqual("Beacon stopped or replaced");
|
||||
});
|
||||
|
||||
it('renders stopped UI when a beacon event is replaced', () => {
|
||||
const aliceBeaconInfo1 = makeBeaconInfoEvent(
|
||||
aliceId,
|
||||
roomId,
|
||||
// this one is a little older
|
||||
{ isLive: true, timestamp: now - 500 },
|
||||
'$alice-room1-1',
|
||||
);
|
||||
aliceBeaconInfo1.event.origin_server_ts = now - 500;
|
||||
const aliceBeaconInfo2 = makeBeaconInfoEvent(
|
||||
aliceId,
|
||||
roomId,
|
||||
{ isLive: true },
|
||||
'$alice-room1-2',
|
||||
);
|
||||
|
||||
const room = makeRoomWithStateEvents([aliceBeaconInfo1]);
|
||||
const component = getComponent({ mxEvent: aliceBeaconInfo1 });
|
||||
|
||||
const beaconInstance = room.currentState.beacons.get(getBeaconInfoIdentifier(aliceBeaconInfo1));
|
||||
// update alice's beacon with a new edition
|
||||
// beacon instance emits
|
||||
act(() => {
|
||||
beaconInstance.update(aliceBeaconInfo2);
|
||||
});
|
||||
|
||||
component.setProps({});
|
||||
|
||||
// beacon1 has been superceded by beacon2
|
||||
expect(component.text()).toEqual("Beacon stopped or replaced");
|
||||
});
|
||||
|
||||
describe('on liveness change', () => {
|
||||
it('renders stopped UI when a beacon stops being live', () => {
|
||||
const aliceBeaconInfo = makeBeaconInfoEvent(
|
||||
aliceId,
|
||||
roomId,
|
||||
{ isLive: true },
|
||||
'$alice-room1-1',
|
||||
);
|
||||
|
||||
const room = makeRoomWithStateEvents([aliceBeaconInfo]);
|
||||
const component = getComponent({ mxEvent: aliceBeaconInfo });
|
||||
|
||||
const beaconInstance = room.currentState.beacons.get(getBeaconInfoIdentifier(aliceBeaconInfo));
|
||||
act(() => {
|
||||
// @ts-ignore cheat to force beacon to not live
|
||||
beaconInstance._isLive = false;
|
||||
beaconInstance.emit(BeaconEvent.LivenessChange, false, beaconInstance);
|
||||
});
|
||||
|
||||
component.setProps({});
|
||||
|
||||
// stopped UI
|
||||
expect(component.text()).toEqual("Beacon stopped or replaced");
|
||||
});
|
||||
});
|
||||
|
||||
describe('latestLocationState', () => {
|
||||
const aliceBeaconInfo = makeBeaconInfoEvent(
|
||||
aliceId,
|
||||
roomId,
|
||||
{ isLive: true },
|
||||
'$alice-room1-1',
|
||||
);
|
||||
|
||||
const location1 = makeBeaconEvent(
|
||||
aliceId, { beaconInfoId: aliceBeaconInfo.getId(), geoUri: 'geo:foo', timestamp: now + 1 },
|
||||
);
|
||||
const location2 = makeBeaconEvent(
|
||||
aliceId, { beaconInfoId: aliceBeaconInfo.getId(), geoUri: 'geo:bar', timestamp: now + 10000 },
|
||||
);
|
||||
|
||||
it('renders a live beacon without a location correctly', () => {
|
||||
makeRoomWithStateEvents([aliceBeaconInfo]);
|
||||
const component = getComponent({ mxEvent: aliceBeaconInfo });
|
||||
|
||||
// loading map
|
||||
expect(findByTestId(component, 'beacon-waiting-for-location').length).toBeTruthy();
|
||||
});
|
||||
|
||||
it('updates latest location', () => {
|
||||
const room = makeRoomWithStateEvents([aliceBeaconInfo]);
|
||||
const component = getComponent({ mxEvent: aliceBeaconInfo });
|
||||
|
||||
const beaconInstance = room.currentState.beacons.get(getBeaconInfoIdentifier(aliceBeaconInfo));
|
||||
act(() => {
|
||||
beaconInstance.addLocations([location1]);
|
||||
component.setProps({});
|
||||
});
|
||||
|
||||
expect(component.text().includes('geo:foo')).toBeTruthy();
|
||||
|
||||
act(() => {
|
||||
beaconInstance.addLocations([location2]);
|
||||
component.setProps({});
|
||||
});
|
||||
|
||||
expect(component.text().includes('geo:bar')).toBeTruthy();
|
||||
});
|
||||
});
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue