Live location sharing - render users own beacons in timeline (#8296)
* extract location markers into generic Marker Signed-off-by: Kerry Archibald <kerrya@element.io> * wrap marker in smartmarker Signed-off-by: Kerry Archibald <kerrya@element.io> * test smartmarker Signed-off-by: Kerry Archibald <kerrya@element.io> * working map in location body Signed-off-by: Kerry Archibald <kerrya@element.io> * remove skinned sdk Signed-off-by: Kerry Archibald <kerrya@element.io> * use new ZoomButtons in MLocationBody Signed-off-by: Kerry Archibald <kerrya@element.io> * test LocationViewDialog Signed-off-by: Kerry Archibald <kerrya@element.io> * update commentt Signed-off-by: Kerry Archibald <kerrya@element.io> * lint Signed-off-by: Kerry Archibald <kerrya@element.io> * lint Signed-off-by: Kerry Archibald <kerrya@element.io> * extract livetimeremaining into own component Signed-off-by: Kerry Archibald <kerrya@element.io> * extract more beacon state utils Signed-off-by: Kerry Archibald <kerrya@element.io> * update tests for roomlivesharewarning Signed-off-by: Kerry Archibald <kerrya@element.io> * add beacon map and status chin Signed-off-by: Kerry Archibald <kerrya@element.io> * add handling for bubbles Signed-off-by: Kerry Archibald <kerrya@element.io> * tests for BeaconBody Signed-off-by: Kerry Archibald <kerrya@element.io> * move displaystatus check up to mbeaconbody Signed-off-by: Kerry Archibald <kerrya@element.io> * test BeaconStatus Signed-off-by: Kerry Archibald <kerrya@element.io> * rename BeaconStatusChin -> BeaconStatus Signed-off-by: Kerry Archibald <kerrya@element.io> * make BeaconStatus generic Signed-off-by: Kerry Archibald <kerrya@element.io> * lint Signed-off-by: Kerry Archibald <kerrya@element.io> * adjust spinner size Signed-off-by: Kerry Archibald <kerrya@element.io> * lint Signed-off-by: Kerry Archibald <kerrya@element.io> * add static time remaining option to beacon status Signed-off-by: Kerry Archibald <kerrya@element.io> * render time differently for own beacon Signed-off-by: Kerry Archibald <kerrya@element.io> * use children to add actions to BeaconStatus Signed-off-by: Kerry Archibald <kerrya@element.io> * add OwnBeaconStatus wrapper with stop button Signed-off-by: Kerry Archibald <kerrya@element.io> * add error states for own beacon Signed-off-by: Kerry Archibald <kerrya@element.io> * test OwnBeaconStatus Signed-off-by: Kerry Archibald <kerrya@element.io> * move ownbeaconstatus to write dir Signed-off-by: Kerry Archibald <kerrya@element.io> * improve button styling Signed-off-by: Kerry Archibald <kerrya@element.io> * i18n Signed-off-by: Kerry Archibald <kerrya@element.io> * lint Signed-off-by: Kerry Archibald <kerrya@element.io>
This commit is contained in:
Kerry
GitHub
parent
7a1a2c41d2
commit
1c215e2b71
11 changed files with 443 additions and 117 deletions
|
|
@ -17,7 +17,6 @@ limitations under the License.
|
|||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import { Beacon } from 'matrix-js-sdk/src/matrix';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
|
||||
import BeaconStatus from '../../../../src/components/views/beacon/BeaconStatus';
|
||||
import { BeaconDisplayStatus } from '../../../../src/components/views/beacon/displayStatus';
|
||||
|
|
@ -26,6 +25,7 @@ import { findByTestId, makeBeaconInfoEvent } from '../../../test-utils';
|
|||
describe('<BeaconStatus />', () => {
|
||||
const defaultProps = {
|
||||
displayStatus: BeaconDisplayStatus.Loading,
|
||||
label: 'test label',
|
||||
};
|
||||
const getComponent = (props = {}) =>
|
||||
mount(<BeaconStatus {...defaultProps} {...props} />);
|
||||
|
|
@ -40,28 +40,42 @@ describe('<BeaconStatus />', () => {
|
|||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders active state without stop buttons', () => {
|
||||
// mock for stable snapshot
|
||||
jest.spyOn(Date, 'now').mockReturnValue(123456789);
|
||||
const beacon = new Beacon(makeBeaconInfoEvent('@user:server', '!room:server', {}, '$1'));
|
||||
const component = getComponent({ beacon, displayStatus: BeaconDisplayStatus.Active });
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders active state with stop button', () => {
|
||||
const stopBeacon = jest.fn();
|
||||
const beacon = new Beacon(makeBeaconInfoEvent('@user:server', '!room:sever'));
|
||||
const component = getComponent({
|
||||
beacon,
|
||||
stopBeacon,
|
||||
displayStatus: BeaconDisplayStatus.Active,
|
||||
});
|
||||
expect(findByTestId(component, 'beacon-status-stop-beacon')).toMatchSnapshot();
|
||||
|
||||
act(() => {
|
||||
findByTestId(component, 'beacon-status-stop-beacon').at(0).simulate('click');
|
||||
describe('active state', () => {
|
||||
it('renders without children', () => {
|
||||
// mock for stable snapshot
|
||||
jest.spyOn(Date, 'now').mockReturnValue(123456789);
|
||||
const beacon = new Beacon(makeBeaconInfoEvent('@user:server', '!room:server', {}, '$1'));
|
||||
const component = getComponent({ beacon, displayStatus: BeaconDisplayStatus.Active });
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
|
||||
expect(stopBeacon).toHaveBeenCalled();
|
||||
it('renders with children', () => {
|
||||
const beacon = new Beacon(makeBeaconInfoEvent('@user:server', '!room:sever'));
|
||||
const component = getComponent({
|
||||
beacon,
|
||||
children: <span data-test-id='test'>test</span>,
|
||||
displayStatus: BeaconDisplayStatus.Active,
|
||||
});
|
||||
expect(findByTestId(component, 'test-child')).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders static remaining time when displayLiveTimeRemaining is falsy', () => {
|
||||
// mock for stable snapshot
|
||||
jest.spyOn(Date, 'now').mockReturnValue(123456789);
|
||||
const beacon = new Beacon(makeBeaconInfoEvent('@user:server', '!room:server', {}, '$1'));
|
||||
const component = getComponent({ beacon, displayStatus: BeaconDisplayStatus.Active });
|
||||
expect(component.text().includes('Live until 11:17')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('renders live time remaining when displayLiveTimeRemaining is truthy', () => {
|
||||
// mock for stable snapshot
|
||||
jest.spyOn(Date, 'now').mockReturnValue(123456789);
|
||||
const beacon = new Beacon(makeBeaconInfoEvent('@user:server', '!room:server', {}, '$1'));
|
||||
const component = getComponent({
|
||||
beacon, displayStatus: BeaconDisplayStatus.Active,
|
||||
displayLiveTimeRemaining: true,
|
||||
});
|
||||
expect(component.text().includes('1h left')).toBeTruthy();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
161
test/components/views/beacon/OwnBeaconStatus-test.tsx
Normal file
161
test/components/views/beacon/OwnBeaconStatus-test.tsx
Normal file
|
|
@ -0,0 +1,161 @@
|
|||
/*
|
||||
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 { mocked } from 'jest-mock';
|
||||
import { Beacon } from 'matrix-js-sdk/src/matrix';
|
||||
|
||||
import OwnBeaconStatus from '../../../../src/components/views/beacon/OwnBeaconStatus';
|
||||
import { BeaconDisplayStatus } from '../../../../src/components/views/beacon/displayStatus';
|
||||
import { useOwnLiveBeacons } from '../../../../src/utils/beacon';
|
||||
import { findByTestId, makeBeaconInfoEvent } from '../../../test-utils';
|
||||
|
||||
jest.mock('../../../../src/utils/beacon/useOwnLiveBeacons', () => ({
|
||||
useOwnLiveBeacons: jest.fn(),
|
||||
}));
|
||||
|
||||
describe('<OwnBeaconStatus />', () => {
|
||||
const defaultProps = {
|
||||
displayStatus: BeaconDisplayStatus.Loading,
|
||||
};
|
||||
const userId = '@user:server';
|
||||
const roomId = '!room:server';
|
||||
let defaultBeacon;
|
||||
const getComponent = (props = {}) =>
|
||||
mount(<OwnBeaconStatus {...defaultProps} {...props} />);
|
||||
|
||||
beforeEach(() => {
|
||||
jest.spyOn(global.Date, 'now').mockReturnValue(123456789);
|
||||
mocked(useOwnLiveBeacons).mockClear().mockReturnValue({});
|
||||
|
||||
defaultBeacon = new Beacon(makeBeaconInfoEvent(userId, roomId));
|
||||
});
|
||||
|
||||
it('renders without a beacon instance', () => {
|
||||
const component = getComponent();
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders loading state correctly', () => {
|
||||
const component = getComponent();
|
||||
expect(component.find('BeaconStatus').props()).toBeTruthy();
|
||||
});
|
||||
|
||||
describe('Active state', () => {
|
||||
it('renders stop button', () => {
|
||||
const displayStatus = BeaconDisplayStatus.Active;
|
||||
mocked(useOwnLiveBeacons).mockReturnValue({
|
||||
onStopSharing: jest.fn(),
|
||||
});
|
||||
const component = getComponent({ displayStatus, beacon: defaultBeacon });
|
||||
expect(component.text()).toContain('Live location enabled');
|
||||
|
||||
expect(findByTestId(component, 'beacon-status-stop-beacon').length).toBeTruthy();
|
||||
});
|
||||
|
||||
it('stops sharing on stop button click', () => {
|
||||
const displayStatus = BeaconDisplayStatus.Active;
|
||||
const onStopSharing = jest.fn();
|
||||
mocked(useOwnLiveBeacons).mockReturnValue({
|
||||
onStopSharing,
|
||||
});
|
||||
const component = getComponent({ displayStatus, beacon: defaultBeacon });
|
||||
|
||||
act(() => {
|
||||
findByTestId(component, 'beacon-status-stop-beacon').at(0).simulate('click');
|
||||
});
|
||||
|
||||
expect(onStopSharing).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('errors', () => {
|
||||
it('renders in error mode when displayStatus is error', () => {
|
||||
const displayStatus = BeaconDisplayStatus.Error;
|
||||
const component = getComponent({ displayStatus });
|
||||
expect(component.text()).toEqual('Live location error');
|
||||
|
||||
// no actions for plain error
|
||||
expect(component.find('AccessibleButton').length).toBeFalsy();
|
||||
});
|
||||
|
||||
describe('with wire error', () => {
|
||||
it('renders in error mode', () => {
|
||||
const displayStatus = BeaconDisplayStatus.Active;
|
||||
mocked(useOwnLiveBeacons).mockReturnValue({
|
||||
hasWireError: true,
|
||||
onResetWireError: jest.fn(),
|
||||
});
|
||||
const component = getComponent({ displayStatus, beacon: defaultBeacon });
|
||||
expect(component.text()).toContain('Live location error');
|
||||
// retry button
|
||||
expect(findByTestId(component, 'beacon-status-reset-wire-error').length).toBeTruthy();
|
||||
});
|
||||
|
||||
it('retry button resets wire error', () => {
|
||||
const displayStatus = BeaconDisplayStatus.Active;
|
||||
const onResetWireError = jest.fn();
|
||||
mocked(useOwnLiveBeacons).mockReturnValue({
|
||||
hasWireError: true,
|
||||
onResetWireError,
|
||||
});
|
||||
const component = getComponent({ displayStatus, beacon: defaultBeacon });
|
||||
act(() => {
|
||||
findByTestId(component, 'beacon-status-reset-wire-error').at(0).simulate('click');
|
||||
});
|
||||
|
||||
expect(onResetWireError).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('with stopping error', () => {
|
||||
it('renders in error mode', () => {
|
||||
const displayStatus = BeaconDisplayStatus.Active;
|
||||
mocked(useOwnLiveBeacons).mockReturnValue({
|
||||
hasWireError: false,
|
||||
hasStopSharingError: true,
|
||||
onStopSharing: jest.fn(),
|
||||
});
|
||||
const component = getComponent({ displayStatus, beacon: defaultBeacon });
|
||||
expect(component.text()).toContain('Live location error');
|
||||
// retry button
|
||||
expect(findByTestId(component, 'beacon-status-stop-beacon-retry').length).toBeTruthy();
|
||||
});
|
||||
|
||||
it('retry button retries stop sharing', () => {
|
||||
const displayStatus = BeaconDisplayStatus.Active;
|
||||
const onStopSharing = jest.fn();
|
||||
mocked(useOwnLiveBeacons).mockReturnValue({
|
||||
hasStopSharingError: true,
|
||||
onStopSharing,
|
||||
});
|
||||
const component = getComponent({ displayStatus, beacon: defaultBeacon });
|
||||
act(() => {
|
||||
findByTestId(component, 'beacon-status-stop-beacon-retry').at(0).simulate('click');
|
||||
});
|
||||
|
||||
expect(onStopSharing).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
it('renders loading state correctly', () => {
|
||||
const component = getComponent();
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,43 +1,8 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<BeaconStatus /> renders active state with stop button 1`] = `
|
||||
Array [
|
||||
<AccessibleButton
|
||||
className="mx_BeaconStatus_stopButton"
|
||||
data-test-id="beacon-status-stop-beacon"
|
||||
element="div"
|
||||
kind="link"
|
||||
onClick={[MockFunction]}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
>
|
||||
<div
|
||||
className="mx_AccessibleButton mx_BeaconStatus_stopButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
|
||||
data-test-id="beacon-status-stop-beacon"
|
||||
onClick={[MockFunction]}
|
||||
onKeyDown={[Function]}
|
||||
onKeyUp={[Function]}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
>
|
||||
Stop
|
||||
</div>
|
||||
</AccessibleButton>,
|
||||
<div
|
||||
className="mx_AccessibleButton mx_BeaconStatus_stopButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
|
||||
data-test-id="beacon-status-stop-beacon"
|
||||
onClick={[MockFunction]}
|
||||
onKeyDown={[Function]}
|
||||
onKeyUp={[Function]}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
>
|
||||
Stop
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
exports[`<BeaconStatus /> active state renders with children 1`] = `null`;
|
||||
|
||||
exports[`<BeaconStatus /> renders active state without stop buttons 1`] = `
|
||||
exports[`<BeaconStatus /> active state renders without children 1`] = `
|
||||
<BeaconStatus
|
||||
beacon={
|
||||
Beacon {
|
||||
|
|
@ -48,10 +13,8 @@ exports[`<BeaconStatus /> renders active state without stop buttons 1`] = `
|
|||
"timeout": 3600000,
|
||||
"timestamp": 123456789,
|
||||
},
|
||||
"_events": Object {
|
||||
"Beacon.update": [Function],
|
||||
},
|
||||
"_eventsCount": 1,
|
||||
"_events": Object {},
|
||||
"_eventsCount": 0,
|
||||
"_isLive": undefined,
|
||||
"_latestLocationState": undefined,
|
||||
"_maxListeners": undefined,
|
||||
|
|
@ -79,6 +42,7 @@ exports[`<BeaconStatus /> renders active state without stop buttons 1`] = `
|
|||
}
|
||||
}
|
||||
displayStatus="Active"
|
||||
label="test label"
|
||||
>
|
||||
<div
|
||||
className="mx_BeaconStatus mx_BeaconStatus_Active"
|
||||
|
|
@ -93,9 +57,10 @@ exports[`<BeaconStatus /> renders active state without stop buttons 1`] = `
|
|||
/>
|
||||
</StyledLiveBeaconIcon>
|
||||
<div
|
||||
className="mx_BeaconStatus_activeDescription"
|
||||
className="mx_BeaconStatus_description"
|
||||
>
|
||||
<LiveTimeRemaining
|
||||
test label
|
||||
<BeaconExpiryTime
|
||||
beacon={
|
||||
Beacon {
|
||||
"_beaconInfo": Object {
|
||||
|
|
@ -105,10 +70,8 @@ exports[`<BeaconStatus /> renders active state without stop buttons 1`] = `
|
|||
"timeout": 3600000,
|
||||
"timestamp": 123456789,
|
||||
},
|
||||
"_events": Object {
|
||||
"Beacon.update": [Function],
|
||||
},
|
||||
"_eventsCount": 1,
|
||||
"_events": Object {},
|
||||
"_eventsCount": 0,
|
||||
"_isLive": undefined,
|
||||
"_latestLocationState": undefined,
|
||||
"_maxListeners": undefined,
|
||||
|
|
@ -137,12 +100,11 @@ exports[`<BeaconStatus /> renders active state without stop buttons 1`] = `
|
|||
}
|
||||
>
|
||||
<span
|
||||
className="mx_LiveTimeRemaining"
|
||||
data-test-id="room-live-share-expiry"
|
||||
className="mx_BeaconStatus_expiryTime"
|
||||
>
|
||||
1h left
|
||||
Live until 11:17
|
||||
</span>
|
||||
</LiveTimeRemaining>
|
||||
</BeaconExpiryTime>
|
||||
</div>
|
||||
</div>
|
||||
</BeaconStatus>
|
||||
|
|
@ -151,6 +113,7 @@ exports[`<BeaconStatus /> renders active state without stop buttons 1`] = `
|
|||
exports[`<BeaconStatus /> renders loading state 1`] = `
|
||||
<BeaconStatus
|
||||
displayStatus="Loading"
|
||||
label="test label"
|
||||
>
|
||||
<div
|
||||
className="mx_BeaconStatus mx_BeaconStatus_Loading"
|
||||
|
|
@ -164,9 +127,13 @@ exports[`<BeaconStatus /> renders loading state 1`] = `
|
|||
className="mx_StyledLiveBeaconIcon mx_BeaconStatus_icon mx_StyledLiveBeaconIcon_idle"
|
||||
/>
|
||||
</StyledLiveBeaconIcon>
|
||||
<span>
|
||||
Loading live location...
|
||||
</span>
|
||||
<div
|
||||
className="mx_BeaconStatus_description"
|
||||
>
|
||||
<span>
|
||||
Loading live location...
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</BeaconStatus>
|
||||
`;
|
||||
|
|
@ -174,6 +141,7 @@ exports[`<BeaconStatus /> renders loading state 1`] = `
|
|||
exports[`<BeaconStatus /> renders stopped state 1`] = `
|
||||
<BeaconStatus
|
||||
displayStatus="Stopped"
|
||||
label="test label"
|
||||
>
|
||||
<div
|
||||
className="mx_BeaconStatus mx_BeaconStatus_Stopped"
|
||||
|
|
@ -187,9 +155,13 @@ exports[`<BeaconStatus /> renders stopped state 1`] = `
|
|||
className="mx_StyledLiveBeaconIcon mx_BeaconStatus_icon mx_StyledLiveBeaconIcon_idle"
|
||||
/>
|
||||
</StyledLiveBeaconIcon>
|
||||
<span>
|
||||
Live location ended
|
||||
</span>
|
||||
<div
|
||||
className="mx_BeaconStatus_description"
|
||||
>
|
||||
<span>
|
||||
Live location ended
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</BeaconStatus>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,35 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<OwnBeaconStatus /> renders without a beacon instance 1`] = `
|
||||
<OwnBeaconStatus
|
||||
displayStatus="Loading"
|
||||
>
|
||||
<BeaconStatus
|
||||
className="mx_MBeaconBody_chin"
|
||||
displayLiveTimeRemaining={true}
|
||||
displayStatus="Loading"
|
||||
label="Live location enabled"
|
||||
>
|
||||
<div
|
||||
className="mx_BeaconStatus mx_BeaconStatus_Loading mx_MBeaconBody_chin"
|
||||
>
|
||||
<StyledLiveBeaconIcon
|
||||
className="mx_BeaconStatus_icon"
|
||||
isIdle={true}
|
||||
withError={false}
|
||||
>
|
||||
<div
|
||||
className="mx_StyledLiveBeaconIcon mx_BeaconStatus_icon mx_StyledLiveBeaconIcon_idle"
|
||||
/>
|
||||
</StyledLiveBeaconIcon>
|
||||
<div
|
||||
className="mx_BeaconStatus_description"
|
||||
>
|
||||
<span>
|
||||
Loading live location...
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</BeaconStatus>
|
||||
</OwnBeaconStatus>
|
||||
`;
|
||||
Loading…
Add table
Add a link
Reference in a new issue