Convert enzyme to rtl: BeaconMarker (#9840)
This commit is contained in:
alunturner
GitHub
parent
cb1af0d3de
commit
3bcea5fb0b
3 changed files with 73 additions and 260 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
`;
|
||||
|
|
|
|||
Loading…
Reference in a new issue