Port location unit tests from enzyme to react-testing-library (#10181)
* SmartMarker test to rtl * LocationPicker to rtl * LocationViewDialog to rtl * LocationShareMenu to rtl * use toBeDisabled assertion
This commit is contained in:
Kerry
GitHub
parent
a06163ee98
commit
3fafa4b58d
16 changed files with 290 additions and 613 deletions
|
|
@ -0,0 +1,9 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`LocationPicker <LocationPicker /> for Live location share type updates selected duration 1`] = `
|
||||
<div
|
||||
data-test-id="live-duration-option-3600000"
|
||||
>
|
||||
Share for 1h
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -2,116 +2,53 @@
|
|||
|
||||
exports[`<LocationShareMenu /> with live location disabled goes to labs flag screen after live options is clicked 1`] = `
|
||||
<div
|
||||
className="mx_EnableLiveShare"
|
||||
data-test-id="location-picker-enable-live-share"
|
||||
class="mx_EnableLiveShare"
|
||||
data-testid="location-picker-enable-live-share"
|
||||
>
|
||||
<StyledLiveBeaconIcon
|
||||
className="mx_EnableLiveShare_icon"
|
||||
<div
|
||||
class="mx_StyledLiveBeaconIcon mx_EnableLiveShare_icon"
|
||||
/>
|
||||
<h3
|
||||
class="mx_Heading_h3 mx_EnableLiveShare_heading"
|
||||
>
|
||||
<div
|
||||
className="mx_StyledLiveBeaconIcon mx_EnableLiveShare_icon"
|
||||
/>
|
||||
</StyledLiveBeaconIcon>
|
||||
<Heading
|
||||
className="mx_EnableLiveShare_heading"
|
||||
size="h3"
|
||||
>
|
||||
<h3
|
||||
className="mx_Heading_h3 mx_EnableLiveShare_heading"
|
||||
>
|
||||
Live location sharing
|
||||
</h3>
|
||||
</Heading>
|
||||
Live location sharing
|
||||
</h3>
|
||||
<p
|
||||
className="mx_EnableLiveShare_description"
|
||||
class="mx_EnableLiveShare_description"
|
||||
>
|
||||
Please note: this is a labs feature using a temporary implementation. This means you will not be able to delete your location history, and advanced users will be able to see your location history even after you stop sharing your live location with this room.
|
||||
</p>
|
||||
<LabelledToggleSwitch
|
||||
data-test-id="enable-live-share-toggle"
|
||||
label="Enable live location sharing"
|
||||
onChange={[Function]}
|
||||
value={false}
|
||||
<div
|
||||
class="mx_SettingsFlag"
|
||||
data-testid="enable-live-share-toggle"
|
||||
>
|
||||
<span
|
||||
class="mx_SettingsFlag_label"
|
||||
>
|
||||
Enable live location sharing
|
||||
</span>
|
||||
<div
|
||||
className="mx_SettingsFlag"
|
||||
aria-checked="false"
|
||||
aria-disabled="false"
|
||||
aria-label="Enable live location sharing"
|
||||
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
|
||||
role="switch"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
className="mx_SettingsFlag_label"
|
||||
>
|
||||
Enable live location sharing
|
||||
</span>
|
||||
<_default
|
||||
checked={false}
|
||||
onChange={[Function]}
|
||||
title="Enable live location sharing"
|
||||
>
|
||||
<AccessibleTooltipButton
|
||||
aria-checked={false}
|
||||
aria-disabled={false}
|
||||
className="mx_ToggleSwitch mx_ToggleSwitch_enabled"
|
||||
onClick={[Function]}
|
||||
role="switch"
|
||||
title="Enable live location sharing"
|
||||
>
|
||||
<AccessibleButton
|
||||
aria-checked={false}
|
||||
aria-disabled={false}
|
||||
aria-label="Enable live location sharing"
|
||||
className="mx_ToggleSwitch mx_ToggleSwitch_enabled"
|
||||
element="div"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onMouseLeave={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
role="switch"
|
||||
tabIndex={0}
|
||||
>
|
||||
<div
|
||||
aria-checked={false}
|
||||
aria-disabled={false}
|
||||
aria-label="Enable live location sharing"
|
||||
className="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_enabled"
|
||||
onBlur={[Function]}
|
||||
onClick={[Function]}
|
||||
onFocus={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
onKeyUp={[Function]}
|
||||
onMouseLeave={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
role="switch"
|
||||
tabIndex={0}
|
||||
>
|
||||
<div
|
||||
className="mx_ToggleSwitch_ball"
|
||||
/>
|
||||
</div>
|
||||
</AccessibleButton>
|
||||
</AccessibleTooltipButton>
|
||||
</_default>
|
||||
<div
|
||||
class="mx_ToggleSwitch_ball"
|
||||
/>
|
||||
</div>
|
||||
</LabelledToggleSwitch>
|
||||
<AccessibleButton
|
||||
className="mx_EnableLiveShare_button"
|
||||
data-test-id="enable-live-share-submit"
|
||||
disabled={true}
|
||||
element="button"
|
||||
kind="primary"
|
||||
onClick={[Function]}
|
||||
</div>
|
||||
<button
|
||||
aria-disabled="true"
|
||||
class="mx_AccessibleButton mx_EnableLiveShare_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary mx_AccessibleButton_disabled"
|
||||
data-testid="enable-live-share-submit"
|
||||
disabled=""
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
tabindex="0"
|
||||
>
|
||||
<button
|
||||
aria-disabled={true}
|
||||
className="mx_AccessibleButton mx_EnableLiveShare_button mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary mx_AccessibleButton_disabled"
|
||||
data-test-id="enable-live-share-submit"
|
||||
disabled={true}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
>
|
||||
OK
|
||||
</button>
|
||||
</AccessibleButton>
|
||||
OK
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,219 +1,49 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<LocationViewDialog /> renders map correctly 1`] = `
|
||||
<Map
|
||||
allowGeolocate={true}
|
||||
centerGeoUri="geo:51.5076,-0.1276"
|
||||
className="mx_LocationViewDialog_map"
|
||||
id="mx_LocationViewDialog_$2"
|
||||
interactive={true}
|
||||
onError={[Function]}
|
||||
<div
|
||||
class="mx_Map mx_LocationViewDialog_map"
|
||||
id="mx_Map_mx_LocationViewDialog_$2"
|
||||
>
|
||||
<div
|
||||
className="mx_Map mx_LocationViewDialog_map"
|
||||
id="mx_Map_mx_LocationViewDialog_$2"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<SmartMarker
|
||||
geoUri="geo:51.5076,-0.1276"
|
||||
<span>
|
||||
<div
|
||||
class="mx_Marker mx_Marker_defaultColor"
|
||||
id="mx_LocationViewDialog_$2-marker"
|
||||
map={
|
||||
MockMap {
|
||||
"_events": {
|
||||
"error": [Function],
|
||||
},
|
||||
"_eventsCount": 1,
|
||||
"_maxListeners": undefined,
|
||||
"addControl": [MockFunction] {
|
||||
"calls": [
|
||||
[
|
||||
MockAttributionControl {},
|
||||
"top-right",
|
||||
],
|
||||
[
|
||||
MockGeolocateControl {
|
||||
"_events": {
|
||||
"error": [Function],
|
||||
},
|
||||
"_eventsCount": 1,
|
||||
"_maxListeners": undefined,
|
||||
"trigger": [MockFunction],
|
||||
Symbol(kCapture): false,
|
||||
},
|
||||
],
|
||||
],
|
||||
"results": [
|
||||
{
|
||||
"type": "return",
|
||||
"value": undefined,
|
||||
},
|
||||
{
|
||||
"type": "return",
|
||||
"value": undefined,
|
||||
},
|
||||
],
|
||||
},
|
||||
"fitBounds": [MockFunction],
|
||||
"removeControl": [MockFunction],
|
||||
"setCenter": [MockFunction] {
|
||||
"calls": [
|
||||
[
|
||||
{
|
||||
"lat": 51.5076,
|
||||
"lon": -0.1276,
|
||||
},
|
||||
],
|
||||
],
|
||||
"results": [
|
||||
{
|
||||
"type": "return",
|
||||
"value": undefined,
|
||||
},
|
||||
],
|
||||
},
|
||||
"setStyle": [MockFunction],
|
||||
"zoomIn": [MockFunction],
|
||||
"zoomOut": [MockFunction],
|
||||
Symbol(kCapture): false,
|
||||
}
|
||||
}
|
||||
>
|
||||
<span>
|
||||
<ForwardRef
|
||||
id="mx_LocationViewDialog_$2-marker"
|
||||
>
|
||||
<div
|
||||
className="mx_Marker mx_Marker_defaultColor"
|
||||
id="mx_LocationViewDialog_$2-marker"
|
||||
>
|
||||
<OptionalTooltip>
|
||||
<div
|
||||
className="mx_Marker_border"
|
||||
>
|
||||
<div
|
||||
className="mx_Marker_icon"
|
||||
/>
|
||||
</div>
|
||||
</OptionalTooltip>
|
||||
</div>
|
||||
</ForwardRef>
|
||||
</span>
|
||||
</SmartMarker>
|
||||
<ZoomButtons
|
||||
map={
|
||||
MockMap {
|
||||
"_events": {
|
||||
"error": [Function],
|
||||
},
|
||||
"_eventsCount": 1,
|
||||
"_maxListeners": undefined,
|
||||
"addControl": [MockFunction] {
|
||||
"calls": [
|
||||
[
|
||||
MockAttributionControl {},
|
||||
"top-right",
|
||||
],
|
||||
[
|
||||
MockGeolocateControl {
|
||||
"_events": {
|
||||
"error": [Function],
|
||||
},
|
||||
"_eventsCount": 1,
|
||||
"_maxListeners": undefined,
|
||||
"trigger": [MockFunction],
|
||||
Symbol(kCapture): false,
|
||||
},
|
||||
],
|
||||
],
|
||||
"results": [
|
||||
{
|
||||
"type": "return",
|
||||
"value": undefined,
|
||||
},
|
||||
{
|
||||
"type": "return",
|
||||
"value": undefined,
|
||||
},
|
||||
],
|
||||
},
|
||||
"fitBounds": [MockFunction],
|
||||
"removeControl": [MockFunction],
|
||||
"setCenter": [MockFunction] {
|
||||
"calls": [
|
||||
[
|
||||
{
|
||||
"lat": 51.5076,
|
||||
"lon": -0.1276,
|
||||
},
|
||||
],
|
||||
],
|
||||
"results": [
|
||||
{
|
||||
"type": "return",
|
||||
"value": undefined,
|
||||
},
|
||||
],
|
||||
},
|
||||
"setStyle": [MockFunction],
|
||||
"zoomIn": [MockFunction],
|
||||
"zoomOut": [MockFunction],
|
||||
Symbol(kCapture): false,
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="mx_ZoomButtons"
|
||||
class="mx_Marker_border"
|
||||
>
|
||||
<AccessibleButton
|
||||
className="mx_ZoomButtons_button"
|
||||
data-testid="map-zoom-in-button"
|
||||
element="div"
|
||||
onClick={[Function]}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
title="Zoom in"
|
||||
>
|
||||
<div
|
||||
className="mx_AccessibleButton mx_ZoomButtons_button"
|
||||
data-testid="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-testid="map-zoom-out-button"
|
||||
element="div"
|
||||
onClick={[Function]}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
title="Zoom out"
|
||||
>
|
||||
<div
|
||||
className="mx_AccessibleButton mx_ZoomButtons_button"
|
||||
data-testid="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
|
||||
class="mx_Marker_icon"
|
||||
/>
|
||||
</div>
|
||||
</ZoomButtons>
|
||||
</div>
|
||||
</span>
|
||||
<div
|
||||
class="mx_ZoomButtons"
|
||||
>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_ZoomButtons_button"
|
||||
data-testid="map-zoom-in-button"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
title="Zoom in"
|
||||
>
|
||||
<div
|
||||
class="mx_ZoomButtons_icon"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mx_AccessibleButton mx_ZoomButtons_button"
|
||||
data-testid="map-zoom-out-button"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
title="Zoom out"
|
||||
>
|
||||
<div
|
||||
class="mx_ZoomButtons_icon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Map>
|
||||
</div>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ exports[`<MapError /> applies class when isMinimised is truthy 1`] = `
|
|||
<div>
|
||||
<div
|
||||
class="mx_MapError test mx_MapError_isMinimised"
|
||||
data-test-id="map-rendering-error"
|
||||
data-testid="map-rendering-error"
|
||||
>
|
||||
<div
|
||||
class="mx_MapError_icon"
|
||||
|
|
@ -34,7 +34,7 @@ exports[`<MapError /> renders correctly for MapStyleUrlNotConfigured 1`] = `
|
|||
<div>
|
||||
<div
|
||||
class="mx_MapError test"
|
||||
data-test-id="map-rendering-error"
|
||||
data-testid="map-rendering-error"
|
||||
>
|
||||
<div
|
||||
class="mx_MapError_icon"
|
||||
|
|
@ -64,7 +64,7 @@ exports[`<MapError /> renders correctly for MapStyleUrlNotReachable 1`] = `
|
|||
<div>
|
||||
<div
|
||||
class="mx_MapError test"
|
||||
data-test-id="map-rendering-error"
|
||||
data-testid="map-rendering-error"
|
||||
>
|
||||
<div
|
||||
class="mx_MapError_icon"
|
||||
|
|
|
|||
|
|
@ -1,79 +1,37 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<SmartMarker /> creates a marker on mount 1`] = `
|
||||
<SmartMarker
|
||||
geoUri="geo:43.2,54.6"
|
||||
map={
|
||||
MockMap {
|
||||
"_events": {},
|
||||
"_eventsCount": 0,
|
||||
"_maxListeners": undefined,
|
||||
"addControl": [MockFunction],
|
||||
"fitBounds": [MockFunction],
|
||||
"removeControl": [MockFunction],
|
||||
"setCenter": [MockFunction],
|
||||
"setStyle": [MockFunction],
|
||||
"zoomIn": [MockFunction],
|
||||
"zoomOut": [MockFunction],
|
||||
Symbol(kCapture): false,
|
||||
}
|
||||
}
|
||||
>
|
||||
<div>
|
||||
<span>
|
||||
<ForwardRef>
|
||||
<div
|
||||
class="mx_Marker mx_Marker_defaultColor"
|
||||
>
|
||||
<div
|
||||
className="mx_Marker mx_Marker_defaultColor"
|
||||
class="mx_Marker_border"
|
||||
>
|
||||
<OptionalTooltip>
|
||||
<div
|
||||
className="mx_Marker_border"
|
||||
>
|
||||
<div
|
||||
className="mx_Marker_icon"
|
||||
/>
|
||||
</div>
|
||||
</OptionalTooltip>
|
||||
<div
|
||||
class="mx_Marker_icon"
|
||||
/>
|
||||
</div>
|
||||
</ForwardRef>
|
||||
</div>
|
||||
</span>
|
||||
</SmartMarker>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<SmartMarker /> removes marker on unmount 1`] = `
|
||||
<SmartMarker
|
||||
geoUri="geo:43.2,54.6"
|
||||
map={
|
||||
MockMap {
|
||||
"_events": {},
|
||||
"_eventsCount": 0,
|
||||
"_maxListeners": undefined,
|
||||
"addControl": [MockFunction],
|
||||
"fitBounds": [MockFunction],
|
||||
"removeControl": [MockFunction],
|
||||
"setCenter": [MockFunction],
|
||||
"setStyle": [MockFunction],
|
||||
"zoomIn": [MockFunction],
|
||||
"zoomOut": [MockFunction],
|
||||
Symbol(kCapture): false,
|
||||
}
|
||||
}
|
||||
>
|
||||
<div>
|
||||
<span>
|
||||
<ForwardRef>
|
||||
<div
|
||||
class="mx_Marker mx_Marker_defaultColor"
|
||||
>
|
||||
<div
|
||||
className="mx_Marker mx_Marker_defaultColor"
|
||||
class="mx_Marker_border"
|
||||
>
|
||||
<OptionalTooltip>
|
||||
<div
|
||||
className="mx_Marker_border"
|
||||
>
|
||||
<div
|
||||
className="mx_Marker_icon"
|
||||
/>
|
||||
</div>
|
||||
</OptionalTooltip>
|
||||
<div
|
||||
class="mx_Marker_icon"
|
||||
/>
|
||||
</div>
|
||||
</ForwardRef>
|
||||
</div>
|
||||
</span>
|
||||
</SmartMarker>
|
||||
</div>
|
||||
`;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue