- {bannerText && (
-
- {bannerText}
-
- )}
-
-
-
-
-
- This hint should help you remember where you stored your account
- recovery key. We can show it to you during the password reset to
- recover your data.
-
-
-
+
);
diff --git a/packages/fxa-settings/src/components/Settings/PageRecoveryKeyCreate/index.test.tsx b/packages/fxa-settings/src/components/Settings/PageRecoveryKeyCreate/index.test.tsx
index eda738b092e..19f1f696790 100644
--- a/packages/fxa-settings/src/components/Settings/PageRecoveryKeyCreate/index.test.tsx
+++ b/packages/fxa-settings/src/components/Settings/PageRecoveryKeyCreate/index.test.tsx
@@ -109,7 +109,7 @@ describe('PageRecoveryKeyCreate when recovery key not enabled', () => {
});
// Go to page 4
- const flowPage3Button = screen.getByRole('link', {
+ const flowPage3Button = screen.getByRole('button', {
name: 'Continue without downloading',
});
fireEvent.click(flowPage3Button);
@@ -180,7 +180,7 @@ describe('PageRecoveryKeyCreate when recovery key is enabled', () => {
});
// Go to page 4
- const flowPage3Button = screen.getByRole('link', {
+ const flowPage3Button = screen.getByRole('button', {
name: 'Continue without downloading',
});
fireEvent.click(flowPage3Button);
diff --git a/packages/fxa-settings/src/lib/sensitive-data-client.ts b/packages/fxa-settings/src/lib/sensitive-data-client.ts
index b3115ca2eb3..308c8135a5f 100644
--- a/packages/fxa-settings/src/lib/sensitive-data-client.ts
+++ b/packages/fxa-settings/src/lib/sensitive-data-client.ts
@@ -4,6 +4,8 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
+export const AUTH_DATA_KEY = 'auth';
+
/**
* Class representing a client for handling sensitive data.
*
diff --git a/packages/fxa-settings/src/lib/utilities.ts b/packages/fxa-settings/src/lib/utilities.ts
index ac304f90f9f..1e865474c39 100644
--- a/packages/fxa-settings/src/lib/utilities.ts
+++ b/packages/fxa-settings/src/lib/utilities.ts
@@ -2,6 +2,7 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+import base32Encode from 'base32-encode';
import { AttachedClient } from '../models/Account';
// Various utilities that don't fit in a standalone lib
@@ -111,6 +112,10 @@ export function isBase32Crockford(value: string) {
return B32_STRING.test(value);
}
+export function formatRecoveryKey(recoveryKeyBuffer: ArrayBufferLike) {
+ return base32Encode(recoveryKeyBuffer, 'Crockford').match(/.{4}/g)!.join(' ');
+}
+
/**
* Ensures a given callback is called at most once per invocation with a given key.
* For example:
diff --git a/packages/fxa-settings/src/pages/InlineRecoveryKeySetup/container.test.tsx b/packages/fxa-settings/src/pages/InlineRecoveryKeySetup/container.test.tsx
new file mode 100644
index 00000000000..4aa60bc67bc
--- /dev/null
+++ b/packages/fxa-settings/src/pages/InlineRecoveryKeySetup/container.test.tsx
@@ -0,0 +1,150 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { render } from '@testing-library/react';
+import React from 'react';
+import InlineRecoveryKeySetupContainer from './container';
+import * as InlineRecoveryKeySetupModule from '.';
+import * as ModelsModule from '../../models';
+import * as utils from 'fxa-react/lib/utils';
+import AuthClient from 'fxa-auth-client/browser';
+import { mockSensitiveDataClient as createMockSensitiveDataClient } from '../../models/mocks';
+import {
+ MOCK_EMAIL,
+ MOCK_UID,
+ MOCK_SESSION_TOKEN,
+ MOCK_UNWRAP_BKEY,
+ MOCK_AUTH_PW,
+} from '../../pages/mocks';
+import { AUTH_DATA_KEY } from '../../lib/sensitive-data-client';
+import { InlineRecoveryKeySetupProps } from './interfaces';
+
+jest.mock('../../models', () => ({
+ ...jest.requireActual('../../models'),
+ useAuthClient: jest.fn(),
+ useSensitiveDataClient: jest.fn(),
+}));
+const mockAuthClient = new AuthClient('http://localhost:9000', {
+ keyStretchVersion: 1,
+});
+
+jest.mock('fxa-react/lib/utils', () => ({
+ ...jest.requireActual('fxa-react/lib/utils'),
+ hardNavigate: jest.fn(),
+}));
+
+const mockSensitiveDataClient = createMockSensitiveDataClient();
+mockSensitiveDataClient.getData = jest.fn();
+
+function mockModelsModule() {
+ mockAuthClient.sessionReauthWithAuthPW = jest
+ .fn()
+ .mockResolvedValue({ keyFetchToken: 'keyFetchToken' });
+ mockAuthClient.accountKeys = jest
+ .fn()
+ .mockResolvedValue({ kA: 'kA', kB: 'kB' });
+ mockAuthClient.createRecoveryKey = jest.fn();
+ mockAuthClient.updateRecoveryKeyHint = jest.fn();
+ (ModelsModule.useAuthClient as jest.Mock).mockImplementation(
+ () => mockAuthClient
+ );
+ (ModelsModule.useSensitiveDataClient as jest.Mock).mockImplementation(
+ () => mockSensitiveDataClient
+ );
+ mockSensitiveDataClient.getData = jest.fn().mockReturnValue({
+ emailForAuth: 'bloop@gmail.com',
+ authPW: MOCK_AUTH_PW,
+ });
+}
+
+function applyDefaultMocks() {
+ jest.resetAllMocks();
+ jest.restoreAllMocks();
+ mockModelsModule();
+ mockInlineRecoveryKeySetupModule();
+ mockLocationState = {
+ email: MOCK_EMAIL,
+ uid: MOCK_UID,
+ sessionToken: MOCK_SESSION_TOKEN,
+ unwrapBKey: MOCK_UNWRAP_BKEY,
+ };
+}
+
+let mockLocationState = {};
+const mockLocation = () => {
+ return {
+ pathname: '/inline_recovery_key_setup',
+ state: mockLocationState,
+ };
+};
+jest.mock('@reach/router', () => {
+ return {
+ __esModule: true,
+ ...jest.requireActual('@reach/router'),
+ useLocation: () => mockLocation(),
+ };
+});
+
+let currentProps: InlineRecoveryKeySetupProps | undefined;
+function mockInlineRecoveryKeySetupModule() {
+ currentProps = undefined;
+ jest
+ .spyOn(InlineRecoveryKeySetupModule, 'default')
+ .mockImplementation((props: InlineRecoveryKeySetupProps) => {
+ currentProps = props;
+ return