feature(17901): fix address-book Sends to an address book entry e2e against MV3 build (#19330)

* feature(17901): fix address-book `Sends to an address book entry` e2e against MV3 build

* feature(17901): add balance guide for send-eth e2e as well

---------

Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com>

test/e2e/helpers.js

@@ -511,6 +511,24 @@ const TEST_SEED_PHRASE =
 const TEST_SEED_PHRASE_TWO =
   'phrase upgrade clock rough situate wedding elder clever doctor stamp excess tent';
 
+// Usually happens when onboarded to make sure the state is retrieved from metamaskState properly
+const assertAccountBalanceForDOM = async (driver, ganacheServer) => {
+  const balance = await ganacheServer.getBalance();
+  const balanceElement = await driver.findElement(
+    '[data-testid="eth-overview__primary-currency"]',
+  );
+  assert.equal(`${balance}\nETH`, await balanceElement.getText());
+};
+
+// Usually happens after txn is made
+const locateAccountBalanceDOM = async (driver, ganacheServer) => {
+  const balance = await ganacheServer.getBalance();
+  await driver.waitForSelector({
+    css: '[data-testid="eth-overview__primary-currency"]',
+    text: `${balance} ETH`,
+  });
+};
+
 module.exports = {
   DAPP_URL,
   DAPP_ONE_URL,
@@ -537,4 +555,6 @@ module.exports = {
   defaultGanacheOptions,
   sendTransaction,
   findAnotherAccountFromAccountList,
+  assertAccountBalanceForDOM,
+  locateAccountBalanceDOM,
 };

test/e2e/tests/address-book.spec.js

@@ -1,5 +1,9 @@
 const { strict: assert } = require('assert');
-const { convertToHexValue, withFixtures } = require('../helpers');
+const {
+  convertToHexValue,
+  withFixtures,
+  assertAccountBalanceForDOM,
+} = require('../helpers');
 const FixtureBuilder = require('../fixture-builder');
 
 describe('Address Book', function () {
@@ -12,6 +16,7 @@ describe('Address Book', function () {
       },
     ],
   };
+
   it('Sends to an address book entry', async function () {
     await withFixtures(
       {
@@ -33,11 +38,12 @@ describe('Address Book', function () {
         ganacheOptions,
         title: this.test.title,
       },
-      async ({ driver }) => {
+      async ({ driver, ganacheServer }) => {
         await driver.navigate();
         await driver.fill('#password', 'correct horse battery staple');
         await driver.press('#password', driver.Key.ENTER);
 
+        await assertAccountBalanceForDOM(driver, ganacheServer);
         await driver.clickElement('[data-testid="eth-overview-send"]');
         const recipientRowTitle = await driver.findElement(
           '.send__select-recipient-wrapper__group-item__title',

test/e2e/tests/contract-interactions.spec.js

@@ -1,5 +1,9 @@
-const { strict: assert } = require('assert');
+const {
-const { convertToHexValue, withFixtures, openDapp } = require('../helpers');
+  convertToHexValue,
+  withFixtures,
+  openDapp,
+  locateAccountBalanceDOM,
+} = require('../helpers');
 const { SMART_CONTRACTS } = require('../seeder/smart-contracts');
 const FixtureBuilder = require('../fixture-builder');
 
@@ -89,12 +93,7 @@ describe('Deploy contract and call contract methods', function () {
 
         // renders the correct ETH balance
         await driver.switchToWindow(extension);
-        const balance = await ganacheServer.getBalance();
+        await locateAccountBalanceDOM(driver, ganacheServer);
-        const balanceElement = await driver.waitForSelector({
-          css: '[data-testid="eth-overview__primary-currency"]',
-          text: balance,
-        });
-        assert.equal(`${balance}\nETH`, await balanceElement.getText());
       },
     );
   });

test/e2e/tests/metamask-responsive-ui.spec.js

@@ -3,6 +3,7 @@ const {
   TEST_SEED_PHRASE_TWO,
   convertToHexValue,
   withFixtures,
+  assertAccountBalanceForDOM,
 } = require('../helpers');
 const FixtureBuilder = require('../fixture-builder');
 
@@ -108,11 +109,7 @@ describe('MetaMask Responsive UI', function () {
         await driver.press('#confirm-password', driver.Key.ENTER);
 
         // balance renders
-        const balance = await ganacheServer.getBalance();
+        await assertAccountBalanceForDOM(driver, ganacheServer);
-        await driver.waitForSelector({
-          css: '[data-testid="eth-overview__primary-currency"]',
-          text: `${balance} ETH`,
-        });
       },
     );
   });

test/e2e/tests/navigate-transactions.spec.js

@@ -1,5 +1,10 @@
 const { strict: assert } = require('assert');
-const { convertToHexValue, withFixtures, openDapp } = require('../helpers');
+const {
+  convertToHexValue,
+  withFixtures,
+  openDapp,
+  locateAccountBalanceDOM,
+} = require('../helpers');
 const FixtureBuilder = require('../fixture-builder');
 
 describe('Navigate transactions', function () {
@@ -227,11 +232,7 @@ describe('Navigate transactions', function () {
         // reject transactions
         await driver.clickElement({ text: 'Reject 4', tag: 'a' });
         await driver.clickElement({ text: 'Reject all', tag: 'button' });
-        const balance = await ganacheServer.getBalance();
+        await locateAccountBalanceDOM(driver, ganacheServer);
-        const balanceElement = await driver.findElement(
-          '[data-testid="eth-overview__primary-currency"]',
-        );
-        assert.equal(`${balance}\nETH`, await balanceElement.getText());
       },
     );
   });

test/e2e/tests/onboarding.spec.js

@@ -9,6 +9,7 @@ const {
   importSRPOnboardingFlow,
   importWrongSRPOnboardingFlow,
   testSRPDropdownIterations,
+  assertAccountBalanceForDOM,
 } = require('../helpers');
 const FixtureBuilder = require('../fixture-builder');
 
@@ -304,11 +305,7 @@ describe('MetaMask onboarding', function () {
         );
         assert.equal(await networkDisplay.getText(), networkName);
 
-        const balance = await secondaryGanacheServer.getBalance();
+        await assertAccountBalanceForDOM(driver, secondaryGanacheServer);
-        const balanceElement = await driver.findElement(
-          '[data-testid="eth-overview__primary-currency"]',
-        );
-        assert.equal(`${balance}\nETH`, await balanceElement.getText());
       },
     );
   });

test/e2e/tests/send-eth.spec.js

@@ -1,6 +1,11 @@
 const { strict: assert } = require('assert');
 const { SMART_CONTRACTS } = require('../seeder/smart-contracts');
-const { convertToHexValue, withFixtures, openDapp } = require('../helpers');
+const {
+  convertToHexValue,
+  withFixtures,
+  openDapp,
+  assertAccountBalanceForDOM,
+} = require('../helpers');
 const FixtureBuilder = require('../fixture-builder');
 
 describe('Send ETH from inside MetaMask using default gas', function () {
@@ -20,11 +25,13 @@ describe('Send ETH from inside MetaMask using default gas', function () {
         ganacheOptions,
         title: this.test.title,
       },
-      async ({ driver }) => {
+      async ({ driver, ganacheServer }) => {
         await driver.navigate();
         await driver.fill('#password', 'correct horse battery staple');
         await driver.press('#password', driver.Key.ENTER);
 
+        await assertAccountBalanceForDOM(driver, ganacheServer);
+
         await driver.clickElement('[data-testid="eth-overview-send"]');
 
         await driver.fill(

test/e2e/tests/send-hex-address.spec.js

@@ -1,5 +1,9 @@
 const { strict: assert } = require('assert');
-const { convertToHexValue, withFixtures } = require('../helpers');
+const {
+  convertToHexValue,
+  withFixtures,
+  assertAccountBalanceForDOM,
+} = require('../helpers');
 const { SMART_CONTRACTS } = require('../seeder/smart-contracts');
 const FixtureBuilder = require('../fixture-builder');
 
@@ -133,11 +137,7 @@ describe('Send ERC20 to a 40 character hexadecimal address', function () {
         await driver.navigate();
         await driver.fill('#password', 'correct horse battery staple');
         await driver.press('#password', driver.Key.ENTER);
-        const balanceAfterDeployment = await ganacheServer.getBalance();
+        await assertAccountBalanceForDOM(driver, ganacheServer);
-        await driver.waitForSelector({
-          css: '[data-testid="eth-overview__primary-currency"]',
-          text: `${balanceAfterDeployment} ETH`,
-        });
 
         // Send TST
         await driver.clickElement('[data-testid="home__asset-tab"]');
@@ -198,11 +198,8 @@ describe('Send ERC20 to a 40 character hexadecimal address', function () {
         await driver.navigate();
         await driver.fill('#password', 'correct horse battery staple');
         await driver.press('#password', driver.Key.ENTER);
-        const balanceAfterDeployment = await ganacheServer.getBalance();
+
-        await driver.waitForSelector({
+        await assertAccountBalanceForDOM(driver, ganacheServer);
-          css: '[data-testid="eth-overview__primary-currency"]',
-          text: `${balanceAfterDeployment} ETH`,
-        });
 
         // Send TST
         await driver.clickElement('[data-testid="home__asset-tab"]');

test/e2e/tests/simple-send.spec.js

@@ -2,6 +2,7 @@ const {
   convertToHexValue,
   withFixtures,
   sendTransaction,
+  assertAccountBalanceForDOM,
 } = require('../helpers');
 const FixtureBuilder = require('../fixture-builder');
 
@@ -22,10 +23,12 @@ describe('Simple send', function () {
         ganacheOptions,
         title: this.test.title,
       },
-      async ({ driver }) => {
+      async ({ driver, ganacheServer }) => {
         await driver.navigate();
         await driver.fill('#password', 'correct horse battery staple');
         await driver.press('#password', driver.Key.ENTER);
+        await assertAccountBalanceForDOM(driver, ganacheServer);
+
         await sendTransaction(
           driver,
           '0x985c30949c92df7a0bd42e0f3e3d539ece98db24',