test: add approve ERC20 with custom amount (#6636)

* Custom Approve ERC20

* Fix flaky test due to modal appearing

wdio/features/Confirmations/ApproveCustomERC20.feature

@@ -0,0 +1,21 @@
+@androidApp
+@confirmations
+@regression
+
+Feature: Approve an ERC20 token with custom amount
+  A user should be able to approve an ERC20 token from a dapp setting a custom amount.
+  @ganache
+  @erc20
+  Scenario: should approve successfully the custom token amount I set
+    Given the app displayed the splash animation
+    And I have imported my wallet
+    And I tap No Thanks on the Enable security check screen
+    And I tap No thanks on the onboarding welcome tutorial
+    And Ganache network is selected
+    When I navigate to the browser
+    And I am on Home MetaMask website
+    And I navigate to "test-dapp-erc20"
+    And I connect my active wallet to the test dapp
+    And I scroll to the ERC20 section
+    And I approve the custom ERC20 token amount
+    Then the transaction is submitted with Transaction Complete! toast appearing

wdio/features/Confirmations/ApproveERC20.feature → wdio/features/Confirmations/ApproveDefaultERC20.feature

@@ -2,21 +2,20 @@
 @confirmations
 @regression
 
-Feature: Approve an ERC20 token from a dapp
-  A user should be able to approve an ERC20 token from a dapp.
+Feature: Approve an ERC20 token with default dapp suggested amount
+  A user should be able to approve an ERC20 token from a dapp using the default dapp suggested amount.
   @ganache
   @erc20
   Scenario: should approve successfully the default token amount suggested by the dapp
     Given the app displayed the splash animation
     And I have imported my wallet
     And I tap No Thanks on the Enable security check screen
     And I tap No thanks on the onboarding welcome tutorial
-    And I close the Whats New modal
     And Ganache network is selected
     When I navigate to the browser
     And I am on Home MetaMask website
     And I navigate to "test-dapp-erc20"
     And I connect my active wallet to the test dapp
     And I scroll to the ERC20 section
-    And I approve ERC20 tokens
+    And I approve default ERC20 token amount
     Then the transaction is submitted with Transaction Complete! toast appearing

wdio/features/Confirmations/SendERC20.feature

@@ -11,7 +11,6 @@ Feature: Send an ERC20 token
     And I have imported my wallet
     And I tap No Thanks on the Enable security check screen
     And I tap No thanks on the onboarding welcome tutorial
-    Given I close the Whats New modal
     And Ganache network is selected
     When I navigate to the browser
     And I am on Home MetaMask website

wdio/features/Confirmations/SendEthEOA.feature

@@ -10,7 +10,6 @@ Feature: Send ETH to an EOA
     And I have imported my wallet
     And I tap No Thanks on the Enable security check screen
     And I tap No thanks on the onboarding welcome tutorial
-    And I close the Whats New modal
     And Ganache network is selected
     When On the Main Wallet view I tap on the Send Action
     And I enter address "0x1FDb169Ef12954F20A15852980e1F0C122BfC1D6" in the sender's input box

wdio/features/Confirmations/SendEthGasApiDown.feature

@@ -12,7 +12,6 @@ Feature: Send ETH with Gas API down
     And I have imported my wallet
     And I tap No Thanks on the Enable security check screen
     And I tap No thanks on the onboarding welcome tutorial
-    And I close the Whats New modal
     And Ganache network is selected
     When On the Main Wallet view I tap on the Send Action
     And I enter address "0x1FDb169Ef12954F20A15852980e1F0C122BfC1D6" in the sender's input box

wdio/features/Confirmations/SendEthMultisig.feature

@@ -11,7 +11,6 @@ Feature: Send ETH to a Multisig
     And I have imported my wallet
     And I tap No Thanks on the Enable security check screen
     And I tap No thanks on the onboarding welcome tutorial
-    And I close the Whats New modal
     And Ganache network is selected
     When On the Main Wallet view I tap on the Send Action
     And I enter address "MultisigAddress" in the sender's input box

wdio/screen-objects/Modals/AccountApprovalModal.js

@@ -27,6 +27,14 @@ class AccountApprovalModal {
     return Selectors.getElementByPlatform(ACCOUNT_APPROVAL_SELECT_ALL_BUTTON);
   }
 
+  get amountInputField() {
+    return Selectors.getXpathElementByText('Enter a number here');
+  }
+
+  get nextButton() {
+    return Selectors.getXpathElementByText('Next');
+  }
+
   async tapConnectButton() {
     await Gestures.waitAndTap(this.connectButton);
   }
@@ -45,6 +53,18 @@ class AccountApprovalModal {
     await Gestures.tapTextByXpath('Confirm'); // needed for browser specific tests
   }
 
+  async tapUseDefaultApproveByText() {
+    await Gestures.tapTextByXpath('Use default'); // needed for browser specific tests
+  }
+
+  async setTokenAmount(amount) {
+    await Gestures.typeText(this.amountInputField, amount);
+  }
+
+  async tapNextButtonByText() {
+    await Gestures.waitAndTap(this.nextButton);
+  }
+
   async tapApproveButtonByText() {
     await Gestures.tapTextByXpath('Approve'); // needed for browser specific tests
   }

wdio/screen-objects/WalletMainScreen.js

@@ -108,6 +108,10 @@ class WalletMainScreen {
     return Selectors.getXpathElementByText('$0.00');
   }
 
+  get networkModal() {
+    return Selectors.getXpathElementByText('Localhost 8545 now active.');
+  }
+
   async tapNoThanks() {
     await Gestures.waitAndTap(this.noThanks);
   }
@@ -215,6 +219,11 @@ class WalletMainScreen {
     await Gestures.waitAndTap(this.viewEtherscanActionButton);
     await Gestures.waitAndTap(this.goBackSimpleWebViewButton);
   }
+
+  async waitForNetworkModaltoDisappear() {
+    const element = await this.networkModal;
+    await element.waitForExist({ reverse: true });
+  }
 }
 
 export default new WalletMainScreen();

wdio/step-definitions/add-networks.steps.js

@@ -248,6 +248,7 @@ Given(/^Ganache network is selected$/, async () => {
   await NetworksScreen.tapCustomAddButton();
   await NetworksScreen.tapCustomAddButton();
   await NetworkEducationModal.tapGotItButton();
+  await WalletMainScreen.waitForNetworkModaltoDisappear();
 });
 
 Then(

wdio/step-definitions/browser-steps.js

@@ -410,8 +410,19 @@ When(/^I transfer ERC20 tokens$/, async () => {
   await AccountApprovalModal.waitForDisappear();
 });
 
-When(/^I approve ERC20 tokens$/, async () => {
+When(/^I approve default ERC20 token amount$/, async () => {
   await ExternalWebsitesScreen.tapDappApproveTokens();
+  await AccountApprovalModal.tapUseDefaultApproveByText();
+  await AccountApprovalModal.tapNextButtonByText();
+  await AccountApprovalModal.tapApproveButtonByText();
+  await AccountApprovalModal.waitForDisappear();
+});
+
+When(/^I approve the custom ERC20 token amount$/, async () => {
+  await ExternalWebsitesScreen.tapDappApproveTokens();
+  await AccountApprovalModal.setTokenAmount('1');
+  await AccountApprovalModal.tapNextButtonByText();
+  await AccountApprovalModal.tapNextButtonByText();
   await AccountApprovalModal.tapApproveButtonByText();
   await AccountApprovalModal.waitForDisappear();
 });