mirror of https://github.com/vector-im/riot-web
Add tests to `EncryptionUserSettingsTab`
Florian Duros
parent
fec324ec10
commit
44c6bce0f7
|
|
@ -36,7 +36,7 @@ export function EncryptionUserSettingsTab(): JSX.Element {
|
|||
let content: JSX.Element;
|
||||
switch (state) {
|
||||
case "loading":
|
||||
content = <InlineSpinner />;
|
||||
content = <InlineSpinner aria-label={_t("common|loading")} />;
|
||||
break;
|
||||
case "verification_required":
|
||||
content = <VerifySessionPanel onFinish={checkVerificationRequired} />;
|
||||
|
|
|
|||
|
|
@ -149,7 +149,6 @@ export function createTestClient(): MatrixClient {
|
|||
},
|
||||
}),
|
||||
isCrossSigningReady: jest.fn().mockResolvedValue(false),
|
||||
checkKeyBackupAndEnable: jest.fn().mockResolvedValue(null),
|
||||
}),
|
||||
|
||||
getPushActionsForEvent: jest.fn(),
|
||||
|
|
|
|||
|
|
@ -0,0 +1,98 @@
|
|||
/*
|
||||
* 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 { render, screen } from "jest-matrix-react";
|
||||
import { MatrixClient } from "matrix-js-sdk/src/matrix";
|
||||
import { waitFor } from "@testing-library/dom";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
import { KeyBackupCheck } from "matrix-js-sdk/src/crypto-api";
|
||||
|
||||
import { EncryptionUserSettingsTab } from "../../../../../../../src/components/views/settings/tabs/user/EncryptionUserSettingsTab";
|
||||
import { createTestClient, withClientContextRenderOptions } from "../../../../../../test-utils";
|
||||
import Modal from "../../../../../../../src/Modal";
|
||||
|
||||
describe("<EncryptionUserSettingsTab />", () => {
|
||||
let matrixClient: MatrixClient;
|
||||
|
||||
beforeEach(() => {
|
||||
matrixClient = createTestClient();
|
||||
jest.spyOn(matrixClient.getCrypto()!, "isCrossSigningReady").mockResolvedValue(true);
|
||||
// Key backup is enabled
|
||||
jest.spyOn(matrixClient.getCrypto()!, "checkKeyBackupAndEnable").mockResolvedValue({} as KeyBackupCheck);
|
||||
// Secrets are cached
|
||||
jest.spyOn(matrixClient.getCrypto()!, "getCrossSigningStatus").mockResolvedValue({
|
||||
privateKeysInSecretStorage: true,
|
||||
publicKeysOnDevice: true,
|
||||
privateKeysCachedLocally: {
|
||||
masterKey: true,
|
||||
selfSigningKey: true,
|
||||
userSigningKey: true,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
function renderComponent() {
|
||||
return render(<EncryptionUserSettingsTab />, withClientContextRenderOptions(matrixClient));
|
||||
}
|
||||
|
||||
it("should display a loading state when the verification state is computed", () => {
|
||||
jest.spyOn(matrixClient.getCrypto()!, "isCrossSigningReady").mockImplementation(() => new Promise(() => {}));
|
||||
|
||||
renderComponent();
|
||||
expect(screen.getByLabelText("Loading…")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("should display a verify button when the device is not verified", async () => {
|
||||
const user = userEvent.setup();
|
||||
jest.spyOn(matrixClient.getCrypto()!, "isCrossSigningReady").mockResolvedValue(false);
|
||||
|
||||
const { asFragment } = renderComponent();
|
||||
await waitFor(() =>
|
||||
expect(
|
||||
screen.getByText("You need to verify this device in order to view your encryption settings."),
|
||||
).toBeInTheDocument(),
|
||||
);
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
|
||||
const spy = jest.spyOn(Modal, "createDialog").mockReturnValue({} as any);
|
||||
await user.click(screen.getByText("Verify this device"));
|
||||
expect(spy).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("should display the recovery panel when the device is verified", async () => {
|
||||
renderComponent();
|
||||
await waitFor(() => expect(screen.getByText("Recovery")).toBeInTheDocument());
|
||||
});
|
||||
|
||||
it("should display the change recovery key panel when the user clicks on the change recovery button", async () => {
|
||||
const user = userEvent.setup();
|
||||
|
||||
const { asFragment } = renderComponent();
|
||||
await waitFor(() => {
|
||||
const button = screen.getByRole("button", { name: "Change recovery key" });
|
||||
expect(button).toBeInTheDocument();
|
||||
user.click(button);
|
||||
});
|
||||
await waitFor(() => expect(screen.getByText("Change recovery key")).toBeInTheDocument());
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("should display the set up recovery key when the user clicks on the set up recovery key button", async () => {
|
||||
jest.spyOn(matrixClient.getCrypto()!, "checkKeyBackupAndEnable").mockResolvedValue(null);
|
||||
const user = userEvent.setup();
|
||||
|
||||
const { asFragment } = renderComponent();
|
||||
await waitFor(() => {
|
||||
const button = screen.getByRole("button", { name: "Set up recovery" });
|
||||
expect(button).toBeInTheDocument();
|
||||
user.click(button);
|
||||
});
|
||||
await waitFor(() => expect(screen.getByText("Set up recovery")).toBeInTheDocument());
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<EncryptionUserSettingsTab /> should display a verify button when the device is not verified 1`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="mx_SettingsTab mx_EncryptionUserSettingsTab"
|
||||
data-testid="encryptionTab"
|
||||
>
|
||||
<div
|
||||
class="mx_SettingsTab_sections"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
Device not verified
|
||||
</h2>
|
||||
<div
|
||||
class="mx_SettingsSubheader"
|
||||
>
|
||||
<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>
|
||||
You need to verify this device in order to view your encryption settings.
|
||||
</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="M4 18c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 2 16V5c0-.55.196-1.02.587-1.413A1.926 1.926 0 0 1 4 3h16c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v11c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 20 18H4Zm0-2h16V5H4v11Zm-2 5a.967.967 0 0 1-.712-.288A.968.968 0 0 1 1 20c0-.283.096-.52.288-.712A.967.967 0 0 1 2 19h20c.283 0 .52.096.712.288.192.191.288.429.288.712s-.096.52-.288.712A.968.968 0 0 1 22 21H2Z"
|
||||
/>
|
||||
</svg>
|
||||
Verify this device
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`<EncryptionUserSettingsTab /> should display the change recovery key panel when the user clicks on the change recovery button 1`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="mx_SettingsTab mx_EncryptionUserSettingsTab"
|
||||
data-testid="encryptionTab"
|
||||
>
|
||||
<div
|
||||
class="mx_SettingsTab_sections"
|
||||
/>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`<EncryptionUserSettingsTab /> should display the set up recovery key when the user clicks on the set up recovery key button 1`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="mx_SettingsTab mx_EncryptionUserSettingsTab"
|
||||
data-testid="encryptionTab"
|
||||
>
|
||||
<div
|
||||
class="mx_SettingsTab_sections"
|
||||
/>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
Loading…
Reference in New Issue