test: [POM] Migrate create btc account e2e tests to TS and Page Object Model (#28437)

## **Description**

- Migrate create btc account e2e tests to TS and Page Object Model

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27155?quickstart=1)

## **Related issues**

Fixes:  #28542

## **Manual testing steps**
Check code readability, make sure tests pass.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] 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.

Author: chloeYue

test/e2e/flask/btc/common-btc.ts

@@ -1,6 +1,6 @@
 import { Mockttp } from 'mockttp';
 import FixtureBuilder from '../../fixture-builder';
-import { withFixtures, unlockWallet } from '../../helpers';
+import { withFixtures } from '../../helpers';
 import {
   DEFAULT_BTC_ACCOUNT,
   DEFAULT_BTC_BALANCE,
@@ -11,7 +11,9 @@ import {
 } from '../../constants';
 import { MultichainNetworks } from '../../../../shared/constants/multichain/networks';
 import { Driver } from '../../webdriver/driver';
-import messages from '../../../../app/_locales/en/messages.json';
+import { loginWithBalanceValidation } from '../../page-objects/flows/login.flow';
+import AccountListPage from '../../page-objects/pages/account-list-page';
+import HeaderNavbar from '../../page-objects/pages/header-navbar';
 
 const QUICKNODE_URL_REGEX = /^https:\/\/.*\.btc.*\.quiknode\.pro(\/|$)/u;
 
@@ -21,27 +23,6 @@ export enum SendFlowPlaceHolders {
   LOADING = 'Preparing transaction',
 }
 
-export async function createBtcAccount(driver: Driver) {
-  await driver.clickElement('[data-testid="account-menu-icon"]');
-  await driver.clickElement(
-    '[data-testid="multichain-account-menu-popover-action-button"]',
-  );
-  await driver.clickElement({
-    text: messages.addNewBitcoinAccount.message,
-    tag: 'button',
-  });
-  await driver.clickElementAndWaitToDisappear(
-    {
-      text: 'Add account',
-      tag: 'button',
-    },
-    // Longer timeout than usual, this reduces the flakiness
-    // around Bitcoin account creation (mainly required for
-    // Firefox)
-    5000,
-  );
-}
-
 export function btcToSats(btc: number): number {
   // Watchout, we're not using BigNumber(s) here (but that's ok for test purposes)
   return btc * SATS_IN_1_BTC;
@@ -231,8 +212,12 @@ export async function withBtcAccountSnap(
       ],
     },
     async ({ driver, mockServer }: { driver: Driver; mockServer: Mockttp }) => {
-      await unlockWallet(driver);
-      await createBtcAccount(driver);
+      await loginWithBalanceValidation(driver);
+      // create one BTC account
+      await new HeaderNavbar(driver).openAccountMenu();
+      const accountListPage = new AccountListPage(driver);
+      await accountListPage.check_pageIsLoaded();
+      await accountListPage.addNewBtcAccount();
       await test(driver, mockServer);
     },
   );

test/e2e/flask/btc/create-btc-account.spec.ts

@@ -1,26 +1,22 @@
 import { strict as assert } from 'assert';
 import { Suite } from 'mocha';
