Apply new design and display logic to logout confirmation dialog (#33426)
* apply new design to logout dialog * factor out check for other verified devices * only show recovery warning when user has no other verified devices * fix playwright tests * tweak style to better match design * another playwright test fix * fix playwright * Look for the remove button within the dialog * Use testid to locate 'Remove this device' button * move rendering to sub-components, rather than embedded functions * use <Type> element * use <Text> for the <a> element --------- Co-authored-by: Andy Balaam <andy.balaam@matrix.org>
This commit is contained in:
Hubert Chathi
co-authored by
Andy Balaam
Andy Balaam
parent
178e909dea
commit
2bd5224dbe
@@ -8,11 +8,17 @@ Please see LICENSE files in the repository root for full details.
|
||||
|
||||
import React from "react";
|
||||
import { mocked, type MockedObject } from "jest-mock";
|
||||
import { type MatrixClient } from "matrix-js-sdk/src/matrix";
|
||||
import { type CryptoApi, type KeyBackupInfo } from "matrix-js-sdk/src/crypto-api";
|
||||
import { Device, DeviceVerification, type MatrixClient } from "matrix-js-sdk/src/matrix";
|
||||
import { type CryptoApi, DeviceVerificationStatus, type KeyBackupInfo } from "matrix-js-sdk/src/crypto-api";
|
||||
import { fireEvent, render, type RenderResult, screen, waitFor } from "jest-matrix-react";
|
||||
|
||||
import { filterConsole, getMockClientWithEventEmitter, mockClientMethodsCrypto } from "../../../../test-utils";
|
||||
import {
|
||||
filterConsole,
|
||||
getMockClientWithEventEmitter,
|
||||
mockClientMethodsCrypto,
|
||||
mockClientMethodsDevice,
|
||||
mockClientMethodsUser,
|
||||
} from "../../../../test-utils";
|
||||
import LogoutDialog from "../../../../../src/components/views/dialogs/LogoutDialog";
|
||||
import dispatch from "../../../../../src/dispatcher/dispatcher";
|
||||
import { Action } from "../../../../../src/dispatcher/actions";
|
||||
@@ -25,10 +31,13 @@ describe("LogoutDialog", () => {
|
||||
beforeEach(() => {
|
||||
mockClient = getMockClientWithEventEmitter({
|
||||
...mockClientMethodsCrypto(),
|
||||
...mockClientMethodsUser(),
|
||||
...mockClientMethodsDevice(),
|
||||
});
|
||||
|
||||
mockCrypto = mocked(mockClient.getCrypto()!);
|
||||
Object.assign(mockCrypto, {
|
||||
getUserDeviceInfo: jest.fn().mockResolvedValue(new Map()),
|
||||
getActiveSessionBackupVersion: jest.fn().mockResolvedValue(null),
|
||||
});
|
||||
});
|
||||
@@ -52,37 +61,131 @@ describe("LogoutDialog", () => {
|
||||
await rendered.findByText("Are you sure you want to remove this device?");
|
||||
});
|
||||
|
||||
it("shows a regular dialog if the user has another verified device", async () => {
|
||||
const userId = mockClient.getUserId()!;
|
||||
mockCrypto.getUserDeviceInfo.mockResolvedValue(
|
||||
new Map([
|
||||
[
|
||||
userId,
|
||||
new Map([
|
||||
[
|
||||
"otherDevice",
|
||||
new Device({
|
||||
deviceId: "otherDevice",
|
||||
userId: userId,
|
||||
algorithms: [],
|
||||
keys: new Map([["curve25519:otherDevice", "akey"]]),
|
||||
verified: DeviceVerification.Verified,
|
||||
dehydrated: false,
|
||||
}),
|
||||
],
|
||||
]),
|
||||
],
|
||||
]),
|
||||
);
|
||||
mockCrypto.getDeviceVerificationStatus.mockResolvedValue(new DeviceVerificationStatus({ signedByOwner: true }));
|
||||
|
||||
const rendered = renderComponent();
|
||||
await rendered.findByText("Are you sure you want to remove this device?");
|
||||
});
|
||||
|
||||
it("prompts user to set up recovery if backups are enabled but recovery isn't", async () => {
|
||||
mockCrypto.getActiveSessionBackupVersion.mockResolvedValue("1");
|
||||
mockCrypto.isSecretStorageReady.mockResolvedValue(false);
|
||||
const rendered = renderComponent();
|
||||
await rendered.findByText("You'll lose access to your encrypted messages");
|
||||
await rendered.findByText("You're about to lose access to your encrypted chats");
|
||||
});
|
||||
|
||||
it("Prompts user to go to settings if there is a backup on the server", async () => {
|
||||
it("Prompts user to set up recovery if there is a backup on the server but no secret storage", async () => {
|
||||
mockCrypto.getKeyBackupInfo.mockResolvedValue({} as KeyBackupInfo);
|
||||
const rendered = renderComponent();
|
||||
await rendered.findByText("Go to Settings");
|
||||
await rendered.findByText("Get recovery key");
|
||||
expect(rendered.container).toMatchSnapshot();
|
||||
|
||||
jest.spyOn(dispatch, "dispatch");
|
||||
fireEvent.click(await screen.findByRole("button", { name: "Go to Settings" }));
|
||||
fireEvent.click(await screen.findByRole("button", { name: "Get recovery key" }));
|
||||
await waitFor(() =>
|
||||
expect(dispatch.dispatch).toHaveBeenCalledWith({
|
||||
action: Action.ViewUserSettings,
|
||||
initialTabId: UserTab.Encryption,
|
||||
props: {
|
||||
initialEncryptionState: "set_recovery_key",
|
||||
},
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
||||
it("Prompts user to go to settings if there is no backup on the server", async () => {
|
||||
it("Prompts user to set up recovery if there is no backup on the server", async () => {
|
||||
mockCrypto.getKeyBackupInfo.mockResolvedValue(null);
|
||||
const rendered = renderComponent();
|
||||
await rendered.findByText("Go to Settings");
|
||||
await rendered.findByText("Get recovery key");
|
||||
expect(rendered.container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
fireEvent.click(await screen.findByRole("button", { name: "Manually export keys" }));
|
||||
await expect(screen.findByRole("heading", { name: "Export room keys" })).resolves.toBeInTheDocument();
|
||||
it("Prompts user to set up recovery if there is no backup on the server, and the user has other unverified/dehydrated devices", async () => {
|
||||
const userId = mockClient.getUserId()!;
|
||||
const testDeviceId = mockClient.getDeviceId()!;
|
||||
mockCrypto.getUserDeviceInfo.mockResolvedValue(
|
||||
new Map([
|
||||
[
|
||||
userId,
|
||||
new Map([
|
||||
// the current device
|
||||
[
|
||||
testDeviceId,
|
||||
new Device({
|
||||
deviceId: testDeviceId,
|
||||
userId: userId,
|
||||
algorithms: [],
|
||||
keys: new Map([["curve25519:test-device-id", "akey"]]),
|
||||
verified: DeviceVerification.Verified,
|
||||
dehydrated: false,
|
||||
}),
|
||||
],
|
||||
// a dehydrated device
|
||||
[
|
||||
"dehydratedDevice",
|
||||
new Device({
|
||||
deviceId: "otherDevice",
|
||||
userId: userId,
|
||||
algorithms: [],
|
||||
keys: new Map([["curve25519:dehydratedDevice", "akey"]]),
|
||||
verified: DeviceVerification.Verified,
|
||||
dehydrated: true,
|
||||
}),
|
||||
],
|
||||
// an unverified device
|
||||
[
|
||||
"otherDevice",
|
||||
new Device({
|
||||
deviceId: "otherDevice",
|
||||
userId: userId,
|
||||
algorithms: [],
|
||||
keys: new Map([["curve25519:otherDevice", "akey"]]),
|
||||
verified: DeviceVerification.Unverified,
|
||||
dehydrated: false,
|
||||
}),
|
||||
],
|
||||
]),
|
||||
],
|
||||
]),
|
||||
);
|
||||
mockCrypto.getDeviceVerificationStatus.mockImplementation(async (_userId: string, deviceId: string) => {
|
||||
switch (deviceId) {
|
||||
case testDeviceId:
|
||||
case "dehydratedDevice":
|
||||
return new DeviceVerificationStatus({ signedByOwner: true });
|
||||
case "otherDevice":
|
||||
return new DeviceVerificationStatus({ signedByOwner: false });
|
||||
default:
|
||||
throw new Error("Unknown device ID");
|
||||
}
|
||||
});
|
||||
|
||||
mockCrypto.getKeyBackupInfo.mockResolvedValue(null);
|
||||
const rendered = renderComponent();
|
||||
await rendered.findByText("Get recovery key");
|
||||
expect(rendered.container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
describe("when there is an error fetching backups", () => {
|
||||
@@ -92,7 +195,7 @@ describe("LogoutDialog", () => {
|
||||
throw new Error("beep");
|
||||
});
|
||||
const rendered = renderComponent();
|
||||
await rendered.findByText("Go to Settings");
|
||||
await rendered.findByText("Get recovery key");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user