Location share type UI (#7924)

* copyright

Signed-off-by: Kerry Archibald <kerrya@element.io>

* empty line

Signed-off-by: Kerry Archibald <kerrya@element.io>

* functional picker

Signed-off-by: Kerry Archibald <kerrya@element.io>

* most style

Signed-off-by: Kerry Archibald <kerrya@element.io>

* nice style for options

Signed-off-by: Kerry Archibald <kerrya@element.io>

* get ShareType test passing

Signed-off-by: Kerry Archibald <kerrya@element.io>

* add maplibre mock

Signed-off-by: Kerry Archibald <kerrya@element.io>

* lint and test

Signed-off-by: Kerry Archibald <kerrya@element.io>

* add section to themes for location sharing cols

Signed-off-by: Kerry Archibald <kerrya@element.io>

* add svg mock

Signed-off-by: Kerry Archibald <kerrya@element.io>

* use same mock string as imageMock

Signed-off-by: Kerry Archibald <kerrya@element.io>

* newline

Signed-off-by: Kerry Archibald <kerrya@element.io>

* lint

Signed-off-by: Kerry Archibald <kerrya@element.io>

* add live location icon

Signed-off-by: Kerry Archibald <kerrya@element.io>

* rename useEnabledShareTypes

Signed-off-by: Kerry Archibald <kerrya@element.io>

* use solid color for live border

* use ternary

Signed-off-by: Kerry Archibald <kerrya@element.io>

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Kerry 2022-03-02 14:00:40 +01:00 committed by GitHub
parent 547144a565
commit b480bffab0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 354 additions and 298 deletions

View file

@ -17,15 +17,46 @@ limitations under the License.
import React from 'react';
import { mount } from 'enzyme';
import { RoomMember } from 'matrix-js-sdk/src/models/room-member';
import { MatrixClient } from 'matrix-js-sdk/src/client';
import { mocked } from 'jest-mock';
import { act } from 'react-dom/test-utils';
import '../../../skinned-sdk';
import LocationShareMenu from '../../../../src/components/views/location/LocationShareMenu';
import MatrixClientContext from '../../../../src/contexts/MatrixClientContext';
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/ShareType';
import { findByTestId } from '../../../test-utils';
jest.mock('../../../../src/components/views/messages/MLocationBody', () => ({
findMapStyleUrl: jest.fn().mockReturnValue('test'),
}));
jest.mock('../../../../src/settings/SettingsStore', () => ({
getValue: jest.fn(),
monitorSetting: jest.fn(),
}));
jest.mock('../../../../src/stores/OwnProfileStore', () => ({
OwnProfileStore: {
instance: {
displayName: 'Ernie',
getHttpAvatarUrl: jest.fn().mockReturnValue('image.com/img'),
},
},
}));
describe('<LocationShareMenu />', () => {
const userId = '@ernie:server.org';
const mockClient = {
on: jest.fn(),
removeListener: jest.fn(),
getUserId: jest.fn().mockReturnValue(userId),
getClientWellKnown: jest.fn().mockResolvedValue({
map_style_url: 'maps.com',
}),
};
const defaultProps = {
@ -36,7 +67,7 @@ describe('<LocationShareMenu />', () => {
onFinished: jest.fn(),
openMenu: jest.fn(),
roomId: '!room:server.org',
sender: { id: '@ernie:server.org' } as unknown as RoomMember,
sender: new RoomMember('!room:server.org', userId),
};
const getComponent = (props = {}) =>
mount(<LocationShareMenu {...defaultProps} {...props} />, {
@ -44,8 +75,43 @@ describe('<LocationShareMenu />', () => {
wrappingComponentProps: { value: mockClient },
});
it('renders', () => {
beforeEach(() => {
mocked(SettingsStore).getValue.mockImplementation(
(settingName) => settingName === "feature_location_share_pin_drop",
);
jest.spyOn(MatrixClientPeg, 'get').mockReturnValue(mockClient as unknown as MatrixClient);
});
const getShareTypeOption = (component, shareType: LocationShareType) =>
findByTestId(component, `share-location-option-${shareType}`);
it('renders location picker when only Own share type is enabled', () => {
mocked(SettingsStore).getValue.mockReturnValue(false);
const component = getComponent();
expect(component).toMatchSnapshot();
expect(component.find('ShareType').length).toBeFalsy();
expect(component.find('LocationPicker').length).toBeTruthy();
});
it('renders share type switch with own and pin drop options when enabled', () => {
// feature_location_share_pin_drop is set to enabled by default mocking
const component = getComponent();
expect(component.find('LocationPicker').length).toBeFalsy();
expect(getShareTypeOption(component, LocationShareType.Own).length).toBeTruthy();
expect(getShareTypeOption(component, LocationShareType.Pin).length).toBeTruthy();
});
it('selecting own location share type advances to location picker', () => {
// feature_location_share_pin_drop is set to enabled by default mocking
const component = getComponent();
act(() => {
getShareTypeOption(component, LocationShareType.Own).at(0).simulate('click');
});
component.setProps({});
expect(component.find('LocationPicker').length).toBeTruthy();
});
});