416 lines
		
	
	
		
			17 KiB
		
	
	
	
		
			TypeScript
		
	
	
			
		
		
	
	
			416 lines
		
	
	
		
			17 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 { act } from 'react-dom/test-utils';
 | |
| import { mount } from 'enzyme';
 | |
| import { Room, Beacon, BeaconEvent, getBeaconInfoIdentifier } from 'matrix-js-sdk/src/matrix';
 | |
| import { logger } from 'matrix-js-sdk/src/logger';
 | |
| 
 | |
| import RoomLiveShareWarning from '../../../../src/components/views/beacon/RoomLiveShareWarning';
 | |
| import { OwnBeaconStore, OwnBeaconStoreEvent } from '../../../../src/stores/OwnBeaconStore';
 | |
| import {
 | |
|     advanceDateAndTime,
 | |
|     findByTestId,
 | |
|     flushPromisesWithFakeTimers,
 | |
|     getMockClientWithEventEmitter,
 | |
|     makeBeaconInfoEvent,
 | |
|     mockGeolocation,
 | |
|     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' }),
 | |
|         sendEvent: jest.fn(),
 | |
|     });
 | |
| 
 | |
|     // 14.03.2022 16:15
 | |
|     const now = 1647270879403;
 | |
|     const MINUTE_MS = 60000;
 | |
|     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,
 | |
|     }, '$0');
 | |
|     const room2Beacon1 = makeBeaconInfoEvent(aliceId, room2Id, { isLive: true, timeout: HOUR_MS }, '$1');
 | |
|     const room2Beacon2 = makeBeaconInfoEvent(aliceId, room2Id, { isLive: true, timeout: HOUR_MS * 12 }, '$2');
 | |
|     const room3Beacon1 = makeBeaconInfoEvent(aliceId, room3Id, { isLive: true, timeout: HOUR_MS }, '$3');
 | |
| 
 | |
|     // 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 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;
 | |
|     };
 | |
| 
 | |
|     const localStorageSpy = jest.spyOn(localStorage.__proto__, 'getItem').mockReturnValue(undefined);
 | |
| 
 | |
|     beforeEach(() => {
 | |
|         mockGeolocation();
 | |
|         jest.spyOn(global.Date, 'now').mockReturnValue(now);
 | |
|         mockClient.unstable_setLiveBeacon.mockReset().mockResolvedValue({ event_id: '1' });
 | |
| 
 | |
|         // assume all beacons were created on this device
 | |
|         localStorageSpy.mockReturnValue(JSON.stringify([
 | |
|             room1Beacon1.getId(),
 | |
|             room2Beacon1.getId(),
 | |
|             room2Beacon2.getId(),
 | |
|             room3Beacon1.getId(),
 | |
|         ]));
 | |
|     });
 | |
| 
 | |
|     afterEach(async () => {
 | |
|         jest.spyOn(OwnBeaconStore.instance, 'beaconHasLocationPublishError').mockRestore();
 | |
|         await resetAsyncStoreWithClient(OwnBeaconStore.instance);
 | |
|     });
 | |
| 
 | |
|     afterAll(() => {
 | |
|         jest.spyOn(global.Date, 'now').mockRestore();
 | |
|         localStorageSpy.mockRestore();
 | |
|     });
 | |
| 
 | |
|     const getExpiryText = wrapper => findByTestId(wrapper, 'room-live-share-expiry').text();
 | |
| 
 | |
|     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);
 | |
|     });
 | |
| 
 | |
|     it('does not render when geolocation is not working', async () => {
 | |
|         jest.spyOn(logger, 'error').mockImplementation(() => { });
 | |
|         // @ts-ignore
 | |
|         navigator.geolocation = undefined;
 | |
|         await act(async () => {
 | |
|             await makeRoomsWithStateEvents([room1Beacon1, room2Beacon1, room2Beacon2]);
 | |
|             await makeOwnBeaconStore();
 | |
|         });
 | |
|         const component = getComponent({ roomId: room1Id });
 | |
| 
 | |
|         // beacons have generated ids that break snapshots
 | |
|         // assert on html
 | |
|         expect(component.html()).toBeNull();
 | |
|     });
 | |
