OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Enable the live location share button (#8056)

pull/21833/head
Andy Balaam 2022-03-16 09:37:09 +00:00 committed by GitHub
parent e1fdff46f5
commit cbf5fbf870
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 29 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/views/location/ShareType.tsx
View File

@ -56,8 +56,6 @@ const ShareTypeOption: React.FC<ShareTypeOptionProps> = ({
element='button' element='button'
className='mx_ShareType_option' className='mx_ShareType_option'
onClick={onClick} onClick={onClick}
// not yet implemented
disabled={shareType === LocationShareType.Live}
{...rest}> {...rest}>
{ shareType === LocationShareType.Own && <UserAvatar /> } { shareType === LocationShareType.Own && <UserAvatar /> }
{ shareType === LocationShareType.Pin && { shareType === LocationShareType.Pin &&

44
test/components/views/location/LocationShareMenu-test.tsx
View File

@ -29,7 +29,7 @@ import { ChevronFace } from '../../../../src/components/structures/ContextMenu';
import SettingsStore from '../../../../src/settings/SettingsStore'; import SettingsStore from '../../../../src/settings/SettingsStore';
import { MatrixClientPeg } from '../../../../src/MatrixClientPeg'; import { MatrixClientPeg } from '../../../../src/MatrixClientPeg';
import { LocationShareType } from '../../../../src/components/views/location/shareLocation'; import { LocationShareType } from '../../../../src/components/views/location/shareLocation';
import { findByTestId } from '../../../test-utils'; import { findByTagAndTestId } from '../../../test-utils';
jest.mock('../../../../src/components/views/location/findMapStyleUrl', () => ({ jest.mock('../../../../src/components/views/location/findMapStyleUrl', () => ({
findMapStyleUrl: jest.fn().mockReturnValue('test'), findMapStyleUrl: jest.fn().mockReturnValue('test'),
@ -96,16 +96,16 @@ describe('<LocationShareMenu />', () => {
}); });
const getShareTypeOption = (component: ReactWrapper, shareType: LocationShareType) => const getShareTypeOption = (component: ReactWrapper, shareType: LocationShareType) =>
findByTestId(component, `share-location-option-${shareType}`); findByTagAndTestId(component, `share-location-option-${shareType}`, 'button');
const getBackButton = (component: ReactWrapper) => const getBackButton = (component: ReactWrapper) =>
findByTestId(component, 'share-dialog-buttons-back'); findByTagAndTestId(component, 'share-dialog-buttons-back', 'button');
const getCancelButton = (component: ReactWrapper) => const getCancelButton = (component: ReactWrapper) =>
findByTestId(component, 'share-dialog-buttons-cancel'); findByTagAndTestId(component, 'share-dialog-buttons-cancel', 'button');
const getSubmitButton = (component: ReactWrapper) => const getSubmitButton = (component: ReactWrapper) =>
findByTestId(component, 'location-picker-submit-button'); findByTagAndTestId(component, 'location-picker-submit-button', 'button');
const setLocation = (component: ReactWrapper) => { const setLocation = (component: ReactWrapper) => {
// set the location // set the location
@ -129,13 +129,13 @@ describe('<LocationShareMenu />', () => {
it('renders location picker when only Own share type is enabled', () => { it('renders location picker when only Own share type is enabled', () => {
const component = getComponent(); const component = getComponent();
expect(component.find('ShareType').length).toBeFalsy(); expect(component.find('ShareType').length).toBe(0);
expect(component.find('LocationPicker').length).toBeTruthy(); expect(component.find('LocationPicker').length).toBe(1);
}); });
it('does not render back button when only Own share type is enabled', () => { it('does not render back button when only Own share type is enabled', () => {
const component = getComponent(); const component = getComponent();
expect(getBackButton(component).length).toBeFalsy(); expect(getBackButton(component).length).toBe(0);
}); });
it('clicking cancel button from location picker closes dialog', () => { it('clicking cancel button from location picker closes dialog', () => {
@ -177,15 +177,15 @@ describe('<LocationShareMenu />', () => {
it('renders share type switch with own and pin drop options', () => { it('renders share type switch with own and pin drop options', () => {
const component = getComponent(); const component = getComponent();
expect(component.find('LocationPicker').length).toBeFalsy(); expect(component.find('LocationPicker').length).toBe(0);
expect(getShareTypeOption(component, LocationShareType.Own).length).toBeTruthy(); expect(getShareTypeOption(component, LocationShareType.Own).length).toBe(1);
expect(getShareTypeOption(component, LocationShareType.Pin).length).toBeTruthy(); expect(getShareTypeOption(component, LocationShareType.Pin).length).toBe(1);
}); });
it('does not render back button on share type screen', () => { it('does not render back button on share type screen', () => {
const component = getComponent(); const component = getComponent();
expect(getBackButton(component).length).toBeFalsy(); expect(getBackButton(component).length).toBe(0);
}); });
it('clicking cancel button from share type screen closes dialog', () => { it('clicking cancel button from share type screen closes dialog', () => {
@ -204,7 +204,7 @@ describe('<LocationShareMenu />', () => {
setShareType(component, LocationShareType.Own); setShareType(component, LocationShareType.Own);
expect(component.find('LocationPicker').length).toBeTruthy(); expect(component.find('LocationPicker').length).toBe(1);
}); });
it('clicking back button from location picker screen goes back to share screen', () => { it('clicking back button from location picker screen goes back to share screen', () => {
@ -214,7 +214,7 @@ describe('<LocationShareMenu />', () => {
// advance to location picker // advance to location picker
setShareType(component, LocationShareType.Own); setShareType(component, LocationShareType.Own);
expect(component.find('LocationPicker').length).toBeTruthy(); expect(component.find('LocationPicker').length).toBe(1);
act(() => { act(() => {
getBackButton(component).at(0).simulate('click'); getBackButton(component).at(0).simulate('click');
@ -222,7 +222,7 @@ describe('<LocationShareMenu />', () => {
}); });
// back to share type // back to share type
expect(component.find('ShareType').length).toBeTruthy(); expect(component.find('ShareType').length).toBe(1);
}); });
it('creates pin drop location share event on submission', () => { it('creates pin drop location share event on submission', () => {
@ -263,20 +263,22 @@ describe('<LocationShareMenu />', () => {
const component = getComponent(); const component = getComponent();
// The the Location picker is not visible yet // The the Location picker is not visible yet
expect(component.find('LocationPicker').length).toBeFalsy(); expect(component.find('LocationPicker').length).toBe(0);
// And all 3 buttons are visible on the LocationShare dialog // And all 3 buttons are visible on the LocationShare dialog
expect( expect(
getShareTypeOption(component, LocationShareType.Own).length, getShareTypeOption(component, LocationShareType.Own).length,
).toBeTruthy(); ).toBe(1);
expect( expect(
getShareTypeOption(component, LocationShareType.Pin).length, getShareTypeOption(component, LocationShareType.Pin).length,
).toBeTruthy(); ).toBe(1);
expect( const liveButton = getShareTypeOption(component, LocationShareType.Live);
getShareTypeOption(component, LocationShareType.Live).length, expect(liveButton.length).toBe(1);
).toBeTruthy();
// The live location button is enabled
expect(liveButton.hasClass("mx_AccessibleButton_disabled")).toBeFalsy();
}); });
}); });
}); });

6
test/test-utils/utilities.ts
View File

@ -23,6 +23,12 @@ const findByAttr = (attr: string) => (component: ReactWrapper, value: string) =>
export const findByTestId = findByAttr('data-test-id'); export const findByTestId = findByAttr('data-test-id');
export const findById = findByAttr('id'); export const findById = findByAttr('id');
const findByTagAndAttr = (attr: string) =>
(component: ReactWrapper, value: string, tag: string) =>
component.find(`${tag}[${attr}="${value}"]`);
export const findByTagAndTestId = findByTagAndAttr('data-test-id');
export const flushPromises = async () => await new Promise(resolve => setTimeout(resolve)); export const flushPromises = async () => await new Promise(resolve => setTimeout(resolve));
/** /**