Description

Multiple onboarding tests are flaky, failing with the error TimeoutError: Waiting for element to be located By(css selector, [data-testid="recovery-phrase-reveal"])

The problem is that the test can get to the page where that selector is present, but then be re-routed back to the previous screen. This is due to a race condition.

in create-password.js there is this code:

useEffect(() => {
   if (currentKeyring) {
     if (firstTimeFlowType === FirstTimeFlowType.import) {
       ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
       history.replace(ONBOARDING_COMPLETION_ROUTE);
       ///: END:ONLY_INCLUDE_IF

       ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
       history.replace(ONBOARDING_PIN_EXTENSION_ROUTE);
       ///: END:ONLY_INCLUDE_IF
     } else {
       ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
       history.replace(ONBOARDING_SECURE_YOUR_WALLET_ROUTE);
       ///: END:ONLY_INCLUDE_IF

       ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
       history.replace(SRP_REMINDER);
       ///: END:ONLY_INCLUDE_IF
     }
   }
 }, [currentKeyring, history, firstTimeFlowType]);

and there is this also this code inside handleCreate():

} else {
      // Otherwise we are in create new wallet flow
      try {
        if (createNewAccount) {
          await createNewAccount(password);
        }
        ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
        history.push(ONBOARDING_SECURE_YOUR_WALLET_ROUTE);
        ///: END:ONLY_INCLUDE_IF

        ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
        history.replace(SRP_REMINDER);
        ///: END:ONLY_INCLUDE_IF
      } catch (error) {
        setPasswordError(error.message);
      }

What is happening is:

1. user clicks submit/confirm on the create password screen
2. await createNewAccount(password); occurs
3. before that fully resolves, at least a new keyring is created, so the useEffect fires and history.replace(ONBOARDING_SECURE_YOUR_WALLET_ROUTE); so the user/test is taken to the next route and continues with the clicks on the "Secure your wallet" and then "Write down your Secret Recovery Phrase" screen
4. then await createNewAccount(password); resolves, and the user/test is rerouted to the "Secure Your Wallet" screen again

The fix is to prevent the history.replace(ONBOARDING_SECURE_YOUR_WALLET_ROUTE) call in the useEffect if handleCreate has already started to create a new account

Related issues

Fixes: #24608

Manual testing steps

e2e tests should pass

Pre-merge author checklist

• I’ve followed MetaMask Coding Standards.
• I've completed the PR template to the best of my ability
• I’ve included tests if applicable
• I’ve documented my code using JSDoc format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.