| 
 | |
|     describe('when user has live beacons and geolocation is available', () => {
 | |
|         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 });
 | |
|             // beacons have generated ids that break snapshots
 | |
|             // assert on html
 | |
|             expect(component.html()).toMatchSnapshot();
 | |
|         });
 | |
| 
 | |
|         it('renders correctly with two live beacons in room', () => {
 | |
|             const component = getComponent({ roomId: room2Id });
 | |
|             // beacons have generated ids that break snapshots
 | |
|             // assert on html
 | |
|             expect(component.html()).toMatchSnapshot();
 | |
|             // later expiry displayed
 | |
|             expect(getExpiryText(component)).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
 | |
|             act(() => {
 | |
|                 advanceDateAndTime(HOUR_MS + 1);
 | |
|             });
 | |
|             act(() => {
 | |
|                 mockClient.emit(BeaconEvent.LivenessChange, false, new Beacon(room1Beacon1));
 | |
|                 component.setProps({});
 | |
|             });
 | |
| 
 | |
|             expect(component.html()).toBe(null);
 | |
|         });
 | |
| 
 | |
|         it('removes itself when user stops monitoring live position', async () => {
 | |
|             const component = getComponent({ roomId: room1Id });
 | |
|             // started out rendered
 | |
|             expect(component.html()).toBeTruthy();
 | |
| 
 | |
|             act(() => {
 | |
|                 // cheat to clear this
 | |
|                 // @ts-ignore
 | |
|                 OwnBeaconStore.instance.clearPositionWatch = undefined;
 | |
|                 OwnBeaconStore.instance.emit(OwnBeaconStoreEvent.MonitoringLivePosition);
 | |
|                 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();
 | |
|         });
 | |
| 
 | |
|         it('updates beacon time left periodically', () => {
 | |
|             const component = getComponent({ roomId: room1Id });
 | |
|             expect(getExpiryText(component)).toEqual('1h left');
 | |
| 
 | |
|             act(() => {
 | |
|                 advanceDateAndTime(MINUTE_MS * 25);
 | |
|             });
 | |
| 
 | |
|             expect(getExpiryText(component)).toEqual('35m left');
 | |
|         });
 | |
| 
 | |
|         it('updates beacon time left when beacon updates', () => {
 | |
|             const component = getComponent({ roomId: room1Id });
 | |
|             expect(getExpiryText(component)).toEqual('1h left');
 | |
| 
 | |
|             expect(getExpiryText(component)).toEqual('1h left');
 | |
| 
 | |
|             act(() => {
 | |
|                 const beacon = OwnBeaconStore.instance.getBeaconById(getBeaconInfoIdentifier(room1Beacon1));
 | |
|                 const room1Beacon1Update = makeBeaconInfoEvent(aliceId, room1Id, {
 | |
|                     isLive: true,
 | |
|                     timeout: 3 * HOUR_MS,
 | |
|                 }, '$0');
 | |
|                 beacon.update(room1Beacon1Update);
 | |
|             });
 | |
| 
 | |
|             // update to expiry of new beacon
 | |
|             expect(getExpiryText(component)).toEqual('3h left');
 | |
|         });
 | |
| 
 | |
|         it('clears expiry time interval on unmount', () => {
 | |
|             const clearIntervalSpy = jest.spyOn(global, 'clearInterval');
 | |
|             const component = getComponent({ roomId: room1Id });
 | |
|             expect(getExpiryText(component)).toEqual('1h left');
 | |
| 
 | |
|             act(() => {
 | |
|                 component.unmount();
 | |
|             });
 | |
| 
 | |
|             expect(clearIntervalSpy).toHaveBeenCalled();
 | |
|         });
 | |
| 
 | |
|         describe('stopping beacons', () => {
 | |
|             it('stops beacon on stop sharing click', () => {
 | |
|                 const component = getComponent({ roomId: room2Id });
 | |
| 
 | |
|                 act(() => {
 | |
|                     findByTestId(component, 'room-live-share-primary-button').at(0).simulate('click');
 | |
|                     component.setProps({});
 | |
|                 });
 | |
| 
 | |
|                 expect(mockClient.unstable_setLiveBeacon).toHaveBeenCalled();
 | |
|                 expect(component.find('Spinner').length).toBeTruthy();
 | |
|                 expect(findByTestId(component, 'room-live-share-primary-button').at(0).props().disabled).toBeTruthy();
 | |
|             });
 | |
| 
 | |
|             it('displays error when stop sharing fails', async () => {
 | |
|                 const component = getComponent({ roomId: room1Id });
 | |
| 
 | |
|                 // fail first time
 | |
|                 mockClient.unstable_setLiveBeacon
 | |
|                     .mockRejectedValueOnce(new Error('oups'))
 | |
|                     .mockResolvedValue(({ event_id: '1' }));
 | |
| 
 | |
|                 await act(async () => {
 | |
|                     findByTestId(component, 'room-live-share-primary-button').at(0).simulate('click');
 | |
|                     await flushPromisesWithFakeTimers();
 | |
|                 });
 | |
|                 component.setProps({});
 | |
| 
 | |
|                 expect(component.html()).toMatchSnapshot();
 | |
| 
 | |
|                 act(() => {
 | |
|                     findByTestId(component, 'room-live-share-primary-button').at(0).simulate('click');
 | |
|                     component.setProps({});
 | |
|                 });
 | |
| 
 | |
|                 expect(mockClient.unstable_setLiveBeacon).toHaveBeenCalledTimes(2);
 | |
|             });
 | |
| 
 | |
|             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: room1Id });
 | |
| 
 | |
|                 // stop the beacon
 | |
|                 act(() => {
 | |
|                     findByTestId(component, 'room-live-share-primary-button').at(0).simulate('click');
 | |
|                 });
 | |
|                 // time travel until room1Beacon1 is expired
 | |
|                 act(() => {
 | |
|                     advanceDateAndTime(HOUR_MS + 1);
 | |
|                 });
 | |
|                 act(() => {
 | |
|                     mockClient.emit(BeaconEvent.LivenessChange, false, new Beacon(room1Beacon1));
 | |
|                 });
 | |
| 
 | |
|                 const newLiveBeacon = makeBeaconInfoEvent(aliceId, room1Id, { isLive: true });
 | |
|                 act(() => {
 | |
|                     mockClient.emit(BeaconEvent.New, newLiveBeacon, new Beacon(newLiveBeacon));
 | |
|                 });
 | |
| 
 | |
|                 // button not disabled and expiry time shown
 | |
|                 expect(findByTestId(component, 'room-live-share-primary-button').at(0).props().disabled).toBeFalsy();
 | |
|                 expect(findByTestId(component, 'room-live-share-expiry').text()).toEqual('1h left');
 | |
|             });
 | |
