Live location sharing - basic maximised beacon map (#8310)
* open a dialog with map centered around first beacon Signed-off-by: Kerry Archibald <kerrya@element.io> * add room member markers Signed-off-by: Kerry Archibald <kerrya@element.io> * fix unmount issue in smart marker Signed-off-by: Kerry Archibald <kerrya@element.io> * dont throw on no more live locations Signed-off-by: Kerry Archibald <kerrya@element.io> * cursor on beacon maps Signed-off-by: Kerry Archibald <kerrya@element.io> * fussy import ordering Signed-off-by: Kerry Archibald <kerrya@element.io> * test dialog opening from beacon body Signed-off-by: Kerry Archibald <kerrya@element.io> * test beaconmarker Signed-off-by: Kerry Archibald <kerrya@element.io> * test BeaconViewDialog Signed-off-by: Kerry Archibald <kerrya@element.io> * comment Signed-off-by: Kerry Archibald <kerrya@element.io> * use unstable prefix for wk tile_Server Signed-off-by: Kerry Archibald <kerrya@element.io> * unstable prefix for new m.tile_server use in test Signed-off-by: Kerry Archibald <kerrya@element.io>
This commit is contained in:
parent
1c215e2b71
commit
f95106d2c6
20 changed files with 894 additions and 56 deletions
res/css
src
components/views
beacon
location
messages
utils
test/components/views
|
@ -5,6 +5,7 @@
|
|||
@import "./_font-weights.scss";
|
||||
@import "./_spacing.scss";
|
||||
@import "./components/views/beacon/_BeaconStatus.scss";
|
||||
@import "./components/views/beacon/_BeaconViewDialog.scss";
|
||||
@import "./components/views/beacon/_LeftPanelLiveShareWarning.scss";
|
||||
@import "./components/views/beacon/_LiveTimeRemaining.scss";
|
||||
@import "./components/views/beacon/_OwnBeaconStatus.scss";
|
||||
|
|
57
res/css/components/views/beacon/_BeaconViewDialog.scss
Normal file
57
res/css/components/views/beacon/_BeaconViewDialog.scss
Normal file
|
@ -0,0 +1,57 @@
|
|||
/*
|
||||
Copyright 2022 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_BeaconViewDialog_wrapper .mx_Dialog {
|
||||
padding: 0px;
|
||||
|
||||
/* Unset contain and position to allow the close button
|
||||
to appear outside the dialog */
|
||||
contain: unset;
|
||||
position: unset;
|
||||
}
|
||||
|
||||
.mx_BeaconViewDialog {
|
||||
/* subtract 0.5px to prevent single-pixel margin due to rounding */
|
||||
width: calc(80vw - 0.5px);
|
||||
height: calc(80vh - 0.5px);
|
||||
overflow: hidden;
|
||||
|
||||
.mx_Dialog_header {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
position: unset;
|
||||
|
||||
.mx_Dialog_title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mx_Dialog_cancelButton {
|
||||
z-index: 4010;
|
||||
position: absolute;
|
||||
right: 5vw;
|
||||
top: 5vh;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: $dialog-close-external-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mx_BeaconViewDialog_map {
|
||||
width: 80vw;
|
||||
height: 80vh;
|
||||
border-radius: 8px;
|
||||
}
|
|
@ -27,6 +27,10 @@ limitations under the License.
|
|||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 0; // keeps the entire map under the message action bar
|
||||
|
||||
&:not(.mx_MBeaconBody_mapFallback) {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_MBeaconBody_mapFallback {
|
||||
|
|
64
src/components/views/beacon/BeaconMarker.tsx
Normal file
64
src/components/views/beacon/BeaconMarker.tsx
Normal file
|
@ -0,0 +1,64 @@
|
|||
/*
|
||||
Copyright 2022 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React, { useContext } from 'react';
|
||||
import maplibregl from 'maplibre-gl';
|
||||
import {
|
||||
Beacon,
|
||||
BeaconEvent,
|
||||
} from 'matrix-js-sdk/src/matrix';
|
||||
import { LocationAssetType } from 'matrix-js-sdk/src/@types/location';
|
||||
|
||||
import MatrixClientContext from '../../../contexts/MatrixClientContext';
|
||||
import { useEventEmitterState } from '../../../hooks/useEventEmitter';
|
||||
import SmartMarker from '../location/SmartMarker';
|
||||
|
||||
interface Props {
|
||||
map: maplibregl.Map;
|
||||
beacon: Beacon;
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates a map SmartMarker with latest location from given beacon
|
||||
*/
|
||||
const BeaconMarker: React.FC<Props> = ({ map, beacon }) => {
|
||||
const latestLocationState = useEventEmitterState(
|
||||
beacon,
|
||||
BeaconEvent.LocationUpdate,
|
||||
() => beacon.latestLocationState,
|
||||
);
|
||||
const matrixClient = useContext(MatrixClientContext);
|
||||
const room = matrixClient.getRoom(beacon.roomId);
|
||||
|
||||
if (!latestLocationState || !beacon.isLive) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const geoUri = latestLocationState?.uri;
|
||||
|
||||
const markerRoomMember = beacon.beaconInfo.assetType === LocationAssetType.Self ?
|
||||
room.getMember(beacon.beaconInfoOwner) :
|
||||
undefined;
|
||||
|
||||
return <SmartMarker
|
||||
map={map}
|
||||
id={beacon.identifier}
|
||||
geoUri={geoUri}
|
||||
roomMember={markerRoomMember}
|
||||
/>;
|
||||
};
|
||||
|
||||
export default BeaconMarker;
|
86
src/components/views/beacon/BeaconViewDialog.tsx
Normal file
86
src/components/views/beacon/BeaconViewDialog.tsx
Normal file
|
@ -0,0 +1,86 @@
|
|||
/*
|
||||
Copyright 2022 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { MatrixClient } from 'matrix-js-sdk/src/client';
|
||||
import {
|
||||
Beacon,
|
||||
Room,
|
||||
} from 'matrix-js-sdk/src/matrix';
|
||||
import maplibregl from 'maplibre-gl';
|
||||
|
||||
import { useLiveBeacons } from '../../../utils/beacon/useLiveBeacons';
|
||||
import MatrixClientContext from '../../../contexts/MatrixClientContext';
|
||||
import BaseDialog from "../dialogs/BaseDialog";
|
||||
import { IDialogProps } from "../dialogs/IDialogProps";
|
||||
import Map from '../location/Map';
|
||||
import ZoomButtons from '../location/ZoomButtons';
|
||||
import BeaconMarker from './BeaconMarker';
|
||||
|
||||
interface IProps extends IDialogProps {
|
||||
roomId: Room['roomId'];
|
||||
matrixClient: MatrixClient;
|
||||
}
|
||||
|
||||
// TODO actual center is coming soon
|
||||
// for now just center around first beacon in list
|
||||
const getMapCenterUri = (beacons: Beacon[]): string => {
|
||||
const firstBeaconWithLocation = beacons.find(beacon => beacon.latestLocationState);
|
||||
|
||||
return firstBeaconWithLocation?.latestLocationState?.uri;
|
||||
};
|
||||
|
||||
/**
|
||||
* Dialog to view live beacons maximised
|
||||
*/
|
||||
const BeaconViewDialog: React.FC<IProps> = ({ roomId, matrixClient, onFinished }) => {
|
||||
const liveBeacons = useLiveBeacons(roomId, matrixClient);
|
||||
|
||||
const mapCenterUri = getMapCenterUri(liveBeacons);
|
||||
// TODO probably show loader or placeholder when there is no location
|
||||
// to center the map on
|
||||
|
||||
return (
|
||||
<BaseDialog
|
||||
className='mx_BeaconViewDialog'
|
||||
onFinished={onFinished}
|
||||
fixedWidth={false}
|
||||
>
|
||||
<MatrixClientContext.Provider value={matrixClient}>
|
||||
<Map
|
||||
id='mx_BeaconViewDialog'
|
||||
centerGeoUri={mapCenterUri}
|
||||
interactive
|
||||
className="mx_BeaconViewDialog_map"
|
||||
>
|
||||
{
|
||||
({ map }: { map: maplibregl.Map}) =>
|
||||
<>
|
||||
{ liveBeacons.map(beacon => <BeaconMarker
|
||||
key={beacon.identifier}
|
||||
map={map}
|
||||
beacon={beacon}
|
||||
/>) }
|
||||
<ZoomButtons map={map} />
|
||||
</>
|
||||
}
|
||||
</Map>
|
||||
</MatrixClientContext.Provider>
|
||||
</BaseDialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default BeaconViewDialog;
|
|
@ -34,6 +34,9 @@ interface IState {
|
|||
error: Error;
|
||||
}
|
||||
|
||||
/**
|
||||
* Dialog to view m.location events maximised
|
||||
*/
|
||||
export default class LocationViewDialog extends React.Component<IProps, IState> {
|
||||
constructor(props: IProps) {
|
||||
super(props);
|
||||
|
|
|
@ -72,12 +72,21 @@ interface SmartMarkerProps {
|
|||
const SmartMarker: React.FC<SmartMarkerProps> = ({ id, map, geoUri, roomMember, useMemberColor }) => {
|
||||
const { onElementRef } = useMapMarker(map, geoUri);
|
||||
|
||||
return <Marker
|
||||
ref={onElementRef}
|
||||
id={id}
|
||||
roomMember={roomMember}
|
||||
useMemberColor={useMemberColor}
|
||||
/>;
|
||||
return (
|
||||
// maplibregl hijacks the Marker dom element
|
||||
// and removes it from the dom when the maplibregl.Marker instance
|
||||
// is removed
|
||||
// wrap in a span so that react doesn't get confused
|
||||
// when trying to unmount this component
|
||||
<span>
|
||||
<Marker
|
||||
ref={onElementRef}
|
||||
id={id}
|
||||
roomMember={roomMember}
|
||||
useMemberColor={useMemberColor}
|
||||
/>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
export default SmartMarker;
|
||||
|
|
|
@ -23,6 +23,7 @@ import { Icon as LocationMarkerIcon } from '../../../../res/img/element-icons/lo
|
|||
import MatrixClientContext from '../../../contexts/MatrixClientContext';
|
||||
import { useEventEmitterState } from '../../../hooks/useEventEmitter';
|
||||
import { _t } from '../../../languageHandler';
|
||||
import Modal from '../../../Modal';
|
||||
import { useBeacon } from '../../../utils/beacon';
|
||||
import { isSelfLocation } from '../../../utils/location';
|
||||
import { BeaconDisplayStatus, getBeaconDisplayStatus } from '../beacon/displayStatus';
|
||||
|
@ -32,6 +33,7 @@ import Map from '../location/Map';
|
|||
import SmartMarker from '../location/SmartMarker';
|
||||
import OwnBeaconStatus from '../beacon/OwnBeaconStatus';
|
||||
import { IBodyProps } from "./IBodyProps";
|
||||
import BeaconViewDialog from '../beacon/BeaconViewDialog';
|
||||
|
||||
const useBeaconState = (beaconInfoEvent: MatrixEvent): {
|
||||
beacon?: Beacon;
|
||||
|
@ -85,13 +87,31 @@ const MBeaconBody: React.FC<IBodyProps> = React.forwardRef(({ mxEvent }, ref) =>
|
|||
latestLocationState,
|
||||
} = useBeaconState(mxEvent);
|
||||
const mapId = useUniqueId(mxEvent.getId());
|
||||
const [error, setError] = useState<Error>();
|
||||
|
||||
const matrixClient = useContext(MatrixClientContext);
|
||||
const [error, setError] = useState<Error>();
|
||||
const displayStatus = getBeaconDisplayStatus(isLive, latestLocationState, error);
|
||||
const markerRoomMember = isSelfLocation(mxEvent.getContent()) ? mxEvent.sender : undefined;
|
||||
|
||||
const isOwnBeacon = beacon?.beaconInfoOwner === matrixClient.getUserId();
|
||||
|
||||
const onClick = () => {
|
||||
if (displayStatus !== BeaconDisplayStatus.Active) {
|
||||
return;
|
||||
}
|
||||
Modal.createTrackedDialog(
|
||||
'Beacon View',
|
||||
'',
|
||||
BeaconViewDialog,
|
||||
{
|
||||
roomId: mxEvent.getRoomId(),
|
||||
matrixClient,
|
||||
},
|
||||
"mx_BeaconViewDialog_wrapper",
|
||||
false, // isPriority
|
||||
true, // isStatic
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='mx_MBeaconBody' ref={ref}>
|
||||
{ displayStatus === BeaconDisplayStatus.Active ?
|
||||
|
@ -99,6 +119,7 @@ const MBeaconBody: React.FC<IBodyProps> = React.forwardRef(({ mxEvent }, ref) =>
|
|||
id={mapId}
|
||||
centerGeoUri={latestLocationState.uri}
|
||||
onError={setError}
|
||||
onClick={onClick}
|
||||
className="mx_MBeaconBody_map"
|
||||
>
|
||||
{
|
||||
|
|
|
@ -22,7 +22,7 @@ import { MatrixClientPeg } from '../MatrixClientPeg';
|
|||
const CALL_BEHAVIOUR_WK_KEY = "io.element.call_behaviour";
|
||||
const E2EE_WK_KEY = "io.element.e2ee";
|
||||
const E2EE_WK_KEY_DEPRECATED = "im.vector.riot.e2ee";
|
||||
const TILE_SERVER_WK_KEY = new UnstableValue(
|
||||
export const TILE_SERVER_WK_KEY = new UnstableValue(
|
||||
"m.tile_server", "org.matrix.msc3488.tile_server");
|
||||
|
||||
/* eslint-disable camelcase */
|
||||
|
|
41
src/utils/beacon/useLiveBeacons.ts
Normal file
41
src/utils/beacon/useLiveBeacons.ts
Normal file
|
@ -0,0 +1,41 @@
|
|||
/*
|
||||
Copyright 2022 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import {
|
||||
Beacon,
|
||||
Room,
|
||||
RoomStateEvent,
|
||||
MatrixClient,
|
||||
} from "matrix-js-sdk/src/matrix";
|
||||
|
||||
import { useEventEmitterState } from "../../hooks/useEventEmitter";
|
||||
|
||||
/**
|
||||
* Returns an array of all live beacon ids for a given room
|
||||
*
|
||||
* Beacons are removed from array when they become inactive
|
||||
*/
|
||||
export const useLiveBeacons = (roomId: Room['roomId'], matrixClient: MatrixClient): Beacon[] => {
|
||||
const room = matrixClient.getRoom(roomId);
|
||||
|
||||
const liveBeacons = useEventEmitterState(
|
||||
room.currentState,
|
||||
RoomStateEvent.BeaconLiveness,
|
||||
() => room.currentState?.liveBeaconIds.map(beaconIdentifier => room.currentState.beacons.get(beaconIdentifier)),
|
||||
);
|
||||
|
||||
return liveBeacons;
|
||||
};
|
136
test/components/views/beacon/BeaconMarker-test.tsx
Normal file
136
test/components/views/beacon/BeaconMarker-test.tsx
Normal file
|
@ -0,0 +1,136 @@
|
|||
/*
|
||||
Copyright 2022 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import maplibregl from 'maplibre-gl';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import {
|
||||
Beacon,
|
||||
Room,
|
||||
RoomMember,
|
||||
getBeaconInfoIdentifier,
|
||||
} from 'matrix-js-sdk/src/matrix';
|
||||
|
||||
import BeaconMarker from '../../../../src/components/views/beacon/BeaconMarker';
|
||||
import MatrixClientContext from '../../../../src/contexts/MatrixClientContext';
|
||||
import { getMockClientWithEventEmitter, makeBeaconEvent, makeBeaconInfoEvent } from '../../../test-utils';
|
||||
import { TILE_SERVER_WK_KEY } from '../../../../src/utils/WellKnownUtils';
|
||||
|
||||
describe('<BeaconMarker />', () => {
|
||||
// 14.03.2022 16:15
|
||||
const now = 1647270879403;
|
||||
// stable date for snapshots
|
||||
jest.spyOn(global.Date, 'now').mockReturnValue(now);
|
||||
const roomId = '!room:server';
|
||||
const aliceId = '@alice:server';
|
||||
|
||||
const aliceMember = new RoomMember(roomId, aliceId);
|
||||
|
||||
const mockMap = new maplibregl.Map();
|
||||
|
||||
const mockClient = getMockClientWithEventEmitter({
|
||||
getClientWellKnown: jest.fn().mockReturnValue({
|
||||
[TILE_SERVER_WK_KEY.name]: { map_style_url: 'maps.com' },
|
||||
}),
|
||||
getUserId: jest.fn().mockReturnValue(aliceId),
|
||||
getRoom: jest.fn(),
|
||||
isGuest: jest.fn().mockReturnValue(false),
|
||||
});
|
||||
|
||||
// make fresh rooms every time
|
||||
// as we update room state
|
||||
const makeRoomWithStateEvents = (stateEvents = []): Room => {
|
||||
const room1 = new Room(roomId, mockClient, aliceId);
|
||||
|
||||
room1.currentState.setStateEvents(stateEvents);
|
||||
jest.spyOn(room1, 'getMember').mockReturnValue(aliceMember);
|
||||
mockClient.getRoom.mockReturnValue(room1);
|
||||
|
||||
return room1;
|
||||
};
|
||||
|
||||
const defaultEvent = makeBeaconInfoEvent(aliceId,
|
||||
roomId,
|
||||
{ isLive: true },
|
||||
'$alice-room1-1',
|
||||
);
|
||||
const notLiveEvent = makeBeaconInfoEvent(aliceId,
|
||||
roomId,
|
||||
{ isLive: false },
|
||||
'$alice-room1-2',
|
||||
);
|
||||
|
||||
const location1 = makeBeaconEvent(
|
||||
aliceId, { beaconInfoId: defaultEvent.getId(), geoUri: 'geo:51,41', timestamp: now + 1 },
|
||||
);
|
||||
const location2 = makeBeaconEvent(
|
||||
aliceId, { beaconInfoId: defaultEvent.getId(), geoUri: 'geo:52,42', timestamp: now + 10000 },
|
||||
);
|
||||
|
||||
const defaultProps = {
|
||||
map: mockMap,
|
||||
beacon: new Beacon(defaultEvent),
|
||||
};
|
||||
|
||||
const getComponent = (props = {}) =>
|
||||
mount(<BeaconMarker {...defaultProps} {...props} />, {
|
||||
wrappingComponent: MatrixClientContext.Provider,
|
||||
wrappingComponentProps: { value: mockClient },
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
it('renders nothing when beacon is not live', () => {
|
||||
const room = makeRoomWithStateEvents([notLiveEvent]);
|
||||
const beacon = room.currentState.beacons.get(getBeaconInfoIdentifier(notLiveEvent));
|
||||
const component = getComponent({ beacon });
|
||||
expect(component.html()).toBe(null);
|
||||
});
|
||||
|
||||
it('renders nothing when beacon has no location', () => {
|
||||
const room = makeRoomWithStateEvents([defaultEvent]);
|
||||
const beacon = room.currentState.beacons.get(getBeaconInfoIdentifier(defaultEvent));
|
||||
const component = getComponent({ beacon });
|
||||
expect(component.html()).toBe(null);
|
||||
});
|
||||
|
||||
it('renders marker when beacon has location', () => {
|
||||
const room = makeRoomWithStateEvents([defaultEvent]);
|
||||
const beacon = room.currentState.beacons.get(getBeaconInfoIdentifier(defaultEvent));
|
||||
beacon.addLocations([location1]);
|
||||
const component = getComponent({ beacon });
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('updates with new locations', () => {
|
||||
const room = makeRoomWithStateEvents([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');
|
||||
|
||||
act(() => {
|
||||
beacon.addLocations([location2]);
|
||||
});
|
||||
component.setProps({});
|
||||
|
||||
// updated to latest location
|
||||
expect(component.find('SmartMarker').props()['geoUri']).toEqual('geo:52,42');
|
||||
});
|
||||
});
|
121
test/components/views/beacon/BeaconViewDialog-test.tsx
Normal file
121
test/components/views/beacon/BeaconViewDialog-test.tsx
Normal file
|
@ -0,0 +1,121 @@
|
|||
/*
|
||||
Copyright 2022 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import {
|
||||
MatrixClient,
|
||||
Room,
|
||||
RoomMember,
|
||||
getBeaconInfoIdentifier,
|
||||
} from 'matrix-js-sdk/src/matrix';
|
||||
|
||||
import BeaconViewDialog from '../../../../src/components/views/beacon/BeaconViewDialog';
|
||||
import {
|
||||
getMockClientWithEventEmitter,
|
||||
makeBeaconEvent,
|
||||
makeBeaconInfoEvent,
|
||||
} from '../../../test-utils';
|
||||
import { TILE_SERVER_WK_KEY } from '../../../../src/utils/WellKnownUtils';
|
||||
|
||||
describe('<BeaconViewDialog />', () => {
|
||||
// 14.03.2022 16:15
|
||||
const now = 1647270879403;
|
||||
// stable date for snapshots
|
||||
jest.spyOn(global.Date, 'now').mockReturnValue(now);
|
||||
const roomId = '!room:server';
|
||||
const aliceId = '@alice:server';
|
||||
const bobId = '@bob:server';
|
||||
|
||||
const aliceMember = new RoomMember(roomId, aliceId);
|
||||
|
||||
const mockClient = getMockClientWithEventEmitter({
|
||||
getClientWellKnown: jest.fn().mockReturnValue({
|
||||
[TILE_SERVER_WK_KEY.name]: { map_style_url: 'maps.com' },
|
||||
}),
|
||||
getUserId: jest.fn().mockReturnValue(aliceId),
|
||||
getRoom: jest.fn(),
|
||||
isGuest: jest.fn().mockReturnValue(false),
|
||||
});
|
||||
|
||||
// make fresh rooms every time
|
||||
// as we update room state
|
||||
const makeRoomWithStateEvents = (stateEvents = []): Room => {
|
||||
const room1 = new Room(roomId, mockClient, aliceId);
|
||||
|
||||
room1.currentState.setStateEvents(stateEvents);
|
||||
jest.spyOn(room1, 'getMember').mockReturnValue(aliceMember);
|
||||
mockClient.getRoom.mockReturnValue(room1);
|
||||
|
||||
return room1;
|
||||
};
|
||||
|
||||
const defaultEvent = makeBeaconInfoEvent(aliceId,
|
||||
roomId,
|
||||
{ isLive: true },
|
||||
'$alice-room1-1',
|
||||
);
|
||||
|
||||
const location1 = makeBeaconEvent(
|
||||
aliceId, { beaconInfoId: defaultEvent.getId(), geoUri: 'geo:51,41', timestamp: now + 1 },
|
||||
);
|
||||
|
||||
const defaultProps = {
|
||||
onFinished: jest.fn(),
|
||||
roomId,
|
||||
matrixClient: mockClient as MatrixClient,
|
||||
};
|
||||
|
||||
const getComponent = (props = {}) =>
|
||||
mount(<BeaconViewDialog {...defaultProps} {...props} />);
|
||||
|
||||
it('renders a map with markers', () => {
|
||||
const room = makeRoomWithStateEvents([defaultEvent]);
|
||||
const beacon = room.currentState.beacons.get(getBeaconInfoIdentifier(defaultEvent));
|
||||
beacon.addLocations([location1]);
|
||||
const component = getComponent();
|
||||
expect(component.find('Map').props()).toEqual(expect.objectContaining({
|
||||
centerGeoUri: 'geo:51,41',
|
||||
interactive: true,
|
||||
}));
|
||||
expect(component.find('SmartMarker').length).toEqual(1);
|
||||
});
|
||||
|
||||
it('updates markers on changes to beacons', () => {
|
||||
const room = makeRoomWithStateEvents([defaultEvent]);
|
||||
const beacon = room.currentState.beacons.get(getBeaconInfoIdentifier(defaultEvent));
|
||||
beacon.addLocations([location1]);
|
||||
const component = getComponent();
|
||||
expect(component.find('BeaconMarker').length).toEqual(1);
|
||||
|
||||
const anotherBeaconEvent = makeBeaconInfoEvent(bobId,
|
||||
roomId,
|
||||
{ isLive: true },
|
||||
'$bob-room1-1',
|
||||
);
|
||||
|
||||
act(() => {
|
||||
// emits RoomStateEvent.BeaconLiveness
|
||||
room.currentState.setStateEvents([anotherBeaconEvent]);
|
||||
});
|
||||
|
||||
component.setProps({});
|
||||
|
||||
// two markers now!
|
||||
expect(component.find('BeaconMarker').length).toEqual(2);
|
||||
});
|
||||
});
|
|
@ -0,0 +1,229 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<BeaconMarker /> renders marker when beacon has location 1`] = `
|
||||
<BeaconMarker
|
||||
beacon={
|
||||
Beacon {
|
||||
"_beaconInfo": Object {
|
||||
"assetType": "m.self",
|
||||
"description": undefined,
|
||||
"live": true,
|
||||
"timeout": 3600000,
|
||||
"timestamp": 1647270879403,
|
||||
},
|
||||
"_events": Object {
|
||||
"Beacon.Destroy": Array [
|
||||
[Function],
|
||||
[Function],
|
||||
],
|
||||
"Beacon.LivenessChange": Array [
|
||||
[Function],
|
||||
[Function],
|
||||
],
|
||||
"Beacon.LocationUpdate": [Function],
|
||||
"Beacon.new": [Function],
|
||||
"Beacon.update": [Function],
|
||||
},
|
||||
"_eventsCount": 5,
|
||||
"_isLive": true,
|
||||
"_latestLocationState": Object {
|
||||
"description": undefined,
|
||||
"timestamp": 1647270879404,
|
||||
"uri": "geo:51,41",
|
||||
},
|
||||
"_maxListeners": undefined,
|
||||
"clearLatestLocation": [Function],
|
||||
"livenessWatchInterval": undefined,
|
||||
"roomId": "!room:server",
|
||||
"rootEvent": Object {
|
||||
"content": Object {
|
||||
"description": undefined,
|
||||
"live": true,
|
||||
"org.matrix.msc3488.asset": Object {
|
||||
"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": Object {},
|
||||
"_eventsCount": 0,
|
||||
"_maxListeners": undefined,
|
||||
"addControl": [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": Object {},
|
||||
"_eventsCount": 0,
|
||||
"_maxListeners": undefined,
|
||||
"addControl": [MockFunction],
|
||||
"removeControl": [MockFunction],
|
||||
"setCenter": [MockFunction],
|
||||
"setStyle": [MockFunction],
|
||||
"zoomIn": [MockFunction],
|
||||
"zoomOut": [MockFunction],
|
||||
Symbol(kCapture): false,
|
||||
}
|
||||
}
|
||||
roomMember={
|
||||
RoomMember {
|
||||
"_events": Object {},
|
||||
"_eventsCount": 0,
|
||||
"_isOutOfBand": false,
|
||||
"_maxListeners": undefined,
|
||||
"_modified": 1647270879403,
|
||||
"_requestedProfileInfo": undefined,
|
||||
"disambiguate": false,
|
||||
"events": Object {
|
||||
"member": null,
|
||||
},
|
||||
"membership": null,
|
||||
"name": "@alice:server",
|
||||
"powerLevel": 0,
|
||||
"powerLevelNorm": 0,
|
||||
"rawDisplayName": "@alice:server",
|
||||
"roomId": "!room:server",
|
||||
"typing": false,
|
||||
"user": null,
|
||||
"userId": "@alice:server",
|
||||
Symbol(kCapture): false,
|
||||
}
|
||||
}
|
||||
>
|
||||
<span>
|
||||
<ForwardRef
|
||||
id="!room:server_@alice:server"
|
||||
roomMember={
|
||||
RoomMember {
|
||||
"_events": Object {},
|
||||
"_eventsCount": 0,
|
||||
"_isOutOfBand": false,
|
||||
"_maxListeners": undefined,
|
||||
"_modified": 1647270879403,
|
||||
"_requestedProfileInfo": undefined,
|
||||
"disambiguate": false,
|
||||
"events": Object {
|
||||
"member": null,
|
||||
},
|
||||
"membership": null,
|
||||
"name": "@alice:server",
|
||||
"powerLevel": 0,
|
||||
"powerLevelNorm": 0,
|
||||
"rawDisplayName": "@alice:server",
|
||||
"roomId": "!room:server",
|
||||
"typing": false,
|
||||
"user": null,
|
||||
"userId": "@alice:server",
|
||||
Symbol(kCapture): false,
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="mx_Marker mx_Marker_defaultColor"
|
||||
id="!room:server_@alice:server"
|
||||
>
|
||||
<div
|
||||
className="mx_Marker_border"
|
||||
>
|
||||
<MemberAvatar
|
||||
height={36}
|
||||
member={
|
||||
RoomMember {
|
||||
"_events": Object {},
|
||||
"_eventsCount": 0,
|
||||
"_isOutOfBand": false,
|
||||
"_maxListeners": undefined,
|
||||
"_modified": 1647270879403,
|
||||
"_requestedProfileInfo": undefined,
|
||||
"disambiguate": false,
|
||||
"events": Object {
|
||||
"member": null,
|
||||
},
|
||||
"membership": null,
|
||||
"name": "@alice:server",
|
||||
"powerLevel": 0,
|
||||
"powerLevelNorm": 0,
|
||||
"rawDisplayName": "@alice:server",
|
||||
"roomId": "!room:server",
|
||||
"typing": false,
|
||||
"user": null,
|
||||
"userId": "@alice:server",
|
||||
Symbol(kCapture): false,
|
||||
}
|
||||
}
|
||||
resizeMethod="crop"
|
||||
viewUserOnClick={false}
|
||||
width={36}
|
||||
>
|
||||
<BaseAvatar
|
||||
height={36}
|
||||
idName="@alice:server"
|
||||
name="@alice:server"
|
||||
resizeMethod="crop"
|
||||
title="@alice:server"
|
||||
url={null}
|
||||
width={36}
|
||||
>
|
||||
<span
|
||||
className="mx_BaseAvatar"
|
||||
role="presentation"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="mx_BaseAvatar_initial"
|
||||
style={
|
||||
Object {
|
||||
"fontSize": "23.400000000000002px",
|
||||
"lineHeight": "36px",
|
||||
"width": "36px",
|
||||
}
|
||||
}
|
||||
>
|
||||
A
|
||||
</span>
|
||||
<img
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
className="mx_BaseAvatar_image"
|
||||
onError={[Function]}
|
||||
src="data:image/png;base64,00"
|
||||
style={
|
||||
Object {
|
||||
"height": "36px",
|
||||
"width": "36px",
|
||||
}
|
||||
}
|
||||
title="@alice:server"
|
||||
/>
|
||||
</span>
|
||||
</BaseAvatar>
|
||||
</MemberAvatar>
|
||||
</div>
|
||||
</div>
|
||||
</ForwardRef>
|
||||
</span>
|
||||
</SmartMarker>
|
||||
</BeaconMarker>
|
||||
`;
|
|
@ -20,6 +20,7 @@ import { RoomMember } from 'matrix-js-sdk/src/matrix';
|
|||
import { LocationAssetType } from 'matrix-js-sdk/src/@types/location';
|
||||
|
||||
import LocationViewDialog from '../../../../src/components/views/location/LocationViewDialog';
|
||||
import { TILE_SERVER_WK_KEY } from '../../../../src/utils/WellKnownUtils';
|
||||
import { getMockClientWithEventEmitter, makeLocationEvent } from '../../../test-utils';
|
||||
|
||||
describe('<LocationViewDialog />', () => {
|
||||
|
@ -27,7 +28,7 @@ describe('<LocationViewDialog />', () => {
|
|||
const userId = '@user:server';
|
||||
const mockClient = getMockClientWithEventEmitter({
|
||||
getClientWellKnown: jest.fn().mockReturnValue({
|
||||
"m.tile_server": { map_style_url: 'maps.com' },
|
||||
[TILE_SERVER_WK_KEY.name]: { map_style_url: 'maps.com' },
|
||||
}),
|
||||
isGuest: jest.fn().mockReturnValue(false),
|
||||
});
|
||||
|
|
|
@ -24,6 +24,7 @@ import { logger } from 'matrix-js-sdk/src/logger';
|
|||
import Map from '../../../../src/components/views/location/Map';
|
||||
import { findByTestId, getMockClientWithEventEmitter } from '../../../test-utils';
|
||||
import MatrixClientContext from '../../../../src/contexts/MatrixClientContext';
|
||||
import { TILE_SERVER_WK_KEY } from '../../../../src/utils/WellKnownUtils';
|
||||
|
||||
describe('<Map />', () => {
|
||||
const defaultProps = {
|
||||
|
@ -34,7 +35,7 @@ describe('<Map />', () => {
|
|||
};
|
||||
const matrixClient = getMockClientWithEventEmitter({
|
||||
getClientWellKnown: jest.fn().mockReturnValue({
|
||||
"m.tile_server": { map_style_url: 'maps.com' },
|
||||
[TILE_SERVER_WK_KEY.name]: { map_style_url: 'maps.com' },
|
||||
}),
|
||||
});
|
||||
const getComponent = (props = {}) =>
|
||||
|
@ -46,7 +47,7 @@ describe('<Map />', () => {
|
|||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
matrixClient.getClientWellKnown.mockReturnValue({
|
||||
"m.tile_server": { map_style_url: 'maps.com' },
|
||||
[TILE_SERVER_WK_KEY.name]: { map_style_url: 'maps.com' },
|
||||
});
|
||||
|
||||
jest.spyOn(logger, 'error').mockRestore();
|
||||
|
@ -65,7 +66,7 @@ describe('<Map />', () => {
|
|||
|
||||
act(() => {
|
||||
matrixClient.emit(ClientEvent.ClientWellKnown, {
|
||||
"m.tile_server": { map_style_url: 'new.maps.com' },
|
||||
[TILE_SERVER_WK_KEY.name]: { map_style_url: 'new.maps.com' },
|
||||
});
|
||||
});
|
||||
|
||||
|
@ -77,7 +78,7 @@ describe('<Map />', () => {
|
|||
|
||||
act(() => {
|
||||
matrixClient.emit(ClientEvent.ClientWellKnown, {
|
||||
"m.tile_server": { map_style_url: undefined },
|
||||
[TILE_SERVER_WK_KEY.name]: { map_style_url: undefined },
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
@ -48,22 +48,24 @@ exports[`<LocationViewDialog /> renders map correctly 1`] = `
|
|||
}
|
||||
}
|
||||
>
|
||||
<ForwardRef
|
||||
id="mx_LocationViewDialog_$2-marker"
|
||||
>
|
||||
<div
|
||||
className="mx_Marker mx_Marker_defaultColor"
|
||||
<span>
|
||||
<ForwardRef
|
||||
id="mx_LocationViewDialog_$2-marker"
|
||||
>
|
||||
<div
|
||||
className="mx_Marker_border"
|
||||
className="mx_Marker mx_Marker_defaultColor"
|
||||
id="mx_LocationViewDialog_$2-marker"
|
||||
>
|
||||
<div
|
||||
className="mx_Marker_icon"
|
||||
/>
|
||||
className="mx_Marker_border"
|
||||
>
|
||||
<div
|
||||
className="mx_Marker_icon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ForwardRef>
|
||||
</ForwardRef>
|
||||
</span>
|
||||
</SmartMarker>
|
||||
<ZoomButtons
|
||||
map={
|
||||
|
|
|
@ -18,19 +18,21 @@ exports[`<SmartMarker /> creates a marker on mount 1`] = `
|
|||
}
|
||||
}
|
||||
>
|
||||
<ForwardRef>
|
||||
<div
|
||||
className="mx_Marker mx_Marker_defaultColor"
|
||||
>
|
||||
<span>
|
||||
<ForwardRef>
|
||||
<div
|
||||
className="mx_Marker_border"
|
||||
className="mx_Marker mx_Marker_defaultColor"
|
||||
>
|
||||
<div
|
||||
className="mx_Marker_icon"
|
||||
/>
|
||||
className="mx_Marker_border"
|
||||
>
|
||||
<div
|
||||
className="mx_Marker_icon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ForwardRef>
|
||||
</ForwardRef>
|
||||
</span>
|
||||
</SmartMarker>
|
||||
`;
|
||||
|
||||
|
@ -52,18 +54,20 @@ exports[`<SmartMarker /> removes marker on unmount 1`] = `
|
|||
}
|
||||
}
|
||||
>
|
||||
<ForwardRef>
|
||||
<div
|
||||
className="mx_Marker mx_Marker_defaultColor"
|
||||
>
|
||||
<span>
|
||||
<ForwardRef>
|
||||
<div
|
||||
className="mx_Marker_border"
|
||||
className="mx_Marker mx_Marker_defaultColor"
|
||||
>
|
||||
<div
|
||||
className="mx_Marker_icon"
|
||||
/>
|
||||
className="mx_Marker_border"
|
||||
>
|
||||
<div
|
||||
className="mx_Marker_icon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ForwardRef>
|
||||
</ForwardRef>
|
||||
</span>
|
||||
</SmartMarker>
|
||||
`;
|
||||
|
|
|
@ -29,6 +29,8 @@ import { getMockClientWithEventEmitter, makeBeaconEvent, makeBeaconInfoEvent } f
|
|||
import { RoomPermalinkCreator } from '../../../../src/utils/permalinks/Permalinks';
|
||||
import { MediaEventHelper } from '../../../../src/utils/MediaEventHelper';
|
||||
import MatrixClientContext from '../../../../src/contexts/MatrixClientContext';
|
||||
import Modal from '../../../../src/Modal';
|
||||
import { TILE_SERVER_WK_KEY } from '../../../../src/utils/WellKnownUtils';
|
||||
|
||||
describe('<MBeaconBody />', () => {
|
||||
// 14.03.2022 16:15
|
||||
|
@ -43,7 +45,7 @@ describe('<MBeaconBody />', () => {
|
|||
|
||||
const mockClient = getMockClientWithEventEmitter({
|
||||
getClientWellKnown: jest.fn().mockReturnValue({
|
||||
"m.tile_server": { map_style_url: 'maps.com' },
|
||||
[TILE_SERVER_WK_KEY.name]: { map_style_url: 'maps.com' },
|
||||
}),
|
||||
getUserId: jest.fn().mockReturnValue(aliceId),
|
||||
getRoom: jest.fn(),
|
||||
|
@ -83,6 +85,8 @@ describe('<MBeaconBody />', () => {
|
|||
wrappingComponentProps: { value: mockClient },
|
||||
});
|
||||
|
||||
const modalSpy = jest.spyOn(Modal, 'createTrackedDialog').mockReturnValue(undefined);
|
||||
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
@ -110,6 +114,23 @@ describe('<MBeaconBody />', () => {
|
|||
expect(component.text()).toEqual("Live location ended");
|
||||
});
|
||||
|
||||
it('does not open maximised map when on click when beacon is stopped', () => {
|
||||
const beaconInfoEvent = makeBeaconInfoEvent(aliceId,
|
||||
roomId,
|
||||
// puts this beacons live period in the past
|
||||
{ isLive: true, timestamp: now - 600000, timeout: 500 },
|
||||
'$alice-room1-1',
|
||||
);
|
||||
makeRoomWithStateEvents([beaconInfoEvent]);
|
||||
const component = getComponent({ mxEvent: beaconInfoEvent });
|
||||
|
||||
act(() => {
|
||||
component.find('.mx_MBeaconBody_map').simulate('click');
|
||||
});
|
||||
|
||||
expect(modalSpy).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('renders stopped UI when a beacon event is not the latest beacon for a user', () => {
|
||||
const aliceBeaconInfo1 = makeBeaconInfoEvent(
|
||||
aliceId,
|
||||
|
@ -213,6 +234,40 @@ describe('<MBeaconBody />', () => {
|
|||
expect(component.text()).toEqual("Loading live location...");
|
||||
});
|
||||
|
||||
it('does nothing on click when a beacon has no location', () => {
|
||||
makeRoomWithStateEvents([aliceBeaconInfo]);
|
||||
const component = getComponent({ mxEvent: aliceBeaconInfo });
|
||||
|
||||
act(() => {
|
||||
component.find('.mx_MBeaconBody_map').simulate('click');
|
||||
});
|
||||
|
||||
expect(modalSpy).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('renders a live beacon with a location correctly', () => {
|
||||
const room = makeRoomWithStateEvents([aliceBeaconInfo]);
|
||||
const beaconInstance = room.currentState.beacons.get(getBeaconInfoIdentifier(aliceBeaconInfo));
|
||||
beaconInstance.addLocations([location1]);
|
||||
const component = getComponent({ mxEvent: aliceBeaconInfo });
|
||||
|
||||
expect(component.find('Map').length).toBeTruthy;
|
||||
});
|
||||
|
||||
it('opens maximised map view on click when beacon has a live location', () => {
|
||||
const room = makeRoomWithStateEvents([aliceBeaconInfo]);
|
||||
const beaconInstance = room.currentState.beacons.get(getBeaconInfoIdentifier(aliceBeaconInfo));
|
||||
beaconInstance.addLocations([location1]);
|
||||
const component = getComponent({ mxEvent: aliceBeaconInfo });
|
||||
|
||||
act(() => {
|
||||
component.find('Map').simulate('click');
|
||||
});
|
||||
|
||||
// opens modal
|
||||
expect(modalSpy).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('updates latest location', () => {
|
||||
const room = makeRoomWithStateEvents([aliceBeaconInfo]);
|
||||
const component = getComponent({ mxEvent: aliceBeaconInfo });
|
||||
|
|
|
@ -28,6 +28,7 @@ import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalink
|
|||
import { MediaEventHelper } from "../../../../src/utils/MediaEventHelper";
|
||||
import Modal from '../../../../src/Modal';
|
||||
import SdkConfig from "../../../../src/SdkConfig";
|
||||
import { TILE_SERVER_WK_KEY } from '../../../../src/utils/WellKnownUtils';
|
||||
import { makeLocationEvent } from "../../../test-utils/location";
|
||||
import { getMockClientWithEventEmitter } from '../../../test-utils';
|
||||
|
||||
|
@ -37,7 +38,7 @@ describe("MLocationBody", () => {
|
|||
const userId = '@user:server';
|
||||
const mockClient = getMockClientWithEventEmitter({
|
||||
getClientWellKnown: jest.fn().mockReturnValue({
|
||||
"m.tile_server": { map_style_url: 'maps.com' },
|
||||
[TILE_SERVER_WK_KEY.name]: { map_style_url: 'maps.com' },
|
||||
}),
|
||||
isGuest: jest.fn().mockReturnValue(false),
|
||||
});
|
||||
|
@ -78,7 +79,7 @@ describe("MLocationBody", () => {
|
|||
it('displays correct fallback content when map_style_url is misconfigured', () => {
|
||||
const mockMap = new maplibregl.Map();
|
||||
mockClient.getClientWellKnown.mockReturnValue({
|
||||
"m.tile_server": { map_style_url: 'bad-tile-server.com' },
|
||||
[TILE_SERVER_WK_KEY.name]: { map_style_url: 'bad-tile-server.com' },
|
||||
});
|
||||
const component = getComponent();
|
||||
|
||||
|
@ -93,7 +94,7 @@ describe("MLocationBody", () => {
|
|||
describe('without error', () => {
|
||||
beforeEach(() => {
|
||||
mockClient.getClientWellKnown.mockReturnValue({
|
||||
"m.tile_server": { map_style_url: 'maps.com' },
|
||||
[TILE_SERVER_WK_KEY.name]: { map_style_url: 'maps.com' },
|
||||
});
|
||||
|
||||
// MLocationBody uses random number for map id
|
||||
|
|
|
@ -158,22 +158,24 @@ exports[`MLocationBody <MLocationBody> without error renders map correctly 1`] =
|
|||
}
|
||||
}
|
||||
>
|
||||
<ForwardRef
|
||||
id="mx_MLocationBody_$2_1f9acffa-marker"
|
||||
>
|
||||
<div
|
||||
className="mx_Marker mx_Marker_defaultColor"
|
||||
<span>
|
||||
<ForwardRef
|
||||
id="mx_MLocationBody_$2_1f9acffa-marker"
|
||||
>
|
||||
<div
|
||||
className="mx_Marker_border"
|
||||
className="mx_Marker mx_Marker_defaultColor"
|
||||
id="mx_MLocationBody_$2_1f9acffa-marker"
|
||||
>
|
||||
<div
|
||||
className="mx_Marker_icon"
|
||||
/>
|
||||
className="mx_Marker_border"
|
||||
>
|
||||
<div
|
||||
className="mx_Marker_icon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ForwardRef>
|
||||
</ForwardRef>
|
||||
</span>
|
||||
</SmartMarker>
|
||||
</div>
|
||||
</Map>
|
||||
|
|
Loading…
Reference in a new issue