Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Autofocus security key field (#10048)
Browse files Browse the repository at this point in the history
  • Loading branch information
@weeman1337
weeman1337 authored Feb 3, 2023
1 parent ebb8408 commit 0895570
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 99 deletions.
1 change: 1 addition & 0 deletions src/components/views/dialogs/security/AccessSecretStorageDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -404,6 +404,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent<IProp
label={_t("Security Key")}
value={this.state.recoveryKey}
onChange={this.onRecoveryKeyChange}
autoFocus={true}
forceValidity={this.state.recoveryKeyCorrect}
autoComplete="off"
/>
Expand Down
169 changes: 70 additions & 99 deletions test/components/views/dialogs/AccessSecretStorageDialog-test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,113 +15,97 @@ limitations under the License.
*/

import React from "react";
// eslint-disable-next-line deprecate/import
import { mount, ReactWrapper } from "enzyme";
import { act } from "react-dom/test-utils";
import { IPassphraseInfo } from "matrix-js-sdk/src/crypto/api";
import { act, fireEvent, render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { MatrixClient } from "matrix-js-sdk/src/matrix";
import { Mocked } from "jest-mock";

import { findByAttr, getMockClientWithEventEmitter, unmockClientPeg } from "../../../test-utils";
import { findById, flushPromises } from "../../../test-utils";
import { getMockClientWithEventEmitter, mockPlatformPeg } from "../../../test-utils";
import AccessSecretStorageDialog from "../../../../src/components/views/dialogs/security/AccessSecretStorageDialog";

const securityKey = "EsTc WKmb ivvk jLS7 Y1NH 5CcQ mP1E JJwj B3Fd pFWm t4Dp dbyu";

describe("AccessSecretStorageDialog", () => {
const mockClient = getMockClientWithEventEmitter({
keyBackupKeyFromRecoveryKey: jest.fn(),
checkSecretStorageKey: jest.fn(),
isValidRecoveryKey: jest.fn(),
});
let mockClient: Mocked<MatrixClient>;

const defaultProps = {
onFinished: jest.fn(),
checkPrivateKey: jest.fn(),
keyInfo: undefined,
};
const getComponent = (props = {}): ReactWrapper =>
mount(<AccessSecretStorageDialog {...defaultProps} {...props} />);

beforeEach(() => {
jest.clearAllMocks();
mockClient.keyBackupKeyFromRecoveryKey.mockReturnValue("a raw key" as unknown as Uint8Array);
mockClient.isValidRecoveryKey.mockReturnValue(false);
});

afterAll(() => {
unmockClientPeg();
});

it("Closes the dialog when the form is submitted with a valid key", async () => {
const onFinished = jest.fn();
const checkPrivateKey = jest.fn().mockResolvedValue(true);
const wrapper = getComponent({ onFinished, checkPrivateKey });
const renderComponent = (props = {}): void => {
render(<AccessSecretStorageDialog {...defaultProps} {...props} />);
};

// force into valid state
const enterSecurityKey = (placeholder = "Security Key"): void => {
act(() => {
wrapper.setState({
recoveryKeyValid: true,
recoveryKey: "a",
fireEvent.change(screen.getByPlaceholderText(placeholder), {
target: {
value: securityKey,
},
});
// wait for debounce
jest.advanceTimersByTime(250);
});
const e = { preventDefault: () => {} };
};

act(() => {
wrapper.find("form").simulate("submit", e);
});
const submitDialog = async (): Promise<void> => {
await userEvent.click(screen.getByText("Continue"), { delay: null });
};

await flushPromises();
beforeAll(() => {
jest.useFakeTimers();
mockPlatformPeg();
});

expect(checkPrivateKey).toHaveBeenCalledWith({ recoveryKey: "a" });
expect(onFinished).toHaveBeenCalledWith({ recoveryKey: "a" });
afterAll(() => {
jest.useRealTimers();
jest.restoreAllMocks();
});

it("Considers a valid key to be valid", async () => {
const checkPrivateKey = jest.fn().mockResolvedValue(true);
const wrapper = getComponent({ checkPrivateKey });
mockClient.keyBackupKeyFromRecoveryKey.mockReturnValue("a raw key" as unknown as Uint8Array);
beforeEach(() => {
mockClient = getMockClientWithEventEmitter({
keyBackupKeyFromRecoveryKey: jest.fn(),
checkSecretStorageKey: jest.fn(),
isValidRecoveryKey: jest.fn(),
});
});

it("Closes the dialog when the form is submitted with a valid key", async () => {
mockClient.checkSecretStorageKey.mockResolvedValue(true);
mockClient.isValidRecoveryKey.mockReturnValue(true);

const v = "asdf";
const e = { target: { value: v } };
act(() => {
findById(wrapper, "mx_securityKey").find("input").simulate("change", e);
wrapper.setProps({});
});
await act(async () => {
// force a validation now because it debounces
// @ts-ignore
await wrapper.instance().validateRecoveryKey();
wrapper.setProps({});
});
const onFinished = jest.fn();
const checkPrivateKey = jest.fn().mockResolvedValue(true);
renderComponent({ onFinished, checkPrivateKey });

// check that the input field is focused
expect(screen.getByPlaceholderText("Security Key")).toHaveFocus();

const submitButton = findByAttr("data-testid")(wrapper, "dialog-primary-button").at(0);
// submit button is enabled when key is valid
expect(submitButton.props().disabled).toBeFalsy();
expect(wrapper.find(".mx_AccessSecretStorageDialog_recoveryKeyFeedback").text()).toEqual("Looks good!");
await enterSecurityKey();
await submitDialog();

expect(screen.getByText("Looks good!")).toBeInTheDocument();
expect(checkPrivateKey).toHaveBeenCalledWith({ recoveryKey: securityKey });
expect(onFinished).toHaveBeenCalledWith({ recoveryKey: securityKey });
});

it("Notifies the user if they input an invalid Security Key", async () => {
const checkPrivateKey = jest.fn().mockResolvedValue(false);
const wrapper = getComponent({ checkPrivateKey });
const e = { target: { value: "a" } };
const onFinished = jest.fn();
const checkPrivateKey = jest.fn().mockResolvedValue(true);
renderComponent({ onFinished, checkPrivateKey });

mockClient.keyBackupKeyFromRecoveryKey.mockImplementation(() => {
throw new Error("that's no key");
});

act(() => {
findById(wrapper, "mx_securityKey").find("input").simulate("change", e);
});
// force a validation now because it debounces
// @ts-ignore private
await wrapper.instance().validateRecoveryKey();

const submitButton = findByAttr("data-testid")(wrapper, "dialog-primary-button").at(0);
// submit button is disabled when recovery key is invalid
expect(submitButton.props().disabled).toBeTruthy();
expect(wrapper.find(".mx_AccessSecretStorageDialog_recoveryKeyFeedback").text()).toEqual(
"Invalid Security Key",
);

wrapper.setProps({});
const notification = wrapper.find(".mx_AccessSecretStorageDialog_recoveryKeyFeedback");
expect(notification.props().children).toEqual("Invalid Security Key");
await enterSecurityKey();
await submitDialog();

expect(screen.getByText("Continue")).toBeDisabled();
expect(screen.getByText("Invalid Security Key")).toBeInTheDocument();
});

it("Notifies the user if they input an invalid passphrase", async function () {
Expand All @@ -139,30 +123,17 @@ describe("AccessSecretStorageDialog", () => {
},
};
const checkPrivateKey = jest.fn().mockResolvedValue(false);
const wrapper = getComponent({ checkPrivateKey, keyInfo });
renderComponent({ checkPrivateKey, keyInfo });
mockClient.isValidRecoveryKey.mockReturnValue(false);

// update passphrase
act(() => {
const e = { target: { value: "a" } };
findById(wrapper, "mx_passPhraseInput").at(1).simulate("change", e);
});
wrapper.setProps({});

// input updated
expect(findById(wrapper, "mx_passPhraseInput").at(0).props().value).toEqual("a");
await enterSecurityKey("Security Phrase");
expect(screen.getByPlaceholderText("Security Phrase")).toHaveValue(securityKey);
await submitDialog();

// submit the form
act(() => {
wrapper.find("form").at(0).simulate("submit");
});
await flushPromises();

wrapper.setProps({});
const notification = wrapper.find(".mx_AccessSecretStorageDialog_keyStatus");
expect(notification.props().children).toEqual([
"\uD83D\uDC4E ",
"Unable to access secret storage. Please verify that you " + "entered the correct Security Phrase.",
]);
expect(
screen.getByText(
"👎 Unable to access secret storage. Please verify that you entered the correct Security Phrase.",
),
).toBeInTheDocument();
});
});

0 comments on commit 0895570

Please sign in to comment.