Prepare for repo merge

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

test/unit-tests/components/views/beacon/BeaconListItem-test.tsx

@@ -0,0 +1,183 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import React from "react";
+import { act, fireEvent, render } from "jest-matrix-react";
+import { Beacon, RoomMember, MatrixEvent, LocationAssetType } from "matrix-js-sdk/src/matrix";
+
+import BeaconListItem from "../../../../src/components/views/beacon/BeaconListItem";
+import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
+import {
+    getMockClientWithEventEmitter,
+    makeBeaconEvent,
+    makeBeaconInfoEvent,
+    makeRoomWithBeacons,
+} from "../../../test-utils";
+
+describe("<BeaconListItem />", () => {
+    // 14.03.2022 16:15
+    const now = 1647270879403;
+    // go back in time to create beacons and locations in the past
+    jest.spyOn(global.Date, "now").mockReturnValue(now - 600000);
+    const roomId = "!room:server";
+    const aliceId = "@alice:server";
+
+    const mockClient = getMockClientWithEventEmitter({
+        getUserId: jest.fn().mockReturnValue(aliceId),
+        getRoom: jest.fn(),
+        isGuest: jest.fn().mockReturnValue(false),
+    });
+
+    const aliceBeaconEvent = makeBeaconInfoEvent(aliceId, roomId, { isLive: true }, "$alice-room1-1");
+    const alicePinBeaconEvent = makeBeaconInfoEvent(
+        aliceId,
+        roomId,
+        { isLive: true, assetType: LocationAssetType.Pin, description: "Alice's car" },
+        "$alice-room1-1",
+    );
+    const pinBeaconWithoutDescription = makeBeaconInfoEvent(
+        aliceId,
+        roomId,
+        { isLive: true, assetType: LocationAssetType.Pin },
+        "$alice-room1-1",
+    );
+
+    const aliceLocation1 = makeBeaconEvent(aliceId, {
+        beaconInfoId: aliceBeaconEvent.getId(),
+        geoUri: "geo:51,41",
+        timestamp: now - 1,
+    });
+    const aliceLocation2 = makeBeaconEvent(aliceId, {
+        beaconInfoId: aliceBeaconEvent.getId(),
+        geoUri: "geo:52,42",
+        timestamp: now - 500000,
+    });
+
+    const defaultProps = {
+        beacon: new Beacon(aliceBeaconEvent),
+    };
+
+    const getComponent = (props = {}) =>
+        render(
+            <MatrixClientContext.Provider value={mockClient}>
+                <BeaconListItem {...defaultProps} {...props} />
+            </MatrixClientContext.Provider>,
+        );
+
+    const setupRoomWithBeacons = (beaconInfoEvents: MatrixEvent[], locationEvents?: MatrixEvent[]): Beacon[] => {
+        const beacons = makeRoomWithBeacons(roomId, mockClient, beaconInfoEvents, locationEvents);
+
+        const member = new RoomMember(roomId, aliceId);
+        member.name = `Alice`;
+        const room = mockClient.getRoom(roomId)!;
+        jest.spyOn(room, "getMember").mockReturnValue(member);
+
+        return beacons;
+    };
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        jest.spyOn(Date, "now").mockReturnValue(now);
+    });
+
+    it("renders null when beacon is not live", () => {
+        const notLiveBeacon = makeBeaconInfoEvent(aliceId, roomId, { isLive: false });
+        const [beacon] = setupRoomWithBeacons([notLiveBeacon]);
+        const { container } = getComponent({ beacon });
+        expect(container.innerHTML).toBeFalsy();
+    });
+
+    it("renders null when beacon has no location", () => {
+        const [beacon] = setupRoomWithBeacons([aliceBeaconEvent]);
+        const { container } = getComponent({ beacon });
+        expect(container.innerHTML).toBeFalsy();
+    });
+
+    describe("when a beacon is live and has locations", () => {
+        it("renders beacon info", () => {
+            const [beacon] = setupRoomWithBeacons([alicePinBeaconEvent], [aliceLocation1]);
+            const { asFragment } = getComponent({ beacon });
+            expect(asFragment()).toMatchSnapshot();
+        });
+
+        describe("non-self beacons", () => {
+            it("uses beacon description as beacon name", () => {
+                const [beacon] = setupRoomWithBeacons([alicePinBeaconEvent], [aliceLocation1]);
+                const { container } = getComponent({ beacon });
+                expect(container.querySelector(".mx_BeaconStatus_label")).toHaveTextContent("Alice's car");
+            });
+
+            it("uses beacon owner mxid as beacon name for a beacon without description", () => {
+                const [beacon] = setupRoomWithBeacons([pinBeaconWithoutDescription], [aliceLocation1]);
+                const { container } = getComponent({ beacon });
+                expect(container.querySelector(".mx_BeaconStatus_label")).toHaveTextContent(aliceId);
+            });
+
+            it("renders location icon", () => {
+                const [beacon] = setupRoomWithBeacons([alicePinBeaconEvent], [aliceLocation1]);
+                const { container } = getComponent({ beacon });
+                expect(container.querySelector(".mx_StyledLiveBeaconIcon")).toBeTruthy();
+            });
+        });
+
+        describe("self locations", () => {
+            it("renders beacon owner avatar", () => {
+                const [beacon] = setupRoomWithBeacons([aliceBeaconEvent], [aliceLocation1]);
+                const { container } = getComponent({ beacon });
+                expect(container.querySelector(".mx_BaseAvatar")).toBeTruthy();
+            });
+
+            it("uses beacon owner name as beacon name", () => {
+                const [beacon] = setupRoomWithBeacons([aliceBeaconEvent], [aliceLocation1]);
+                const { container } = getComponent({ beacon });
+                expect(container.querySelector(".mx_BeaconStatus_label")).toHaveTextContent("Alice");
+            });
+        });
+
+        describe("on location updates", () => {
+            it("updates last updated time on location updated", () => {
+                const [beacon] = setupRoomWithBeacons([aliceBeaconEvent], [aliceLocation2]);
+                const { container } = getComponent({ beacon });
+
+                expect(container.querySelector(".mx_BeaconListItem_lastUpdated")).toHaveTextContent(
+                    "Updated 9 minutes ago",
+                );
+
+                // update to a newer location
+                act(() => {
+                    beacon.addLocations([aliceLocation1]);
+                });
+
+                expect(container.querySelector(".mx_BeaconListItem_lastUpdated")).toHaveTextContent(
+                    "Updated a few seconds ago",
+                );
+            });
+        });
+
+        describe("interactions", () => {
+            it("does not call onClick handler when clicking share button", () => {
+                const [beacon] = setupRoomWithBeacons([alicePinBeaconEvent], [aliceLocation1]);
+                const onClick = jest.fn();
+                const { getByTestId } = getComponent({ beacon, onClick });
+
+                fireEvent.click(getByTestId("open-location-in-osm"));
+                expect(onClick).not.toHaveBeenCalled();
+            });
+
+            it("calls onClick handler when clicking outside of share buttons", () => {
+                const [beacon] = setupRoomWithBeacons([alicePinBeaconEvent], [aliceLocation1]);
+                const onClick = jest.fn();
+                const { container } = getComponent({ beacon, onClick });
+
+                // click the beacon name
+                fireEvent.click(container.querySelector(".mx_BeaconStatus_description")!);
+                expect(onClick).toHaveBeenCalled();
+            });
+        });
+    });
+});