Live location sharing: live share warning in room (#8100)
* add duration dropdown to live location picker Signed-off-by: Kerry Archibald <kerrya@element.io> * tidy comments Signed-off-by: Kerry Archibald <kerrya@element.io> * setup component Signed-off-by: Kerry Archibald <kerrya@element.io> * replace references to beaconInfoId with beacon.identifier Signed-off-by: Kerry Archibald <kerrya@element.io> * icon Signed-off-by: Kerry Archibald <kerrya@element.io> * component for styled live beacon icon Signed-off-by: Kerry Archibald <kerrya@element.io> * emit liveness change whenever livebeaconIds changes Signed-off-by: Kerry Archibald <kerrya@element.io> * Handle multiple live beacons in room share warning, test Signed-off-by: Kerry Archibald <kerrya@element.io> * un xdescribe beaconstore tests Signed-off-by: Kerry Archibald <kerrya@element.io> * missed copyrights Signed-off-by: Kerry Archibald <kerrya@element.io> * i18n Signed-off-by: Kerry Archibald <kerrya@element.io> * tidy Signed-off-by: Kerry Archibald <kerrya@element.io>
This commit is contained in:
Kerry
GitHub
parent
c8d3b51640
commit
b04d31b5be
11 changed files with 600 additions and 42 deletions
209
test/components/views/beacon/RoomLiveShareWarning-test.tsx
Normal file
209
test/components/views/beacon/RoomLiveShareWarning-test.tsx
Normal file
|
|
@ -0,0 +1,209 @@
|
|||
/*
|
||||
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 { act } from 'react-dom/test-utils';
|
||||
import { mount } from 'enzyme';
|
||||
import { Room, Beacon, BeaconEvent } from 'matrix-js-sdk/src/matrix';
|
||||
|
||||
import '../../../skinned-sdk';
|
||||
import RoomLiveShareWarning from '../../../../src/components/views/beacon/RoomLiveShareWarning';
|
||||
import { OwnBeaconStore } from '../../../../src/stores/OwnBeaconStore';
|
||||
import {
|
||||
findByTestId,
|
||||
getMockClientWithEventEmitter,
|
||||
makeBeaconInfoEvent,
|
||||
resetAsyncStoreWithClient,
|
||||
setupAsyncStoreWithClient,
|
||||
} from '../../../test-utils';
|
||||
|
||||
jest.useFakeTimers();
|
||||
describe('<RoomLiveShareWarning />', () => {
|
||||
const aliceId = '@alice:server.org';
|
||||
const room1Id = '$room1:server.org';
|
||||
const room2Id = '$room2:server.org';
|
||||
const room3Id = '$room3:server.org';
|
||||
const mockClient = getMockClientWithEventEmitter({
|
||||
getVisibleRooms: jest.fn().mockReturnValue([]),
|
||||
getUserId: jest.fn().mockReturnValue(aliceId),
|
||||
unstable_setLiveBeacon: jest.fn().mockResolvedValue({ event_id: '1' }),
|
||||
});
|
||||
|
||||
// 14.03.2022 16:15
|
||||
const now = 1647270879403;
|
||||
const HOUR_MS = 3600000;
|
||||
// mock the date so events are stable for snapshots etc
|
||||
jest.spyOn(global.Date, 'now').mockReturnValue(now);
|
||||
const room1Beacon1 = makeBeaconInfoEvent(aliceId, room1Id, { isLive: true, timeout: HOUR_MS });
|
||||
const room2Beacon1 = makeBeaconInfoEvent(aliceId, room2Id, { isLive: true, timeout: HOUR_MS });
|
||||
const room2Beacon2 = makeBeaconInfoEvent(aliceId, room2Id, { isLive: true, timeout: HOUR_MS * 12 });
|
||||
const room3Beacon1 = makeBeaconInfoEvent(aliceId, room3Id, { isLive: true, timeout: HOUR_MS });
|
||||
|
||||
// make fresh rooms every time
|
||||
// as we update room state
|
||||
const makeRoomsWithStateEvents = (stateEvents = []): [Room, Room] => {
|
||||
const room1 = new Room(room1Id, mockClient, aliceId);
|
||||
const room2 = new Room(room2Id, mockClient, aliceId);
|
||||
|
||||
room1.currentState.setStateEvents(stateEvents);
|
||||
room2.currentState.setStateEvents(stateEvents);
|
||||
mockClient.getVisibleRooms.mockReturnValue([room1, room2]);
|
||||
|
||||
return [room1, room2];
|
||||
};
|
||||
|
||||
const advanceDateAndTime = (ms: number) => {
|
||||
// bc liveness check uses Date.now we have to advance this mock
|
||||
jest.spyOn(global.Date, 'now').mockReturnValue(now + ms);
|
||||
// then advance time for the interval by the same amount
|
||||
jest.advanceTimersByTime(ms);
|
||||
};
|
||||
|
||||
const makeOwnBeaconStore = async () => {
|
||||
const store = OwnBeaconStore.instance;
|
||||
|
||||
await setupAsyncStoreWithClient(store, mockClient);
|
||||
return store;
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
roomId: room1Id,
|
||||
};
|
||||
const getComponent = (props = {}) => {
|
||||
let component;
|
||||
// component updates on render
|
||||
// wrap in act
|
||||
act(() => {
|
||||
component = mount(<RoomLiveShareWarning {...defaultProps} {...props} />);
|
||||
});
|
||||
return component;
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
jest.spyOn(global.Date, 'now').mockReturnValue(now);
|
||||
mockClient.unstable_setLiveBeacon.mockClear();
|
||||
});
|
||||
|
||||
afterEach(async () => {
|
||||
await resetAsyncStoreWithClient(OwnBeaconStore.instance);
|
||||
});
|
||||
|
||||
afterAll(() => {
|
||||
jest.spyOn(global.Date, 'now').mockRestore();
|
||||
});
|
||||
|
||||
it('renders nothing when user has no live beacons at all', async () => {
|
||||
await makeOwnBeaconStore();
|
||||
const component = getComponent();
|
||||
expect(component.html()).toBe(null);
|
||||
});
|
||||
|
||||
it('renders nothing when user has no live beacons in room', async () => {
|
||||
await act(async () => {
|
||||
await makeRoomsWithStateEvents([room2Beacon1]);
|
||||
await makeOwnBeaconStore();
|
||||
});
|
||||
const component = getComponent({ roomId: room1Id });
|
||||
expect(component.html()).toBe(null);
|
||||
});
|
||||
|
||||
describe('when user has live beacons', () => {
|
||||
beforeEach(async () => {
|
||||
await act(async () => {
|
||||
await makeRoomsWithStateEvents([room1Beacon1, room2Beacon1, room2Beacon2]);
|
||||
await makeOwnBeaconStore();
|
||||
});
|
||||
});
|
||||
|
||||
it('renders correctly with one live beacon in room', () => {
|
||||
const component = getComponent({ roomId: room1Id });
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders correctly with two live beacons in room', () => {
|
||||
const component = getComponent({ roomId: room2Id });
|
||||
expect(component).toMatchSnapshot();
|
||||
// later expiry displayed
|
||||
expect(findByTestId(component, 'room-live-share-expiry').text()).toEqual('12h left');
|
||||
});
|
||||
|
||||
it('removes itself when user stops having live beacons', async () => {
|
||||
const component = getComponent({ roomId: room1Id });
|
||||
// started out rendered
|
||||
expect(component.html()).toBeTruthy();
|
||||
|
||||
// time travel until room1Beacon1 is expired
|
||||
advanceDateAndTime(HOUR_MS + 1);
|
||||
act(() => {
|
||||
mockClient.emit(BeaconEvent.LivenessChange, false, new Beacon(room1Beacon1));
|
||||
component.setProps({});
|
||||
});
|
||||
|
||||
expect(component.html()).toBe(null);
|
||||
});
|
||||
|
||||
it('renders when user adds a live beacon', async () => {
|
||||
const component = getComponent({ roomId: room3Id });
|
||||
// started out not rendered
|
||||
expect(component.html()).toBeFalsy();
|
||||
|
||||
act(() => {
|
||||
mockClient.emit(BeaconEvent.New, room3Beacon1, new Beacon(room3Beacon1));
|
||||
component.setProps({});
|
||||
});
|
||||
|
||||
expect(component.html()).toBeTruthy();
|
||||
});
|
||||
|
||||
describe('stopping beacons', () => {
|
||||
it('stops beacon on stop sharing click', () => {
|
||||
const component = getComponent({ roomId: room2Id });
|
||||
|
||||
act(() => {
|
||||
findByTestId(component, 'room-live-share-stop-sharing').at(0).simulate('click');
|
||||
component.setProps({});
|
||||
});
|
||||
|
||||
expect(mockClient.unstable_setLiveBeacon).toHaveBeenCalledTimes(2);
|
||||
expect(component.find('Spinner').length).toBeTruthy();
|
||||
expect(findByTestId(component, 'room-live-share-stop-sharing').at(0).props().disabled).toBeTruthy();
|
||||
});
|
||||
|
||||
it('displays again with correct state after stopping a beacon', () => {
|
||||
// make sure the loading state is reset correctly after removing a beacon
|
||||
const component = getComponent({ roomId: room2Id });
|
||||
|
||||
act(() => {
|
||||
findByTestId(component, 'room-live-share-stop-sharing').at(0).simulate('click');
|
||||
});
|
||||
// time travel until room1Beacon1 is expired
|
||||
advanceDateAndTime(HOUR_MS + 1);
|
||||
act(() => {
|
||||
mockClient.emit(BeaconEvent.LivenessChange, false, new Beacon(room1Beacon1));
|
||||
});
|
||||
|
||||
const newLiveBeacon = makeBeaconInfoEvent(aliceId, room2Id, { isLive: true });
|
||||
act(() => {
|
||||
mockClient.emit(BeaconEvent.New, newLiveBeacon, new Beacon(newLiveBeacon));
|
||||
});
|
||||
|
||||
// button not disabled and expiry time shown
|
||||
expect(findByTestId(component, 'room-live-share-stop-sharing').at(0).props().disabled).toBeFalsy();
|
||||
expect(findByTestId(component, 'room-live-share-expiry').text()).toEqual('11h left');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
32
test/components/views/beacon/StyledLiveBeaconIcon-test.tsx
Normal file
32
test/components/views/beacon/StyledLiveBeaconIcon-test.tsx
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
/*
|
||||
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 '../../../skinned-sdk';
|
||||
import StyledLiveBeaconIcon from '../../../../src/components/views/beacon/StyledLiveBeaconIcon';
|
||||
|
||||
describe('<StyledLiveBeaconIcon />', () => {
|
||||
const defaultProps = {};
|
||||
const getComponent = (props = {}) =>
|
||||
mount(<StyledLiveBeaconIcon {...defaultProps} {...props} />);
|
||||
|
||||
it('renders', () => {
|
||||
const component = getComponent();
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<RoomLiveShareWarning /> when user has live beacons renders correctly with one live beacon in room 1`] = `
|
||||
<RoomLiveShareWarning
|
||||
roomId="$room1:server.org"
|
||||
>
|
||||
<div
|
||||
className="mx_RoomLiveShareWarning"
|
||||
>
|
||||
<StyledLiveBeaconIcon
|
||||
className="mx_RoomLiveShareWarning_icon"
|
||||
>
|
||||
<div
|
||||
className="mx_StyledLiveBeaconIcon mx_RoomLiveShareWarning_icon"
|
||||
/>
|
||||
</StyledLiveBeaconIcon>
|
||||
<span
|
||||
className="mx_RoomLiveShareWarning_label"
|
||||
>
|
||||
You are sharing your live location
|
||||
</span>
|
||||
<span
|
||||
className="mx_RoomLiveShareWarning_expiry"
|
||||
data-test-id="room-live-share-expiry"
|
||||
>
|
||||
1h left
|
||||
</span>
|
||||
<AccessibleButton
|
||||
data-test-id="room-live-share-stop-sharing"
|
||||
disabled={false}
|
||||
element="button"
|
||||
kind="danger"
|
||||
onClick={[Function]}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
>
|
||||
<button
|
||||
className="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger"
|
||||
data-test-id="room-live-share-stop-sharing"
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
onKeyUp={[Function]}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
>
|
||||
Stop sharing
|
||||
</button>
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
</RoomLiveShareWarning>
|
||||
`;
|
||||
|
||||
exports[`<RoomLiveShareWarning /> when user has live beacons renders correctly with two live beacons in room 1`] = `
|
||||
<RoomLiveShareWarning
|
||||
roomId="$room2:server.org"
|
||||
>
|
||||
<div
|
||||
className="mx_RoomLiveShareWarning"
|
||||
>
|
||||
<StyledLiveBeaconIcon
|
||||
className="mx_RoomLiveShareWarning_icon"
|
||||
>
|
||||
<div
|
||||
className="mx_StyledLiveBeaconIcon mx_RoomLiveShareWarning_icon"
|
||||
/>
|
||||
</StyledLiveBeaconIcon>
|
||||
<span
|
||||
className="mx_RoomLiveShareWarning_label"
|
||||
>
|
||||
You are sharing 2 live locations
|
||||
</span>
|
||||
<span
|
||||
className="mx_RoomLiveShareWarning_expiry"
|
||||
data-test-id="room-live-share-expiry"
|
||||
>
|
||||
12h left
|
||||
</span>
|
||||
<AccessibleButton
|
||||
data-test-id="room-live-share-stop-sharing"
|
||||
disabled={false}
|
||||
element="button"
|
||||
kind="danger"
|
||||
onClick={[Function]}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
>
|
||||
<button
|
||||
className="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger"
|
||||
data-test-id="room-live-share-stop-sharing"
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
onKeyUp={[Function]}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
>
|
||||
Stop sharing
|
||||
</button>
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
</RoomLiveShareWarning>
|
||||
`;
|
||||
Loading…
Add table
Add a link
Reference in a new issue