test: [POM] Create base classes and methods for bitcoin e2e tests

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

@@ -1,63 +1,24 @@
+import { strict as assert } from 'assert';
 import { Suite } from 'mocha';
 import { DEFAULT_BTC_BALANCE } from '../../constants';
+import BitcoinHomepage from '../../page-objects/pages/home/bitcoin-homepage';
 import { withBtcAccountSnap } from './common-btc';
 
 describe('BTC Account - Overview', function (this: Suite) {
-  it('has portfolio button enabled for BTC accounts', async function () {
+  it('has balance displayed and has portfolio button enabled for BTC accounts', async function () {
     await withBtcAccountSnap(
       { title: this.test?.fullTitle() },
       async (driver) => {
-        await driver.findElement({
-          css: '[data-testid="account-menu-icon"]',
-          text: 'Bitcoin Account',
-        });
-
-        await driver.waitForSelector({
-          text: 'Send',
-          tag: 'button',
-          css: '[data-testid="coin-overview-send"]',
-        });
-
-        await driver.waitForSelector({
-          text: 'Swap',
-          tag: 'button',
-          css: '[disabled]',
-        });
-
-        await driver.waitForSelector({
-          text: 'Bridge',
-          tag: 'button',
-          css: '[disabled]',
-        });
-
-        // buy sell button
-        await driver.findClickableElement('[data-testid="coin-overview-buy"]');
-
-        // receive button
-        await driver.findClickableElement(
-          '[data-testid="coin-overview-receive"]',
+        const homePage = new BitcoinHomepage(driver);
+        await homePage.check_pageIsLoaded();
+        await homePage.headerNavbar.check_accountLabel('Bitcoin Account');
+        await homePage.check_isExpectedBitcoinBalanceDisplayed(
+          DEFAULT_BTC_BALANCE,
         );
-      },
-    );
-  });
-
-  it('has balance', async function () {
-    await withBtcAccountSnap(
-      { title: this.test?.fullTitle() },
-      async (driver) => {
-        await driver.waitForSelector({
-          testId: 'account-value-and-suffix',
-          text: `${DEFAULT_BTC_BALANCE}`,
-        });
-        await driver.waitForSelector({
-          css: '.currency-display-component__suffix',
-          text: 'BTC',
-        });
-
-        await driver.waitForSelector({
-          tag: 'p',
-          text: `${DEFAULT_BTC_BALANCE} BTC`,
-        });
+        assert.equal(await homePage.check_isBridgeButtonEnabled(), false);
+        assert.equal(await homePage.check_isSwapButtonEnabled(), false);
+        assert.equal(await homePage.check_isBuySellButtonEnabled(), true);
+        assert.equal(await homePage.check_isReceiveButtonEnabled(), true);
       },
     );
   });

test/e2e/flask/btc/btc-dapp-connection.spec.ts

@@ -1,20 +1,23 @@
 import { Suite } from 'mocha';
-import { openDapp, WINDOW_TITLES } from '../../helpers';
+import BitcoinHomepage from '../../page-objects/pages/home/bitcoin-homepage';
+import TestDapp from '../../page-objects/pages/test-dapp';
 import { withBtcAccountSnap } from './common-btc';
 
 describe('BTC Account - Dapp Connection', function (this: Suite) {
   it('cannot connect to dapps', async function () {
     await withBtcAccountSnap(
       { title: this.test?.fullTitle() },
       async (driver) => {
-        await openDapp(driver);
-        await driver.clickElement('#connectButton');
-        await driver.waitUntilXWindowHandles(3);
-        await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
+        const homePage = new BitcoinHomepage(driver);
+        await homePage.check_pageIsLoaded();
+        await homePage.headerNavbar.check_accountLabel('Bitcoin Account');
 
-        await driver.assertElementNotPresent(
-          '[data-testid="choose-account-list-1"]',
-        );
+        const testDapp = new TestDapp(driver);
+        await testDapp.openTestDappPage();
+        await testDapp.check_pageIsLoaded();
+        await testDapp.connectAccount({
+          connectAccountButtonEnabled: false,
+        });
       },
     );
   });

test/e2e/flask/btc/btc-experimental-settings.spec.ts

@@ -1,47 +1,45 @@
 import { Suite } from 'mocha';
-
-import messages from '../../../../app/_locales/en/messages.json';
 import FixtureBuilder from '../../fixture-builder';
-import {
-  defaultGanacheOptions,
-  unlockWallet,
-  withFixtures,
-} from '../../helpers';
+import { withFixtures } from '../../helpers';
 import { Driver } from '../../webdriver/driver';
+import AccountListPage from '../../page-objects/pages/account-list-page';
+import ExperimentalSettings from '../../page-objects/pages/settings/experimental-settings';
+import HomePage from '../../page-objects/pages/home/homepage';
+import HeaderNavbar from '../../page-objects/pages/header-navbar';
+import SettingsPage from '../../page-objects/pages/settings/settings-page';
+import { loginWithBalanceValidation } from '../../page-objects/flows/login.flow';
 
 describe('BTC Experimental Settings', function (this: Suite) {
   it('will show `Add a new Bitcoin account (Beta)` option when setting is enabled', async function () {
     await withFixtures(
       {
         fixtures: new FixtureBuilder().build(),
-        ganacheOptions: defaultGanacheOptions,
         title: this.test?.fullTitle(),
       },
       async ({ driver }: { driver: Driver }) => {
-        await unlockWallet(driver);
-        await driver.clickElement(
-          '[data-testid="account-options-menu-button"]',
-        );
-        await driver.clickElement({ text: 'Settings', tag: 'div' });
-        await driver.clickElement({ text: 'Experimental', tag: 'div' });
+        await loginWithBalanceValidation(driver);
 
-        await driver.waitForSelector({
-          text: messages.bitcoinSupportToggleTitle.message,
-          tag: 'span',
-        });
+        // go to experimental settings page and enable add new Bitcoin account toggle
+        const homePage = new HomePage(driver);
+        await homePage.check_pageIsLoaded();
+        await homePage.check_expectedBalanceIsDisplayed();
 
-        await driver.clickElement('[data-testid="bitcoin-support-toggle-div"]');
+        await new HeaderNavbar(driver).openSettingsPage();
+        const settingsPage = new SettingsPage(driver);
+        await settingsPage.check_pageIsLoaded();
+        await settingsPage.goToExperimentalSettings();
 
-        await driver.clickElement('button[aria-label="Close"]');
+        const experimentalSettings = new ExperimentalSettings(driver);
+        await experimentalSettings.check_pageIsLoaded();
+        await experimentalSettings.toggleBitcoinAccount();
+        await settingsPage.closeSettingsPage();
 
-        await driver.clickElement('[data-testid="account-menu-icon"]');
-        await driver.clickElement(
-          '[data-testid="multichain-account-menu-popover-action-button"]',
-        );
-        await driver.waitForSelector({
-          text: messages.addNewBitcoinAccount.message,
-          tag: 'button',
-        });
+        // check add new Bitcoin account button is displayed
+        await homePage.check_pageIsLoaded();
+        await new HeaderNavbar(driver).openAccountMenu();
+        const accountListPage = new AccountListPage(driver);
+        await accountListPage.check_pageIsLoaded();
+        await accountListPage.check_addBitcoinAccountAvailable(true);
       },
     );
   });

test/e2e/page-objects/pages/account-list-page.ts

@@ -374,6 +374,22 @@ class AccountListPage {
     });
   }
 
+  async check_addBitcoinAccountAvailable(
+    expectedAvailability: boolean,
+  ): Promise<void> {
+    console.log(
+      `Check add bitcoin account button is ${
+        expectedAvailability ? 'displayed ' : 'not displayed'
+      }`,
+    );
+    await this.openAddAccountModal();
+    if (expectedAvailability) {
+      await this.driver.waitForSelector(this.addBtcAccountButton);
+    } else {
+      await this.driver.assertElementNotPresent(this.addBtcAccountButton);
+    }
+  }
+
   async openAccountOptionsMenu(): Promise<void> {
     console.log(`Open account option menu`);
     await this.driver.waitForSelector(this.accountListItem);

test/e2e/page-objects/pages/header-navbar.ts

@@ -1,7 +1,7 @@
 import { Driver } from '../../webdriver/driver';
 
 class HeaderNavbar {
-  private driver: Driver;
+  protected driver: Driver;
 
   private readonly accountMenuButton = '[data-testid="account-menu-icon"]';
 

test/e2e/page-objects/pages/home/bitcoin-homepage.ts

@@ -0,0 +1,112 @@
+import HomePage from './homepage';
+
+class BitcoinHomepage extends HomePage {
+  protected readonly balance =
+    '[data-testid="coin-overview__primary-currency"]';
+
+  private readonly bridgeButton = {
+    text: 'Bridge',
+    tag: 'button',
+  };
+
+  private readonly buySellButton = '[data-testid="coin-overview-buy"]';
+
+  private readonly receiveButton = '[data-testid="coin-overview-receive"]';
+
+  protected readonly sendButton = '[data-testid="coin-overview-send"]';
+
+  private readonly swapButton = {
+    text: 'Swap',
+    tag: 'button',
+  };
+
+  async check_pageIsLoaded(): Promise<void> {
+    try {
+      await this.driver.waitForMultipleSelectors([
+        this.sendButton,
+        this.buySellButton,
+        this.receiveButton,
+      ]);
+    } catch (e) {
+      console.log('Timeout while waiting for bitcoin homepage to be loaded', e);
+      throw e;
+    }
+    console.log('Bitcoin homepage is loaded');
+  }
+
+  /**
+   * Checks if the bridge button is enabled on bitcoin account homepage.
+   *
+   */
+  async check_isBridgeButtonEnabled(): Promise<boolean> {
+    try {
+      await this.driver.findClickableElement(this.bridgeButton, 1000);
+    } catch (e) {
+      console.log('Bridge button not enabled', e);
+      return false;
+    }
+    console.log('Bridge button is enabled');
+    return true;
+  }
+
+  /**
+   * Checks if the buy/sell button is enabled on bitcoin account homepage.
+   */
+  async check_isBuySellButtonEnabled(): Promise<boolean> {
+    try {
+      await this.driver.findClickableElement(this.buySellButton, 1000);
+    } catch (e) {
+      console.log('Buy/Sell button not enabled', e);
+      return false;
+    }
+    console.log('Buy/Sell button is enabled');
+    return true;
+  }
+
+  /**
+   * Checks if the expected bitcoin balance is displayed on homepage.
+   *
+   * @param expectedBalance - The expected bitcoin balance to be displayed. Defaults to '0'.
+   */
+  async check_isExpectedBitcoinBalanceDisplayed(
+    expectedBalance: number = 0,
+  ): Promise<void> {
+    console.log(
+      `Check if expected bitcoin balance is displayed: ${expectedBalance} BTC`,
+    );
+    await this.driver.waitForSelector({
+      css: this.balance,
+      text: `${expectedBalance}BTC`,
+    });
+  }
+
+  /**
+   * Checks if the receive button is enabled on bitcoin account homepage.
+   */
+  async check_isReceiveButtonEnabled(): Promise<boolean> {
+    try {
+      await this.driver.findClickableElement(this.receiveButton, 1000);
+    } catch (e) {
+      console.log('Receive button not enabled', e);
+      return false;
+    }
+    console.log('Receive button is enabled');
+    return true;
+  }
+
+  /**
+   * Checks if the swap button is enabled on bitcoin account homepage.
+   */
+  async check_isSwapButtonEnabled(): Promise<boolean> {
+    try {
+      await this.driver.findClickableElement(this.swapButton, 1000);
+    } catch (e) {
+      console.log('Swap button not enabled', e);
+      return false;
+    }
+    console.log('Swap button is enabled');
+    return true;
+  }
+}
+
+export default BitcoinHomepage;

test/e2e/page-objects/pages/home/homepage.ts

@@ -4,14 +4,15 @@ import { getCleanAppState } from '../../../helpers';
 import HeaderNavbar from '../header-navbar';
 
 class HomePage {
-  private driver: Driver;
+  protected driver: Driver;
 
   public headerNavbar: HeaderNavbar;
 
   private readonly activityTab =
     '[data-testid="account-overview__activity-tab"]';
 
-  private readonly balance = '[data-testid="eth-overview__primary-currency"]';
+  protected readonly balance: string =
+    '[data-testid="eth-overview__primary-currency"]';
 
   private readonly basicFunctionalityOffWarningMessage = {
     text: 'Basic functionality is off',
@@ -33,7 +34,7 @@ class HomePage {
 
   private readonly refreshErc20Tokens = '[data-testid="refreshList"]';
 
-  private readonly sendButton = '[data-testid="eth-overview-send"]';
+  protected readonly sendButton: string = '[data-testid="eth-overview-send"]';
 
   private readonly tokensTab = '[data-testid="account-overview__asset-tab"]';
 

test/e2e/page-objects/pages/settings/experimental-settings.ts

@@ -1,4 +1,5 @@
 import { Driver } from '../../../webdriver/driver';
+import messages from '../../../../../app/_locales/en/messages.json';
 
 class ExperimentalSettings {
   private readonly driver: Driver;
@@ -7,6 +8,9 @@ class ExperimentalSettings {
   private readonly addAccountSnapToggle =
     '[data-testid="add-account-snap-toggle-div"]';
 
+  private readonly addBitcoinAccountToggle =
+    '[data-testid="bitcoin-support-toggle-div"]';
+
   private readonly experimentalPageTitle = {
     text: 'Experimental',
     tag: 'h4',
@@ -35,6 +39,15 @@ class ExperimentalSettings {
     console.log('Experimental Settings page is loaded');
   }
 
+  async toggleBitcoinAccount(): Promise<void> {
+    console.log('Toggle Add new Bitcoin account on experimental setting page');
+    await this.driver.waitForSelector({
+      text: messages.bitcoinSupportToggleTitle.message,
+      tag: 'span',
+    });
+    await this.driver.clickElement(this.addBitcoinAccountToggle);
+  }
+
   async toggleAddAccountSnap(): Promise<void> {
     console.log('Toggle Add Account Snap on experimental setting page');
     await this.driver.clickElement(this.addAccountSnapToggle);