LLS: expose way to enable live sharing labs flag from location dialog (#8416)
* add state for waiting for labs flag Signed-off-by: Kerry Archibald <kerrya@element.io> * add enable live share component Signed-off-by: Kerry Archibald <kerrya@element.io> * test enabling live share labs flag Signed-off-by: Kerry Archibald <kerrya@element.io>
This commit is contained in:
Kerry
GitHub
parent
45180111d0
commit
699a9aeaaf
7 changed files with 330 additions and 35 deletions
|
|
@ -31,13 +31,17 @@ import { MatrixClientPeg } from '../../../../src/MatrixClientPeg';
|
|||
import { LocationShareType } from '../../../../src/components/views/location/shareLocation';
|
||||
import {
|
||||
findByTagAndTestId,
|
||||
flushPromises,
|
||||
findByTestId,
|
||||
flushPromisesWithFakeTimers,
|
||||
getMockClientWithEventEmitter,
|
||||
setupAsyncStoreWithClient,
|
||||
} from '../../../test-utils';
|
||||
import Modal from '../../../../src/Modal';
|
||||
import { DEFAULT_DURATION_MS } from '../../../../src/components/views/location/LiveDurationDropdown';
|
||||
import { OwnBeaconStore } from '../../../../src/stores/OwnBeaconStore';
|
||||
import { SettingLevel } from '../../../../src/settings/SettingLevel';
|
||||
|
||||
jest.useFakeTimers();
|
||||
|
||||
jest.mock('../../../../src/utils/location/findMapStyleUrl', () => ({
|
||||
findMapStyleUrl: jest.fn().mockReturnValue('test'),
|
||||
|
|
@ -45,7 +49,10 @@ jest.mock('../../../../src/utils/location/findMapStyleUrl', () => ({
|
|||
|
||||
jest.mock('../../../../src/settings/SettingsStore', () => ({
|
||||
getValue: jest.fn(),
|
||||
setValue: jest.fn(),
|
||||
monitorSetting: jest.fn(),
|
||||
watchSetting: jest.fn(),
|
||||
unwatchSetting: jest.fn(),
|
||||
}));
|
||||
|
||||
jest.mock('../../../../src/stores/OwnProfileStore', () => ({
|
||||
|
|
@ -115,6 +122,8 @@ describe('<LocationShareMenu />', () => {
|
|||
jest.spyOn(MatrixClientPeg, 'get').mockReturnValue(mockClient as unknown as MatrixClient);
|
||||
mocked(Modal).createTrackedDialog.mockClear();
|
||||
|
||||
jest.clearAllMocks();
|
||||
|
||||
await makeOwnBeaconStore();
|
||||
});
|
||||
|
||||
|
|
@ -150,15 +159,17 @@ describe('<LocationShareMenu />', () => {
|
|||
describe('when only Own share type is enabled', () => {
|
||||
beforeEach(() => enableSettings([]));
|
||||
|
||||
it('renders location picker when only Own share type is enabled', () => {
|
||||
it('renders own and live location options', () => {
|
||||
const component = getComponent();
|
||||
expect(component.find('ShareType').length).toBe(0);
|
||||
expect(component.find('LocationPicker').length).toBe(1);
|
||||
expect(getShareTypeOption(component, LocationShareType.Own).length).toBe(1);
|
||||
expect(getShareTypeOption(component, LocationShareType.Live).length).toBe(1);
|
||||
});
|
||||
|
||||
it('does not render back button when only Own share type is enabled', () => {
|
||||
it('renders back button from location picker screen', () => {
|
||||
const component = getComponent();
|
||||
expect(getBackButton(component).length).toBe(0);
|
||||
setShareType(component, LocationShareType.Own);
|
||||
|
||||
expect(getBackButton(component).length).toBe(1);
|
||||
});
|
||||
|
||||
it('clicking cancel button from location picker closes dialog', () => {
|
||||
|
|
@ -176,6 +187,8 @@ describe('<LocationShareMenu />', () => {
|
|||
const onFinished = jest.fn();
|
||||
const component = getComponent({ onFinished });
|
||||
|
||||
setShareType(component, LocationShareType.Own);
|
||||
|
||||
setLocation(component);
|
||||
|
||||
act(() => {
|
||||
|
|
@ -274,34 +287,88 @@ describe('<LocationShareMenu />', () => {
|
|||
});
|
||||
});
|
||||
|
||||
describe('with live location and pin drop enabled', () => {
|
||||
beforeEach(() => enableSettings([
|
||||
"feature_location_share_pin_drop",
|
||||
"feature_location_share_live",
|
||||
]));
|
||||
describe('with live location disabled', () => {
|
||||
beforeEach(() => enableSettings([]));
|
||||
|
||||
it('renders share type switch with all 3 options', () => {
|
||||
// Given pin and live feature flags are enabled
|
||||
// When I click Location
|
||||
const getToggle = (component: ReactWrapper) =>
|
||||
findByTestId(component, 'enable-live-share-toggle').find('[role="switch"]').at(0);
|
||||
const getSubmitEnableButton = (component: ReactWrapper) =>
|
||||
findByTestId(component, 'enable-live-share-submit').at(0);
|
||||
|
||||
it('goes to labs flag screen after live options is clicked', () => {
|
||||
const onFinished = jest.fn();
|
||||
const component = getComponent({ onFinished });
|
||||
|
||||
setShareType(component, LocationShareType.Live);
|
||||
|
||||
expect(findByTestId(component, 'location-picker-enable-live-share')).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('disables OK button when labs flag is not enabled', () => {
|
||||
const component = getComponent();
|
||||
|
||||
// The the Location picker is not visible yet
|
||||
expect(component.find('LocationPicker').length).toBe(0);
|
||||
setShareType(component, LocationShareType.Live);
|
||||
|
||||
// And all 3 buttons are visible on the LocationShare dialog
|
||||
expect(
|
||||
getShareTypeOption(component, LocationShareType.Own).length,
|
||||
).toBe(1);
|
||||
expect(getSubmitEnableButton(component).props()['disabled']).toBeTruthy();
|
||||
});
|
||||
|
||||
expect(
|
||||
getShareTypeOption(component, LocationShareType.Pin).length,
|
||||
).toBe(1);
|
||||
it('enables OK button when labs flag is toggled to enabled', () => {
|
||||
const component = getComponent();
|
||||
|
||||
const liveButton = getShareTypeOption(component, LocationShareType.Live);
|
||||
expect(liveButton.length).toBe(1);
|
||||
setShareType(component, LocationShareType.Live);
|
||||
|
||||
// The live location button is enabled
|
||||
expect(liveButton.hasClass("mx_AccessibleButton_disabled")).toBeFalsy();
|
||||
act(() => {
|
||||
getToggle(component).simulate('click');
|
||||
component.setProps({});
|
||||
});
|
||||
expect(getSubmitEnableButton(component).props()['disabled']).toBeFalsy();
|
||||
});
|
||||
|
||||
it('enables live share setting on ok button submit', () => {
|
||||
const component = getComponent();
|
||||
|
||||
setShareType(component, LocationShareType.Live);
|
||||
|
||||
act(() => {
|
||||
getToggle(component).simulate('click');
|
||||
component.setProps({});
|
||||
});
|
||||
|
||||
act(() => {
|
||||
getSubmitEnableButton(component).simulate('click');
|
||||
});
|
||||
|
||||
expect(SettingsStore.setValue).toHaveBeenCalledWith(
|
||||
'feature_location_share_live', undefined, SettingLevel.DEVICE, true,
|
||||
);
|
||||
});
|
||||
|
||||
it('navigates to location picker when live share is enabled in settings store', () => {
|
||||
// @ts-ignore
|
||||
mocked(SettingsStore.watchSetting).mockImplementation((featureName, roomId, callback) => {
|
||||
callback(featureName, roomId, SettingLevel.DEVICE, '', '');
|
||||
setTimeout(() => {
|
||||
callback(featureName, roomId, SettingLevel.DEVICE, '', '');
|
||||
}, 1000);
|
||||
});
|
||||
mocked(SettingsStore.getValue).mockReturnValue(false);
|
||||
const component = getComponent();
|
||||
|
||||
setShareType(component, LocationShareType.Live);
|
||||
|
||||
// we're on enable live share screen
|
||||
expect(findByTestId(component, 'location-picker-enable-live-share').length).toBeTruthy();
|
||||
|
||||
act(() => {
|
||||
mocked(SettingsStore.getValue).mockReturnValue(true);
|
||||
// advance so watchSetting will update the value
|
||||
jest.runAllTimers();
|
||||
});
|
||||
|
||||
component.setProps({});
|
||||
|
||||
// advanced to location picker
|
||||
expect(component.find('LocationPicker').length).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -351,7 +418,8 @@ describe('<LocationShareMenu />', () => {
|
|||
component.setProps({});
|
||||
});
|
||||
|
||||
await flushPromises();
|
||||
await flushPromisesWithFakeTimers();
|
||||
await flushPromisesWithFakeTimers();
|
||||
|
||||
expect(logSpy).toHaveBeenCalledWith("We couldn't start sharing your live location", error);
|
||||
expect(mocked(Modal).createTrackedDialog).toHaveBeenCalled();
|
||||
|
|
|
|||
|
|
@ -0,0 +1,99 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
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"
|
||||
>
|
||||
<StyledLiveBeaconIcon
|
||||
className="mx_EnableLiveShare_icon"
|
||||
>
|
||||
<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>
|
||||
<p
|
||||
className="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
|
||||
className="mx_SettingsFlag "
|
||||
>
|
||||
<span
|
||||
className="mx_SettingsFlag_label"
|
||||
>
|
||||
Enable live location sharing
|
||||
</span>
|
||||
<_default
|
||||
aria-label="Enable live location sharing"
|
||||
checked={false}
|
||||
onChange={[Function]}
|
||||
>
|
||||
<AccessibleButton
|
||||
aria-checked={false}
|
||||
aria-disabled={false}
|
||||
aria-label="Enable live location sharing"
|
||||
className="mx_ToggleSwitch mx_ToggleSwitch_enabled"
|
||||
element="div"
|
||||
onClick={[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"
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
onKeyUp={[Function]}
|
||||
role="switch"
|
||||
tabIndex={0}
|
||||
>
|
||||
<div
|
||||
className="mx_ToggleSwitch_ball"
|
||||
/>
|
||||
</div>
|
||||
</AccessibleButton>
|
||||
</_default>
|
||||
</div>
|
||||
</LabelledToggleSwitch>
|
||||
<AccessibleButton
|
||||
className="mx_EnableLiveShare_button"
|
||||
data-test-id="enable-live-share-submit"
|
||||
disabled={true}
|
||||
element="button"
|
||||
kind="primary"
|
||||
onClick={[Function]}
|
||||
role="button"
|
||||
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"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
>
|
||||
OK
|
||||
</button>
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
`;
|
||||
Loading…
Add table
Add a link
Reference in a new issue