fallback to event text in location body when map unavailable (#7982)
* center icon better Signed-off-by: Kerry Archibald <kerrya@element.io> * remove debug Signed-off-by: Kerry Archibald <kerrya@element.io> * retrigger all builds Signed-off-by: Kerry Archibald <kerrya@element.io> * set assetType on share event Signed-off-by: Kerry Archibald <kerrya@element.io> * use pin marker on map for pin drop share Signed-off-by: Kerry Archibald <kerrya@element.io> * lint Signed-off-by: Kerry Archibald <kerrya@element.io> * test events Signed-off-by: Kerry Archibald <kerrya@element.io> * pin drop helper text Signed-off-by: Kerry Archibald <kerrya@element.io> * use generic location type Signed-off-by: Kerry Archibald <kerrya@element.io> * add navigationcontrol when in pin mode Signed-off-by: Kerry Archibald <kerrya@element.io> * allow pin drop without location permissions Signed-off-by: Kerry Archibald <kerrya@element.io> * remove geolocate control when pin dropping without geo perms Signed-off-by: Kerry Archibald <kerrya@element.io> * test locationpicker Signed-off-by: Kerry Archibald <kerrya@element.io> * test marker type, tidy Signed-off-by: Kerry Archibald <kerrya@element.io> * move findMapStyleUrl Signed-off-by: Kerry Archibald <kerrya@element.io> * fallback to event content when cant render map Signed-off-by: Kerry Archibald <kerrya@element.io> * update mocks in location picker, show same messages as timeline Signed-off-by: Kerry Archibald <kerrya@element.io> * style error message in location share menu Signed-off-by: Kerry Archibald <kerrya@element.io> * i18n Signed-off-by: Kerry Archibald <kerrya@element.io> * forgotten copyright Signed-off-by: Kerry Archibald <kerrya@element.io> * add copyright Signed-off-by: Kerry Archibald <kerrya@element.io> * update style Signed-off-by: Kerry Archibald <kerrya@element.io> * icon bigger Signed-off-by: Kerry Archibald <kerrya@element.io>pull/21833/head
Kerry
GitHub
parent
9082e07ff4
commit
d38a1fa201
|
|
@ -5,6 +5,7 @@
|
|||
@import "./_font-weights.scss";
|
||||
@import "./_spacing.scss";
|
||||
@import "./components/views/location/_LocationShareMenu.scss";
|
||||
@import "./components/views/location/_MapError.scss";
|
||||
@import "./components/views/location/_ShareDialogButtons.scss";
|
||||
@import "./components/views/location/_ShareType.scss";
|
||||
@import "./components/views/spaces/_QuickThemeSwitcher.scss";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
/*
|
||||
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_MapError {
|
||||
padding: 100px $spacing-32 0;
|
||||
text-align: center;
|
||||
|
||||
p {
|
||||
margin: $spacing-16 0 $spacing-32;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_MapError_heading {
|
||||
padding-top: $spacing-24;
|
||||
}
|
||||
|
||||
.mx_MapError_icon {
|
||||
height: 58px;
|
||||
|
||||
path {
|
||||
fill: $secondary-content;
|
||||
}
|
||||
}
|
||||
|
|
@ -21,6 +21,16 @@ limitations under the License.
|
|||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
// when there are errors loading the map
|
||||
// the canvas is still inserted
|
||||
// and can overlap error message/close buttons
|
||||
// hide it
|
||||
&.mx_LocationPicker_hasError {
|
||||
.maplibregl-canvas-container, .maplibregl-control-container {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#mx_LocationPicker_map {
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
|
|
@ -94,11 +104,6 @@ limitations under the License.
|
|||
|
||||
background-color: $header-panel-bg-color;
|
||||
}
|
||||
|
||||
.mx_LocationPicker_error {
|
||||
color: red;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_MLocationBody_markerIcon {
|
||||
|
|
|
|||
|
|
@ -26,12 +26,13 @@ import MemberAvatar from '../avatars/MemberAvatar';
|
|||
import MatrixClientContext from '../../../contexts/MatrixClientContext';
|
||||
import Modal from '../../../Modal';
|
||||
import ErrorDialog from '../dialogs/ErrorDialog';
|
||||
import { findMapStyleUrl } from '../messages/MLocationBody';
|
||||
import { tileServerFromWellKnown } from '../../../utils/WellKnownUtils';
|
||||
import { findMapStyleUrl } from './findMapStyleUrl';
|
||||
import { LocationShareType } from './shareLocation';
|
||||
import { Icon as LocationIcon } from '../../../../res/img/element-icons/location.svg';
|
||||
import { LocationShareError } from './LocationShareErrors';
|
||||
import AccessibleButton from '../elements/AccessibleButton';
|
||||
|
||||
import { MapError } from './MapError';
|
||||
export interface ILocationPickerProps {
|
||||
sender: RoomMember;
|
||||
shareType: LocationShareType;
|
||||
|
|
@ -48,7 +49,7 @@ interface IPosition {
|
|||
}
|
||||
interface IState {
|
||||
position?: IPosition;
|
||||
error: Error;
|
||||
error?: LocationShareError;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -104,10 +105,10 @@ class LocationPicker extends React.Component<ILocationPickerProps, IState> {
|
|||
this.map.on('error', (e) => {
|
||||
logger.error(
|
||||
"Failed to load map: check map_style_url in config.json "
|
||||
+ "has a valid URL and API key",
|
||||
+ "has a valid URL and API key",
|
||||
e.error,
|
||||
);
|
||||
this.setState({ error: e.error });
|
||||
this.setState({ error: LocationShareError.MapStyleUrlNotReachable });
|
||||
});
|
||||
|
||||
this.map.on('load', () => {
|
||||
|
|
@ -129,7 +130,10 @@ class LocationPicker extends React.Component<ILocationPickerProps, IState> {
|
|||
}
|
||||
} catch (e) {
|
||||
logger.error("Failed to render map", e);
|
||||
this.setState({ error: e });
|
||||
const errorType = e?.message === LocationShareError.MapStyleUrlNotConfigured ?
|
||||
LocationShareError.MapStyleUrlNotConfigured :
|
||||
LocationShareError.Default;
|
||||
this.setState({ error: errorType });
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -213,10 +217,13 @@ class LocationPicker extends React.Component<ILocationPickerProps, IState> {
|
|||
};
|
||||
|
||||
render() {
|
||||
const error = this.state.error ?
|
||||
<div data-test-id='location-picker-error' className="mx_LocationPicker_error">
|
||||
{ _t("Failed to load map") }
|
||||
</div> : null;
|
||||
if (this.state.error) {
|
||||
return <div className="mx_LocationPicker mx_LocationPicker_hasError">
|
||||
<MapError
|
||||
error={this.state.error}
|
||||
onFinished={this.props.onFinished} />
|
||||
</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mx_LocationPicker">
|
||||
|
|
@ -227,7 +234,6 @@ class LocationPicker extends React.Component<ILocationPickerProps, IState> {
|
|||
</span>
|
||||
</div>
|
||||
}
|
||||
{ error }
|
||||
<div className="mx_LocationPicker_footer">
|
||||
<form onSubmit={this.onOk}>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,34 @@
|
|||
/*
|
||||
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 { _t } from "../../../languageHandler";
|
||||
|
||||
export enum LocationShareError {
|
||||
MapStyleUrlNotConfigured = 'MapStyleUrlNotConfigured',
|
||||
MapStyleUrlNotReachable = 'MapStyleUrlNotReachable',
|
||||
Default = 'Default'
|
||||
}
|
||||
|
||||
export const getLocationShareErrorMessage = (errorType?: LocationShareError): string => {
|
||||
switch (errorType) {
|
||||
case LocationShareError.MapStyleUrlNotConfigured:
|
||||
return _t('This homeserver is not configured to display maps.');
|
||||
case LocationShareError.MapStyleUrlNotReachable:
|
||||
default:
|
||||
return _t(`This homeserver is not configured correctly to display maps, `
|
||||
+ `or the configured map server may be unreachable.`);
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
/*
|
||||
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 { Icon as WarningBadge } from '../../../../res/img/element-icons/warning-badge.svg';
|
||||
import { _t } from '../../../languageHandler';
|
||||
import AccessibleButton from '../elements/AccessibleButton';
|
||||
import Heading from '../typography/Heading';
|
||||
import { getLocationShareErrorMessage, LocationShareError } from './LocationShareErrors';
|
||||
|
||||
interface Props {
|
||||
onFinished: () => void;
|
||||
error: LocationShareError;
|
||||
}
|
||||
|
||||
export const MapError: React.FC<Props> = ({
|
||||
onFinished, error,
|
||||
}) => (<div data-test-id='location-picker-error' className="mx_MapError">
|
||||
<WarningBadge className="mx_MapError_icon" />
|
||||
<Heading className="mx_MapError_heading" size='h3'>{ _t("Unable to load map") }</Heading>
|
||||
<p>
|
||||
{ getLocationShareErrorMessage(error) }
|
||||
</p>
|
||||
<AccessibleButton element='button' kind="primary" onClick={onFinished}>{ _t("OK") }</AccessibleButton>
|
||||
</div>);
|
||||
|
|
@ -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 { logger } from "matrix-js-sdk/src/logger";
|
||||
|
||||
import SdkConfig from "../../../SdkConfig";
|
||||
import { getTileServerWellKnown } from "../../../utils/WellKnownUtils";
|
||||
import { LocationShareError } from "./LocationShareErrors";
|
||||
|
||||
/**
|
||||
* Look up what map tile server style URL was provided in the homeserver's
|
||||
* .well-known location, or, failing that, in our local config, or, failing
|
||||
* that, defaults to the same tile server listed by matrix.org.
|
||||
*/
|
||||
export function findMapStyleUrl(): string {
|
||||
const mapStyleUrl = (
|
||||
getTileServerWellKnown()?.map_style_url ??
|
||||
SdkConfig.get().map_style_url
|
||||
);
|
||||
|
||||
if (!mapStyleUrl) {
|
||||
logger.error("'map_style_url' missing from homeserver .well-known area, and " +
|
||||
"missing from from config.json.");
|
||||
throw new Error(LocationShareError.MapStyleUrlNotConfigured);
|
||||
}
|
||||
|
||||
return mapStyleUrl;
|
||||
}
|
||||
|
|
@ -26,7 +26,6 @@ import {
|
|||
} from 'matrix-js-sdk/src/@types/location';
|
||||
import { ClientEvent, IClientWellKnown } from 'matrix-js-sdk/src/client';
|
||||
|
||||
import SdkConfig from '../../../SdkConfig';
|
||||
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
||||
import { IBodyProps } from "./IBodyProps";
|
||||
import { _t } from '../../../languageHandler';
|
||||
|
|
@ -36,8 +35,10 @@ import LocationViewDialog from '../location/LocationViewDialog';
|
|||
import TooltipTarget from '../elements/TooltipTarget';
|
||||
import { Alignment } from '../elements/Tooltip';
|
||||
import AccessibleButton from '../elements/AccessibleButton';
|
||||
import { getTileServerWellKnown, tileServerFromWellKnown } from '../../../utils/WellKnownUtils';
|
||||
import { tileServerFromWellKnown } from '../../../utils/WellKnownUtils';
|
||||
import MatrixClientContext from '../../../contexts/MatrixClientContext';
|
||||
import { findMapStyleUrl } from '../location/findMapStyleUrl';
|
||||
import { getLocationShareErrorMessage, LocationShareError } from '../location/LocationShareErrors';
|
||||
|
||||
interface IState {
|
||||
error: Error;
|
||||
|
|
@ -117,14 +118,16 @@ export default class MLocationBody extends React.Component<IBodyProps, IState> {
|
|||
};
|
||||
|
||||
render(): React.ReactElement<HTMLDivElement> {
|
||||
return <LocationBodyContent
|
||||
mxEvent={this.props.mxEvent}
|
||||
bodyId={this.bodyId}
|
||||
markerId={this.markerId}
|
||||
error={this.state.error}
|
||||
tooltip={_t("Expand map")}
|
||||
onClick={this.onClick}
|
||||
/>;
|
||||
return this.state.error ?
|
||||
<LocationBodyFallbackContent error={this.state.error} event={this.props.mxEvent} /> :
|
||||
<LocationBodyContent
|
||||
mxEvent={this.props.mxEvent}
|
||||
bodyId={this.bodyId}
|
||||
markerId={this.markerId}
|
||||
error={this.state.error}
|
||||
tooltip={_t("Expand map")}
|
||||
onClick={this.onClick}
|
||||
/>;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -146,6 +149,23 @@ interface ILocationBodyContentProps {
|
|||
onZoomOut?: () => void;
|
||||
}
|
||||
|
||||
export const LocationBodyFallbackContent: React.FC<{ event: MatrixEvent, error: Error }> = ({ error, event }) => {
|
||||
const errorType = error?.message as LocationShareError;
|
||||
const message = `${_t('Unable to load map')}: ${getLocationShareErrorMessage(errorType)}`;
|
||||
|
||||
const locationFallback = isSelfLocation(event.getContent()) ?
|
||||
(_t('Shared their location: ') + event.getContent()?.body) :
|
||||
(_t('Shared a location: ') + event.getContent()?.body);
|
||||
|
||||
return <div className="mx_EventTile_body">
|
||||
<span className={errorType !== LocationShareError.MapStyleUrlNotConfigured ? "mx_EventTile_tileError" : ''}>
|
||||
{ message }
|
||||
</span>
|
||||
<br />
|
||||
{ locationFallback }
|
||||
</div>;
|
||||
};
|
||||
|
||||
export function LocationBodyContent(props: ILocationBodyContentProps):
|
||||
React.ReactElement<HTMLDivElement> {
|
||||
const mapDiv = <div
|
||||
|
|
@ -166,13 +186,6 @@ export function LocationBodyContent(props: ILocationBodyContentProps):
|
|||
);
|
||||
|
||||
return <div className="mx_MLocationBody">
|
||||
{
|
||||
props.error
|
||||
? <div className="mx_EventTile_tileError mx_EventTile_body">
|
||||
{ _t("Failed to load map") }
|
||||
</div>
|
||||
: null
|
||||
}
|
||||
{
|
||||
props.tooltip
|
||||
? <TooltipTarget
|
||||
|
|
@ -225,27 +238,6 @@ function ZoomButtons(props: IZoomButtonsProps): React.ReactElement<HTMLDivElemen
|
|||
</div>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Look up what map tile server style URL was provided in the homeserver's
|
||||
* .well-known location, or, failing that, in our local config, or, failing
|
||||
* that, defaults to the same tile server listed by matrix.org.
|
||||
*/
|
||||
export function findMapStyleUrl(): string {
|
||||
const mapStyleUrl = (
|
||||
getTileServerWellKnown()?.map_style_url ??
|
||||
SdkConfig.get().map_style_url
|
||||
);
|
||||
|
||||
if (!mapStyleUrl) {
|
||||
throw new Error(
|
||||
"'map_style_url' missing from homeserver .well-known area, and " +
|
||||
"missing from from config.json.",
|
||||
);
|
||||
}
|
||||
|
||||
return mapStyleUrl;
|
||||
}
|
||||
|
||||
export function createMap(
|
||||
coords: GeolocationCoordinates,
|
||||
interactive: boolean,
|
||||
|
|
@ -279,7 +271,7 @@ export function createMap(
|
|||
+ "valid URL and API key",
|
||||
e.error,
|
||||
);
|
||||
onError(e.error);
|
||||
onError(new Error(LocationShareError.MapStyleUrlNotReachable));
|
||||
});
|
||||
|
||||
return map;
|
||||
|
|
|
|||
|
|
@ -2134,7 +2134,9 @@
|
|||
"%(name)s wants to verify": "%(name)s wants to verify",
|
||||
"You sent a verification request": "You sent a verification request",
|
||||
"Expand map": "Expand map",
|
||||
"Failed to load map": "Failed to load map",
|
||||
"Unable to load map": "Unable to load map",
|
||||
"Shared their location: ": "Shared their location: ",
|
||||
"Shared a location: ": "Shared a location: ",
|
||||
"Zoom in": "Zoom in",
|
||||
"Zoom out": "Zoom out",
|
||||
"Can't edit poll": "Can't edit poll",
|
||||
|
|
@ -2182,6 +2184,8 @@
|
|||
"Failed to fetch your location. Please try again later.": "Failed to fetch your location. Please try again later.",
|
||||
"Timed out trying to fetch your location. Please try again later.": "Timed out trying to fetch your location. Please try again later.",
|
||||
"Unknown error fetching location. Please try again later.": "Unknown error fetching location. Please try again later.",
|
||||
"This homeserver is not configured to display maps.": "This homeserver is not configured to display maps.",
|
||||
"This homeserver is not configured correctly to display maps, or the configured map server may be unreachable.": "This homeserver is not configured correctly to display maps, or the configured map server may be unreachable.",
|
||||
"We couldn't send your location": "We couldn't send your location",
|
||||
"%(brand)s could not send your location. Please try again later.": "%(brand)s could not send your location. Please try again later.",
|
||||
"My current location": "My current location",
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ 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 maplibregl from "maplibre-gl";
|
||||
import { mount } from "enzyme";
|
||||
|
|
@ -28,8 +29,10 @@ import { LocationShareType } from "../../../../src/components/views/location/sha
|
|||
import MatrixClientContext from '../../../../src/contexts/MatrixClientContext';
|
||||
import { MatrixClientPeg } from '../../../../src/MatrixClientPeg';
|
||||
import { findByTestId } from '../../../test-utils';
|
||||
import { findMapStyleUrl } from '../../../../src/components/views/location/findMapStyleUrl';
|
||||
import { LocationShareError } from '../../../../src/components/views/location/LocationShareErrors';
|
||||
|
||||
jest.mock('../../../../src/components/views/messages/MLocationBody', () => ({
|
||||
jest.mock('../../../../src/components/views/location/findMapStyleUrl', () => ({
|
||||
findMapStyleUrl: jest.fn().mockReturnValue('tileserver.com'),
|
||||
}));
|
||||
|
||||
|
|
@ -139,6 +142,7 @@ describe("LocationPicker", () => {
|
|||
jest.spyOn(MatrixClientPeg, 'get').mockReturnValue(mockClient as unknown as MatrixClient);
|
||||
jest.clearAllMocks();
|
||||
mocked(mockMap).addControl.mockReset();
|
||||
mocked(findMapStyleUrl).mockReturnValue('tileserver.com');
|
||||
});
|
||||
|
||||
it('displays error when map emits an error', () => {
|
||||
|
|
@ -152,7 +156,25 @@ describe("LocationPicker", () => {
|
|||
wrapper.setProps({});
|
||||
});
|
||||
|
||||
expect(findByTestId(wrapper, 'location-picker-error').length).toBeTruthy();
|
||||
expect(findByTestId(wrapper, 'location-picker-error').find('p').text()).toEqual(
|
||||
"This homeserver is not configured correctly to display maps, "
|
||||
+ "or the configured map server may be unreachable.",
|
||||
);
|
||||
});
|
||||
|
||||
it('displays error when map display is not configured properly', () => {
|
||||
// suppress expected error log
|
||||
jest.spyOn(logger, 'error').mockImplementation(() => { });
|
||||
mocked(findMapStyleUrl).mockImplementation(() => {
|
||||
throw new Error(LocationShareError.MapStyleUrlNotConfigured);
|
||||
});
|
||||
|
||||
const wrapper = getComponent();
|
||||
wrapper.setProps({});
|
||||
|
||||
expect(findByTestId(wrapper, 'location-picker-error').find('p').text()).toEqual(
|
||||
"This homeserver is not configured to display maps.",
|
||||
);
|
||||
});
|
||||
|
||||
it('displays error when map setup throws', () => {
|
||||
|
|
@ -165,7 +187,10 @@ describe("LocationPicker", () => {
|
|||
const wrapper = getComponent();
|
||||
wrapper.setProps({});
|
||||
|
||||
expect(findByTestId(wrapper, 'location-picker-error').length).toBeTruthy();
|
||||
expect(findByTestId(wrapper, 'location-picker-error').find('p').text()).toEqual(
|
||||
"This homeserver is not configured correctly to display maps, "
|
||||
+ "or the configured map server may be unreachable.",
|
||||
);
|
||||
});
|
||||
|
||||
it('initiates map with geolocation', () => {
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ import { MatrixClientPeg } from '../../../../src/MatrixClientPeg';
|
|||
import { LocationShareType } from '../../../../src/components/views/location/shareLocation';
|
||||
import { findByTestId } from '../../../test-utils';
|
||||
|
||||
jest.mock('../../../../src/components/views/messages/MLocationBody', () => ({
|
||||
jest.mock('../../../../src/components/views/location/findMapStyleUrl', () => ({
|
||||
findMapStyleUrl: jest.fn().mockReturnValue('test'),
|
||||
}));
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
/*
|
||||
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 '../../../skinned-sdk';
|
||||
import { MapError } from '../../../../src/components/views/location/MapError';
|
||||
import { LocationShareError } from '../../../../src/components/views/location/LocationShareErrors';
|
||||
|
||||
describe('<MapError />', () => {
|
||||
const defaultProps = {
|
||||
onFinished: jest.fn(),
|
||||
error: LocationShareError.MapStyleUrlNotConfigured,
|
||||
};
|
||||
const getComponent = (props = {}) =>
|
||||
mount(<MapError {...defaultProps} {...props} />);
|
||||
|
||||
it('renders correctly for MapStyleUrlNotConfigured', () => {
|
||||
const component = getComponent();
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders correctly for MapStyleUrlNotReachable', () => {
|
||||
const component = getComponent({
|
||||
error: LocationShareError.MapStyleUrlNotReachable,
|
||||
});
|
||||
expect(component).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<MapError /> renders correctly for MapStyleUrlNotConfigured 1`] = `
|
||||
<MapError
|
||||
error="MapStyleUrlNotConfigured"
|
||||
onFinished={[MockFunction]}
|
||||
>
|
||||
<div
|
||||
className="mx_MapError"
|
||||
data-test-id="location-picker-error"
|
||||
>
|
||||
<div
|
||||
className="mx_MapError_icon"
|
||||
/>
|
||||
<Heading
|
||||
className="mx_MapError_heading"
|
||||
size="h3"
|
||||
>
|
||||
<h3
|
||||
className="mx_Heading_h3 mx_MapError_heading"
|
||||
>
|
||||
Unable to load map
|
||||
</h3>
|
||||
</Heading>
|
||||
<p>
|
||||
This homeserver is not configured to display maps.
|
||||
</p>
|
||||
<AccessibleButton
|
||||
element="button"
|
||||
kind="primary"
|
||||
onClick={[MockFunction]}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
>
|
||||
<button
|
||||
className="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
|
||||
onClick={[MockFunction]}
|
||||
onKeyDown={[Function]}
|
||||
onKeyUp={[Function]}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
>
|
||||
OK
|
||||
</button>
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
</MapError>
|
||||
`;
|
||||
|
||||
exports[`<MapError /> renders correctly for MapStyleUrlNotReachable 1`] = `
|
||||
<MapError
|
||||
error="MapStyleUrlNotReachable"
|
||||
onFinished={[MockFunction]}
|
||||
>
|
||||
<div
|
||||
className="mx_MapError"
|
||||
data-test-id="location-picker-error"
|
||||
>
|
||||
<div
|
||||
className="mx_MapError_icon"
|
||||
/>
|
||||
<Heading
|
||||
className="mx_MapError_heading"
|
||||
size="h3"
|
||||
>
|
||||
<h3
|
||||
className="mx_Heading_h3 mx_MapError_heading"
|
||||
>
|
||||
Unable to load map
|
||||
</h3>
|
||||
</Heading>
|
||||
<p>
|
||||
This homeserver is not configured correctly to display maps, or the configured map server may be unreachable.
|
||||
</p>
|
||||
<AccessibleButton
|
||||
element="button"
|
||||
kind="primary"
|
||||
onClick={[MockFunction]}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
>
|
||||
<button
|
||||
className="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
|
||||
onClick={[MockFunction]}
|
||||
onKeyDown={[Function]}
|
||||
onKeyUp={[Function]}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
>
|
||||
OK
|
||||
</button>
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
</MapError>
|
||||
`;
|
||||
|
|
@ -14,6 +14,9 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { mount } from "enzyme";
|
||||
import { mocked } from 'jest-mock';
|
||||
import { makeLocationContent } from "matrix-js-sdk/src/content-helpers";
|
||||
import {
|
||||
M_ASSET,
|
||||
|
|
@ -24,14 +27,30 @@ import {
|
|||
} from "matrix-js-sdk/src/@types/location";
|
||||
import { TEXT_NODE_TYPE } from "matrix-js-sdk/src/@types/extensible_events";
|
||||
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
|
||||
import maplibregl from 'maplibre-gl';
|
||||
import { logger } from 'matrix-js-sdk/src/logger';
|
||||
|
||||
import sdk from "../../../skinned-sdk";
|
||||
import {
|
||||
import MLocationBody, {
|
||||
createMapSiteLink,
|
||||
isSelfLocation,
|
||||
parseGeoUri,
|
||||
} from "../../../../src/components/views/messages/MLocationBody";
|
||||
import MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
|
||||
import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalinks";
|
||||
import { MediaEventHelper } from "../../../../src/utils/MediaEventHelper";
|
||||
import { getTileServerWellKnown } from "../../../../src/utils/WellKnownUtils";
|
||||
import SdkConfig from "../../../../src/SdkConfig";
|
||||
|
||||
jest.mock("../../../../src/utils/WellKnownUtils", () => ({
|
||||
getTileServerWellKnown: jest.fn(),
|
||||
}));
|
||||
|
||||
let EVENT_ID = 0;
|
||||
function nextId(): string {
|
||||
EVENT_ID++;
|
||||
return EVENT_ID.toString();
|
||||
}
|
||||
sdk.getComponent("views.messages.MLocationBody");
|
||||
|
||||
describe("MLocationBody", () => {
|
||||
|
|
@ -245,6 +264,59 @@ describe("MLocationBody", () => {
|
|||
expect(isSelfLocation(content)).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('<MLocationBody>', () => {
|
||||
describe('with error', () => {
|
||||
const mockClient = {
|
||||
on: jest.fn(),
|
||||
off: jest.fn(),
|
||||
};
|
||||
const defaultEvent = modernLocationEvent("geo:51.5076,-0.1276", LocationAssetType.Pin);
|
||||
const defaultProps = {
|
||||
mxEvent: defaultEvent,
|
||||
highlights: [],
|
||||
highlightLink: '',
|
||||
onHeightChanged: jest.fn(),
|
||||
onMessageAllowed: jest.fn(),
|
||||
permalinkCreator: {} as RoomPermalinkCreator,
|
||||
mediaEventHelper: {} as MediaEventHelper,
|
||||
};
|
||||
const getComponent = (props = {}) => mount(<MLocationBody {...defaultProps} {...props} />, {
|
||||
wrappingComponent: MatrixClientContext.Provider,
|
||||
wrappingComponentProps: { value: mockClient },
|
||||
});
|
||||
let sdkConfigSpy;
|
||||
|
||||
beforeEach(() => {
|
||||
// eat expected errors to keep console clean
|
||||
jest.spyOn(logger, 'error').mockImplementation(() => { });
|
||||
mocked(getTileServerWellKnown).mockReturnValue({});
|
||||
sdkConfigSpy = jest.spyOn(SdkConfig, 'get').mockReturnValue({});
|
||||
});
|
||||
|
||||
afterAll(() => {
|
||||
sdkConfigSpy.mockRestore();
|
||||
jest.spyOn(logger, 'error').mockRestore();
|
||||
});
|
||||
|
||||
it('displays correct fallback content without error style when map_style_url is not configured', () => {
|
||||
const component = getComponent();
|
||||
expect(component.find(".mx_EventTile_body")).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('displays correct fallback content when map_style_url is misconfigured', () => {
|
||||
const mockMap = new maplibregl.Map();
|
||||
mocked(getTileServerWellKnown).mockReturnValue({ map_style_url: 'bad-tile-server.com' });
|
||||
const component = getComponent();
|
||||
|
||||
// simulate error initialising map in maplibregl
|
||||
// @ts-ignore
|
||||
mockMap.emit('error', { status: 404 });
|
||||
component.setProps({});
|
||||
expect(component.find(".mx_EventTile_body")).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function oldLocationEvent(geoUri: string): MatrixEvent {
|
||||
|
|
@ -261,7 +333,7 @@ function oldLocationEvent(geoUri: string): MatrixEvent {
|
|||
);
|
||||
}
|
||||
|
||||
function modernLocationEvent(geoUri: string): MatrixEvent {
|
||||
function modernLocationEvent(geoUri: string, assetType?: LocationAssetType): MatrixEvent {
|
||||
return new MatrixEvent(
|
||||
{
|
||||
"event_id": nextId(),
|
||||
|
|
@ -271,6 +343,7 @@ function modernLocationEvent(geoUri: string): MatrixEvent {
|
|||
geoUri,
|
||||
252523,
|
||||
"Human-readable label",
|
||||
assetType,
|
||||
),
|
||||
},
|
||||
);
|
||||
|
|
@ -290,9 +363,3 @@ function nonLocationEvent(): MatrixEvent {
|
|||
},
|
||||
);
|
||||
}
|
||||
|
||||
let EVENT_ID = 0;
|
||||
function nextId(): string {
|
||||
EVENT_ID++;
|
||||
return EVENT_ID.toString();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,29 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`MLocationBody <MLocationBody> with error displays correct fallback content when map_style_url is misconfigured 1`] = `
|
||||
<div
|
||||
className="mx_EventTile_body"
|
||||
>
|
||||
<span
|
||||
className="mx_EventTile_tileError"
|
||||
>
|
||||
Unable to load map: This homeserver is not configured correctly to display maps, or the configured map server may be unreachable.
|
||||
</span>
|
||||
<br />
|
||||
Shared a location: Found at geo:51.5076,-0.1276 at 2021-12-21T12:22+0000
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`MLocationBody <MLocationBody> with error displays correct fallback content without error style when map_style_url is not configured 1`] = `
|
||||
<div
|
||||
className="mx_EventTile_body"
|
||||
>
|
||||
<span
|
||||
className=""
|
||||
>
|
||||
Unable to load map: This homeserver is not configured to display maps.
|
||||
</span>
|
||||
<br />
|
||||
Shared a location: Found at geo:51.5076,-0.1276 at 2021-12-21T12:22+0000
|
||||
</div>
|
||||
`;
|
||||
Loading…
Reference in New Issue