Live location sharing - consolidate maps (#8236)
* extract location markers into generic Marker Signed-off-by: Kerry Archibald <kerrya@element.io> * wrap marker in smartmarker Signed-off-by: Kerry Archibald <kerrya@element.io> * test smartmarker Signed-off-by: Kerry Archibald <kerrya@element.io> * working map in location body Signed-off-by: Kerry Archibald <kerrya@element.io> * test Map Signed-off-by: Kerry Archibald <kerrya@element.io> * remove skinned sdk Signed-off-by: Kerry Archibald <kerrya@element.io> * update snaps with new mocks Signed-off-by: Kerry Archibald <kerrya@element.io> * use new ZoomButtons in MLocationBody Signed-off-by: Kerry Archibald <kerrya@element.io> * make LocationViewDialog map interactive Signed-off-by: Kerry Archibald <kerrya@element.io> * test MLocationBody Signed-off-by: Kerry Archibald <kerrya@element.io> * test LocationViewDialog Signed-off-by: Kerry Archibald <kerrya@element.io> * add copyrights, shrink snapshot Signed-off-by: Kerry Archibald <kerrya@element.io> * update comment Signed-off-by: Kerry Archibald <kerrya@element.io> * lint Signed-off-by: Kerry Archibald <kerrya@element.io> * lint Signed-off-by: Kerry Archibald <kerrya@element.io>
This commit is contained in:
Kerry
GitHub
parent
944e11d7d6
commit
9ba55d1d14
16 changed files with 890 additions and 235 deletions
|
|
@ -283,7 +283,7 @@ describe("LocationPicker", () => {
|
|||
});
|
||||
|
||||
// marker not added
|
||||
expect(wrapper.find('.mx_MLocationBody_markerBorder').length).toBeFalsy();
|
||||
expect(wrapper.find('Marker').length).toBeFalsy();
|
||||
});
|
||||
|
||||
it('sets position on click event', () => {
|
||||
|
|
|
|||
56
test/components/views/location/LocationViewDialog-test.tsx
Normal file
56
test/components/views/location/LocationViewDialog-test.tsx
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
/*
|
||||
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 { 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 { getMockClientWithEventEmitter, makeLocationEvent } from '../../../test-utils';
|
||||
|
||||
describe('<LocationViewDialog />', () => {
|
||||
const roomId = '!room:server';
|
||||
const userId = '@user:server';
|
||||
const mockClient = getMockClientWithEventEmitter({
|
||||
getClientWellKnown: jest.fn().mockReturnValue({
|
||||
"m.tile_server": { map_style_url: 'maps.com' },
|
||||
}),
|
||||
isGuest: jest.fn().mockReturnValue(false),
|
||||
});
|
||||
const defaultEvent = makeLocationEvent("geo:51.5076,-0.1276", LocationAssetType.Pin);
|
||||
const defaultProps = {
|
||||
matrixClient: mockClient,
|
||||
mxEvent: defaultEvent,
|
||||
onFinished: jest.fn(),
|
||||
};
|
||||
const getComponent = (props = {}) =>
|
||||
mount(<LocationViewDialog {...defaultProps} {...props} />);
|
||||
|
||||
it('renders map correctly', () => {
|
||||
const component = getComponent();
|
||||
expect(component.find('Map')).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders marker correctly for self share', () => {
|
||||
const selfShareEvent = makeLocationEvent("geo:51.5076,-0.1276", LocationAssetType.Self);
|
||||
const member = new RoomMember(roomId, userId);
|
||||
// @ts-ignore cheat assignment to property
|
||||
selfShareEvent.sender = member;
|
||||
const component = getComponent({ mxEvent: selfShareEvent });
|
||||
expect(component.find('SmartMarker').props()['roomMember']).toEqual(member);
|
||||
});
|
||||
});
|
||||
165
test/components/views/location/Map-test.tsx
Normal file
165
test/components/views/location/Map-test.tsx
Normal file
|
|
@ -0,0 +1,165 @@
|
|||
/*
|
||||
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 maplibregl from 'maplibre-gl';
|
||||
import { ClientEvent } from 'matrix-js-sdk/src/matrix';
|
||||
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';
|
||||
|
||||
describe('<Map />', () => {
|
||||
const defaultProps = {
|
||||
centerGeoUri: 'geo:52,41',
|
||||
id: 'test-123',
|
||||
onError: jest.fn(),
|
||||
onClick: jest.fn(),
|
||||
};
|
||||
const matrixClient = getMockClientWithEventEmitter({
|
||||
getClientWellKnown: jest.fn().mockReturnValue({
|
||||
"m.tile_server": { map_style_url: 'maps.com' },
|
||||
}),
|
||||
});
|
||||
const getComponent = (props = {}) =>
|
||||
mount(<Map {...defaultProps} {...props} />, {
|
||||
wrappingComponent: MatrixClientContext.Provider,
|
||||
wrappingComponentProps: { value: matrixClient },
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
matrixClient.getClientWellKnown.mockReturnValue({
|
||||
"m.tile_server": { map_style_url: 'maps.com' },
|
||||
});
|
||||
|
||||
jest.spyOn(logger, 'error').mockRestore();
|
||||
});
|
||||
|
||||
const mockMap = new maplibregl.Map();
|
||||
|
||||
it('renders', () => {
|
||||
const component = getComponent();
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
|
||||
describe('onClientWellKnown emits', () => {
|
||||
it('updates map style when style url is truthy', () => {
|
||||
getComponent();
|
||||
|
||||
act(() => {
|
||||
matrixClient.emit(ClientEvent.ClientWellKnown, {
|
||||
"m.tile_server": { map_style_url: 'new.maps.com' },
|
||||
});
|
||||
});
|
||||
|
||||
expect(mockMap.setStyle).toHaveBeenCalledWith('new.maps.com');
|
||||
});
|
||||
|
||||
it('does not update map style when style url is truthy', () => {
|
||||
getComponent();
|
||||
|
||||
act(() => {
|
||||
matrixClient.emit(ClientEvent.ClientWellKnown, {
|
||||
"m.tile_server": { map_style_url: undefined },
|
||||
});
|
||||
});
|
||||
|
||||
expect(mockMap.setStyle).not.toHaveBeenCalledWith();
|
||||
});
|
||||
});
|
||||
|
||||
describe('map centering', () => {
|
||||
it('does not try to center when no center uri provided', () => {
|
||||
getComponent({ centerGeoUri: null });
|
||||
expect(mockMap.setCenter).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('sets map center to centerGeoUri', () => {
|
||||
getComponent({ centerGeoUri: 'geo:51,42' });
|
||||
expect(mockMap.setCenter).toHaveBeenCalledWith({ lat: 51, lon: 42 });
|
||||
});
|
||||
|
||||
it('handles invalid centerGeoUri', () => {
|
||||
const logSpy = jest.spyOn(logger, 'error').mockImplementation();
|
||||
getComponent({ centerGeoUri: '123 Sesame Street' });
|
||||
expect(mockMap.setCenter).not.toHaveBeenCalled();
|
||||
expect(logSpy).toHaveBeenCalledWith('Could not set map center', '123 Sesame Street');
|
||||
});
|
||||
|
||||
it('updates map center when centerGeoUri prop changes', () => {
|
||||
const component = getComponent({ centerGeoUri: 'geo:51,42' });
|
||||
|
||||
component.setProps({ centerGeoUri: 'geo:53,45' });
|
||||
component.setProps({ centerGeoUri: 'geo:56,47' });
|
||||
expect(mockMap.setCenter).toHaveBeenCalledWith({ lat: 51, lon: 42 });
|
||||
expect(mockMap.setCenter).toHaveBeenCalledWith({ lat: 53, lon: 45 });
|
||||
expect(mockMap.setCenter).toHaveBeenCalledWith({ lat: 56, lon: 47 });
|
||||
});
|
||||
});
|
||||
|
||||
describe('children', () => {
|
||||
it('renders without children', () => {
|
||||
const component = getComponent({ children: null });
|
||||
|
||||
component.setProps({});
|
||||
|
||||
// no error
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
|
||||
it('renders children with map renderProp', () => {
|
||||
const children = ({ map }) => <div data-test-id='test-child' data-map={map}>Hello, world</div>;
|
||||
|
||||
const component = getComponent({ children });
|
||||
|
||||
// renders child with map instance
|
||||
expect(findByTestId(component, 'test-child').props()['data-map']).toEqual(mockMap);
|
||||
});
|
||||
});
|
||||
|
||||
describe('onClick', () => {
|
||||
it('eats clicks to maplibre attribution button', () => {
|
||||
const onClick = jest.fn();
|
||||
const component = getComponent({ onClick });
|
||||
|
||||
act(() => {
|
||||
// this is added to the dom by maplibregl
|
||||
// which is mocked
|
||||
// just fake the target
|
||||
const fakeEl = document.createElement('div');
|
||||
fakeEl.className = 'maplibregl-ctrl-attrib-button';
|
||||
component.simulate('click', { target: fakeEl });
|
||||
});
|
||||
|
||||
expect(onClick).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('calls onClick', () => {
|
||||
const onClick = jest.fn();
|
||||
const component = getComponent({ onClick });
|
||||
|
||||
act(() => {
|
||||
component.simulate('click');
|
||||
});
|
||||
|
||||
expect(onClick).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,156 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<LocationViewDialog /> renders map correctly 1`] = `
|
||||
<Map
|
||||
centerGeoUri="geo:51.5076,-0.1276"
|
||||
className="mx_LocationViewDialog_map"
|
||||
id="mx_LocationViewDialog_$2"
|
||||
interactive={true}
|
||||
onError={[Function]}
|
||||
>
|
||||
<div
|
||||
className="mx_Map mx_LocationViewDialog_map"
|
||||
id="mx_Map_mx_LocationViewDialog_$2"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<SmartMarker
|
||||
geoUri="geo:51.5076,-0.1276"
|
||||
id="mx_LocationViewDialog_$2-marker"
|
||||
map={
|
||||
MockMap {
|
||||
"_events": Object {
|
||||
"error": [Function],
|
||||
},
|
||||
"_eventsCount": 1,
|
||||
"_maxListeners": undefined,
|
||||
"addControl": [MockFunction],
|
||||
"removeControl": [MockFunction],
|
||||
"setCenter": [MockFunction] {
|
||||
"calls": Array [
|
||||
Array [
|
||||
Object {
|
||||
"lat": 51.5076,
|
||||
"lon": -0.1276,
|
||||
},
|
||||
],
|
||||
],
|
||||
"results": Array [
|
||||
Object {
|
||||
"type": "return",
|
||||
"value": undefined,
|
||||
},
|
||||
],
|
||||
},
|
||||
"setStyle": [MockFunction],
|
||||
"zoomIn": [MockFunction],
|
||||
"zoomOut": [MockFunction],
|
||||
Symbol(kCapture): false,
|
||||
}
|
||||
}
|
||||
>
|
||||
<ForwardRef
|
||||
id="mx_LocationViewDialog_$2-marker"
|
||||
>
|
||||
<div
|
||||
className="mx_Marker mx_Marker_defaultColor"
|
||||
id="mx_LocationViewDialog_$2-marker"
|
||||
>
|
||||
<div
|
||||
className="mx_Marker_border"
|
||||
>
|
||||
<div
|
||||
className="mx_Marker_icon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</ForwardRef>
|
||||
</SmartMarker>
|
||||
<ZoomButtons
|
||||
map={
|
||||
MockMap {
|
||||
"_events": Object {
|
||||
"error": [Function],
|
||||
},
|
||||
"_eventsCount": 1,
|
||||
"_maxListeners": undefined,
|
||||
"addControl": [MockFunction],
|
||||
"removeControl": [MockFunction],
|
||||
"setCenter": [MockFunction] {
|
||||
"calls": Array [
|
||||
Array [
|
||||
Object {
|
||||
"lat": 51.5076,
|
||||
"lon": -0.1276,
|
||||
},
|
||||
],
|
||||
],
|
||||
"results": Array [
|
||||
Object {
|
||||
"type": "return",
|
||||
"value": undefined,
|
||||
},
|
||||
],
|
||||
},
|
||||
"setStyle": [MockFunction],
|
||||
"zoomIn": [MockFunction],
|
||||
"zoomOut": [MockFunction],
|
||||
Symbol(kCapture): false,
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="mx_ZoomButtons"
|
||||
>
|
||||
<AccessibleButton
|
||||
className="mx_ZoomButtons_button"
|
||||
data-test-id="map-zoom-in-button"
|
||||
element="div"
|
||||
onClick={[Function]}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
title="Zoom in"
|
||||
>
|
||||
<div
|
||||
className="mx_AccessibleButton mx_ZoomButtons_button"
|
||||
data-test-id="map-zoom-in-button"
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
onKeyUp={[Function]}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
title="Zoom in"
|
||||
>
|
||||
<div
|
||||
className="mx_ZoomButtons_icon"
|
||||
/>
|
||||
</div>
|
||||
</AccessibleButton>
|
||||
<AccessibleButton
|
||||
className="mx_ZoomButtons_button"
|
||||
data-test-id="map-zoom-out-button"
|
||||
element="div"
|
||||
onClick={[Function]}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
title="Zoom out"
|
||||
>
|
||||
<div
|
||||
className="mx_AccessibleButton mx_ZoomButtons_button"
|
||||
data-test-id="map-zoom-out-button"
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
onKeyUp={[Function]}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
title="Zoom out"
|
||||
>
|
||||
<div
|
||||
className="mx_ZoomButtons_icon"
|
||||
/>
|
||||
</div>
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
</ZoomButtons>
|
||||
</div>
|
||||
</Map>
|
||||
`;
|
||||
|
|
@ -10,6 +10,8 @@ exports[`<SmartMarker /> creates a marker on mount 1`] = `
|
|||
"_maxListeners": undefined,
|
||||
"addControl": [MockFunction],
|
||||
"removeControl": [MockFunction],
|
||||
"setCenter": [MockFunction],
|
||||
"setStyle": [MockFunction],
|
||||
"zoomIn": [MockFunction],
|
||||
"zoomOut": [MockFunction],
|
||||
Symbol(kCapture): false,
|
||||
|
|
@ -42,6 +44,8 @@ exports[`<SmartMarker /> removes marker on unmount 1`] = `
|
|||
"_maxListeners": undefined,
|
||||
"addControl": [MockFunction],
|
||||
"removeControl": [MockFunction],
|
||||
"setCenter": [MockFunction],
|
||||
"setStyle": [MockFunction],
|
||||
"zoomIn": [MockFunction],
|
||||
"zoomOut": [MockFunction],
|
||||
Symbol(kCapture): false,
|
||||
|
|
|
|||
|
|
@ -9,6 +9,8 @@ exports[`<ZoomButtons /> renders buttons 1`] = `
|
|||
"_maxListeners": undefined,
|
||||
"addControl": [MockFunction],
|
||||
"removeControl": [MockFunction],
|
||||
"setCenter": [MockFunction],
|
||||
"setStyle": [MockFunction],
|
||||
"zoomIn": [MockFunction],
|
||||
"zoomOut": [MockFunction],
|
||||
Symbol(kCapture): false,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue