Device manager - data fetching (PSG-637) (#9151)
* add session manager tab to user settings * fussy import ordering * i18n * extract device fetching logic into hook * use new extended device type in device tile, add verified metadata * add current session section, test * tidy * update types for DeviceWithVerification
This commit is contained in:
Kerry
GitHub
parent
4e30d3c0fc
commit
b7872f2ff7
12 changed files with 434 additions and 13 deletions
|
|
@ -24,6 +24,7 @@ describe('<DeviceTile />', () => {
|
|||
const defaultProps = {
|
||||
device: {
|
||||
device_id: '123',
|
||||
isVerified: false,
|
||||
},
|
||||
};
|
||||
const getComponent = (props = {}) => (
|
||||
|
|
@ -43,6 +44,11 @@ describe('<DeviceTile />', () => {
|
|||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders a verified device with no metadata', () => {
|
||||
const { container } = render(getComponent());
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders display name with a tooltip', () => {
|
||||
const device: IMyDevice = {
|
||||
device_id: '123',
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ describe('<SelectableDeviceTile />', () => {
|
|||
display_name: 'My Device',
|
||||
device_id: 'my-device',
|
||||
last_seen_ip: '123.456.789',
|
||||
isVerified: false,
|
||||
};
|
||||
const defaultProps = {
|
||||
onClick: jest.fn(),
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ exports[`<DeviceTile /> renders a device with no metadata 1`] = `
|
|||
<div>
|
||||
<div
|
||||
class="mx_DeviceTile"
|
||||
data-testid="device-tile-123"
|
||||
>
|
||||
<div
|
||||
class="mx_DeviceTile_info"
|
||||
|
|
@ -16,6 +17,45 @@ exports[`<DeviceTile /> renders a device with no metadata 1`] = `
|
|||
<div
|
||||
class="mx_DeviceTile_metadata"
|
||||
>
|
||||
<span
|
||||
data-testid="device-metadata-isVerified"
|
||||
>
|
||||
Unverified
|
||||
</span>
|
||||
·
|
||||
·
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_DeviceTile_actions"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<DeviceTile /> renders a verified device with no metadata 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="mx_DeviceTile"
|
||||
data-testid="device-tile-123"
|
||||
>
|
||||
<div
|
||||
class="mx_DeviceTile_info"
|
||||
>
|
||||
<h4
|
||||
class="mx_Heading_h4"
|
||||
>
|
||||
123
|
||||
</h4>
|
||||
<div
|
||||
class="mx_DeviceTile_metadata"
|
||||
>
|
||||
<span
|
||||
data-testid="device-metadata-isVerified"
|
||||
>
|
||||
Unverified
|
||||
</span>
|
||||
·
|
||||
·
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -30,6 +70,7 @@ exports[`<DeviceTile /> renders display name with a tooltip 1`] = `
|
|||
<div>
|
||||
<div
|
||||
class="mx_DeviceTile"
|
||||
data-testid="device-tile-123"
|
||||
>
|
||||
<div
|
||||
class="mx_DeviceTile_info"
|
||||
|
|
@ -46,6 +87,12 @@ exports[`<DeviceTile /> renders display name with a tooltip 1`] = `
|
|||
<div
|
||||
class="mx_DeviceTile_metadata"
|
||||
>
|
||||
<span
|
||||
data-testid="device-metadata-isVerified"
|
||||
>
|
||||
Unverified
|
||||
</span>
|
||||
·
|
||||
·
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -60,6 +107,7 @@ exports[`<DeviceTile /> separates metadata with a dot 1`] = `
|
|||
<div>
|
||||
<div
|
||||
class="mx_DeviceTile"
|
||||
data-testid="device-tile-123"
|
||||
>
|
||||
<div
|
||||
class="mx_DeviceTile_info"
|
||||
|
|
@ -72,6 +120,12 @@ exports[`<DeviceTile /> separates metadata with a dot 1`] = `
|
|||
<div
|
||||
class="mx_DeviceTile_metadata"
|
||||
>
|
||||
<span
|
||||
data-testid="device-metadata-isVerified"
|
||||
>
|
||||
Unverified
|
||||
</span>
|
||||
·
|
||||
<span
|
||||
data-testid="device-metadata-lastActivity"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@ exports[`<SelectableDeviceTile /> renders unselected device tile with checkbox 1
|
|||
</span>
|
||||
<div
|
||||
class="mx_DeviceTile"
|
||||
data-testid="device-tile-my-device"
|
||||
>
|
||||
<div
|
||||
class="mx_DeviceTile_info"
|
||||
|
|
@ -50,6 +51,12 @@ exports[`<SelectableDeviceTile /> renders unselected device tile with checkbox 1
|
|||
<div
|
||||
class="mx_DeviceTile_metadata"
|
||||
>
|
||||
<span
|
||||
data-testid="device-metadata-isVerified"
|
||||
>
|
||||
Unverified
|
||||
</span>
|
||||
·
|
||||
·
|
||||
<span
|
||||
data-testid="device-metadata-lastSeenIp"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,152 @@
|
|||
/*
|
||||
Copyright 2022 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { render } from '@testing-library/react';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import { DeviceInfo } from 'matrix-js-sdk/src/crypto/deviceinfo';
|
||||
import { logger } from 'matrix-js-sdk/src/logger';
|
||||
import { DeviceTrustLevel } from 'matrix-js-sdk/src/crypto/CrossSigning';
|
||||
|
||||
import SessionManagerTab from '../../../../../../src/components/views/settings/tabs/user/SessionManagerTab';
|
||||
import MatrixClientContext from '../../../../../../src/contexts/MatrixClientContext';
|
||||
import {
|
||||
flushPromisesWithFakeTimers,
|
||||
getMockClientWithEventEmitter,
|
||||
mockClientMethodsUser,
|
||||
} from '../../../../../test-utils';
|
||||
|
||||
jest.useFakeTimers();
|
||||
|
||||
describe('<SessionManagerTab />', () => {
|
||||
const aliceId = '@alice:server.org';
|
||||
const deviceId = 'alices_device';
|
||||
|
||||
const alicesDevice = {
|
||||
device_id: deviceId,
|
||||
};
|
||||
const alicesMobileDevice = {
|
||||
device_id: 'alices_mobile_device',
|
||||
};
|
||||
|
||||
const mockCrossSigningInfo = {
|
||||
checkDeviceTrust: jest.fn(),
|
||||
};
|
||||
const mockClient = getMockClientWithEventEmitter({
|
||||
...mockClientMethodsUser(aliceId),
|
||||
getStoredCrossSigningForUser: jest.fn().mockReturnValue(mockCrossSigningInfo),
|
||||
getDevices: jest.fn(),
|
||||
getStoredDevice: jest.fn(),
|
||||
getDeviceId: jest.fn().mockReturnValue(deviceId),
|
||||
});
|
||||
|
||||
const defaultProps = {};
|
||||
const getComponent = (props = {}): React.ReactElement =>
|
||||
(
|
||||
<MatrixClientContext.Provider value={mockClient}>
|
||||
<SessionManagerTab {...defaultProps} {...props} />
|
||||
</MatrixClientContext.Provider>
|
||||
);
|
||||
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
jest.spyOn(logger, 'error').mockRestore();
|
||||
mockClient.getDevices.mockResolvedValue({ devices: [] });
|
||||
mockClient.getStoredDevice.mockImplementation((_userId, id) => {
|
||||
const device = [alicesDevice, alicesMobileDevice].find(device => device.device_id === id);
|
||||
return device ? new DeviceInfo(device.device_id) : null;
|
||||
});
|
||||
mockCrossSigningInfo.checkDeviceTrust
|
||||
.mockReset()
|
||||
.mockReturnValue(new DeviceTrustLevel(false, false, false, false));
|
||||
});
|
||||
|
||||
it('renders spinner while devices load', () => {
|
||||
const { container } = render(getComponent());
|
||||
expect(container.getElementsByClassName('mx_Spinner').length).toBeTruthy();
|
||||
});
|
||||
|
||||
it('removes spinner when device fetch fails', async () => {
|
||||
mockClient.getDevices.mockRejectedValue({ httpStatus: 404 });
|
||||
const { container } = render(getComponent());
|
||||
expect(mockClient.getDevices).toHaveBeenCalled();
|
||||
|
||||
await act(async () => {
|
||||
await flushPromisesWithFakeTimers();
|
||||
});
|
||||
expect(container.getElementsByClassName('mx_Spinner').length).toBeFalsy();
|
||||
});
|
||||
|
||||
it('removes spinner when device fetch fails', async () => {
|
||||
// eat the expected error log
|
||||
jest.spyOn(logger, 'error').mockImplementation(() => {});
|
||||
mockClient.getDevices.mockRejectedValue({ httpStatus: 404 });
|
||||
const { container } = render(getComponent());
|
||||
|
||||
await act(async () => {
|
||||
await flushPromisesWithFakeTimers();
|
||||
});
|
||||
expect(container.getElementsByClassName('mx_Spinner').length).toBeFalsy();
|
||||
});
|
||||
|
||||
it('does not fail when checking device verification fails', async () => {
|
||||
const logSpy = jest.spyOn(logger, 'error').mockImplementation(() => {});
|
||||
mockClient.getDevices.mockResolvedValue({ devices: [alicesDevice, alicesMobileDevice] });
|
||||
const noCryptoError = new Error("End-to-end encryption disabled");
|
||||
mockClient.getStoredDevice.mockImplementation(() => { throw noCryptoError; });
|
||||
render(getComponent());
|
||||
|
||||
await act(async () => {
|
||||
await flushPromisesWithFakeTimers();
|
||||
});
|
||||
|
||||
// called for each device despite error
|
||||
expect(mockClient.getStoredDevice).toHaveBeenCalledWith(aliceId, alicesDevice.device_id);
|
||||
expect(mockClient.getStoredDevice).toHaveBeenCalledWith(aliceId, alicesMobileDevice.device_id);
|
||||
expect(logSpy).toHaveBeenCalledWith('Error getting device cross-signing info', noCryptoError);
|
||||
});
|
||||
|
||||
it('sets device verification status correctly', async () => {
|
||||
mockClient.getDevices.mockResolvedValue({ devices: [alicesDevice, alicesMobileDevice] });
|
||||
mockCrossSigningInfo.checkDeviceTrust
|
||||
// alices device is trusted
|
||||
.mockReturnValueOnce(new DeviceTrustLevel(true, true, false, false))
|
||||
// alices mobile device is not
|
||||
.mockReturnValueOnce(new DeviceTrustLevel(false, false, false, false));
|
||||
|
||||
const { getByTestId } = render(getComponent());
|
||||
|
||||
await act(async () => {
|
||||
await flushPromisesWithFakeTimers();
|
||||
});
|
||||
|
||||
expect(mockCrossSigningInfo.checkDeviceTrust).toHaveBeenCalledTimes(2);
|
||||
expect(getByTestId(`device-tile-${alicesDevice.device_id}`)).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders current session section', async () => {
|
||||
mockClient.getDevices.mockResolvedValue({ devices: [alicesDevice, alicesMobileDevice] });
|
||||
const noCryptoError = new Error("End-to-end encryption disabled");
|
||||
mockClient.getStoredDevice.mockImplementation(() => { throw noCryptoError; });
|
||||
const { getByTestId } = render(getComponent());
|
||||
|
||||
await act(async () => {
|
||||
await flushPromisesWithFakeTimers();
|
||||
});
|
||||
|
||||
expect(getByTestId('current-session-section')).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<SessionManagerTab /> renders current session section 1`] = `
|
||||
<div
|
||||
class="mx_SettingsSubsection"
|
||||
data-testid="current-session-section"
|
||||
>
|
||||
<h3
|
||||
class="mx_Heading_h3 mx_SettingsSubsection_heading"
|
||||
>
|
||||
Current session
|
||||
</h3>
|
||||
<div
|
||||
class="mx_SettingsSubsection_content"
|
||||
>
|
||||
<div
|
||||
class="mx_DeviceTile"
|
||||
data-testid="device-tile-alices_device"
|
||||
>
|
||||
<div
|
||||
class="mx_DeviceTile_info"
|
||||
>
|
||||
<h4
|
||||
class="mx_Heading_h4"
|
||||
>
|
||||
alices_device
|
||||
</h4>
|
||||
<div
|
||||
class="mx_DeviceTile_metadata"
|
||||
>
|
||||
<span
|
||||
data-testid="device-metadata-isVerified"
|
||||
>
|
||||
Unverified
|
||||
</span>
|
||||
·
|
||||
·
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_DeviceTile_actions"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<SessionManagerTab /> sets device verification status correctly 1`] = `
|
||||
<div
|
||||
class="mx_DeviceTile"
|
||||
data-testid="device-tile-alices_device"
|
||||
>
|
||||
<div
|
||||
class="mx_DeviceTile_info"
|
||||
>
|
||||
<h4
|
||||
class="mx_Heading_h4"
|
||||
>
|
||||
alices_device
|
||||
</h4>
|
||||
<div
|
||||
class="mx_DeviceTile_metadata"
|
||||
>
|
||||
<span
|
||||
data-testid="device-metadata-isVerified"
|
||||
>
|
||||
Verified
|
||||
</span>
|
||||
·
|
||||
·
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_DeviceTile_actions"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
Loading…
Add table
Add a link
Reference in a new issue