From cbf5fbf8708ce29c30026705dbaa46a0d92143bc Mon Sep 17 00:00:00 2001 From: Andy Balaam Date: Wed, 16 Mar 2022 09:37:09 +0000 Subject: [PATCH] Enable the live location share button (#8056) --- src/components/views/location/ShareType.tsx | 2 - .../views/location/LocationShareMenu-test.tsx | 44 ++++++++++--------- test/test-utils/utilities.ts | 6 +++ 3 files changed, 29 insertions(+), 23 deletions(-) diff --git a/src/components/views/location/ShareType.tsx b/src/components/views/location/ShareType.tsx index 45cf43d24e..32e1386cfd 100644 --- a/src/components/views/location/ShareType.tsx +++ b/src/components/views/location/ShareType.tsx @@ -56,8 +56,6 @@ const ShareTypeOption: React.FC = ({ element='button' className='mx_ShareType_option' onClick={onClick} - // not yet implemented - disabled={shareType === LocationShareType.Live} {...rest}> { shareType === LocationShareType.Own && } { shareType === LocationShareType.Pin && diff --git a/test/components/views/location/LocationShareMenu-test.tsx b/test/components/views/location/LocationShareMenu-test.tsx index 5786380050..61e0dd6736 100644 --- a/test/components/views/location/LocationShareMenu-test.tsx +++ b/test/components/views/location/LocationShareMenu-test.tsx @@ -29,7 +29,7 @@ import { ChevronFace } from '../../../../src/components/structures/ContextMenu'; import SettingsStore from '../../../../src/settings/SettingsStore'; import { MatrixClientPeg } from '../../../../src/MatrixClientPeg'; 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', () => ({ findMapStyleUrl: jest.fn().mockReturnValue('test'), @@ -96,16 +96,16 @@ describe('', () => { }); const getShareTypeOption = (component: ReactWrapper, shareType: LocationShareType) => - findByTestId(component, `share-location-option-${shareType}`); + findByTagAndTestId(component, `share-location-option-${shareType}`, 'button'); const getBackButton = (component: ReactWrapper) => - findByTestId(component, 'share-dialog-buttons-back'); + findByTagAndTestId(component, 'share-dialog-buttons-back', 'button'); const getCancelButton = (component: ReactWrapper) => - findByTestId(component, 'share-dialog-buttons-cancel'); + findByTagAndTestId(component, 'share-dialog-buttons-cancel', 'button'); const getSubmitButton = (component: ReactWrapper) => - findByTestId(component, 'location-picker-submit-button'); + findByTagAndTestId(component, 'location-picker-submit-button', 'button'); const setLocation = (component: ReactWrapper) => { // set the location @@ -129,13 +129,13 @@ describe('', () => { it('renders location picker when only Own share type is enabled', () => { const component = getComponent(); - expect(component.find('ShareType').length).toBeFalsy(); - expect(component.find('LocationPicker').length).toBeTruthy(); + expect(component.find('ShareType').length).toBe(0); + expect(component.find('LocationPicker').length).toBe(1); }); it('does not render back button when only Own share type is enabled', () => { const component = getComponent(); - expect(getBackButton(component).length).toBeFalsy(); + expect(getBackButton(component).length).toBe(0); }); it('clicking cancel button from location picker closes dialog', () => { @@ -177,15 +177,15 @@ describe('', () => { it('renders share type switch with own and pin drop options', () => { 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.Pin).length).toBeTruthy(); + expect(getShareTypeOption(component, LocationShareType.Own).length).toBe(1); + expect(getShareTypeOption(component, LocationShareType.Pin).length).toBe(1); }); it('does not render back button on share type screen', () => { const component = getComponent(); - expect(getBackButton(component).length).toBeFalsy(); + expect(getBackButton(component).length).toBe(0); }); it('clicking cancel button from share type screen closes dialog', () => { @@ -204,7 +204,7 @@ describe('', () => { 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', () => { @@ -214,7 +214,7 @@ describe('', () => { // advance to location picker setShareType(component, LocationShareType.Own); - expect(component.find('LocationPicker').length).toBeTruthy(); + expect(component.find('LocationPicker').length).toBe(1); act(() => { getBackButton(component).at(0).simulate('click'); @@ -222,7 +222,7 @@ describe('', () => { }); // 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', () => { @@ -263,20 +263,22 @@ describe('', () => { const component = getComponent(); // 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 expect( getShareTypeOption(component, LocationShareType.Own).length, - ).toBeTruthy(); + ).toBe(1); expect( getShareTypeOption(component, LocationShareType.Pin).length, - ).toBeTruthy(); + ).toBe(1); - expect( - getShareTypeOption(component, LocationShareType.Live).length, - ).toBeTruthy(); + const liveButton = getShareTypeOption(component, LocationShareType.Live); + expect(liveButton.length).toBe(1); + + // The live location button is enabled + expect(liveButton.hasClass("mx_AccessibleButton_disabled")).toBeFalsy(); }); }); }); diff --git a/test/test-utils/utilities.ts b/test/test-utils/utilities.ts index 9f7941e32a..f826fe1679 100644 --- a/test/test-utils/utilities.ts +++ b/test/test-utils/utilities.ts @@ -23,6 +23,12 @@ const findByAttr = (attr: string) => (component: ReactWrapper, value: string) => export const findByTestId = findByAttr('data-test-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)); /**