From 3bcea5fb0bfe850becb862565f09ae2e75d8e069 Mon Sep 17 00:00:00 2001 From: alunturner <56027671+alunturner@users.noreply.github.com> Date: Wed, 4 Jan 2023 10:00:13 +0000 Subject: [PATCH] Convert enzyme to rtl: BeaconMarker (#9840) --- src/components/views/beacon/BeaconMarker.tsx | 8 +- .../views/beacon/BeaconMarker-test.tsx | 59 ++-- .../__snapshots__/BeaconMarker-test.tsx.snap | 266 +++--------------- 3 files changed, 73 insertions(+), 260 deletions(-) diff --git a/src/components/views/beacon/BeaconMarker.tsx b/src/components/views/beacon/BeaconMarker.tsx index 3d712e5828..2a63673b1a 100644 --- a/src/components/views/beacon/BeaconMarker.tsx +++ b/src/components/views/beacon/BeaconMarker.tsx @@ -45,10 +45,12 @@ const BeaconMarker: React.FC = ({ 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 ( ", () => { 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("", () => { 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("", () => { beacon: new Beacon(defaultEvent), }; - const getComponent = (props = {}) => - mount(, { - wrappingComponent: MatrixClientContext.Provider, - wrappingComponentProps: { value: mockClient }, + const renderComponent = (props = {}) => { + const Wrapper = (wrapperProps = {}) => { + return ; + }; + + return render(, { + wrapper: Wrapper, }); + }; beforeEach(() => { jest.clearAllMocks(); @@ -93,38 +99,45 @@ describe("", () => { 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(``); + 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(``); + 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); }); }); diff --git a/test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap b/test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap index 3871be4a83..b42ccb83ee 100644 --- a/test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap +++ b/test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap @@ -1,240 +1,38 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[` renders marker when beacon has location 1`] = ` - - - - + +
+
- - - - - + + + +
+
+ + `;