Convert enzyme to rtl: BeaconMarker (#9840)

Author: artcodespace

src/components/views/beacon/BeaconMarker.tsx

@@ -45,10 +45,12 @@ const BeaconMarker: React.FC<Props> = ({ map, beacon, tooltip }) => {
         return null;
     }
 
-    const geoUri = latestLocationState?.uri;
+    const geoUri = latestLocationState.uri || "";
 
-    const markerRoomMember =
-        beacon.beaconInfo.assetType === LocationAssetType.Self ? room.getMember(beacon.beaconInfoOwner) : undefined;
+    const assetTypeIsSelf = beacon.beaconInfo?.assetType === LocationAssetType.Self;
+    const _member = room?.getMember(beacon.beaconInfoOwner);
+
+    const markerRoomMember = assetTypeIsSelf && _member ? _member : undefined;
 
     return (
         <SmartMarker

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

@@ -15,8 +15,7 @@ limitations under the License.
 */
 
 import React from "react";
-// eslint-disable-next-line deprecate/import
-import { mount } from "enzyme";
+import { render, screen } from "@testing-library/react";
 import * as maplibregl from "maplibre-gl";
 import { act } from "react-dom/test-utils";
 import { Beacon, Room, RoomMember, MatrixEvent, getBeaconInfoIdentifier } from "matrix-js-sdk/src/matrix";
@@ -43,6 +42,7 @@ describe("<BeaconMarker />", () => {
 
     const mapOptions = { container: {} as unknown as HTMLElement, style: "" };
     const mockMap = new maplibregl.Map(mapOptions);
+    const mockMarker = new maplibregl.Marker();
 
     const mockClient = getMockClientWithEventEmitter({
         getClientWellKnown: jest.fn().mockReturnValue({
@@ -64,14 +64,16 @@ describe("<BeaconMarker />", () => {
     const defaultEvent = makeBeaconInfoEvent(aliceId, roomId, { isLive: true }, "$alice-room1-1");
     const notLiveEvent = makeBeaconInfoEvent(aliceId, roomId, { isLive: false }, "$alice-room1-2");
 
+    const geoUri1 = "geo:51,41";
     const location1 = makeBeaconEvent(aliceId, {
         beaconInfoId: defaultEvent.getId(),
-        geoUri: "geo:51,41",
+        geoUri: geoUri1,
         timestamp: now + 1,
     });
+    const geoUri2 = "geo:52,42";
     const location2 = makeBeaconEvent(aliceId, {
         beaconInfoId: defaultEvent.getId(),
-        geoUri: "geo:52,42",
+        geoUri: geoUri2,
         timestamp: now + 10000,
     });
 
@@ -80,11 +82,15 @@ describe("<BeaconMarker />", () => {
         beacon: new Beacon(defaultEvent),
     };
 
-    const getComponent = (props = {}) =>
-        mount(<BeaconMarker {...defaultProps} {...props} />, {
-            wrappingComponent: MatrixClientContext.Provider,
-            wrappingComponentProps: { value: mockClient },
+    const renderComponent = (props = {}) => {
+        const Wrapper = (wrapperProps = {}) => {
+            return <MatrixClientContext.Provider value={mockClient} {...wrapperProps} />;
+        };
+
+        return render(<BeaconMarker {...defaultProps} {...props} />, {
+            wrapper: Wrapper,
         });
+    };
 
     beforeEach(() => {
         jest.clearAllMocks();
@@ -93,38 +99,45 @@ describe("<BeaconMarker />", () => {
     it("renders nothing when beacon is not live", () => {
         const room = setupRoom([notLiveEvent]);
         const beacon = room.currentState.beacons.get(getBeaconInfoIdentifier(notLiveEvent));
-        const component = getComponent({ beacon });
-        expect(component.html()).toBe(null);
+        const { asFragment } = renderComponent({ beacon });
+        expect(asFragment()).toMatchInlineSnapshot(`<DocumentFragment />`);
+        expect(screen.queryByTestId("avatar-img")).not.toBeInTheDocument();
     });
 
     it("renders nothing when beacon has no location", () => {
         const room = setupRoom([defaultEvent]);
         const beacon = room.currentState.beacons.get(getBeaconInfoIdentifier(defaultEvent));
-        const component = getComponent({ beacon });
-        expect(component.html()).toBe(null);
+        const { asFragment } = renderComponent({ beacon });
+        expect(asFragment()).toMatchInlineSnapshot(`<DocumentFragment />`);
+        expect(screen.queryByTestId("avatar-img")).not.toBeInTheDocument();
     });
 
     it("renders marker when beacon has location", () => {
         const room = setupRoom([defaultEvent]);
         const beacon = room.currentState.beacons.get(getBeaconInfoIdentifier(defaultEvent));
-        beacon.addLocations([location1]);
-        const component = getComponent({ beacon });
-        expect(component).toMatchSnapshot();
+        beacon?.addLocations([location1]);
+        const { asFragment } = renderComponent({ beacon });
+        expect(asFragment()).toMatchSnapshot();
+        expect(screen.getByTestId("avatar-img")).toBeInTheDocument();
     });
 
     it("updates with new locations", () => {
+        const lonLat1 = { lon: 41, lat: 51 };
+        const lonLat2 = { lon: 42, lat: 52 };
         const room = setupRoom([defaultEvent]);
         const beacon = room.currentState.beacons.get(getBeaconInfoIdentifier(defaultEvent));
-        beacon.addLocations([location1]);
-        const component = getComponent({ beacon });
-        expect(component.find("SmartMarker").props()["geoUri"]).toEqual("geo:51,41");
+        beacon?.addLocations([location1]);
 
+        // render the component then add a new location, check mockMarker called as expected
+        renderComponent({ beacon });
+        expect(mockMarker.setLngLat).toHaveBeenLastCalledWith(lonLat1);
+        expect(mockMarker.addTo).toHaveBeenCalledWith(mockMap);
+
+        // add a location, check mockMarker called with new location details
         act(() => {
-            beacon.addLocations([location2]);
+            beacon?.addLocations([location2]);
         });
-        component.setProps({});
-
-        // updated to latest location
-        expect(component.find("SmartMarker").props()["geoUri"]).toEqual("geo:52,42");
+        expect(mockMarker.setLngLat).toHaveBeenLastCalledWith(lonLat2);
+        expect(mockMarker.addTo).toHaveBeenCalledWith(mockMap);
     });
 });