Live Location Sharing - left panel warning with error (#8201)

* add error style to left panel beacon warning

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

* test

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

* add beacon sort util

* link to latest beacon room from left panel warning

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

test/components/views/beacon/LeftPanelLiveShareWarning-test.tsx

@@ -17,17 +17,23 @@ limitations under the License.
 import React from 'react';
 import { mocked } from 'jest-mock';
 import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
+import { Beacon } from 'matrix-js-sdk/src/matrix';
 
 import '../../../skinned-sdk';
 import LeftPanelLiveShareWarning from '../../../../src/components/views/beacon/LeftPanelLiveShareWarning';
 import { OwnBeaconStore, OwnBeaconStoreEvent } from '../../../../src/stores/OwnBeaconStore';
-import { flushPromises } from '../../../test-utils';
+import { flushPromises, makeBeaconInfoEvent } from '../../../test-utils';
+import dispatcher from '../../../../src/dispatcher/dispatcher';
+import { Action } from '../../../../src/dispatcher/actions';
 
 jest.mock('../../../../src/stores/OwnBeaconStore', () => {
     // eslint-disable-next-line @typescript-eslint/no-var-requires
     const EventEmitter = require("events");
     class MockOwnBeaconStore extends EventEmitter {
-        public hasLiveBeacons = jest.fn().mockReturnValue(false);
+        public getLiveBeaconIdsWithWireError = jest.fn().mockReturnValue([]);
+        public getBeaconById = jest.fn();
+        public getLiveBeaconIds = jest.fn().mockReturnValue([]);
     }
     return {
         // @ts-ignore
@@ -44,32 +50,136 @@ describe('<LeftPanelLiveShareWarning />', () => {
     const getComponent = (props = {}) =>
         mount(<LeftPanelLiveShareWarning {...defaultProps} {...props} />);
 
+    const roomId1 = '!room1:server';
+    const roomId2 = '!room2:server';
+    const aliceId = '@alive:server';
+
+    const now = 1647270879403;
+    const HOUR_MS = 3600000;
+
+    beforeEach(() => {
+        jest.spyOn(global.Date, 'now').mockReturnValue(now);
+        jest.spyOn(dispatcher, 'dispatch').mockClear().mockImplementation(() => { });
+    });
+
+    afterAll(() => {
+        jest.spyOn(global.Date, 'now').mockRestore();
+
+        jest.restoreAllMocks();
+    });
+    // 12h old, 12h left
+    const beacon1 = new Beacon(makeBeaconInfoEvent(aliceId,
+        roomId1,
+        { timeout: HOUR_MS * 24, timestamp: now - 12 * HOUR_MS },
+        '$1',
+    ));
+    // 10h left
+    const beacon2 = new Beacon(makeBeaconInfoEvent(aliceId,
+        roomId2,
+        { timeout: HOUR_MS * 10, timestamp: now },
+        '$2',
+    ));
+
     it('renders nothing when user has no live beacons', () => {
         const component = getComponent();
         expect(component.html()).toBe(null);
     });
 
     describe('when user has live location monitor', () => {
+        beforeAll(() => {
+            mocked(OwnBeaconStore.instance).getBeaconById.mockImplementation(beaconId => {
+                if (beaconId === beacon1.identifier) {
+                    return beacon1;
+                }
+                return beacon2;
+            });
+        });
+
         beforeEach(() => {
             mocked(OwnBeaconStore.instance).isMonitoringLiveLocation = true;
+            mocked(OwnBeaconStore.instance).getLiveBeaconIdsWithWireError.mockReturnValue([]);
+            mocked(OwnBeaconStore.instance).getLiveBeaconIds.mockReturnValue([beacon2.identifier, beacon1.identifier]);
         });
+
         it('renders correctly when not minimized', () => {
             const component = getComponent();
             expect(component).toMatchSnapshot();
         });
 
+        it('goes to room of latest beacon when clicked', () => {
+            const component = getComponent();
+            const dispatchSpy = jest.spyOn(dispatcher, 'dispatch');
+
+            act(() => {
+                component.simulate('click');
+            });
+
+            expect(dispatchSpy).toHaveBeenCalledWith({
+                action: Action.ViewRoom,
+                metricsTrigger: undefined,
+                // latest beacon's room
+                room_id: roomId2,
+            });
+        });
+
         it('renders correctly when minimized', () => {
             const component = getComponent({ isMinimized: true });
             expect(component).toMatchSnapshot();
         });
 
+        it('renders wire error', () => {
+            mocked(OwnBeaconStore.instance).getLiveBeaconIdsWithWireError.mockReturnValue([beacon1.identifier]);
+            const component = getComponent();
+            expect(component).toMatchSnapshot();
+        });
+
+        it('goes to room of latest beacon with wire error when clicked', () => {
+            mocked(OwnBeaconStore.instance).getLiveBeaconIdsWithWireError.mockReturnValue([beacon1.identifier]);
+            const component = getComponent();
+            const dispatchSpy = jest.spyOn(dispatcher, 'dispatch');
+
+            act(() => {
+                component.simulate('click');
+            });
+
+            expect(dispatchSpy).toHaveBeenCalledWith({
+                action: Action.ViewRoom,
+                metricsTrigger: undefined,
+                // error beacon's room
+                room_id: roomId1,
+            });
+        });
+
+        it('goes back to default style when wire errors are cleared', () => {
+            mocked(OwnBeaconStore.instance).getLiveBeaconIdsWithWireError.mockReturnValue([beacon1.identifier]);
+            const component = getComponent();
+            // error mode
+            expect(component.find('.mx_LeftPanelLiveShareWarning').at(0).text()).toEqual(
+                'An error occured whilst sharing your live location',
+            );
+
+            act(() => {
+                mocked(OwnBeaconStore.instance).getLiveBeaconIdsWithWireError.mockReturnValue([]);
+                OwnBeaconStore.instance.emit(OwnBeaconStoreEvent.WireError, 'abc');
+            });
+
+            component.setProps({});
+
+            // default mode
+            expect(component.find('.mx_LeftPanelLiveShareWarning').at(0).text()).toEqual(
+                'You are sharing your live location',
+            );
+        });
+
         it('removes itself when user stops having live beacons', async () => {
             const component = getComponent({ isMinimized: true });
             // started out rendered
             expect(component.html()).toBeTruthy();
 
-            mocked(OwnBeaconStore.instance).isMonitoringLiveLocation = false;
-            OwnBeaconStore.instance.emit(OwnBeaconStoreEvent.MonitoringLivePosition);
+            act(() => {
+                mocked(OwnBeaconStore.instance).isMonitoringLiveLocation = false;
+                OwnBeaconStore.instance.emit(OwnBeaconStoreEvent.MonitoringLivePosition);
+            });
 
             await flushPromises();
             component.setProps({});

test/components/views/beacon/__snapshots__/LeftPanelLiveShareWarning-test.tsx.snap

@@ -4,23 +4,73 @@ exports[`<LeftPanelLiveShareWarning /> when user has live location monitor rende
 <LeftPanelLiveShareWarning
   isMinimized={true}
 >
-  <div
+  <AccessibleButton
     className="mx_LeftPanelLiveShareWarning mx_LeftPanelLiveShareWarning__minimized"
+    element="div"
+    onClick={[Function]}
+    role="button"
+    tabIndex={0}
     title="You are sharing your live location"
   >
     <div
-      height={10}
-    />
-  </div>
+      className="mx_AccessibleButton mx_LeftPanelLiveShareWarning mx_LeftPanelLiveShareWarning__minimized"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      role="button"
+      tabIndex={0}
+      title="You are sharing your live location"
+    >
+      <div
+        height={10}
+      />
+    </div>
+  </AccessibleButton>
 </LeftPanelLiveShareWarning>
 `;
 
 exports[`<LeftPanelLiveShareWarning /> when user has live location monitor renders correctly when not minimized 1`] = `
 <LeftPanelLiveShareWarning>
-  <div
+  <AccessibleButton
     className="mx_LeftPanelLiveShareWarning"
+    element="div"
+    onClick={[Function]}
+    role="button"
+    tabIndex={0}
   >
-    You are sharing your live location
-  </div>
+    <div
+      className="mx_AccessibleButton mx_LeftPanelLiveShareWarning"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      role="button"
+      tabIndex={0}
+    >
+      You are sharing your live location
+    </div>
+  </AccessibleButton>
+</LeftPanelLiveShareWarning>
+`;
+
+exports[`<LeftPanelLiveShareWarning /> when user has live location monitor renders wire error 1`] = `
+<LeftPanelLiveShareWarning>
+  <AccessibleButton
+    className="mx_LeftPanelLiveShareWarning mx_LeftPanelLiveShareWarning__error"
+    element="div"
+    onClick={[Function]}
+    role="button"
+    tabIndex={0}
+  >
+    <div
+      className="mx_AccessibleButton mx_LeftPanelLiveShareWarning mx_LeftPanelLiveShareWarning__error"
+      onClick={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      role="button"
+      tabIndex={0}
+    >
+      An error occured whilst sharing your live location
+    </div>
+  </AccessibleButton>
 </LeftPanelLiveShareWarning>
 `;

test/utils/beacon/duration-test.ts

@@ -16,7 +16,11 @@ limitations under the License.
 
 import { Beacon } from "matrix-js-sdk/src/matrix";
 
-import { msUntilExpiry, sortBeaconsByLatestExpiry } from "../../../src/utils/beacon";
+import {
+    msUntilExpiry,
+    sortBeaconsByLatestExpiry,
+    sortBeaconsByLatestCreation,
+} from "../../../src/utils/beacon";
 import { makeBeaconInfoEvent } from "../../test-utils";
 
 describe('beacon utils', () => {
@@ -80,4 +84,35 @@ describe('beacon utils', () => {
             ]);
         });
     });
+
+    describe('sortBeaconsByLatestCreation()', () => {
+        const roomId = '!room:server';
+        const aliceId = '@alive:server';
+
+        // 12h old, 12h left
+        const beacon1 = new Beacon(makeBeaconInfoEvent(aliceId,
+            roomId,
+            { timeout: HOUR_MS * 24, timestamp: now - 12 * HOUR_MS },
+            '$1',
+        ));
+        // 10h left
+        const beacon2 = new Beacon(makeBeaconInfoEvent(aliceId,
+            roomId,
+            { timeout: HOUR_MS * 10, timestamp: now },
+            '$2',
+        ));
+
+        // 1ms left
+        const beacon3 = new Beacon(makeBeaconInfoEvent(aliceId,
+            roomId,
+            { timeout: HOUR_MS + 1, timestamp: now - HOUR_MS },
+            '$3',
+        ));
+
+        it('sorts beacons by descending creation time', () => {
+            expect([beacon1, beacon2, beacon3].sort(sortBeaconsByLatestCreation)).toEqual([
+                beacon2, beacon3, beacon1,
+            ]);
+        });
+    });
 });