element-web/test/components/views/messages/MBeaconBody-test.tsx
Kerry aecd71ad15
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>
2022-04-11 09:16:32 +00:00

235 lines
8.3 KiB
TypeScript

/*
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();
});
});
});