diff --git a/src/components/views/settings/tabs/user/EncryptionUserSettingsTab.tsx b/src/components/views/settings/tabs/user/EncryptionUserSettingsTab.tsx
index b8cbfa44fd..97e6ed1ab5 100644
--- a/src/components/views/settings/tabs/user/EncryptionUserSettingsTab.tsx
+++ b/src/components/views/settings/tabs/user/EncryptionUserSettingsTab.tsx
@@ -36,7 +36,7 @@ export function EncryptionUserSettingsTab(): JSX.Element {
let content: JSX.Element;
switch (state) {
case "loading":
- content = ;
+ content = ;
break;
case "verification_required":
content = ;
diff --git a/test/test-utils/test-utils.ts b/test/test-utils/test-utils.ts
index 902dc32e6e..883d1fa7eb 100644
--- a/test/test-utils/test-utils.ts
+++ b/test/test-utils/test-utils.ts
@@ -149,7 +149,6 @@ export function createTestClient(): MatrixClient {
},
}),
isCrossSigningReady: jest.fn().mockResolvedValue(false),
- checkKeyBackupAndEnable: jest.fn().mockResolvedValue(null),
}),
getPushActionsForEvent: jest.fn(),
diff --git a/test/unit-tests/components/views/settings/tabs/user/EncryptionUserSettingsTab-test.tsx b/test/unit-tests/components/views/settings/tabs/user/EncryptionUserSettingsTab-test.tsx
new file mode 100644
index 0000000000..d0a01fe603
--- /dev/null
+++ b/test/unit-tests/components/views/settings/tabs/user/EncryptionUserSettingsTab-test.tsx
@@ -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("", () => {
+ 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(, 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();
+ });
+});
diff --git a/test/unit-tests/components/views/settings/tabs/user/__snapshots__/EncryptionUserSettingsTab-test.tsx.snap b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/EncryptionUserSettingsTab-test.tsx.snap
new file mode 100644
index 0000000000..fd63b70c76
--- /dev/null
+++ b/test/unit-tests/components/views/settings/tabs/user/__snapshots__/EncryptionUserSettingsTab-test.tsx.snap
@@ -0,0 +1,95 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[` should display a verify button when the device is not verified 1`] = `
+
+
+
+
+
+
+
+
+