imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Device manager - extract device deletion logic into util (#9168)

Browse source 
* extract deletedevices logic into util fn

* unit test deleteDevices

* test devicespanel device deletion

* remove debug logs

* i18n

* assert more on deleteMultipleDevices calls
This commit is contained in:
Kerry 2022-08-10 18:26:48 +02:00 • committed by GitHub
parent b7872f2ff7
commit f020ed0b13
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 764 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

203
test/components/views/settings/DevicesPanel-test.tsx Normal file
View file

@ -0,0 +1,203 @@
/*
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 { fireEvent, render } from '@testing-library/react';
import { act } from 'react-dom/test-utils';
import { CrossSigningInfo } from 'matrix-js-sdk/src/crypto/CrossSigning';
import { DeviceInfo } from 'matrix-js-sdk/src/crypto/deviceinfo';
import { sleep } from 'matrix-js-sdk/src/utils';
import DevicesPanel from "../../../../src/components/views/settings/DevicesPanel";
import {
flushPromises,
getMockClientWithEventEmitter,
mockClientMethodsUser,
} from "../../../test-utils";
describe('<DevicesPanel />', () => {
const userId = '@alice:server.org';
const device1 = { device_id: 'device_1' };
const device2 = { device_id: 'device_2' };
const device3 = { device_id: 'device_3' };
const mockClient = getMockClientWithEventEmitter({
...mockClientMethodsUser(userId),
getDevices: jest.fn(),
getDeviceId: jest.fn().mockReturnValue(device1.device_id),
deleteMultipleDevices: jest.fn(),
getStoredCrossSigningForUser: jest.fn().mockReturnValue(new CrossSigningInfo(userId, {}, {})),
getStoredDevice: jest.fn().mockReturnValue(new DeviceInfo('id')),
generateClientSecret: jest.fn(),
});
const getComponent = () => <DevicesPanel />;
beforeEach(() => {
jest.clearAllMocks();
mockClient.getDevices
.mockReset()
.mockResolvedValue({ devices: [device1, device2, device3] });
});
it('renders device panel with devices', async () => {
const { container } = render(getComponent());
await flushPromises();
expect(container).toMatchSnapshot();
});
describe('device deletion', () => {
const interactiveAuthError = { httpStatus: 401, data: { flows: [{ stages: ["m.login.password"] }] } };
const toggleDeviceSelection = (container: HTMLElement, deviceId: string) => act(() => {
const checkbox = container.querySelector(`#device-tile-checkbox-${deviceId}`);
fireEvent.click(checkbox);
});
beforeEach(() => {
mockClient.deleteMultipleDevices.mockReset();
});
it('deletes selected devices when interactive auth is not required', async () => {
mockClient.deleteMultipleDevices.mockResolvedValue({});
mockClient.getDevices
.mockResolvedValueOnce({ devices: [device1, device2, device3] })
// pretend it was really deleted on refresh
.mockResolvedValueOnce({ devices: [device1, device3] });
const { container, getByTestId } = render(getComponent());
await flushPromises();
expect(container.getElementsByClassName('mx_DevicesPanel_device').length).toEqual(3);
toggleDeviceSelection(container, device2.device_id);
mockClient.getDevices.mockClear();
act(() => {
fireEvent.click(getByTestId('sign-out-devices-btn'));
});
expect(container.getElementsByClassName('mx_Spinner').length).toBeTruthy();
expect(mockClient.deleteMultipleDevices).toHaveBeenCalledWith([device2.device_id], undefined);
await flushPromises();
// devices refreshed
expect(mockClient.getDevices).toHaveBeenCalled();
// and rerendered
expect(container.getElementsByClassName('mx_DevicesPanel_device').length).toEqual(2);
});
it('deletes selected devices when interactive auth is required', async () => {
mockClient.deleteMultipleDevices
// require auth
.mockRejectedValueOnce(interactiveAuthError)
// then succeed
.mockResolvedValueOnce({});
mockClient.getDevices
.mockResolvedValueOnce({ devices: [device1, device2, device3] })
// pretend it was really deleted on refresh
.mockResolvedValueOnce({ devices: [device1, device3] });
const { container, getByTestId, getByLabelText } = render(getComponent());
await flushPromises();
// reset mock count after initial load
mockClient.getDevices.mockClear();
toggleDeviceSelection(container, device2.device_id);
act(() => {
fireEvent.click(getByTestId('sign-out-devices-btn'));
});
await flushPromises();
// modal rendering has some weird sleeps
await sleep(10);
expect(mockClient.deleteMultipleDevices).toHaveBeenCalledWith([device2.device_id], undefined);
const modal = document.getElementsByClassName('mx_Dialog');
expect(modal).toMatchSnapshot();
// fill password and submit for interactive auth
act(() => {
fireEvent.change(getByLabelText('Password'), { target: { value: 'topsecret' } });
fireEvent.submit(getByLabelText('Password'));
});
await flushPromises();
// called again with auth
expect(mockClient.deleteMultipleDevices).toHaveBeenCalledWith([device2.device_id],
{ identifier: {
type: "m.id.user", user: userId,
}, password: "", type: "m.login.password", user: userId,
});
// devices refreshed
expect(mockClient.getDevices).toHaveBeenCalled();
// and rerendered
expect(container.getElementsByClassName('mx_DevicesPanel_device').length).toEqual(2);
});
it('clears loading state when interactive auth fail is cancelled', async () => {
mockClient.deleteMultipleDevices
// require auth
.mockRejectedValueOnce(interactiveAuthError)
// then succeed
.mockResolvedValueOnce({});
mockClient.getDevices
.mockResolvedValueOnce({ devices: [device1, device2, device3] })
// pretend it was really deleted on refresh
.mockResolvedValueOnce({ devices: [device1, device3] });
const { container, getByTestId } = render(getComponent());
await flushPromises();
// reset mock count after initial load
mockClient.getDevices.mockClear();
toggleDeviceSelection(container, device2.device_id);
act(() => {
fireEvent.click(getByTestId('sign-out-devices-btn'));
});
expect(container.getElementsByClassName('mx_Spinner').length).toBeTruthy();
await flushPromises();
// modal rendering has some weird sleeps
await sleep(10);
// close the modal without submission
act(() => {
const modalCloseButton = document.querySelector('[aria-label="Close dialog"]');
fireEvent.click(modalCloseButton);
});
await flushPromises();
// not refreshed
expect(mockClient.getDevices).not.toHaveBeenCalled();
// spinner removed
expect(container.getElementsByClassName('mx_Spinner').length).toBeFalsy();
});
});
});

306
test/components/views/settings/__snapshots__/DevicesPanel-test.tsx.snap Normal file
View file

@ -0,0 +1,306 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<DevicesPanel /> device deletion deletes selected devices when interactive auth is required 1`] = `
HTMLCollection [
<div
class="mx_Dialog"
>
<div
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
<div
aria-describedby="mx_Dialog_content"
aria-labelledby="mx_BaseDialog_title"
class="mx_InteractiveAuthDialog mx_Dialog_fixedWidth"
data-focus-lock-disabled="false"
role="dialog"
>
<div
class="mx_Dialog_header mx_Dialog_headerWithCancel"
>
<h2
class="mx_Heading_h2 mx_Dialog_title"
id="mx_BaseDialog_title"
>
Authentication
</h2>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
id="mx_Dialog_content"
>
<div>
<p>
Confirm your identity by entering your account password below.
</p>
<form
class="mx_InteractiveAuthEntryComponents_passwordSection"
>
<div
class="mx_Field mx_Field_input"
>
<input
id="mx_Field_1"
label="Password"
name="passwordField"
placeholder="Password"
type="password"
value=""
/>
<label
for="mx_Field_1"
>
Password
</label>
</div>
<div
class="mx_button_row"
>
<input
class="mx_Dialog_primary"
disabled=""
type="submit"
value="Continue"
/>
</div>
</form>
</div>
</div>
</div>
<div
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
</div>,
]
`;
exports[`<DevicesPanel /> renders device panel with devices 1`] = `
<div>
<div
class="mx_DevicesPanel"
>
<div
class="mx_DevicesPanel_header"
>
<div
class="mx_DevicesPanel_header_title"
>
This device
</div>
</div>
<div
class="mx_DevicesPanel_device mx_DevicesPanel_myDevice"
>
<div
class="mx_DevicesPanel_deviceTrust"
>
<span
class="mx_DevicesPanel_icon mx_E2EIcon mx_E2EIcon_warning"
/>
</div>
<div
class="mx_DeviceTile"
>
<div
class="mx_DeviceTile_info"
>
<h4
class="mx_Heading_h4"
>
device_1
</h4>
<div
class="mx_DeviceTile_metadata"
>
·
</div>
</div>
<div
class="mx_DeviceTile_actions"
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger_outline"
role="button"
tabindex="0"
>
Sign Out
</div>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
role="button"
tabindex="0"
>
Verify
</div>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
role="button"
tabindex="0"
>
Rename
</div>
</div>
</div>
</div>
<hr />
<div
class="mx_DevicesPanel_header"
>
<div
class="mx_DevicesPanel_header_trust"
>
<span
class="mx_DevicesPanel_header_icon mx_E2EIcon mx_E2EIcon_warning"
/>
</div>
<div
class="mx_DevicesPanel_header_title"
>
Unverified devices
</div>
<div
class="mx_DevicesPanel_header_button"
>
<div
class="mx_AccessibleButton mx_DevicesPanel_selectButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_secondary"
role="button"
tabindex="0"
>
Select all
</div>
</div>
</div>
<div
class="mx_DevicesPanel_device"
>
<div
class="mx_SelectableDeviceTile"
>
<span
class="mx_Checkbox mx_SelectableDeviceTile_checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
>
<input
id="device-tile-checkbox-device_2"
type="checkbox"
/>
<label
for="device-tile-checkbox-device_2"
>
<div
class="mx_Checkbox_background"
>
<div
class="mx_Checkbox_checkmark"
/>
</div>
</label>
</span>
<div
class="mx_DeviceTile"
>
<div
class="mx_DeviceTile_info"
>
<h4
class="mx_Heading_h4"
>
device_2
</h4>
<div
class="mx_DeviceTile_metadata"
>
·
</div>
</div>
<div
class="mx_DeviceTile_actions"
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
role="button"
tabindex="0"
>
Rename
</div>
</div>
</div>
</div>
</div>
<div
class="mx_DevicesPanel_device"
>
<div
class="mx_SelectableDeviceTile"
>
<span
class="mx_Checkbox mx_SelectableDeviceTile_checkbox mx_Checkbox_hasKind mx_Checkbox_kind_solid"
>
<input
id="device-tile-checkbox-device_3"
type="checkbox"
/>
<label
for="device-tile-checkbox-device_3"
>
<div
class="mx_Checkbox_background"
>
<div
class="mx_Checkbox_checkmark"
/>
</div>
</label>
</span>
<div
class="mx_DeviceTile"
>
<div
class="mx_DeviceTile_info"
>
<h4
class="mx_Heading_h4"
>
device_3
</h4>
<div
class="mx_DeviceTile_metadata"
>
·
</div>
</div>
<div
class="mx_DeviceTile_actions"
>
<div
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
role="button"
tabindex="0"
>
Rename
</div>
</div>
</div>
</div>
</div>
<div
aria-disabled="true"
class="mx_AccessibleButton mx_DevicesPanel_deleteButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger_outline mx_AccessibleButton_disabled"
data-testid="sign-out-devices-btn"
disabled=""
role="button"
tabindex="0"
>
Sign out 0 selected devices
</div>
</div>
</div>
`;

34
test/components/views/settings/devices/__snapshots__/deleteDevices-test.tsx.snap Normal file
View file

@ -0,0 +1,34 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`deleteDevices() opens interactive auth dialog when delete fails with 401 1`] = `
Object {
"m.login.sso": Object {
"1": Object {
"body": "Confirm logging out these devices by using Single Sign On to prove your identity.",
"continueKind": "primary",
"continueText": "Single Sign On",
"title": "Use Single Sign On to continue",
},
"2": Object {
"body": "Click the button below to confirm signing out these devices.",
"continueKind": "danger",
"continueText": "Sign out devices",
"title": "Confirm signing out these devices",
},
},
"org.matrix.login.sso": Object {
"1": Object {
"body": "Confirm logging out these devices by using Single Sign On to prove your identity.",
"continueKind": "primary",
"continueText": "Single Sign On",
"title": "Use Single Sign On to continue",
},
"2": Object {
"body": "Click the button below to confirm signing out these devices.",
"continueKind": "danger",
"continueText": "Sign out devices",
"title": "Confirm signing out these devices",
},
},
}
`;

106
test/components/views/settings/devices/deleteDevices-test.tsx Normal file
View file

@ -0,0 +1,106 @@
/*
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 { deleteDevicesWithInteractiveAuth } from "../../../../../src/components/views/settings/devices/deleteDevices";
import Modal from "../../../../../src/Modal";
import { getMockClientWithEventEmitter, mockClientMethodsUser } from "../../../../test-utils";
describe('deleteDevices()', () => {
const userId = '@alice:server.org';
const deviceIds = ['device_1', 'device_2'];
const mockClient = getMockClientWithEventEmitter({
...mockClientMethodsUser(userId),
deleteMultipleDevices: jest.fn(),
});
const modalSpy = jest.spyOn(Modal, 'createDialog');
const interactiveAuthError = { httpStatus: 401, data: { flows: [] } };
beforeEach(() => {
jest.clearAllMocks();
});
it('deletes devices and calls onFinished when interactive auth is not required', async () => {
mockClient.deleteMultipleDevices.mockResolvedValue({});
const onFinished = jest.fn();
await deleteDevicesWithInteractiveAuth(mockClient, deviceIds, onFinished);
expect(mockClient.deleteMultipleDevices).toHaveBeenCalledWith(deviceIds, undefined);
expect(onFinished).toHaveBeenCalledWith(true, undefined);
// didnt open modal
expect(modalSpy).not.toHaveBeenCalled();
});
it('throws without opening auth dialog when delete fails with a non-401 status code', async () => {
const error = new Error('');
// @ts-ignore
error.httpStatus = 404;
mockClient.deleteMultipleDevices.mockRejectedValue(error);
const onFinished = jest.fn();
await expect(
deleteDevicesWithInteractiveAuth(mockClient, deviceIds, onFinished),
).rejects.toThrow(error);
expect(onFinished).not.toHaveBeenCalled();
// didnt open modal
expect(modalSpy).not.toHaveBeenCalled();
});
it('throws without opening auth dialog when delete fails without data.flows', async () => {
const error = new Error('');
// @ts-ignore
error.httpStatus = 401;
// @ts-ignore
error.data = {};
mockClient.deleteMultipleDevices.mockRejectedValue(error);
const onFinished = jest.fn();
await expect(
deleteDevicesWithInteractiveAuth(mockClient, deviceIds, onFinished),
).rejects.toThrow(error);
expect(onFinished).not.toHaveBeenCalled();
// didnt open modal
expect(modalSpy).not.toHaveBeenCalled();
});
it('opens interactive auth dialog when delete fails with 401', async () => {
mockClient.deleteMultipleDevices.mockRejectedValue(interactiveAuthError);
const onFinished = jest.fn();
await deleteDevicesWithInteractiveAuth(mockClient, deviceIds, onFinished);
expect(onFinished).not.toHaveBeenCalled();
// opened modal
expect(modalSpy).toHaveBeenCalled();
const [, {
title, authData, aestheticsForStagePhases,
}] = modalSpy.mock.calls[0];
// modal opened as expected
expect(title).toEqual('Authentication');
expect(authData).toEqual(interactiveAuthError.data);
expect(aestheticsForStagePhases).toMatchSnapshot();
});
});