Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Convert enzyme to rtl: BeaconMarker #9840

Merged
merged 15 commits into from
Jan 4, 2023
Merged
Show file tree
Hide file tree
Changes from 8 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 35 additions & 21 deletions test/components/views/beacon/BeaconMarker-test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,13 @@ 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";

import BeaconMarker from "../../../../src/components/views/beacon/BeaconMarker";
import * as mockSmartMarker from "../../../../src/components/views/location/SmartMarker";
import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
import {
getMockClientWithEventEmitter,
Expand Down Expand Up @@ -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,
});

Expand All @@ -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();
Expand All @@ -93,38 +99,46 @@ 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 { container } = renderComponent({ beacon });
expect(container.innerHTML).toBe("");
});

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 { container } = renderComponent({ beacon });
expect(container.innerHTML).toBe("");
});

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();
});

it("updates with new locations", () => {
// we need to mock the SmartMarker here to be able to check the geoUris
const uriSmartMarker = jest.spyOn(mockSmartMarker, "default");
uriSmartMarker.mockImplementation((props) => <div data-testid={props.geoUri} />);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you spy on maplibregl.Marker.setLngLat to assert the uri is updated instead of this? Similar to how the SmartMarker tests work?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll have a look at that, thanks for the suggestion. It didn't feel good doing this and I'm in a similar scenario trying to rewrite another test


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]);
renderComponent({ beacon });

expect(screen.getByTestId(geoUri1)).toBeInTheDocument();

act(() => {
beacon.addLocations([location2]);
beacon?.addLocations([location2]);
});
component.setProps({});

// updated to latest location
expect(component.find("SmartMarker").props()["geoUri"]).toEqual("geo:52,42");
expect(screen.queryByTestId(geoUri1)).not.toBeInTheDocument();
expect(screen.getByTestId(geoUri2)).toBeInTheDocument();

// restore the mock implimentation to avoid affecting other tests
uriSmartMarker.mockRestore();
});
});
266 changes: 32 additions & 234 deletions test/components/views/beacon/__snapshots__/BeaconMarker-test.tsx.snap
Original file line number Diff line number Diff line change
@@ -1,240 +1,38 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<BeaconMarker /> renders marker when beacon has location 1`] = `
<BeaconMarker
beacon={
Beacon {
"_beaconInfo": {
"assetType": "m.self",
"description": undefined,
"live": true,
"timeout": 3600000,
"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}
<DocumentFragment>
<span>
<div
class="mx_Marker mx_Username_color4"
id="!room:server_@alice:server"
>
<div
class="mx_Marker_border"
>
<div
className="mx_Marker mx_Username_color4"
id="!room:server_@alice:server"
<span
class="mx_BaseAvatar"
role="presentation"
>
<OptionalTooltip>
<div
className="mx_Marker_border"
>
<MemberAvatar
height={36}
hideTitle={false}
member={
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,
}
}
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>
<span
aria-hidden="true"
class="mx_BaseAvatar_initial"
style="font-size: 23.400000000000002px; width: 36px; line-height: 36px;"
>
A
</span>
<img
alt=""
aria-hidden="true"
class="mx_BaseAvatar_image"
data-testid="avatar-img"
src="data:image/png;base64,00"
style="width: 36px; height: 36px;"
title="@alice:server"
/>
</span>
</div>
</div>
</span>
</DocumentFragment>
`;