fix: ensure create-password.js doesn't attempt to change routes twice

[danjm]

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.

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[seaona]

amazing finding and fix 🔥 It looks good from QA.
ℹ️ To test locally (from Dan): add a small delay after getSeedPhrase from action.ts file

 await createNewVault(password);
 const seedPhrase = await getSeedPhrase(password);
  await new Promise(resolve => setTimeout(resolve, 500));

Before

redirect-onboarding.mp4

After

redirect-fix.mp4

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 65.78%. Comparing base (0df1d57) to head (89b8597).
Report is 3 commits behind head on develop.

Additional details and impacted files

@@           Coverage Diff            @@
##           develop   #24874   +/-   ##
========================================
  Coverage    65.77%   65.78%           
========================================
  Files         1366     1366           
  Lines        54254    54256    +2     
  Branches     14101    14101           
========================================
+ Hits         35685    35687    +2     
  Misses       18569    18569           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[chloeYue]

Great catch! Thanks!

[metamaskbot]

Missing release label release-11.16.6 on PR. Adding release label release-11.16.6 on PR and removing other release labels(release-11.18.0), as PR was cherry-picked in branch 11.16.6.