From ece5901b40da31b08ab4267aa26b96fffe84f83f Mon Sep 17 00:00:00 2001 From: Thomas Huang Date: Tue, 30 Aug 2022 16:53:24 -0700 Subject: [PATCH] Unit tests for first time flow/new account and onboarding flow. (#15625) --- .../experimental-area/experimental-area.js | 2 +- .../__snapshots__/new-account.test.js.snap | 106 ++++++++ .../new-account/new-account.component.js | 4 +- .../new-account/new-account.test.js | 108 ++++++++ .../create-password/create-password.js | 2 +- .../creation-successful.js | 2 +- .../onboarding-flow/import-srp/import-srp.js | 2 +- .../metametrics/metametrics.js | 5 +- .../onboarding-flow/onboarding-flow.test.js | 236 ++++++++++++++++++ .../pin-extension/pin-extension.js | 5 +- .../privacy-settings/privacy-settings.js | 2 +- .../confirm-recovery-phrase.js | 5 +- .../recovery-phrase/review-recovery-phrase.js | 2 +- .../secure-your-wallet/secure-your-wallet.js | 2 +- ui/pages/onboarding-flow/welcome/welcome.js | 2 +- ui/pages/unlock-page/unlock-page.component.js | 2 +- 16 files changed, 474 insertions(+), 13 deletions(-) create mode 100644 ui/pages/first-time-flow/create-password/new-account/__snapshots__/new-account.test.js.snap create mode 100644 ui/pages/first-time-flow/create-password/new-account/new-account.test.js create mode 100644 ui/pages/onboarding-flow/onboarding-flow.test.js diff --git a/ui/components/app/flask/experimental-area/experimental-area.js b/ui/components/app/flask/experimental-area/experimental-area.js index b6b05f5da..078a14ff6 100644 --- a/ui/components/app/flask/experimental-area/experimental-area.js +++ b/ui/components/app/flask/experimental-area/experimental-area.js @@ -75,7 +75,7 @@ export default function ExperimentalArea({ redirectTo }) { }; return ( -
+
{METAMASK_LOGO}
{EXPERIMENTAL_AREA}
diff --git a/ui/pages/first-time-flow/create-password/new-account/__snapshots__/new-account.test.js.snap b/ui/pages/first-time-flow/create-password/new-account/__snapshots__/new-account.test.js.snap new file mode 100644 index 000000000..1a94dd374 --- /dev/null +++ b/ui/pages/first-time-flow/create-password/new-account/__snapshots__/new-account.test.js.snap @@ -0,0 +1,106 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Name of the group should match snapshot 1`] = ` +
+
+
+ + < [back] + +
+
+ [createPassword] +
+
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+ + + +
+
+`; diff --git a/ui/pages/first-time-flow/create-password/new-account/new-account.component.js b/ui/pages/first-time-flow/create-password/new-account/new-account.component.js index 7c7154430..cd35c0366 100644 --- a/ui/pages/first-time-flow/create-password/new-account/new-account.component.js +++ b/ui/pages/first-time-flow/create-password/new-account/new-account.component.js @@ -105,7 +105,6 @@ export default class NewAccount extends PureComponent { event: EVENT_NAMES.ACCOUNT_PASSWORD_CREATED, properties: {}, }); - history.push(INITIALIZE_SEED_PHRASE_INTRO_ROUTE); } catch (error) { this.setState({ passwordError: error.message }); @@ -138,6 +137,7 @@ export default class NewAccount extends PureComponent {
{ e.preventDefault(); this.props.history.push(INITIALIZE_SELECT_ACTION_ROUTE); @@ -150,6 +150,7 @@ export default class NewAccount extends PureComponent {
{t('createPassword')}
{ + const props = { + onSubmit: jest.fn(), + history: { + push: jest.fn(), + }, + }; + + it('should match snapshot', () => { + const { container } = renderWithProvider(); + expect(container).toMatchSnapshot(); + }); + + it('should back button', () => { + const { queryByTestId } = renderWithProvider(); + const onboardingBackButton = queryByTestId('onboarding-back-button'); + + fireEvent.click(onboardingBackButton); + + expect(props.history.push).toHaveBeenCalledWith( + INITIALIZE_SELECT_ACTION_ROUTE, + ); + }); + + it('should initialize with a disabled create button', () => { + const { queryByRole } = renderWithProvider(); + const createButton = queryByRole('button', { type: 'primary' }); + + expect(createButton).toBeInTheDocument(); + expect(createButton).toHaveAttribute('disabled'); + }); + + it('should', async () => { + const { queryByRole, queryByTestId } = renderWithProvider( + , + ); + + const password = 'a-new-password'; + + const checkTerms = queryByRole('checkbox'); + + const createPassword = queryByTestId('create-password'); + const confirmPassword = queryByTestId('confirm-password'); + + const createButton = queryByRole('button', { type: 'primary' }); + fireEvent.click(checkTerms); + fireEvent.change(createPassword, { target: { value: password } }); + fireEvent.change(confirmPassword, { target: { value: password } }); + + expect(createButton).not.toHaveAttribute('disabled'); + + fireEvent.click(createButton); + + await waitFor(() => { + expect(props.history.push).toHaveBeenCalledWith( + INITIALIZE_SEED_PHRASE_INTRO_ROUTE, + ); + }); + }); + + it('should error when the password and the confirm password are not the same', () => { + const { queryByRole, queryByTestId, queryByText } = renderWithProvider( + , + ); + + const password = 'a-new-password'; + const wrongPassword = 'wrong-password'; + + const createPassword = queryByTestId('create-password'); + const confirmPassword = queryByTestId('confirm-password'); + + fireEvent.change(createPassword, { target: { value: password } }); + fireEvent.change(confirmPassword, { target: { value: wrongPassword } }); + + const errorMessage = queryByText(/passwordsDontMatch/u); + expect(errorMessage).toBeInTheDocument(); + + // Create button is disabled. + const createButton = queryByRole('button', { type: 'primary' }); + expect(createButton).toHaveAttribute('disabled'); + }); + + it('should disable the create button if the terms are not checked but passwords are correct', () => { + const { queryByRole, queryByTestId } = renderWithProvider( + , + ); + + const password = 'a-new-password'; + + const createPassword = queryByTestId('create-password'); + const confirmPassword = queryByTestId('confirm-password'); + + fireEvent.change(createPassword, { target: { value: password } }); + fireEvent.change(confirmPassword, { target: { value: password } }); + + const createButton = queryByRole('button', { type: 'primary' }); + expect(createButton).toHaveAttribute('disabled'); + }); +}); diff --git a/ui/pages/onboarding-flow/create-password/create-password.js b/ui/pages/onboarding-flow/create-password/create-password.js index dd2ce1989..c742c7d8a 100644 --- a/ui/pages/onboarding-flow/create-password/create-password.js +++ b/ui/pages/onboarding-flow/create-password/create-password.js @@ -151,7 +151,7 @@ export default function CreatePassword({ }; return ( -
+
{secretRecoveryPhrase && firstTimeFlowType === FIRST_TIME_FLOW_TYPES.IMPORT ? ( +
+
+
({ + createNewVaultAndGetSeedPhrase: jest.fn().mockResolvedValue(null), + unlockAndGetSeedPhrase: jest.fn().mockResolvedValue(null), + createNewVaultAndRestore: jest.fn(), +})); + +describe('Onboarding Flow', () => { + const mockState = { + metamask: {}, + }; + + const store = configureMockStore()(mockState); + + it('should route to the default route when completedOnboarding and seedPhraseBackedUp is true', () => { + const completedOnboardingState = { + metamask: { + completedOnboarding: true, + seedPhraseBackedUp: true, + }, + }; + + const completedOnboardingStore = configureMockStore()( + completedOnboardingState, + ); + + const { history } = renderWithProvider( + , + completedOnboardingStore, + '/other', + ); + + expect(history.location.pathname).toStrictEqual(DEFAULT_ROUTE); + }); + + describe('Create Password', () => { + it('should render create password', () => { + const { queryByTestId } = renderWithProvider( + , + store, + ONBOARDING_CREATE_PASSWORD_ROUTE, + ); + + const createPassword = queryByTestId('create-password'); + expect(createPassword).toBeInTheDocument(); + }); + + it('should call createNewVaultAndGetSeedPhrase when creating a new wallet password', async () => { + const { queryByTestId } = renderWithProvider( + , + store, + ONBOARDING_CREATE_PASSWORD_ROUTE, + ); + + const password = 'a-new-password'; + const checkTerms = queryByTestId('create-password-terms'); + const createPassword = queryByTestId('create-password-new'); + const confirmPassword = queryByTestId('create-password-confirm'); + const createPasswordWallet = queryByTestId('create-password-wallet'); + + fireEvent.click(checkTerms); + fireEvent.change(createPassword, { target: { value: password } }); + fireEvent.change(confirmPassword, { target: { value: password } }); + fireEvent.click(createPasswordWallet); + + await waitFor(() => + expect(createNewVaultAndGetSeedPhrase).toHaveBeenCalled(), + ); + }); + }); + + it('should render secure your wallet component', () => { + const { queryByTestId } = renderWithProvider( + , + store, + ONBOARDING_SECURE_YOUR_WALLET_ROUTE, + ); + + const secureYourWallet = queryByTestId('secure-your-wallet'); + expect(secureYourWallet).toBeInTheDocument(); + }); + + it('should render review recovery phrase', () => { + const { queryByTestId } = renderWithProvider( + , + store, + ONBOARDING_REVIEW_SRP_ROUTE, + ); + + const recoveryPhrase = queryByTestId('recovery-phrase'); + expect(recoveryPhrase).toBeInTheDocument(); + }); + + it('should render confirm recovery phrase', () => { + const { queryByTestId } = renderWithProvider( + , + store, + ONBOARDING_CONFIRM_SRP_ROUTE, + ); + + const confirmRecoveryPhrase = queryByTestId('confirm-recovery-phrase'); + expect(confirmRecoveryPhrase).toBeInTheDocument(); + }); + + it('should render import seed phrase', () => { + const { queryByTestId } = renderWithProvider( + , + store, + ONBOARDING_IMPORT_WITH_SRP_ROUTE, + ); + + const importSrp = queryByTestId('import-srp'); + expect(importSrp).toBeInTheDocument(); + }); + + describe('Unlock Screen', () => { + it('should render unlock page', () => { + const { queryByTestId } = renderWithProvider( + , + store, + ONBOARDING_UNLOCK_ROUTE, + ); + + const unlockPage = queryByTestId('unlock-page'); + expect(unlockPage).toBeInTheDocument(); + }); + + it('should', async () => { + const { getByLabelText, getByText } = renderWithProvider( + , + store, + ONBOARDING_UNLOCK_ROUTE, + ); + + const password = 'a-new-password'; + const inputPassword = getByLabelText('Password'); + const unlockButton = getByText('Unlock'); + + fireEvent.change(inputPassword, { target: { value: password } }); + fireEvent.click(unlockButton); + await waitFor(() => expect(unlockAndGetSeedPhrase).toHaveBeenCalled()); + }); + }); + + it('should render privacy settings', () => { + const { queryByTestId } = renderWithProvider( + , + store, + ONBOARDING_PRIVACY_SETTINGS_ROUTE, + ); + + const privacySettings = queryByTestId('privacy-settings'); + expect(privacySettings).toBeInTheDocument(); + }); + + it('should render onboarding creation/completion successful', () => { + const { queryByTestId } = renderWithProvider( + , + store, + ONBOARDING_COMPLETION_ROUTE, + ); + + const creationSuccessful = queryByTestId('creation-successful'); + expect(creationSuccessful).toBeInTheDocument(); + }); + + it('should render onboarding welcome screen', () => { + const { queryByTestId } = renderWithProvider( + , + store, + ONBOARDING_WELCOME_ROUTE, + ); + + const onboardingWelcome = queryByTestId('onboarding-welcome'); + expect(onboardingWelcome).toBeInTheDocument(); + }); + + it('should render onboarding pin extension screen', () => { + const { queryByTestId } = renderWithProvider( + , + store, + ONBOARDING_PIN_EXTENSION_ROUTE, + ); + + const pinExtension = queryByTestId('onboarding-pin-extension'); + expect(pinExtension).toBeInTheDocument(); + }); + + it('should render onboarding metametrics screen', () => { + const { queryByTestId } = renderWithProvider( + , + store, + ONBOARDING_METAMETRICS, + ); + + const onboardingMetametrics = queryByTestId('onboarding-metametrics'); + expect(onboardingMetametrics).toBeInTheDocument(); + }); + + it('should render onboarding experimental screen', () => { + const { queryByTestId } = renderWithProvider( + , + store, + ONBOARDING_EXPERIMENTAL_AREA, + ); + + const onboardingMetametrics = queryByTestId('experimental-area'); + expect(onboardingMetametrics).toBeInTheDocument(); + }); +}); diff --git a/ui/pages/onboarding-flow/pin-extension/pin-extension.js b/ui/pages/onboarding-flow/pin-extension/pin-extension.js index 6888fc197..006a1036e 100644 --- a/ui/pages/onboarding-flow/pin-extension/pin-extension.js +++ b/ui/pages/onboarding-flow/pin-extension/pin-extension.js @@ -19,7 +19,10 @@ export default function OnboardingPinExtension() { const history = useHistory(); return ( -
+
-
+
{t('setAdvancedPrivacySettings')} diff --git a/ui/pages/onboarding-flow/recovery-phrase/confirm-recovery-phrase.js b/ui/pages/onboarding-flow/recovery-phrase/confirm-recovery-phrase.js index 32e6888c8..ccd4ca2e4 100644 --- a/ui/pages/onboarding-flow/recovery-phrase/confirm-recovery-phrase.js +++ b/ui/pages/onboarding-flow/recovery-phrase/confirm-recovery-phrase.js @@ -54,7 +54,10 @@ export default function ConfirmRecoveryPhrase({ secretRecoveryPhrase = '' }) { }; return ( -
+
+
+
{showSkipSRPBackupPopover && ( setShowSkipSRPBackupPopover(false)} /> )} diff --git a/ui/pages/onboarding-flow/welcome/welcome.js b/ui/pages/onboarding-flow/welcome/welcome.js index f1290cc04..1ee113dcb 100644 --- a/ui/pages/onboarding-flow/welcome/welcome.js +++ b/ui/pages/onboarding-flow/welcome/welcome.js @@ -32,7 +32,7 @@ export default function OnboardingWelcome() { }; return ( -
+
-
+