-import messages from '../../../../app/_locales/en/messages.json';
-
-import {
-  WALLET_PASSWORD,
-  completeSRPRevealQuiz,
-  getSelectedAccountAddress,
-  openSRPRevealQuiz,
-  removeSelectedAccount,
-  tapAndHoldToRevealSRP,
-} from '../../helpers';
-import { createBtcAccount, withBtcAccountSnap } from './common-btc';
+import { WALLET_PASSWORD } from '../../helpers';
+import AccountListPage from '../../page-objects/pages/account-list-page';
+import HeaderNavbar from '../../page-objects/pages/header-navbar';
+import LoginPage from '../../page-objects/pages/login-page';
+import PrivacySettings from '../../page-objects/pages/settings/privacy-settings';
+import ResetPasswordPage from '../../page-objects/pages/reset-password-page';
+import SettingsPage from '../../page-objects/pages/settings/settings-page';
+import { withBtcAccountSnap } from './common-btc';
 
 describe('Create BTC Account', function (this: Suite) {
   it('create BTC account from the menu', async function () {
     await withBtcAccountSnap(
       { title: this.test?.fullTitle() },
       async (driver) => {
-        await driver.findElement({
-          css: '[data-testid="account-menu-icon"]',
-          text: 'Bitcoin Account',
-        });
+        const headerNavbar = new HeaderNavbar(driver);
+        await headerNavbar.check_pageIsLoaded();
+        await headerNavbar.check_accountLabel('Bitcoin Account');
       },
     );
   });
@@ -29,27 +25,23 @@ describe('Create BTC Account', function (this: Suite) {
     await withBtcAccountSnap(
       { title: this.test?.fullTitle() },
       async (driver) => {
-        await driver.delay(500);
-        await driver.clickElement('[data-testid="account-menu-icon"]');
-        await driver.clickElement(
-          '[data-testid="multichain-account-menu-popover-action-button"]',
-        );
-
-        const createButton = await driver.findElement({
-          text: messages.addNewBitcoinAccount.message,
-          tag: 'button',
+        // check that we have one BTC account
+        const headerNavbar = new HeaderNavbar(driver);
+        await headerNavbar.check_pageIsLoaded();
+        await headerNavbar.check_accountLabel('Bitcoin Account');
+
+        // check user cannot create second BTC account
+        await headerNavbar.openAccountMenu();
+        const accountListPage = new AccountListPage(driver);
+        await accountListPage.check_pageIsLoaded();
+        await accountListPage.addNewBtcAccount({
+          btcAccountCreationEnabled: false,
         });
-        assert.equal(await createButton.isEnabled(), false);
 
-        // modal will still be here
-        await driver.clickElement('.mm-box button[aria-label="Close"]');
-
-        // check the number of accounts. it should only be 2.
-        await driver.clickElement('[data-testid="account-menu-icon"]');
-        const menuItems = await driver.findElements(
-          '.multichain-account-list-item',
-        );
-        assert.equal(menuItems.length, 2);
+        // check the number of available accounts is 2
+        await headerNavbar.openAccountMenu();
+        await accountListPage.check_pageIsLoaded();
+        await accountListPage.check_numberOfAvailableAccounts(2);
       },
     );
   });
@@ -58,29 +50,22 @@ describe('Create BTC Account', function (this: Suite) {
     await withBtcAccountSnap(
       { title: this.test?.fullTitle() },
       async (driver) => {
-        await driver.findElement({
-          css: '[data-testid="account-menu-icon"]',
-          text: 'Bitcoin Account',
-        });
-
-        await driver.clickElement('[data-testid="account-menu-icon"]');
-        await driver.clickElement(
-          '.multichain-account-list-item--selected [data-testid="account-list-item-menu-button"]',
-        );
-        await driver.clickElement('[data-testid="account-list-menu-remove"]');
-        await driver.clickElement({ text: 'Nevermind', tag: 'button' });
-
-        await driver.findElement({
-          css: '[data-testid="account-menu-icon"]',
-          text: 'Bitcoin Account',
-        });
-
-        // check the number of accounts. it should only be 2.
-        await driver.clickElement('[data-testid="account-menu-icon"]');
-        const menuItems = await driver.findElements(
-          '.multichain-account-list-item',
-        );
-        assert.equal(menuItems.length, 2);
+        // check that we have one BTC account
+        const headerNavbar = new HeaderNavbar(driver);
+        await headerNavbar.check_pageIsLoaded();
+        await headerNavbar.check_accountLabel('Bitcoin Account');
+
+        // check user can cancel the removal of the BTC account
+        await headerNavbar.openAccountMenu();
+        const accountListPage = new AccountListPage(driver);
+        await accountListPage.check_pageIsLoaded();
+        await accountListPage.removeAccount('Bitcoin Account', false);
+        await headerNavbar.check_accountLabel('Bitcoin Account');
+
+        // check the number of accounts. it should be 2.
+        await headerNavbar.openAccountMenu();
+        await accountListPage.check_pageIsLoaded();
+        await accountListPage.check_numberOfAvailableAccounts(2);
       },
     );
   });
@@ -89,22 +74,33 @@ describe('Create BTC Account', function (this: Suite) {
     await withBtcAccountSnap(
       { title: this.test?.fullTitle() },
       async (driver) => {
-        await driver.findElement({
-          css: '[data-testid="account-menu-icon"]',
-          text: 'Bitcoin Account',
-        });
-
-        const accountAddress = await getSelectedAccountAddress(driver);
-        await removeSelectedAccount(driver);
-
-        // Recreate account
-        await createBtcAccount(driver);
-        await driver.findElement({
-          css: '[data-testid="account-menu-icon"]',
-          text: 'Bitcoin Account',
-        });
+        // check that we have one BTC account
+        const headerNavbar = new HeaderNavbar(driver);
+        await headerNavbar.check_pageIsLoaded();
+        await headerNavbar.check_accountLabel('Bitcoin Account');
+
+        // get the address of the BTC account and remove it
+        await headerNavbar.openAccountMenu();
+        const accountListPage = new AccountListPage(driver);
+        await accountListPage.check_pageIsLoaded();
+        const accountAddress = await accountListPage.getAccountAddress(
+          'Bitcoin Account',
+        );
+        await headerNavbar.openAccountMenu();
+        await accountListPage.removeAccount('Bitcoin Account');
+
+        // Recreate account and check that the address is the same
+        await headerNavbar.openAccountMenu();
+        await accountListPage.check_pageIsLoaded();
+        await accountListPage.addNewBtcAccount();
+        await headerNavbar.check_accountLabel('Bitcoin Account');
+
+        await headerNavbar.openAccountMenu();
+        await accountListPage.check_pageIsLoaded();
+        const recreatedAccountAddress = await accountListPage.getAccountAddress(
+          'Bitcoin Account',
+        );
 
-        const recreatedAccountAddress = await getSelectedAccountAddress(driver);
         assert(accountAddress === recreatedAccountAddress);
       },
     );
@@ -114,62 +110,50 @@ describe('Create BTC Account', function (this: Suite) {
     await withBtcAccountSnap(
       { title: this.test?.fullTitle() },
       async (driver) => {
-        await driver.findElement({
-          css: '[data-testid="account-menu-icon"]',
-          text: 'Bitcoin Account',
-        });
-
-        const accountAddress = await getSelectedAccountAddress(driver);
-
-        await openSRPRevealQuiz(driver);
-        await completeSRPRevealQuiz(driver);
-        await driver.fill('[data-testid="input-password"]', WALLET_PASSWORD);
-        await driver.press('[data-testid="input-password"]', driver.Key.ENTER);
-        await tapAndHoldToRevealSRP(driver);
-        const seedPhrase = await (
-          await driver.findElement('[data-testid="srp_text"]')
-        ).getText();
-
-        // Reset wallet
-        await driver.clickElement(
-          '[data-testid="account-options-menu-button"]',
-        );
-        await driver.clickElement({
-          css: '[data-testid="global-menu-lock"]',
-          text: 'Lock MetaMask',
-        });
-
-        await driver.clickElement({
-          text: 'Forgot password?',
-          tag: 'a',
-        });
-
-        await driver.pasteIntoField(
-          '[data-testid="import-srp__srp-word-0"]',
-          seedPhrase,
+        // check that we have one BTC account
+        const headerNavbar = new HeaderNavbar(driver);
+        await headerNavbar.check_pageIsLoaded();
+        await headerNavbar.check_accountLabel('Bitcoin Account');
+
+        await headerNavbar.openAccountMenu();
+        const accountListPage = new AccountListPage(driver);
+        await accountListPage.check_pageIsLoaded();
+        const accountAddress = await accountListPage.getAccountAddress(
+          'Bitcoin Account',
         );
 
-        await driver.fill(
-          '[data-testid="create-vault-password"]',
-          WALLET_PASSWORD,
+        // go to privacy settings page and get the SRP
+        await headerNavbar.openSettingsPage();
+        const settingsPage = new SettingsPage(driver);
+        await settingsPage.check_pageIsLoaded();
+        await settingsPage.goToPrivacySettings();
+
+        const privacySettings = new PrivacySettings(driver);
+        await privacySettings.check_pageIsLoaded();
+        await privacySettings.openRevealSrpQuiz();
+        await privacySettings.completeRevealSrpQuiz();
+        await privacySettings.fillPasswordToRevealSrp(WALLET_PASSWORD);
+        const seedPhrase = await privacySettings.getSrpInRevealSrpDialog();
+
+        // lock metamask and reset wallet by clicking forgot password button
+        await headerNavbar.lockMetaMask();
+        await new LoginPage(driver).gotoResetPasswordPage();
+        const resetPasswordPage = new ResetPasswordPage(driver);
+        await resetPasswordPage.check_pageIsLoaded();
+        await resetPasswordPage.resetPassword(seedPhrase, WALLET_PASSWORD);
+
+        // create a BTC account and check that the address is the same
+        await headerNavbar.check_pageIsLoaded();
+        await headerNavbar.openAccountMenu();
+        await accountListPage.check_pageIsLoaded();
+        await accountListPage.addNewBtcAccount();
+        await headerNavbar.check_accountLabel('Bitcoin Account');
+
+        await headerNavbar.openAccountMenu();
+        await accountListPage.check_pageIsLoaded();
+        const recreatedAccountAddress = await accountListPage.getAccountAddress(
+          'Bitcoin Account',
         );
-        await driver.fill(
-          '[data-testid="create-vault-confirm-password"]',
-          WALLET_PASSWORD,
-        );
-
-        await driver.clickElement({
-          text: 'Restore',
-          tag: 'button',
-        });
-
-        await createBtcAccount(driver);
-        await driver.findElement({
-          css: '[data-testid="account-menu-icon"]',
-          text: 'Bitcoin Account',
-        });
-
-        const recreatedAccountAddress = await getSelectedAccountAddress(driver);
         assert(accountAddress === recreatedAccountAddress);
       },
     );