Live location sharing: beacon list view tiles (#8363)
* add basic sidebar container Signed-off-by: Kerry Archibald <kerrya@element.io> * optionally show icon in beaconstatus Signed-off-by: Kerry Archibald <kerrya@element.io> * add avatar and style list item Signed-off-by: Kerry Archibald <kerrya@element.io> * formatted last update time Signed-off-by: Kerry Archibald <kerrya@element.io> * test beacon list item Signed-off-by: Kerry Archibald <kerrya@element.io> * move makeRoomWithState events to test utils Signed-off-by: Kerry Archibald <kerrya@element.io> * move beacon test helpers into utils Signed-off-by: Kerry Archibald <kerrya@element.io> * newline Signed-off-by: Kerry Archibald <kerrya@element.io> * add copyable text to beacon list item Signed-off-by: Kerry Archibald <kerrya@element.io> * add copyable geo uri to list item Signed-off-by: Kerry Archibald <kerrya@element.io> * improve spacing Signed-off-by: Kerry Archibald <kerrya@element.io> * overflow scroll on list Signed-off-by: Kerry Archibald <kerrya@element.io>
This commit is contained in:
Kerry
GitHub
parent
2f6b76755c
commit
4a38cbd550
18 changed files with 355 additions and 10 deletions
173
test/components/views/beacon/BeaconListItem-test.tsx
Normal file
173
test/components/views/beacon/BeaconListItem-test.tsx
Normal file
|
|
@ -0,0 +1,173 @@
|
|||
/*
|
||||
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 {
|
||||
Beacon,
|
||||
RoomMember,
|
||||
MatrixEvent,
|
||||
} from 'matrix-js-sdk/src/matrix';
|
||||
import { LocationAssetType } from 'matrix-js-sdk/src/@types/location';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
|
||||
import BeaconListItem from '../../../../src/components/views/beacon/BeaconListItem';
|
||||
import MatrixClientContext from '../../../../src/contexts/MatrixClientContext';
|
||||
import {
|
||||
getMockClientWithEventEmitter,
|
||||
makeBeaconEvent,
|
||||
makeBeaconInfoEvent,
|
||||
makeRoomWithBeacons,
|
||||
} from '../../../test-utils';
|
||||
|
||||
describe('<BeaconListItem />', () => {
|
||||
// 14.03.2022 16:15
|
||||
const now = 1647270879403;
|
||||
// go back in time to create beacons and locations in the past
|
||||
jest.spyOn(global.Date, 'now').mockReturnValue(now - 600000);
|
||||
const roomId = '!room:server';
|
||||
const aliceId = '@alice:server';
|
||||
|
||||
const mockClient = getMockClientWithEventEmitter({
|
||||
getUserId: jest.fn().mockReturnValue(aliceId),
|
||||
getRoom: jest.fn(),
|
||||
isGuest: jest.fn().mockReturnValue(false),
|
||||
});
|
||||
|
||||
const aliceBeaconEvent = makeBeaconInfoEvent(aliceId,
|
||||
roomId,
|
||||
{ isLive: true },
|
||||
'$alice-room1-1',
|
||||
);
|
||||
const alicePinBeaconEvent = makeBeaconInfoEvent(aliceId,
|
||||
roomId,
|
||||
{ isLive: true, assetType: LocationAssetType.Pin, description: "Alice's car" },
|
||||
'$alice-room1-1',
|
||||
);
|
||||
const pinBeaconWithoutDescription = makeBeaconInfoEvent(aliceId,
|
||||
roomId,
|
||||
{ isLive: true, assetType: LocationAssetType.Pin },
|
||||
'$alice-room1-1',
|
||||
);
|
||||
|
||||
const aliceLocation1 = makeBeaconEvent(
|
||||
aliceId, { beaconInfoId: aliceBeaconEvent.getId(), geoUri: 'geo:51,41', timestamp: now - 1 },
|
||||
);
|
||||
const aliceLocation2 = makeBeaconEvent(
|
||||
aliceId, { beaconInfoId: aliceBeaconEvent.getId(), geoUri: 'geo:52,42', timestamp: now - 500000 },
|
||||
);
|
||||
|
||||
const defaultProps = {
|
||||
beacon: new Beacon(aliceBeaconEvent),
|
||||
};
|
||||
|
||||
const getComponent = (props = {}) =>
|
||||
mount(<BeaconListItem {...defaultProps} {...props} />, {
|
||||
wrappingComponent: MatrixClientContext.Provider,
|
||||
wrappingComponentProps: { value: mockClient },
|
||||
});
|
||||
|
||||
const setupRoomWithBeacons = (beaconInfoEvents: MatrixEvent[], locationEvents?: MatrixEvent[]): Beacon[] => {
|
||||
const beacons = makeRoomWithBeacons(roomId, mockClient, beaconInfoEvents, locationEvents);
|
||||
|
||||
const member = new RoomMember(roomId, aliceId);
|
||||
member.name = `Alice`;
|
||||
const room = mockClient.getRoom(roomId);
|
||||
jest.spyOn(room, 'getMember').mockReturnValue(member);
|
||||
|
||||
return beacons;
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
jest.spyOn(Date, 'now').mockReturnValue(now);
|
||||
});
|
||||
|
||||
it('renders null when beacon is not live', () => {
|
||||
const notLiveBeacon = makeBeaconInfoEvent(aliceId,
|
||||
roomId,
|
||||
{ isLive: false },
|
||||
);
|
||||
const [beacon] = setupRoomWithBeacons([notLiveBeacon]);
|
||||
const component = getComponent({ beacon });
|
||||
expect(component.html()).toBeNull();
|
||||
});
|
||||
|
||||
it('renders null when beacon has no location', () => {
|
||||
const [beacon] = setupRoomWithBeacons([aliceBeaconEvent]);
|
||||
const component = getComponent({ beacon });
|
||||
expect(component.html()).toBeNull();
|
||||
});
|
||||
|
||||
describe('when a beacon is live and has locations', () => {
|
||||
it('renders beacon info', () => {
|
||||
const [beacon] = setupRoomWithBeacons([alicePinBeaconEvent], [aliceLocation1]);
|
||||
const component = getComponent({ beacon });
|
||||
expect(component.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
describe('non-self beacons', () => {
|
||||
it('uses beacon description as beacon name', () => {
|
||||
const [beacon] = setupRoomWithBeacons([alicePinBeaconEvent], [aliceLocation1]);
|
||||
const component = getComponent({ beacon });
|
||||
expect(component.find('BeaconStatus').props().label).toEqual("Alice's car");
|
||||
});
|
||||
|
||||
it('uses beacon owner mxid as beacon name for a beacon without description', () => {
|
||||
const [beacon] = setupRoomWithBeacons([pinBeaconWithoutDescription], [aliceLocation1]);
|
||||
const component = getComponent({ beacon });
|
||||
expect(component.find('BeaconStatus').props().label).toEqual(aliceId);
|
||||
});
|
||||
|
||||
it('renders location icon', () => {
|
||||
const [beacon] = setupRoomWithBeacons([alicePinBeaconEvent], [aliceLocation1]);
|
||||
const component = getComponent({ beacon });
|
||||
expect(component.find('StyledLiveBeaconIcon').length).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
describe('self locations', () => {
|
||||
it('renders beacon owner avatar', () => {
|
||||
const [beacon] = setupRoomWithBeacons([aliceBeaconEvent], [aliceLocation1]);
|
||||
const component = getComponent({ beacon });
|
||||
expect(component.find('MemberAvatar').length).toBeTruthy();
|
||||
});
|
||||
|
||||
it('uses beacon owner name as beacon name', () => {
|
||||
const [beacon] = setupRoomWithBeacons([aliceBeaconEvent], [aliceLocation1]);
|
||||
const component = getComponent({ beacon });
|
||||
expect(component.find('BeaconStatus').props().label).toEqual('Alice');
|
||||
});
|
||||
});
|
||||
|
||||
describe('on location updates', () => {
|
||||
it('updates last updated time on location updated', () => {
|
||||
const [beacon] = setupRoomWithBeacons([aliceBeaconEvent], [aliceLocation2]);
|
||||
const component = getComponent({ beacon });
|
||||
|
||||
expect(component.find('.mx_BeaconListItem_lastUpdated').text()).toEqual('Updated 9 minutes ago');
|
||||
|
||||
// update to a newer location
|
||||
act(() => {
|
||||
beacon.addLocations([aliceLocation1]);
|
||||
component.setProps({});
|
||||
});
|
||||
|
||||
expect(component.find('.mx_BeaconListItem_lastUpdated').text()).toEqual('Updated a few seconds ago');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -26,6 +26,7 @@ describe('<BeaconStatus />', () => {
|
|||
const defaultProps = {
|
||||
displayStatus: BeaconDisplayStatus.Loading,
|
||||
label: 'test label',
|
||||
withIcon: true,
|
||||
};
|
||||
const getComponent = (props = {}) =>
|
||||
mount(<BeaconStatus {...defaultProps} {...props} />);
|
||||
|
|
@ -40,6 +41,11 @@ describe('<BeaconStatus />', () => {
|
|||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders without icon', () => {
|
||||
const component = getComponent({ withIcon: false, displayStatus: BeaconDisplayStatus.Stopped });
|
||||
expect(component.find('StyledLiveBeaconIcon').length).toBeFalsy();
|
||||
});
|
||||
|
||||
describe('active state', () => {
|
||||
it('renders without children', () => {
|
||||
// mock for stable snapshot
|
||||
|
|
|
|||
|
|
@ -41,7 +41,6 @@ describe('<DialogSidebar />', () => {
|
|||
act(() => {
|
||||
findByTestId(component, 'dialog-sidebar-close').at(0).simulate('click');
|
||||
});
|
||||
|
||||
expect(requestClose).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<BeaconListItem /> when a beacon is live and has locations renders beacon info 1`] = `"<li class=\\"mx_BeaconListItem\\"><div class=\\"mx_StyledLiveBeaconIcon mx_BeaconListItem_avatarIcon\\"></div><div class=\\"mx_BeaconListItem_info\\"><div class=\\"mx_BeaconStatus mx_BeaconStatus_Active mx_BeaconListItem_status\\"><div class=\\"mx_BeaconStatus_description\\"><span class=\\"mx_BeaconStatus_label\\">Alice's car</span><span class=\\"mx_BeaconStatus_expiryTime\\">Live until 16:04</span></div><div class=\\"mx_CopyableText\\"><div aria-label=\\"Copy\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_CopyableText_copyButton\\"></div></div></div><span class=\\"mx_BeaconListItem_lastUpdated\\">Updated a few seconds ago</span></div></li>"`;
|
||||
|
|
@ -43,6 +43,7 @@ exports[`<BeaconStatus /> active state renders without children 1`] = `
|
|||
}
|
||||
displayStatus="Active"
|
||||
label="test label"
|
||||
withIcon={true}
|
||||
>
|
||||
<div
|
||||
className="mx_BeaconStatus mx_BeaconStatus_Active"
|
||||
|
|
@ -59,7 +60,11 @@ exports[`<BeaconStatus /> active state renders without children 1`] = `
|
|||
<div
|
||||
className="mx_BeaconStatus_description"
|
||||
>
|
||||
test label
|
||||
<span
|
||||
className="mx_BeaconStatus_label"
|
||||
>
|
||||
test label
|
||||
</span>
|
||||
<BeaconExpiryTime
|
||||
beacon={
|
||||
Beacon {
|
||||
|
|
@ -114,6 +119,7 @@ exports[`<BeaconStatus /> renders loading state 1`] = `
|
|||
<BeaconStatus
|
||||
displayStatus="Loading"
|
||||
label="test label"
|
||||
withIcon={true}
|
||||
>
|
||||
<div
|
||||
className="mx_BeaconStatus mx_BeaconStatus_Loading"
|
||||
|
|
@ -142,6 +148,7 @@ exports[`<BeaconStatus /> renders stopped state 1`] = `
|
|||
<BeaconStatus
|
||||
displayStatus="Stopped"
|
||||
label="test label"
|
||||
withIcon={true}
|
||||
>
|
||||
<div
|
||||
className="mx_BeaconStatus mx_BeaconStatus_Stopped"
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ exports[`<OwnBeaconStatus /> renders without a beacon instance 1`] = `
|
|||
displayLiveTimeRemaining={true}
|
||||
displayStatus="Loading"
|
||||
label="Live location enabled"
|
||||
withIcon={true}
|
||||
>
|
||||
<div
|
||||
className="mx_BeaconStatus mx_BeaconStatus_Loading mx_MBeaconBody_chin"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue