Convert enzyme to rtl: BeaconMarker (#9840)

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 =
+    const assetTypeIsSelf = beacon.beaconInfo?.assetType === LocationAssetType.Self;
-        beacon.beaconInfo.assetType === LocationAssetType.Self ? room.getMember(beacon.beaconInfoOwner) : undefined;
+    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 { render, screen } from "@testing-library/react";
-import { mount } from "enzyme";
 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 = {}) =>
+    const renderComponent = (props = {}) => {
-        mount(<BeaconMarker {...defaultProps} {...props} />, {
+        const Wrapper = (wrapperProps = {}) => {
-            wrappingComponent: MatrixClientContext.Provider,
+            return <MatrixClientContext.Provider value={mockClient} {...wrapperProps} />;
-            wrappingComponentProps: { value: mockClient },
+        };
+
+        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 });
+        const { asFragment } = renderComponent({ beacon });
-        expect(component.html()).toBe(null);
+        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 });
+        const { asFragment } = renderComponent({ beacon });
-        expect(component.html()).toBe(null);
+        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]);
+        beacon?.addLocations([location1]);
-        const component = getComponent({ beacon });
+        const { asFragment } = renderComponent({ beacon });
-        expect(component).toMatchSnapshot();
+        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]);
+        beacon?.addLocations([location1]);
-        const component = getComponent({ beacon });
-        expect(component.find("SmartMarker").props()["geoUri"]).toEqual("geo:51,41");
 
+        // 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({});
+        expect(mockMarker.setLngLat).toHaveBeenLastCalledWith(lonLat2);
-
+        expect(mockMarker.addTo).toHaveBeenCalledWith(mockMap);
-        // updated to latest location
-        expect(component.find("SmartMarker").props()["geoUri"]).toEqual("geo:52,42");
     });
 });

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

@@ -1,240 +1,38 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<BeaconMarker /> renders marker when beacon has location 1`] = `
-<BeaconMarker
+<DocumentFragment>
-  beacon={
+  <span>
-    Beacon {
+    <div
-      "_beaconInfo": {
+      class="mx_Marker mx_Username_color4"
-        "assetType": "m.self",
+      id="!room:server_@alice:server"
-        "description": undefined,
+    >
-        "live": true,
+      <div
-        "timeout": 3600000,
+        class="mx_Marker_border"
-        "timestamp": 1647270879403,
-      },
-      "_events": {
-        "Beacon.Destroy": [
-          [Function],
-          [Function],
-        ],
-        "Beacon.LivenessChange": [
-          [Function],
-          [Function],
-        ],
-        "Beacon.LocationUpdate": [Function],
-        "Beacon.new": [Function],
-        "Beacon.update": [Function],
-      },
-      "_eventsCount": 5,
-      "_isLive": true,
-      "_latestLocationEvent": {
-        "content": {
-          "m.relates_to": {
-            "event_id": "$alice-room1-1",
-            "rel_type": "m.reference",
-          },
-          "org.matrix.msc3488.location": {
-            "description": undefined,
-            "uri": "geo:51,41",
-          },
-          "org.matrix.msc3488.ts": 1647270879404,
-        },
-        "room_id": undefined,
-        "sender": "@alice:server",
-        "type": "org.matrix.msc3672.beacon",
-      },
-      "_maxListeners": undefined,
-      "clearLatestLocation": [Function],
-      "livenessWatchTimeout": undefined,
-      "roomId": "!room:server",
-      "rootEvent": {
-        "content": {
-          "description": undefined,
-          "live": true,
-          "org.matrix.msc3488.asset": {
-            "type": "m.self",
-          },
-          "org.matrix.msc3488.ts": 1647270879403,
-          "timeout": 3600000,
-        },
-        "event_id": "$alice-room1-1",
-        "origin_server_ts": 1647270879403,
-        "room_id": "!room:server",
-        "sender": "@alice:server",
-        "state_key": "@alice:server",
-        "type": "org.matrix.msc3672.beacon_info",
-      },
-      Symbol(kCapture): false,
-    }
-  }
-  map={
-    MockMap {
-      "_events": {},
-      "_eventsCount": 0,
-      "_maxListeners": undefined,
-      "addControl": [MockFunction],
-      "fitBounds": [MockFunction],
-      "removeControl": [MockFunction],
-      "setCenter": [MockFunction],
-      "setStyle": [MockFunction],
-      "zoomIn": [MockFunction],
-      "zoomOut": [MockFunction],
-      Symbol(kCapture): false,
-    }
-  }
->
-  <SmartMarker
-    geoUri="geo:51,41"
-    id="!room:server_@alice:server"
-    map={
-      MockMap {
-        "_events": {},
-        "_eventsCount": 0,
-        "_maxListeners": undefined,
-        "addControl": [MockFunction],
-        "fitBounds": [MockFunction],
-        "removeControl": [MockFunction],
-        "setCenter": [MockFunction],
-        "setStyle": [MockFunction],
-        "zoomIn": [MockFunction],
-        "zoomOut": [MockFunction],
-        Symbol(kCapture): false,
-      }
-    }
-    roomMember={
-      RoomMember {
-        "_events": {},
-        "_eventsCount": 0,
-        "_isOutOfBand": false,
-        "_maxListeners": undefined,
-        "disambiguate": false,
-        "events": {},
-        "membership": undefined,
-        "modified": 1647270879403,
-        "name": "@alice:server",
-        "powerLevel": 0,
-        "powerLevelNorm": 0,
-        "rawDisplayName": "@alice:server",
-        "requestedProfileInfo": false,
-        "roomId": "!room:server",
-        "typing": false,
-        "user": undefined,
-        "userId": "@alice:server",
-        Symbol(kCapture): false,
-      }
-    }
-    useMemberColor={true}
-  >
-    <span>
-      <ForwardRef
-        id="!room:server_@alice:server"
-        roomMember={
-          RoomMember {
-            "_events": {},
-            "_eventsCount": 0,
-            "_isOutOfBand": false,
-            "_maxListeners": undefined,
-            "disambiguate": false,
-            "events": {},
-            "membership": undefined,
-            "modified": 1647270879403,
-            "name": "@alice:server",
-            "powerLevel": 0,
-            "powerLevelNorm": 0,
-            "rawDisplayName": "@alice:server",
-            "requestedProfileInfo": false,
-            "roomId": "!room:server",
-            "typing": false,
-            "user": undefined,
-            "userId": "@alice:server",
-            Symbol(kCapture): false,
-          }
-        }
-        useMemberColor={true}
       >
-        <div
+        <span
-          className="mx_Marker mx_Username_color4"
+          class="mx_BaseAvatar"
-          id="!room:server_@alice:server"
+          role="presentation"
         >
-          <OptionalTooltip>
+          <span
-            <div
+            aria-hidden="true"
-              className="mx_Marker_border"
+            class="mx_BaseAvatar_initial"
-            >
+            style="font-size: 23.400000000000002px; width: 36px; line-height: 36px;"
-              <MemberAvatar
+          >
-                height={36}
+            A
-                hideTitle={false}
+          </span>
-                member={
+          <img
-                  RoomMember {
+            alt=""
-                    "_events": {},
+            aria-hidden="true"
-                    "_eventsCount": 0,
+            class="mx_BaseAvatar_image"
-                    "_isOutOfBand": false,
+            data-testid="avatar-img"
-                    "_maxListeners": undefined,
+            src="data:image/png;base64,00"
-                    "disambiguate": false,
+            style="width: 36px; height: 36px;"
-                    "events": {},
+            title="@alice:server"
-                    "membership": undefined,
+          />
-                    "modified": 1647270879403,
+        </span>
-                    "name": "@alice:server",
+      </div>
-                    "powerLevel": 0,
+    </div>
-                    "powerLevelNorm": 0,
+  </span>
-                    "rawDisplayName": "@alice:server",
+</DocumentFragment>
-                    "requestedProfileInfo": false,
-                    "roomId": "!room:server",
-                    "typing": false,
-                    "user": undefined,
-                    "userId": "@alice:server",
-                    Symbol(kCapture): false,
-                  }
-                }
-                viewUserOnClick={false}
-                width={36}
-              >
-                <BaseAvatar
-                  height={36}
-                  idName="@alice:server"
-                  name="@alice:server"
-                  resizeMethod="crop"
-                  title="@alice:server"
-                  width={36}
-                >
-                  <span
-                    className="mx_BaseAvatar"
-                    role="presentation"
-                  >
-                    <span
-                      aria-hidden="true"
-                      className="mx_BaseAvatar_initial"
-                      style={
-                        {
-                          "fontSize": "23.400000000000002px",
-                          "lineHeight": "36px",
-                          "width": "36px",
-                        }
-                      }
-                    >
-                      A
-                    </span>
-                    <img
-                      alt=""
-                      aria-hidden="true"
-                      className="mx_BaseAvatar_image"
-                      data-testid="avatar-img"
-                      onError={[Function]}
-                      src="data:image/png;base64,00"
-                      style={
-                        {
-                          "height": "36px",
-                          "width": "36px",
-                        }
-                      }
-                      title="@alice:server"
-                    />
-                  </span>
-                </BaseAvatar>
-              </MemberAvatar>
-            </div>
-          </OptionalTooltip>
-        </div>
-      </ForwardRef>
-    </span>
-  </SmartMarker>
-</BeaconMarker>
 `;