imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Live location sharing - display wire error in room (#8198)

Browse source 
* expose wire errors in more useful way

* add wire error state to room live share warning bar

Signed-off-by: Kerry Archibald <kerrya@element.io>

* stylelint

Signed-off-by: Kerry Archibald <kerrya@element.io>

* add types to getLabel helper

Signed-off-by: Kerry Archibald <kerrya@element.io>
This commit is contained in:
Kerry 2022-03-31 10:57:12 +02:00 • committed by GitHub
parent 60ca8996d3
commit 1175226bcb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 296 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

87
test/components/views/beacon/RoomLiveShareWarning-test.tsx
View file

@ -101,6 +101,7 @@ describe('<RoomLiveShareWarning />', () => {
});
afterEach(async () => {
jest.spyOn(OwnBeaconStore.instance, 'hasWireErrors').mockRestore();
await resetAsyncStoreWithClient(OwnBeaconStore.instance);
});
@ -238,13 +239,13 @@ describe('<RoomLiveShareWarning />', () => {
const component = getComponent({ roomId: room2Id });
act(() => {
findByTestId(component, 'room-live-share-stop-sharing').at(0).simulate('click');
findByTestId(component, 'room-live-share-primary-button').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();
expect(findByTestId(component, 'room-live-share-primary-button').at(0).props().disabled).toBeTruthy();
});
it('displays error when stop sharing fails', async () => {
@ -256,7 +257,7 @@ describe('<RoomLiveShareWarning />', () => {
.mockResolvedValue(({ event_id: '1' }));
await act(async () => {
findByTestId(component, 'room-live-share-stop-sharing').at(0).simulate('click');
findByTestId(component, 'room-live-share-primary-button').at(0).simulate('click');
await flushPromisesWithFakeTimers();
});
component.setProps({});
@ -264,7 +265,7 @@ describe('<RoomLiveShareWarning />', () => {
expect(component.html()).toMatchSnapshot();
act(() => {
findByTestId(component, 'room-live-share-stop-sharing').at(0).simulate('click');
findByTestId(component, 'room-live-share-primary-button').at(0).simulate('click');
component.setProps({});
});
@ -277,7 +278,7 @@ describe('<RoomLiveShareWarning />', () => {
// stop the beacon
act(() => {
findByTestId(component, 'room-live-share-stop-sharing').at(0).simulate('click');
findByTestId(component, 'room-live-share-primary-button').at(0).simulate('click');
});
// time travel until room1Beacon1 is expired
act(() => {
@ -293,9 +294,83 @@ describe('<RoomLiveShareWarning />', () => {
});
// 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-primary-button').at(0).props().disabled).toBeFalsy();
expect(findByTestId(component, 'room-live-share-expiry').text()).toEqual('1h left');
});
});
describe('with wire errors', () => {
it('displays wire error when mounted with wire errors', async () => {
const hasWireErrorsSpy = jest.spyOn(OwnBeaconStore.instance, 'hasWireErrors').mockReturnValue(true);
const component = getComponent({ roomId: room2Id });
expect(component).toMatchSnapshot();
expect(hasWireErrorsSpy).toHaveBeenCalledWith(room2Id);
});
it('displays wire error when wireError event is emitted and beacons have errors', async () => {
const hasWireErrorsSpy = jest.spyOn(OwnBeaconStore.instance, 'hasWireErrors').mockReturnValue(false);
const component = getComponent({ roomId: room2Id });
// update mock and emit event
act(() => {
hasWireErrorsSpy.mockReturnValue(true);
OwnBeaconStore.instance.emit(OwnBeaconStoreEvent.WireError, room2Beacon1.getType());
});
component.setProps({});
// renders wire error ui
expect(component.find('.mx_RoomLiveShareWarning_label').text()).toEqual(
'An error occured 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 hasWireErrorsSpy = jest.spyOn(OwnBeaconStore.instance, 'hasWireErrors').mockReturnValue(true);
const component = getComponent({ roomId: room2Id });
// update mock and emit event
act(() => {
hasWireErrorsSpy.mockReturnValue(false);
OwnBeaconStore.instance.emit(OwnBeaconStoreEvent.WireError, room2Beacon1.getType());
});
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 wire errors', async () => {
jest.spyOn(OwnBeaconStore.instance, 'hasWireErrors').mockReturnValue(true);
const resetErrorSpy = jest.spyOn(OwnBeaconStore.instance, 'resetWireError');
const component = getComponent({ roomId: room2Id });
act(() => {
findByTestId(component, 'room-live-share-primary-button').at(0).simulate('click');
});
expect(resetErrorSpy).toHaveBeenCalledWith(room2Beacon1.getType());
expect(resetErrorSpy).toHaveBeenCalledWith(room2Beacon2.getType());
});
it('clicking close button stops beacons', async () => {
jest.spyOn(OwnBeaconStore.instance, 'hasWireErrors').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(room2Beacon1.getType());
expect(stopBeaconSpy).toHaveBeenCalledWith(room2Beacon2.getType());
});
});
});
});

85
test/components/views/beacon/__snapshots__/RoomLiveShareWarning-test.tsx.snap
View file

@ -1,7 +1,86 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<RoomLiveShareWarning /> when user has live beacons and geolocation is available renders correctly with one live beacon in room 1`] = `"<div class=\\"mx_RoomLiveShareWarning\\"><div class=\\"mx_StyledLiveBeaconIcon mx_RoomLiveShareWarning_icon\\"></div><span class=\\"mx_RoomLiveShareWarning_label\\">You are sharing your live location</span><span data-test-id=\\"room-live-share-expiry\\" class=\\"mx_RoomLiveShareWarning_expiry\\">1h left</span><button data-test-id=\\"room-live-share-stop-sharing\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger\\">Stop sharing</button></div>"`;
exports[`<RoomLiveShareWarning /> when user has live beacons and geolocation is available renders correctly with one live beacon in room 1`] = `"<div class=\\"mx_RoomLiveShareWarning\\"><div class=\\"mx_StyledLiveBeaconIcon mx_RoomLiveShareWarning_icon\\"></div><span class=\\"mx_RoomLiveShareWarning_label\\">You are sharing your live location</span><span data-test-id=\\"room-live-share-expiry\\" class=\\"mx_RoomLiveShareWarning_expiry\\">1h left</span><button data-test-id=\\"room-live-share-primary-button\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger\\">Stop sharing</button></div>"`;
exports[`<RoomLiveShareWarning /> when user has live beacons and geolocation is available renders correctly with two live beacons in room 1`] = `"<div class=\\"mx_RoomLiveShareWarning\\"><div class=\\"mx_StyledLiveBeaconIcon mx_RoomLiveShareWarning_icon\\"></div><span class=\\"mx_RoomLiveShareWarning_label\\">You are sharing your live location</span><span data-test-id=\\"room-live-share-expiry\\" class=\\"mx_RoomLiveShareWarning_expiry\\">12h left</span><button data-test-id=\\"room-live-share-stop-sharing\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger\\">Stop sharing</button></div>"`;
exports[`<RoomLiveShareWarning /> when user has live beacons and geolocation is available renders correctly with two live beacons in room 1`] = `"<div class=\\"mx_RoomLiveShareWarning\\"><div class=\\"mx_StyledLiveBeaconIcon mx_RoomLiveShareWarning_icon\\"></div><span class=\\"mx_RoomLiveShareWarning_label\\">You are sharing your live location</span><span data-test-id=\\"room-live-share-expiry\\" class=\\"mx_RoomLiveShareWarning_expiry\\">12h left</span><button data-test-id=\\"room-live-share-primary-button\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger\\">Stop sharing</button></div>"`;
exports[`<RoomLiveShareWarning /> when user has live beacons and geolocation is available stopping beacons displays error when stop sharing fails 1`] = `"<div class=\\"mx_RoomLiveShareWarning\\"><div class=\\"mx_StyledLiveBeaconIcon mx_RoomLiveShareWarning_icon mx_StyledLiveBeaconIcon_error\\"></div><span class=\\"mx_RoomLiveShareWarning_label\\">An error occurred while stopping your live location, please try again</span><button data-test-id=\\"room-live-share-stop-sharing\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger\\">Retry</button></div>"`;
exports[`<RoomLiveShareWarning /> when user has live beacons and geolocation is available stopping beacons displays error when stop sharing fails 1`] = `"<div class=\\"mx_RoomLiveShareWarning\\"><div class=\\"mx_StyledLiveBeaconIcon mx_RoomLiveShareWarning_icon mx_StyledLiveBeaconIcon_error\\"></div><span class=\\"mx_RoomLiveShareWarning_label\\">An error occurred while stopping your live location, please try again</span><button data-test-id=\\"room-live-share-primary-button\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger\\">Retry</button></div>"`;
exports[`<RoomLiveShareWarning /> when user has live beacons and geolocation is available with wire errors displays wire error when mounted with wire errors 1`] = `
<RoomLiveShareWarning
roomId="$room2:server.org"
>
<RoomLiveShareWarningInner
liveBeaconIds={
Array [
"org.matrix.msc3489.beacon_info.@alice:server.org.3",
"org.matrix.msc3489.beacon_info.@alice:server.org.4",
]
}
roomId="$room2:server.org"
>
<div
className="mx_RoomLiveShareWarning"
>
<StyledLiveBeaconIcon
className="mx_RoomLiveShareWarning_icon"
withError={true}
>
<div
className="mx_StyledLiveBeaconIcon mx_RoomLiveShareWarning_icon mx_StyledLiveBeaconIcon_error"
/>
</StyledLiveBeaconIcon>
<span
className="mx_RoomLiveShareWarning_label"
>
An error occured whilst sharing your live location, please try again
</span>
<AccessibleButton
data-test-id="room-live-share-primary-button"
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-primary-button"
onClick={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
role="button"
tabIndex={0}
>
Retry
</button>
</AccessibleButton>
<AccessibleButton
className="mx_RoomLiveShareWarning_closeButton"
data-test-id="room-live-share-wire-error-close-button"
element="button"
onClick={[Function]}
role="button"
tabIndex={0}
title="Stop sharing and close"
>
<button
className="mx_AccessibleButton mx_RoomLiveShareWarning_closeButton"
data-test-id="room-live-share-wire-error-close-button"
onClick={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
role="button"
tabIndex={0}
title="Stop sharing and close"
>
<div
className="mx_RoomLiveShareWarning_closeButtonIcon"
/>
</button>
</AccessibleButton>
</div>
</RoomLiveShareWarningInner>
</RoomLiveShareWarning>
`;

15
test/stores/OwnBeaconStore-test.ts
View file

@ -863,7 +863,8 @@ describe('OwnBeaconStore', () => {
// called for each position from watchPosition
expect(mockClient.sendEvent).toHaveBeenCalledTimes(5);
expect(store.hasWireError(alicesRoom1BeaconInfo.getType())).toBe(false);
expect(store.beaconHasWireError(alicesRoom1BeaconInfo.getType())).toBe(false);
expect(store.hasWireErrors()).toBe(false);
});
it('continues publishing positions when a beacon fails intermittently', async () => {
@ -889,7 +890,8 @@ describe('OwnBeaconStore', () => {
// called for each position from watchPosition
expect(mockClient.sendEvent).toHaveBeenCalledTimes(5);
expect(store.hasWireError(alicesRoom1BeaconInfo.getType())).toBe(false);
expect(store.beaconHasWireError(alicesRoom1BeaconInfo.getType())).toBe(false);
expect(store.hasWireErrors()).toBe(false);
expect(emitSpy).not.toHaveBeenCalledWith(
OwnBeaconStoreEvent.WireError, alicesRoom1BeaconInfo.getType(),
);
@ -911,7 +913,8 @@ describe('OwnBeaconStore', () => {
// only two allowed failures
expect(mockClient.sendEvent).toHaveBeenCalledTimes(2);
expect(store.hasWireError(alicesRoom1BeaconInfo.getType())).toBe(true);
expect(store.beaconHasWireError(alicesRoom1BeaconInfo.getType())).toBe(true);
expect(store.hasWireErrors()).toBe(true);
expect(emitSpy).toHaveBeenCalledWith(
OwnBeaconStoreEvent.WireError, alicesRoom1BeaconInfo.getType(),
);
@ -933,7 +936,9 @@ describe('OwnBeaconStore', () => {
// only two allowed failures
expect(mockClient.sendEvent).toHaveBeenCalledTimes(2);
expect(store.hasWireError(alicesRoom1BeaconInfo.getType())).toBe(true);
expect(store.beaconHasWireError(alicesRoom1BeaconInfo.getType())).toBe(true);
expect(store.hasWireErrors()).toBe(true);
expect(store.hasWireErrors(room1Id)).toBe(true);
expect(emitSpy).toHaveBeenCalledWith(
OwnBeaconStoreEvent.WireError, alicesRoom1BeaconInfo.getType(),
);
@ -942,7 +947,7 @@ describe('OwnBeaconStore', () => {
emitSpy.mockClear();
store.resetWireError(alicesRoom1BeaconInfo.getType());
expect(store.hasWireError(alicesRoom1BeaconInfo.getType())).toBe(false);
expect(store.beaconHasWireError(alicesRoom1BeaconInfo.getType())).toBe(false);
// 2 more positions from watchPosition in this period
await advanceAndFlushPromises(10000);