Live location sharing - update live location tiles (PSF-1027) (#8649)
* update map svg Signed-off-by: Kerry Archibald <kerrya@element.io> * add map fallback component, update styls Signed-off-by: Kerry Archibald <kerrya@element.io> * update purple location icon style Signed-off-by: Kerry Archibald <kerrya@element.io> * fussy import ordering Signed-off-by: Kerry Archibald <kerrya@element.io> * tidy Signed-off-by: Kerry Archibald <kerrya@element.io>
This commit is contained in:
parent
30b03776b8
commit
804ddbb332
11 changed files with 182 additions and 85 deletions
|
@ -1,37 +1,83 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<BeaconViewDialog /> renders a fallback when no live beacons remain 1`] = `
|
||||
<div
|
||||
className="mx_BeaconViewDialog_map mx_BeaconViewDialog_mapFallback"
|
||||
data-test-id="beacon-view-dialog-map-fallback"
|
||||
>
|
||||
<div
|
||||
className="mx_BeaconViewDialog_mapFallbackIcon"
|
||||
/>
|
||||
<span
|
||||
className="mx_BeaconViewDialog_mapFallbackMessage"
|
||||
>
|
||||
No live locations
|
||||
</span>
|
||||
<AccessibleButton
|
||||
data-test-id="beacon-view-dialog-fallback-close"
|
||||
element="div"
|
||||
kind="primary"
|
||||
onClick={[MockFunction]}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
Array [
|
||||
<MapFallback
|
||||
className="mx_BeaconViewDialog_map"
|
||||
data-test-id="beacon-view-dialog-map-fallback"
|
||||
>
|
||||
<div
|
||||
className="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
|
||||
className="mx_MapFallback mx_BeaconViewDialog_map"
|
||||
data-test-id="beacon-view-dialog-map-fallback"
|
||||
>
|
||||
<div
|
||||
className="mx_MapFallback_bg"
|
||||
/>
|
||||
<div
|
||||
className="mx_MapFallback_icon"
|
||||
/>
|
||||
<span
|
||||
className="mx_BeaconViewDialog_mapFallbackMessage"
|
||||
>
|
||||
No live locations
|
||||
</span>
|
||||
<AccessibleButton
|
||||
data-test-id="beacon-view-dialog-fallback-close"
|
||||
element="div"
|
||||
kind="primary"
|
||||
onClick={[MockFunction]}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
>
|
||||
<div
|
||||
className="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
|
||||
data-test-id="beacon-view-dialog-fallback-close"
|
||||
onClick={[MockFunction]}
|
||||
onKeyDown={[Function]}
|
||||
onKeyUp={[Function]}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
>
|
||||
Close
|
||||
</div>
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
</MapFallback>,
|
||||
<div
|
||||
className="mx_MapFallback mx_BeaconViewDialog_map"
|
||||
data-test-id="beacon-view-dialog-map-fallback"
|
||||
>
|
||||
<div
|
||||
className="mx_MapFallback_bg"
|
||||
/>
|
||||
<div
|
||||
className="mx_MapFallback_icon"
|
||||
/>
|
||||
<span
|
||||
className="mx_BeaconViewDialog_mapFallbackMessage"
|
||||
>
|
||||
No live locations
|
||||
</span>
|
||||
<AccessibleButton
|
||||
data-test-id="beacon-view-dialog-fallback-close"
|
||||
element="div"
|
||||
kind="primary"
|
||||
onClick={[MockFunction]}
|
||||
onKeyDown={[Function]}
|
||||
onKeyUp={[Function]}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
>
|
||||
Close
|
||||
</div>
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
<div
|
||||
className="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
|
||||
data-test-id="beacon-view-dialog-fallback-close"
|
||||
onClick={[MockFunction]}
|
||||
onKeyDown={[Function]}
|
||||
onKeyUp={[Function]}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
>
|
||||
Close
|
||||
</div>
|
||||
</AccessibleButton>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
|
|
@ -116,7 +116,7 @@ describe('<MBeaconBody />', () => {
|
|||
makeRoomWithStateEvents([beaconInfoEvent], { roomId, mockClient });
|
||||
const component = getComponent({ mxEvent: beaconInfoEvent });
|
||||
act(() => {
|
||||
component.find('.mx_MBeaconBody_map').simulate('click');
|
||||
component.find('.mx_MBeaconBody_map').at(0).simulate('click');
|
||||
});
|
||||
|
||||
expect(modalSpy).not.toHaveBeenCalled();
|
||||
|
@ -230,7 +230,7 @@ describe('<MBeaconBody />', () => {
|
|||
const component = getComponent({ mxEvent: aliceBeaconInfo });
|
||||
|
||||
act(() => {
|
||||
component.find('.mx_MBeaconBody_map').simulate('click');
|
||||
component.find('.mx_MBeaconBody_map').at(0).simulate('click');
|
||||
});
|
||||
|
||||
expect(modalSpy).not.toHaveBeenCalled();
|
||||
|
@ -264,7 +264,7 @@ describe('<MBeaconBody />', () => {
|
|||
const component = getComponent({ mxEvent: aliceBeaconInfo });
|
||||
|
||||
act(() => {
|
||||
component.find('.mx_MBeaconBody_map').simulate('click');
|
||||
component.find('.mx_MBeaconBody_map').at(0).simulate('click');
|
||||
});
|
||||
|
||||
expect(modalSpy).not.toHaveBeenCalled();
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue