Block change recovery key button while a change is ongoing. (#30664)

* Block change recovery key button while a change is ongoing.

* Add disable check

* lint

* Ensure we test that spamming the button doesn't break it.

* Mock out modals

* lint

* add two more clicks

* lint

---------

Co-authored-by: Andy Balaam <andy.balaam@matrix.org>
This commit is contained in:
Will Hunt
2025-09-04 10:15:08 +01:00
committed by GitHub
parent 07c253d11f
commit c17d71a90b
3 changed files with 68 additions and 13 deletions

View File

@@ -14,6 +14,8 @@ import { mocked } from "jest-mock";
import { ChangeRecoveryKey } from "../../../../../../src/components/views/settings/encryption/ChangeRecoveryKey";
import { createTestClient, withClientContextRenderOptions } from "../../../../../test-utils";
import { copyPlaintext } from "../../../../../../src/utils/strings";
import Modal from "../../../../../../src/Modal";
import ErrorDialog from "../../../../../../src/components/views/dialogs/ErrorDialog";
jest.mock("../../../../../../src/utils/strings", () => ({
copyPlaintext: jest.fn(),
@@ -120,27 +122,69 @@ describe("<ChangeRecoveryKey />", () => {
mocked(matrixClient.getCrypto()!).bootstrapSecretStorage.mockRejectedValue(new Error("can't bootstrap"));
const user = userEvent.setup();
renderComponent(false);
const { getByRole, getByText, getByTitle } = renderComponent(false);
// Display the recovery key to save
await waitFor(() => user.click(screen.getByRole("button", { name: "Continue" })));
await waitFor(() => user.click(getByRole("button", { name: "Continue" })));
// Display the form to confirm the recovery key
await waitFor(() => user.click(screen.getByRole("button", { name: "Continue" })));
await waitFor(() => user.click(getByRole("button", { name: "Continue" })));
await waitFor(() => expect(screen.getByText("Enter your recovery key to confirm")).toBeInTheDocument());
await waitFor(() => expect(getByText("Enter your recovery key to confirm")).toBeInTheDocument());
const finishButton = screen.getByRole("button", { name: "Finish set up" });
const input = screen.getByTitle("Enter recovery key");
const finishButton = getByRole("button", { name: "Finish set up" });
const input = getByTitle("Enter recovery key");
await userEvent.type(input, "encoded private key");
await waitFor(() => {
expect(finishButton).not.toBeDisabled();
});
jest.spyOn(Modal, "createDialog");
await user.click(finishButton);
await screen.findByText("Failed to set up secret storage");
await screen.findByText("Error: can't bootstrap");
expect(Modal.createDialog).toHaveBeenCalledWith(ErrorDialog, {
title: "Failed to set up secret storage",
description: "Error: can't bootstrap",
});
await waitFor(() => user.click(getByRole("button", { name: "OK" })));
expect(consoleErrorSpy).toHaveBeenCalledWith(
"Failed to set up secret storage:",
new Error("can't bootstrap"),
);
});
it("should disallow repeated attempts to change the recovery key", async () => {
const mockFn = mocked(matrixClient.getCrypto()!).bootstrapSecretStorage.mockImplementation(() => {
// Pretend to do some work.
return new Promise((r) => setTimeout(r, 200));
});
const user = userEvent.setup();
const { getByRole, getByText, getByTitle } = renderComponent(false);
// Display the recovery key to save
await waitFor(() => user.click(getByRole("button", { name: "Continue" })));
// Display the form to confirm the recovery key
await waitFor(() => user.click(getByRole("button", { name: "Continue" })));
await waitFor(() => expect(getByText("Enter your recovery key to confirm")).toBeInTheDocument());
const finishButton = getByRole("button", { name: "Finish set up" });
const input = getByTitle("Enter recovery key");
await userEvent.type(input, "encoded private key");
await waitFor(() => {
expect(finishButton).not.toBeDisabled();
});
await user.click(finishButton);
await user.click(finishButton);
await user.click(finishButton);
await waitFor(() => expect(mockFn).toHaveBeenCalledTimes(1));
});
});
describe("flow to change the recovery key", () => {