nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

EW: Modernize the recovery key input modal (#29819)

Browse Source 
* initial application of recovery key input redesign

* update styling to agree more with design, and fix jest tests

* look for the right element for entering the key

* fix more playwright tests

* use return value of validation function instead of state
This commit is contained in:
Hubert Chathi
2025-05-23 17:06:00 -04:00
committed by GitHub
parent 8513eaa898
commit 45182172b8
7 changed files with 150 additions and 504 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
test/unit-tests/components/views/dialogs/AccessSecretStorageDialog-test.tsx
View File

@@ -29,9 +29,9 @@ describe("AccessSecretStorageDialog", () => {
render(<AccessSecretStorageDialog {...defaultProps} {...props} />);
};
const enterRecoveryKey = (placeholder = "Recovery Key"): void => {
const enterRecoveryKey = (): void => {
act(() => {
fireEvent.change(screen.getByPlaceholderText(placeholder), {
fireEvent.change(screen.getByRole("textbox"), {
target: {
value: recoveryKey,
},
@@ -67,19 +67,19 @@ describe("AccessSecretStorageDialog", () => {
renderComponent({ onFinished, checkPrivateKey });
// check that the input field is focused
expect(screen.getByPlaceholderText("Recovery Key")).toHaveFocus();
expect(screen.getByRole("textbox")).toHaveFocus();
await enterRecoveryKey();
await submitDialog();
expect(screen.getByText("Looks good!")).toBeInTheDocument();
expect(screen.getByText("Continue")).not.toHaveAttribute("aria-disabled", "true");
expect(checkPrivateKey).toHaveBeenCalledWith({ recoveryKey });
expect(onFinished).toHaveBeenCalledWith({ recoveryKey });
});
it("Notifies the user if they input an invalid Recovery Key", async () => {
const onFinished = jest.fn();
const checkPrivateKey = jest.fn().mockResolvedValue(true);
const checkPrivateKey = jest.fn().mockResolvedValue(false);
renderComponent({ onFinished, checkPrivateKey });
jest.spyOn(mockClient.secretStorage, "checkKey").mockImplementation(() => {
@@ -89,8 +89,8 @@ describe("AccessSecretStorageDialog", () => {
await enterRecoveryKey();
await submitDialog();
expect(screen.getByText("Continue")).toBeDisabled();
expect(screen.getByText("Invalid Recovery Key")).toBeInTheDocument();
expect(screen.getByText("The recovery key you entered is not correct.")).toBeInTheDocument();
expect(screen.getByText("Continue")).toHaveAttribute("aria-disabled", "true");
});
it("Notifies the user if they input an invalid passphrase", async function () {
@@ -110,46 +110,10 @@ describe("AccessSecretStorageDialog", () => {
const checkPrivateKey = jest.fn().mockResolvedValue(false);
renderComponent({ checkPrivateKey, keyInfo });
await enterRecoveryKey("Security Phrase");
expect(screen.getByPlaceholderText("Security Phrase")).toHaveValue(recoveryKey);
await submitDialog();
await enterRecoveryKey();
expect(screen.getByRole("textbox")).toHaveValue(recoveryKey);
await expect(
screen.findByText(
"👎 Unable to access secret storage. Please verify that you entered the correct Security Phrase.",
),
).resolves.toBeInTheDocument();
expect(screen.getByPlaceholderText("Security Phrase")).toHaveFocus();
});
it("Can reset secret storage", async () => {
jest.spyOn(mockClient.secretStorage, "checkKey").mockResolvedValue(true);
const onFinished = jest.fn();
const checkPrivateKey = jest.fn().mockResolvedValue(true);
renderComponent({ onFinished, checkPrivateKey });
await userEvent.click(screen.getByText("Reset all"), { delay: null });
// It will prompt the user to confirm resetting
expect(screen.getByText("Reset everything")).toBeInTheDocument();
await userEvent.click(screen.getByText("Reset"), { delay: null });
// Then it will prompt the user to create a key/passphrase
await screen.findByText("Set up Secure Backup");
document.execCommand = jest.fn().mockReturnValue(true);
jest.spyOn(mockClient.getCrypto()!, "createRecoveryKeyFromPassphrase").mockResolvedValue({
privateKey: new Uint8Array(),
encodedPrivateKey: recoveryKey,
});
screen.getByRole("button", { name: "Continue" }).click();
await screen.findByText(/Save your Recovery Key/);
screen.getByRole("button", { name: "Copy" }).click();
await screen.findByText("Copied!");
screen.getByRole("button", { name: "Continue" }).click();
await screen.findByText("Secure Backup successful");
await expect(screen.findByText("The recovery key you entered is not correct.")).resolves.toBeInTheDocument();
expect(screen.getByText("Continue")).toHaveAttribute("aria-disabled", "true");
});
});