|         });
 | |
| 
 | |
|         describe('with location publish errors', () => {
 | |
|             it('displays location publish error when mounted with location publish errors', async () => {
 | |
|                 const locationPublishErrorSpy = jest.spyOn(OwnBeaconStore.instance, 'beaconHasLocationPublishError')
 | |
|                     .mockReturnValue(true);
 | |
|                 const component = getComponent({ roomId: room2Id });
 | |
| 
 | |
|                 expect(component).toMatchSnapshot();
 | |
|                 expect(locationPublishErrorSpy).toHaveBeenCalledWith(
 | |
|                     getBeaconInfoIdentifier(room2Beacon1), 0, [getBeaconInfoIdentifier(room2Beacon1)],
 | |
|                 );
 | |
|             });
 | |
| 
 | |
|             it(
 | |
|                 'displays location publish error when locationPublishError event is emitted' +
 | |
|                 ' and beacons have errors',
 | |
|                 async () => {
 | |
|                     const locationPublishErrorSpy = jest.spyOn(OwnBeaconStore.instance, 'beaconHasLocationPublishError')
 | |
|                         .mockReturnValue(false);
 | |
|                     const component = getComponent({ roomId: room2Id });
 | |
| 
 | |
|                     // update mock and emit event
 | |
|                     act(() => {
 | |
|                         locationPublishErrorSpy.mockReturnValue(true);
 | |
|                         OwnBeaconStore.instance.emit(
 | |
|                             OwnBeaconStoreEvent.LocationPublishError, getBeaconInfoIdentifier(room2Beacon1),
 | |
|                         );
 | |
|                     });
 | |
|                     component.setProps({});
 | |
| 
 | |
|                     // renders wire error ui
 | |
|                     expect(component.find('.mx_RoomLiveShareWarning_label').text()).toEqual(
 | |
|                         'An error occurred whilst sharing your live location, please try again',
 | |
|                     );
 | |
|                     expect(findByTestId(component, 'room-live-share-wire-error-close-button').length).toBeTruthy();
 | |
|                 });
 | |
| 
 | |
|             it('stops displaying wire error when errors are cleared', async () => {
 | |
|                 const locationPublishErrorSpy = jest.spyOn(OwnBeaconStore.instance, 'beaconHasLocationPublishError')
 | |
|                     .mockReturnValue(true);
 | |
|                 const component = getComponent({ roomId: room2Id });
 | |
| 
 | |
|                 // update mock and emit event
 | |
|                 act(() => {
 | |
|                     locationPublishErrorSpy.mockReturnValue(false);
 | |
|                     OwnBeaconStore.instance.emit(
 | |
|                         OwnBeaconStoreEvent.LocationPublishError, getBeaconInfoIdentifier(room2Beacon1),
 | |
|                     );
 | |
|                 });
 | |
|                 component.setProps({});
 | |
| 
 | |
|                 // renders error-free ui
 | |
|                 expect(component.find('.mx_RoomLiveShareWarning_label').text()).toEqual(
 | |
|                     'You are sharing your live location',
 | |
|                 );
 | |
|                 expect(findByTestId(component, 'room-live-share-wire-error-close-button').length).toBeFalsy();
 | |
|             });
 | |
| 
 | |
|             it('clicking retry button resets location publish errors', async () => {
 | |
|                 jest.spyOn(OwnBeaconStore.instance, 'beaconHasLocationPublishError').mockReturnValue(true);
 | |
|                 const resetErrorSpy = jest.spyOn(OwnBeaconStore.instance, 'resetLocationPublishError');
 | |
| 
 | |
|                 const component = getComponent({ roomId: room2Id });
 | |
| 
 | |
|                 act(() => {
 | |
|                     findByTestId(component, 'room-live-share-primary-button').at(0).simulate('click');
 | |
|                 });
 | |
| 
 | |
|                 expect(resetErrorSpy).toHaveBeenCalledWith(getBeaconInfoIdentifier(room2Beacon1));
 | |
|             });
 | |
| 
 | |
|             it('clicking close button stops beacons', async () => {
 | |
|                 jest.spyOn(OwnBeaconStore.instance, 'beaconHasLocationPublishError').mockReturnValue(true);
 | |
|                 const stopBeaconSpy = jest.spyOn(OwnBeaconStore.instance, 'stopBeacon');
 | |
| 
 | |
|                 const component = getComponent({ roomId: room2Id });
 | |
| 
 | |
|                 act(() => {
 | |
|                     findByTestId(component, 'room-live-share-wire-error-close-button').at(0).simulate('click');
 | |
|                 });
 | |
| 
 | |
|                 expect(stopBeaconSpy).toHaveBeenCalledWith(getBeaconInfoIdentifier(room2Beacon1));
 | |
|             });
 | |
|         });
 | |
|     });
 | |
| });
 |