Add tests to `RecoveryPanel`
parent
1aace3f87e
commit
70c084e879
|
@ -68,7 +68,7 @@ export function RecoveryPanel({ onSetUpRecoveryClick, onChangingRecoveryKeyClick
|
||||||
let content: JSX.Element;
|
let content: JSX.Element;
|
||||||
switch (state) {
|
switch (state) {
|
||||||
case "loading":
|
case "loading":
|
||||||
content = <InlineSpinner />;
|
content = <InlineSpinner aria-label={_t("common|loading")} />;
|
||||||
break;
|
break;
|
||||||
case "missing_backup":
|
case "missing_backup":
|
||||||
content = (
|
content = (
|
||||||
|
|
|
@ -127,7 +127,10 @@ export function createTestClient(): MatrixClient {
|
||||||
bootstrapCrossSigning: jest.fn(),
|
bootstrapCrossSigning: jest.fn(),
|
||||||
getActiveSessionBackupVersion: jest.fn().mockResolvedValue(null),
|
getActiveSessionBackupVersion: jest.fn().mockResolvedValue(null),
|
||||||
isKeyBackupTrusted: jest.fn().mockResolvedValue({}),
|
isKeyBackupTrusted: jest.fn().mockResolvedValue({}),
|
||||||
createRecoveryKeyFromPassphrase: jest.fn().mockResolvedValue({}),
|
createRecoveryKeyFromPassphrase: jest.fn().mockResolvedValue({
|
||||||
|
privateKey: new Uint8Array(32),
|
||||||
|
encodedPrivateKey: "encoded private key",
|
||||||
|
}),
|
||||||
bootstrapSecretStorage: jest.fn(),
|
bootstrapSecretStorage: jest.fn(),
|
||||||
isDehydrationSupported: jest.fn().mockResolvedValue(false),
|
isDehydrationSupported: jest.fn().mockResolvedValue(false),
|
||||||
restoreKeyBackup: jest.fn(),
|
restoreKeyBackup: jest.fn(),
|
||||||
|
@ -136,6 +139,17 @@ export function createTestClient(): MatrixClient {
|
||||||
storeSessionBackupPrivateKey: jest.fn(),
|
storeSessionBackupPrivateKey: jest.fn(),
|
||||||
getKeyBackupInfo: jest.fn().mockResolvedValue(null),
|
getKeyBackupInfo: jest.fn().mockResolvedValue(null),
|
||||||
getEncryptionInfoForEvent: jest.fn().mockResolvedValue(null),
|
getEncryptionInfoForEvent: jest.fn().mockResolvedValue(null),
|
||||||
|
getCrossSigningStatus: jest.fn().mockResolvedValue({
|
||||||
|
publicKeysOnDevice: false,
|
||||||
|
privateKeysInSecretStorage: false,
|
||||||
|
privateKeysCachedLocally: {
|
||||||
|
masterKey: false,
|
||||||
|
selfSigningKey: false,
|
||||||
|
userSigningKey: false,
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
isCrossSigningReady: jest.fn().mockResolvedValue(false),
|
||||||
|
checkKeyBackupAndEnable: jest.fn().mockResolvedValue(null),
|
||||||
}),
|
}),
|
||||||
|
|
||||||
getPushActionsForEvent: jest.fn(),
|
getPushActionsForEvent: jest.fn(),
|
||||||
|
|
|
@ -0,0 +1,97 @@
|
||||||
|
/*
|
||||||
|
* Copyright 2024 New Vector Ltd.
|
||||||
|
*
|
||||||
|
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
|
||||||
|
* Please see LICENSE files in the repository root for full details.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
|
import { MatrixClient } from "matrix-js-sdk/src/matrix";
|
||||||
|
import { render, screen } from "jest-matrix-react";
|
||||||
|
import { waitFor } from "@testing-library/dom";
|
||||||
|
import userEvent from "@testing-library/user-event";
|
||||||
|
import { mocked } from "jest-mock";
|
||||||
|
import { KeyBackupCheck } from "matrix-js-sdk/src/crypto-api";
|
||||||
|
|
||||||
|
import { createTestClient, withClientContextRenderOptions } from "../../../../../test-utils";
|
||||||
|
import { RecoveryPanel } from "../../../../../../src/components/views/settings/encryption/RecoveryPanel";
|
||||||
|
import { accessSecretStorage } from "../../../../../../src/SecurityManager";
|
||||||
|
|
||||||
|
jest.mock("../../../../../../src/SecurityManager", () => ({
|
||||||
|
accessSecretStorage: jest.fn(),
|
||||||
|
}));
|
||||||
|
|
||||||
|
describe("<RecoveryPanel />", () => {
|
||||||
|
let matrixClient: MatrixClient;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
matrixClient = createTestClient();
|
||||||
|
mocked(accessSecretStorage).mockClear().mockResolvedValue();
|
||||||
|
});
|
||||||
|
|
||||||
|
function renderRecoverPanel(
|
||||||
|
props = {
|
||||||
|
onSetUpRecoveryClick: jest.fn(),
|
||||||
|
onChangingRecoveryKeyClick: jest.fn(),
|
||||||
|
},
|
||||||
|
) {
|
||||||
|
return render(<RecoveryPanel {...props} />, withClientContextRenderOptions(matrixClient));
|
||||||
|
}
|
||||||
|
|
||||||
|
it("should be in loading state when checking backup and the cached keys", () => {
|
||||||
|
jest.spyOn(matrixClient.getCrypto()!, "checkKeyBackupAndEnable").mockImplementation(
|
||||||
|
() => new Promise(() => {}),
|
||||||
|
);
|
||||||
|
|
||||||
|
const { asFragment } = renderRecoverPanel();
|
||||||
|
expect(screen.getByLabelText("Loading…")).toBeInTheDocument();
|
||||||
|
expect(asFragment()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should ask to set up a recovery key when there is no key backup", async () => {
|
||||||
|
const user = userEvent.setup();
|
||||||
|
|
||||||
|
const onSetUpRecoveryClick = jest.fn();
|
||||||
|
const { asFragment } = renderRecoverPanel({ onSetUpRecoveryClick, onChangingRecoveryKeyClick: jest.fn() });
|
||||||
|
|
||||||
|
await waitFor(() => screen.getByRole("button", { name: "Set up recovery" }));
|
||||||
|
expect(asFragment()).toMatchSnapshot();
|
||||||
|
|
||||||
|
await user.click(screen.getByRole("button", { name: "Set up recovery" }));
|
||||||
|
expect(onSetUpRecoveryClick).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should ask to enter the recovery key when secrets are not cached", async () => {
|
||||||
|
jest.spyOn(matrixClient.getCrypto()!, "checkKeyBackupAndEnable").mockResolvedValue({} as KeyBackupCheck);
|
||||||
|
const user = userEvent.setup();
|
||||||
|
const { asFragment } = renderRecoverPanel();
|
||||||
|
|
||||||
|
await waitFor(() => screen.getByRole("button", { name: "Enter recovery key" }));
|
||||||
|
expect(asFragment()).toMatchSnapshot();
|
||||||
|
|
||||||
|
await user.click(screen.getByRole("button", { name: "Enter recovery key" }));
|
||||||
|
expect(accessSecretStorage).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should allow to change the recovery key when everything is good", async () => {
|
||||||
|
jest.spyOn(matrixClient.getCrypto()!, "checkKeyBackupAndEnable").mockResolvedValue({} as KeyBackupCheck);
|
||||||
|
jest.spyOn(matrixClient.getCrypto()!, "getCrossSigningStatus").mockResolvedValue({
|
||||||
|
privateKeysInSecretStorage: true,
|
||||||
|
publicKeysOnDevice: true,
|
||||||
|
privateKeysCachedLocally: {
|
||||||
|
masterKey: true,
|
||||||
|
selfSigningKey: true,
|
||||||
|
userSigningKey: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const user = userEvent.setup();
|
||||||
|
|
||||||
|
const onChangingRecoveryKeyClick = jest.fn();
|
||||||
|
const { asFragment } = renderRecoverPanel({ onSetUpRecoveryClick: jest.fn(), onChangingRecoveryKeyClick });
|
||||||
|
await waitFor(() => screen.getByRole("button", { name: "Change recovery key" }));
|
||||||
|
expect(asFragment()).toMatchSnapshot();
|
||||||
|
|
||||||
|
await user.click(screen.getByRole("button", { name: "Change recovery key" }));
|
||||||
|
expect(onChangingRecoveryKeyClick).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,179 @@
|
||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`<RecoveryPanel /> should allow to change the recovery key when everything is good 1`] = `
|
||||||
|
<DocumentFragment>
|
||||||
|
<div
|
||||||
|
class="mx_SettingsSection mx_SettingsSection_newUi"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="mx_SettingsSection_header"
|
||||||
|
>
|
||||||
|
<h2
|
||||||
|
class="_typography_yh5dq_162 _font-heading-sm-semibold_yh5dq_102 mx_SettingsHeader"
|
||||||
|
>
|
||||||
|
Recovery
|
||||||
|
</h2>
|
||||||
|
Recover your cryptographic identity and message history with a recovery key if you’ve lost all your existing devices.
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
class="_button_i91xf_17 _has-icon_i91xf_66"
|
||||||
|
data-kind="secondary"
|
||||||
|
data-size="sm"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
fill="currentColor"
|
||||||
|
height="20"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M7 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 5 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 7 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 7 14Zm0 4c-1.667 0-3.083-.583-4.25-1.75C1.583 15.083 1 13.667 1 12c0-1.667.583-3.083 1.75-4.25C3.917 6.583 5.333 6 7 6c1.117 0 2.13.275 3.037.825A6.212 6.212 0 0 1 12.2 9h8.375a1.033 1.033 0 0 1 .725.3l2 2c.1.1.17.208.212.325.042.117.063.242.063.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-3.175 3.175a.946.946 0 0 1-.3.2c-.117.05-.233.083-.35.1a.832.832 0 0 1-.35-.025.884.884 0 0 1-.325-.175L17.5 15l-1.425 1.075a.945.945 0 0 1-.887.15.859.859 0 0 1-.288-.15L13.375 15H12.2a6.212 6.212 0 0 1-2.162 2.175C9.128 17.725 8.117 18 7 18Zm0-2c.933 0 1.754-.283 2.463-.85A4.032 4.032 0 0 0 10.875 13H14l1.45 1.025L17.5 12.5l1.775 1.375L21.15 12l-1-1h-9.275a4.032 4.032 0 0 0-1.412-2.15C8.754 8.283 7.933 8 7 8c-1.1 0-2.042.392-2.825 1.175C3.392 9.958 3 10.9 3 12s.392 2.042 1.175 2.825C4.958 15.608 5.9 16 7 16Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
Change recovery key
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</DocumentFragment>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`<RecoveryPanel /> should ask to enter the recovery key when secrets are not cached 1`] = `
|
||||||
|
<DocumentFragment>
|
||||||
|
<div
|
||||||
|
class="mx_SettingsSection mx_SettingsSection_newUi"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="mx_SettingsSection_header"
|
||||||
|
>
|
||||||
|
<h2
|
||||||
|
class="_typography_yh5dq_162 _font-heading-sm-semibold_yh5dq_102 mx_SettingsHeader"
|
||||||
|
>
|
||||||
|
Recovery
|
||||||
|
</h2>
|
||||||
|
<div
|
||||||
|
class="mx_SettingsSubheader"
|
||||||
|
>
|
||||||
|
Recover your cryptographic identity and message history with a recovery key if you’ve lost all your existing devices.
|
||||||
|
<span
|
||||||
|
class="mx_SettingsSubheader_error"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
fill="currentColor"
|
||||||
|
height="20"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 15a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 16c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-4c.283 0 .52-.096.713-.287A.968.968 0 0 0 13 12V8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8v4c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 9a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
Your key storage is out of sync. Click the button below to fix the problem.
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
class="_button_i91xf_17 _has-icon_i91xf_66"
|
||||||
|
data-kind="primary"
|
||||||
|
data-size="sm"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
fill="currentColor"
|
||||||
|
height="20"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M7 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 5 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 7 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 7 14Zm0 4c-1.667 0-3.083-.583-4.25-1.75C1.583 15.083 1 13.667 1 12c0-1.667.583-3.083 1.75-4.25C3.917 6.583 5.333 6 7 6c1.117 0 2.13.275 3.037.825A6.212 6.212 0 0 1 12.2 9h8.375a1.033 1.033 0 0 1 .725.3l2 2c.1.1.17.208.212.325.042.117.063.242.063.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-3.175 3.175a.946.946 0 0 1-.3.2c-.117.05-.233.083-.35.1a.832.832 0 0 1-.35-.025.884.884 0 0 1-.325-.175L17.5 15l-1.425 1.075a.945.945 0 0 1-.887.15.859.859 0 0 1-.288-.15L13.375 15H12.2a6.212 6.212 0 0 1-2.162 2.175C9.128 17.725 8.117 18 7 18Zm0-2c.933 0 1.754-.283 2.463-.85A4.032 4.032 0 0 0 10.875 13H14l1.45 1.025L17.5 12.5l1.775 1.375L21.15 12l-1-1h-9.275a4.032 4.032 0 0 0-1.412-2.15C8.754 8.283 7.933 8 7 8c-1.1 0-2.042.392-2.825 1.175C3.392 9.958 3 10.9 3 12s.392 2.042 1.175 2.825C4.958 15.608 5.9 16 7 16Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
Enter recovery key
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</DocumentFragment>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`<RecoveryPanel /> should ask to set up a recovery key when there is no key backup 1`] = `
|
||||||
|
<DocumentFragment>
|
||||||
|
<div
|
||||||
|
class="mx_SettingsSection mx_SettingsSection_newUi"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="mx_SettingsSection_header"
|
||||||
|
>
|
||||||
|
<h2
|
||||||
|
class="_typography_yh5dq_162 _font-heading-sm-semibold_yh5dq_102 mx_SettingsHeader"
|
||||||
|
>
|
||||||
|
Recovery
|
||||||
|
<span>
|
||||||
|
Recommended
|
||||||
|
</span>
|
||||||
|
</h2>
|
||||||
|
Recover your cryptographic identity and message history with a recovery key if you’ve lost all your existing devices.
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
class="_button_i91xf_17 _has-icon_i91xf_66"
|
||||||
|
data-kind="primary"
|
||||||
|
data-size="sm"
|
||||||
|
role="button"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
aria-hidden="true"
|
||||||
|
fill="currentColor"
|
||||||
|
height="20"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="20"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M7 14c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 5 12c0-.55.196-1.02.588-1.412A1.926 1.926 0 0 1 7 10c.55 0 1.02.196 1.412.588.392.391.588.862.588 1.412 0 .55-.196 1.02-.588 1.412A1.926 1.926 0 0 1 7 14Zm0 4c-1.667 0-3.083-.583-4.25-1.75C1.583 15.083 1 13.667 1 12c0-1.667.583-3.083 1.75-4.25C3.917 6.583 5.333 6 7 6c1.117 0 2.13.275 3.037.825A6.212 6.212 0 0 1 12.2 9h8.375a1.033 1.033 0 0 1 .725.3l2 2c.1.1.17.208.212.325.042.117.063.242.063.375s-.02.258-.063.375a.877.877 0 0 1-.212.325l-3.175 3.175a.946.946 0 0 1-.3.2c-.117.05-.233.083-.35.1a.832.832 0 0 1-.35-.025.884.884 0 0 1-.325-.175L17.5 15l-1.425 1.075a.945.945 0 0 1-.887.15.859.859 0 0 1-.288-.15L13.375 15H12.2a6.212 6.212 0 0 1-2.162 2.175C9.128 17.725 8.117 18 7 18Zm0-2c.933 0 1.754-.283 2.463-.85A4.032 4.032 0 0 0 10.875 13H14l1.45 1.025L17.5 12.5l1.775 1.375L21.15 12l-1-1h-9.275a4.032 4.032 0 0 0-1.412-2.15C8.754 8.283 7.933 8 7 8c-1.1 0-2.042.392-2.825 1.175C3.392 9.958 3 10.9 3 12s.392 2.042 1.175 2.825C4.958 15.608 5.9 16 7 16Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
Set up recovery
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</DocumentFragment>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`<RecoveryPanel /> should be in loading state when checking backup and the cached keys 1`] = `
|
||||||
|
<DocumentFragment>
|
||||||
|
<div
|
||||||
|
class="mx_SettingsSection mx_SettingsSection_newUi"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="mx_SettingsSection_header"
|
||||||
|
>
|
||||||
|
<h2
|
||||||
|
class="_typography_yh5dq_162 _font-heading-sm-semibold_yh5dq_102 mx_SettingsHeader"
|
||||||
|
>
|
||||||
|
Recovery
|
||||||
|
</h2>
|
||||||
|
Recover your cryptographic identity and message history with a recovery key if you’ve lost all your existing devices.
|
||||||
|
</div>
|
||||||
|
<svg
|
||||||
|
aria-label="Loading…"
|
||||||
|
class="_icon_1ye7b_27"
|
||||||
|
fill="currentColor"
|
||||||
|
height="1em"
|
||||||
|
style="width: 20px; height: 20px;"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="1em"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M12 4.031a8 8 0 1 0 8 8 1 1 0 0 1 2 0c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10a1 1 0 1 1 0 2Z"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</DocumentFragment>
|
||||||
|
`;
|
Loading…
Reference in New Issue