diff --git a/test/e2e/json-rpc/eth_sendTransaction.spec.js b/test/e2e/json-rpc/eth_sendTransaction.spec.js index ed740d17bfc1..2167fe6586c5 100644 --- a/test/e2e/json-rpc/eth_sendTransaction.spec.js +++ b/test/e2e/json-rpc/eth_sendTransaction.spec.js @@ -11,105 +11,166 @@ const FixtureBuilder = require('../fixture-builder'); describe('eth_sendTransaction', function () { const expectedHash = '0x855951a65dcf5949dc54beb032adfb604c52a0a548a0f616799d6873a9521470'; - it('confirms a new transaction', async function () { - await withFixtures( - { - dapp: true, - fixtures: new FixtureBuilder() - .withPermissionControllerConnectedToTestDapp() - .build(), - ganacheOptions: generateGanacheOptions({ hardfork: 'london' }), - title: this.test.fullTitle(), - }, - async ({ driver }) => { - await unlockWallet(driver); - // eth_sendTransaction - await driver.openNewPage(`http://127.0.0.1:8080`); - const request = JSON.stringify({ - jsonrpc: '2.0', - method: 'eth_sendTransaction', - params: [ - { - to: '0x5cfe73b6021e818b776b421b1c4db2474086a7e1', - from: '0x5cfe73b6021e818b776b421b1c4db2474086a7e1', - value: '0x0', - maxPriorityFeePerGas: '0x3b9aca00', - maxFeePerGas: '0x2540be400', - }, - ], - id: 0, - }); - await driver.executeScript( - `window.transactionHash = window.ethereum.request(${request})`, - ); + describe('Old confirmation screens', function () { + it('rejects a new transaction', async function () { + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withPermissionControllerConnectedToTestDapp() + .build(), + ganacheOptions: generateGanacheOptions({ hardfork: 'london' }), + title: this.test.fullTitle(), + }, + async ({ driver }) => { + await unlockWallet(driver); - // confirm transaction in mm popup - await driver.waitUntilXWindowHandles(3); - await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); - await driver.clickElement({ text: 'Confirm', tag: 'button' }); - await driver.switchToWindowWithTitle('E2E Test Dapp'); - const actualHash = await driver.executeScript( - `return window.transactionHash;`, - ); - assert.equal(actualHash, expectedHash); - }, - ); + await tempToggleSettingRedesignedTransactionConfirmations(driver); + + // eth_sendTransaction + await driver.openNewPage(`http://127.0.0.1:8080`); + const request = JSON.stringify({ + jsonrpc: '2.0', + method: 'eth_sendTransaction', + params: [ + { + to: '0x5cfe73b6021e818b776b421b1c4db2474086a7e1', + from: '0x5cfe73b6021e818b776b421b1c4db2474086a7e1', + value: '0x0', + maxPriorityFeePerGas: '0x3b9aca00', + maxFeePerGas: '0x2540be400', + }, + ], + id: 0, + }); + await driver.executeScript( + `window.transactionHash = window.ethereum.request(${request})`, + ); + + // reject transaction in mm popup + await driver.waitUntilXWindowHandles(3); + await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); + await driver.clickElement({ text: 'Reject', tag: 'button' }); + await driver.switchToWindowWithTitle('E2E Test Dapp'); + const result = await driver + .executeScript(`return window.transactionHash;`) + .then((data) => { + return data; + }) + .catch((err) => { + return err; + }); + assert.ok( + result.message.includes( + 'MetaMask Tx Signature: User denied transaction signature.', + ), + ); + }, + ); + }); }); - it('rejects a new transaction', async function () { - await withFixtures( - { - dapp: true, - fixtures: new FixtureBuilder() - .withPermissionControllerConnectedToTestDapp() - .build(), - ganacheOptions: generateGanacheOptions({ hardfork: 'london' }), - title: this.test.fullTitle(), - }, - async ({ driver }) => { - await unlockWallet(driver); - await tempToggleSettingRedesignedTransactionConfirmations(driver); + describe('Redesigned confirmation screens', function () { + it('confirms a new transaction', async function () { + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withPermissionControllerConnectedToTestDapp() + .build(), + ganacheOptions: generateGanacheOptions({ hardfork: 'london' }), + title: this.test.fullTitle(), + }, + async ({ driver }) => { + await unlockWallet(driver); - // eth_sendTransaction - await driver.openNewPage(`http://127.0.0.1:8080`); - const request = JSON.stringify({ - jsonrpc: '2.0', - method: 'eth_sendTransaction', - params: [ - { - to: '0x5cfe73b6021e818b776b421b1c4db2474086a7e1', - from: '0x5cfe73b6021e818b776b421b1c4db2474086a7e1', - value: '0x0', - maxPriorityFeePerGas: '0x3b9aca00', - maxFeePerGas: '0x2540be400', - }, - ], - id: 0, - }); - await driver.executeScript( - `window.transactionHash = window.ethereum.request(${request})`, - ); + // eth_sendTransaction + await driver.openNewPage(`http://127.0.0.1:8080`); + const request = JSON.stringify({ + jsonrpc: '2.0', + method: 'eth_sendTransaction', + params: [ + { + to: '0x5cfe73b6021e818b776b421b1c4db2474086a7e1', + from: '0x5cfe73b6021e818b776b421b1c4db2474086a7e1', + value: '0x0', + maxPriorityFeePerGas: '0x3b9aca00', + maxFeePerGas: '0x2540be400', + }, + ], + id: 0, + }); + await driver.executeScript( + `window.transactionHash = window.ethereum.request(${request})`, + ); - // reject transaction in mm popup - await driver.waitUntilXWindowHandles(3); - await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); - await driver.clickElement({ text: 'Reject', tag: 'button' }); - await driver.switchToWindowWithTitle('E2E Test Dapp'); - const result = await driver - .executeScript(`return window.transactionHash;`) - .then((data) => { - return data; - }) - .catch((err) => { - return err; + // confirm transaction in mm popup + await driver.waitUntilXWindowHandles(3); + await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + await driver.switchToWindowWithTitle('E2E Test Dapp'); + const actualHash = await driver.executeScript( + `return window.transactionHash;`, + ); + assert.equal(actualHash, expectedHash); + }, + ); + }); + + it('rejects a new transaction', async function () { + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withPermissionControllerConnectedToTestDapp() + .build(), + ganacheOptions: generateGanacheOptions({ hardfork: 'london' }), + title: this.test.fullTitle(), + }, + async ({ driver }) => { + await unlockWallet(driver); + + // eth_sendTransaction + await driver.openNewPage(`http://127.0.0.1:8080`); + const request = JSON.stringify({ + jsonrpc: '2.0', + method: 'eth_sendTransaction', + params: [ + { + to: '0x5cfe73b6021e818b776b421b1c4db2474086a7e1', + from: '0x5cfe73b6021e818b776b421b1c4db2474086a7e1', + value: '0x0', + maxPriorityFeePerGas: '0x3b9aca00', + maxFeePerGas: '0x2540be400', + }, + ], + id: 0, }); - assert.ok( - result.message.includes( - 'MetaMask Tx Signature: User denied transaction signature.', - ), - ); - }, - ); + await driver.executeScript( + `window.transactionHash = window.ethereum.request(${request})`, + ); + + // reject transaction in mm popup + await driver.waitUntilXWindowHandles(3); + await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); + await driver.clickElement({ text: 'Cancel', tag: 'button' }); + await driver.switchToWindowWithTitle('E2E Test Dapp'); + const result = await driver + .executeScript(`return window.transactionHash;`) + .then((data) => { + return data; + }) + .catch((err) => { + return err; + }); + assert.ok( + result.message.includes( + 'MetaMask Tx Signature: User denied transaction signature.', + ), + ); + }, + ); + }); }); }); diff --git a/test/e2e/page-objects/flows/send-transaction.flow.ts b/test/e2e/page-objects/flows/send-transaction.flow.ts index 50928f74c8b5..d33302f25510 100644 --- a/test/e2e/page-objects/flows/send-transaction.flow.ts +++ b/test/e2e/page-objects/flows/send-transaction.flow.ts @@ -84,6 +84,42 @@ export const sendRedesignedTransactionToAddress = async ({ await transactionConfirmationPage.clickFooterConfirmButton(); }; +/** + * This function initiates the steps required to send a transaction from the homepage to final confirmation. + * + * @param params - An object containing the parameters. + * @param params.driver - The webdriver instance. + * @param params.recipientAccount - The recipient account. + * @param params.amount - The amount of the asset to be sent in the transaction. + */ +export const sendRedesignedTransactionToAccount = async ({ + driver, + recipientAccount, + amount, +}: { + driver: Driver; + recipientAccount: string; + amount: string; +}): Promise => { + console.log( + `Start flow to send amount ${amount} to recipient account ${recipientAccount} on home screen`, + ); + // click send button on homepage to start flow + const homePage = new HomePage(driver); + await homePage.startSendFlow(); + + // user should land on send token screen to fill recipient and amount + const sendToPage = new SendTokenPage(driver); + await sendToPage.check_pageIsLoaded(); + await sendToPage.selectRecipientAccount(recipientAccount); + await sendToPage.fillAmount(amount); + await sendToPage.goToNextScreen(); + + // confirm transaction when user lands on confirm transaction screen + const transactionConfirmationPage = new TransactionConfirmation(driver); + await transactionConfirmationPage.clickFooterConfirmButton(); +}; + /** * This function initiates the steps required to send a transaction from the homepage to final confirmation. * diff --git a/test/e2e/page-objects/pages/confirmations/redesign/confirmation.ts b/test/e2e/page-objects/pages/confirmations/redesign/confirmation.ts index 1ebaf95b7dcf..9ad3e4f81007 100644 --- a/test/e2e/page-objects/pages/confirmations/redesign/confirmation.ts +++ b/test/e2e/page-objects/pages/confirmations/redesign/confirmation.ts @@ -20,6 +20,12 @@ class Confirmation { text: 'Alert', }; + private nextPageButton: RawLocator; + + private previousPageButton: RawLocator; + + private navigationTitle: RawLocator; + constructor(driver: Driver) { this.driver = driver; @@ -28,6 +34,10 @@ class Confirmation { this.headerAccountDetailsButton = '[data-testid="header-info__account-details-button"]'; this.footerCancelButton = '[data-testid="confirm-footer-cancel-button"]'; + this.nextPageButton = '[data-testid="confirm-nav__next-confirmation"]'; + this.previousPageButton = + '[data-testid="confirm-nav__previous-confirmation"]'; + this.navigationTitle = '[data-testid="confirm-page-nav-position"]'; } async clickScrollToBottomButton() { @@ -58,6 +68,29 @@ class Confirmation { async clickInlineAlert() { await this.driver.clickElement(this.inlineAlertButton); } + + async clickNextPage(): Promise { + await this.driver.clickElement(this.nextPageButton); + } + + async clickPreviousPage(): Promise { + await this.driver.clickElement(this.previousPageButton); + } + + async check_pageNumbers( + currentPage: number, + totalPages: number, + ): Promise { + try { + await this.driver.findElement({ + css: this.navigationTitle, + text: `${currentPage} of ${totalPages}`, + }); + } catch (e) { + console.log('Timeout while waiting for navigation page numbers', e); + throw e; + } + } } export default Confirmation; diff --git a/test/e2e/tests/account/add-account.spec.ts b/test/e2e/tests/account/add-account.spec.ts index 46eb27cab900..db62927b91d7 100644 --- a/test/e2e/tests/account/add-account.spec.ts +++ b/test/e2e/tests/account/add-account.spec.ts @@ -8,7 +8,10 @@ import { } from '../../helpers'; import { loginWithBalanceValidation } from '../../page-objects/flows/login.flow'; import { completeImportSRPOnboardingFlow } from '../../page-objects/flows/onboarding.flow'; -import { sendTransactionToAccount } from '../../page-objects/flows/send-transaction.flow'; +import { + sendRedesignedTransactionToAccount, + sendTransactionToAccount, +} from '../../page-objects/flows/send-transaction.flow'; import AccountListPage from '../../page-objects/pages/account-list-page'; import ActivityListPage from '../../page-objects/pages/home/activity-list'; import HeaderNavbar from '../../page-objects/pages/header-navbar'; @@ -17,116 +20,189 @@ import LoginPage from '../../page-objects/pages/login-page'; import ResetPasswordPage from '../../page-objects/pages/reset-password-page'; describe('Add account', function () { - it('should not affect public address when using secret recovery phrase to recover account with non-zero balance @no-mmi', async function () { - await withFixtures( - { - fixtures: new FixtureBuilder({ onboarding: true }).build(), - ganacheOptions: defaultGanacheOptions, - title: this.test?.fullTitle(), - }, - async ({ driver, ganacheServer }) => { - await completeImportSRPOnboardingFlow({ driver }); - - await tempToggleSettingRedesignedTransactionConfirmations(driver); - - const homePage = new HomePage(driver); - await homePage.check_pageIsLoaded(); - await homePage.check_localBlockchainBalanceIsDisplayed(ganacheServer); - const headerNavbar = new HeaderNavbar(driver); - await headerNavbar.openAccountMenu(); - - // Create new account with default name `newAccountName` - const newAccountName = 'Account 2'; - const accountListPage = new AccountListPage(driver); - await accountListPage.check_pageIsLoaded(); - await accountListPage.addNewAccount(); - await headerNavbar.check_accountLabel(newAccountName); - await homePage.check_expectedBalanceIsDisplayed(); - - // Switch back to the first account and transfer some balance to 2nd account so they will not be removed after recovering SRP - await headerNavbar.openAccountMenu(); - await accountListPage.check_pageIsLoaded(); - await accountListPage.check_accountDisplayedInAccountList('Account 1'); - await accountListPage.switchToAccount('Account 1'); - await headerNavbar.check_accountLabel('Account 1'); - await homePage.check_localBlockchainBalanceIsDisplayed(ganacheServer); - await sendTransactionToAccount({ - driver, - recipientAccount: newAccountName, - amount: '2.8', - gasFee: '0.000042', - totalFee: '2.800042', - }); - await homePage.check_pageIsLoaded(); - const activityList = new ActivityListPage(driver); - await activityList.check_confirmedTxNumberDisplayedInActivity(); - await activityList.check_txAmountInActivity('-2.8 ETH'); - - // Lock wallet and recover via SRP in "forget password" option - await headerNavbar.lockMetaMask(); - await new LoginPage(driver).gotoResetPasswordPage(); - const resetPasswordPage = new ResetPasswordPage(driver); - await resetPasswordPage.check_pageIsLoaded(); - await resetPasswordPage.resetPassword(E2E_SRP, WALLET_PASSWORD); - - // Check wallet balance for both accounts - await homePage.check_pageIsLoaded(); - await homePage.check_localBlockchainBalanceIsDisplayed(ganacheServer); - await headerNavbar.openAccountMenu(); - await accountListPage.check_pageIsLoaded(); - await accountListPage.check_accountDisplayedInAccountList( - newAccountName, - ); - await accountListPage.switchToAccount(newAccountName); - await headerNavbar.check_accountLabel(newAccountName); - await homePage.check_expectedBalanceIsDisplayed('2.8'); - }, - ); + describe('Old confirmation screens', function () { + it('should not affect public address when using secret recovery phrase to recover account with non-zero balance @no-mmi', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder({ onboarding: true }).build(), + ganacheOptions: defaultGanacheOptions, + title: this.test?.fullTitle(), + }, + async ({ driver, ganacheServer }) => { + await completeImportSRPOnboardingFlow({ driver }); + + await tempToggleSettingRedesignedTransactionConfirmations(driver); + + const homePage = new HomePage(driver); + await homePage.check_pageIsLoaded(); + await homePage.check_localBlockchainBalanceIsDisplayed(ganacheServer); + const headerNavbar = new HeaderNavbar(driver); + await headerNavbar.openAccountMenu(); + + // Create new account with default name `newAccountName` + const newAccountName = 'Account 2'; + const accountListPage = new AccountListPage(driver); + await accountListPage.check_pageIsLoaded(); + await accountListPage.addNewAccount(); + await headerNavbar.check_accountLabel(newAccountName); + await homePage.check_expectedBalanceIsDisplayed(); + + // Switch back to the first account and transfer some balance to 2nd account so they will not be removed after recovering SRP + await headerNavbar.openAccountMenu(); + await accountListPage.check_pageIsLoaded(); + await accountListPage.check_accountDisplayedInAccountList( + 'Account 1', + ); + await accountListPage.switchToAccount('Account 1'); + await headerNavbar.check_accountLabel('Account 1'); + await homePage.check_localBlockchainBalanceIsDisplayed(ganacheServer); + await sendTransactionToAccount({ + driver, + recipientAccount: newAccountName, + amount: '2.8', + gasFee: '0.000042', + totalFee: '2.800042', + }); + await homePage.check_pageIsLoaded(); + const activityList = new ActivityListPage(driver); + await activityList.check_confirmedTxNumberDisplayedInActivity(); + await activityList.check_txAmountInActivity('-2.8 ETH'); + + // Lock wallet and recover via SRP in "forget password" option + await headerNavbar.lockMetaMask(); + await new LoginPage(driver).gotoResetPasswordPage(); + const resetPasswordPage = new ResetPasswordPage(driver); + await resetPasswordPage.check_pageIsLoaded(); + await resetPasswordPage.resetPassword(E2E_SRP, WALLET_PASSWORD); + + // Check wallet balance for both accounts + await homePage.check_pageIsLoaded(); + await homePage.check_localBlockchainBalanceIsDisplayed(ganacheServer); + await headerNavbar.openAccountMenu(); + await accountListPage.check_pageIsLoaded(); + await accountListPage.check_accountDisplayedInAccountList( + newAccountName, + ); + await accountListPage.switchToAccount(newAccountName); + await headerNavbar.check_accountLabel(newAccountName); + await homePage.check_expectedBalanceIsDisplayed('2.8'); + }, + ); + }); }); - it('should be possible to remove an account imported with a private key, but should not be possible to remove an account generated from the SRP imported in onboarding @no-mmi', async function () { - const testPrivateKey: string = - '14abe6f4aab7f9f626fe981c864d0adeb5685f289ac9270c27b8fd790b4235d6'; - - await withFixtures( - { - fixtures: new FixtureBuilder().build(), - title: this.test?.fullTitle(), - }, - async ({ driver }) => { - await loginWithBalanceValidation(driver); - const headerNavbar = new HeaderNavbar(driver); - const homePage = new HomePage(driver); - await headerNavbar.openAccountMenu(); - - // Create new account with default name Account 2 - const accountListPage = new AccountListPage(driver); - await accountListPage.check_pageIsLoaded(); - await accountListPage.addNewAccount(); - await headerNavbar.check_accountLabel('Account 2'); - await homePage.check_expectedBalanceIsDisplayed(); - - // Check user cannot delete 2nd account generated from the SRP imported in onboarding - await headerNavbar.openAccountMenu(); - await accountListPage.check_removeAccountButtonIsNotDisplayed( - 'Account 1', - ); - - // Create 3rd account with private key - await accountListPage.addNewImportedAccount(testPrivateKey); - await headerNavbar.check_accountLabel('Account 3'); - await homePage.check_expectedBalanceIsDisplayed(); - - // Remove the 3rd account imported with a private key - await headerNavbar.openAccountMenu(); - await accountListPage.removeAccount('Account 3'); - await homePage.check_pageIsLoaded(); - await homePage.check_expectedBalanceIsDisplayed(); - await headerNavbar.openAccountMenu(); - await accountListPage.check_accountIsNotDisplayedInAccountList( - 'Account 3', - ); - }, - ); + describe('Redesigned confirmation screens', function () { + it('should not affect public address when using secret recovery phrase to recover account with non-zero balance @no-mmi', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder({ onboarding: true }).build(), + ganacheOptions: defaultGanacheOptions, + title: this.test?.fullTitle(), + }, + async ({ driver, ganacheServer }) => { + await completeImportSRPOnboardingFlow({ driver }); + + const homePage = new HomePage(driver); + await homePage.check_pageIsLoaded(); + await homePage.check_localBlockchainBalanceIsDisplayed(ganacheServer); + const headerNavbar = new HeaderNavbar(driver); + await headerNavbar.openAccountMenu(); + + // Create new account with default name `newAccountName` + const newAccountName = 'Account 2'; + const accountListPage = new AccountListPage(driver); + await accountListPage.check_pageIsLoaded(); + await accountListPage.addNewAccount(); + await headerNavbar.check_accountLabel(newAccountName); + await homePage.check_expectedBalanceIsDisplayed(); + + // Switch back to the first account and transfer some balance to 2nd account so they will not be removed after recovering SRP + await headerNavbar.openAccountMenu(); + await accountListPage.check_pageIsLoaded(); + await accountListPage.check_accountDisplayedInAccountList( + 'Account 1', + ); + await accountListPage.switchToAccount('Account 1'); + await headerNavbar.check_accountLabel('Account 1'); + await homePage.check_localBlockchainBalanceIsDisplayed(ganacheServer); + + await sendRedesignedTransactionToAccount({ + driver, + recipientAccount: newAccountName, + amount: '2.8', + }); + + await homePage.check_pageIsLoaded(); + const activityList = new ActivityListPage(driver); + await activityList.check_confirmedTxNumberDisplayedInActivity(); + await activityList.check_txAmountInActivity('-2.8 ETH'); + + // Lock wallet and recover via SRP in "forget password" option + await headerNavbar.lockMetaMask(); + await new LoginPage(driver).gotoResetPasswordPage(); + const resetPasswordPage = new ResetPasswordPage(driver); + await resetPasswordPage.check_pageIsLoaded(); + await resetPasswordPage.resetPassword(E2E_SRP, WALLET_PASSWORD); + + // Check wallet balance for both accounts + await homePage.check_pageIsLoaded(); + await homePage.check_localBlockchainBalanceIsDisplayed(ganacheServer); + await headerNavbar.openAccountMenu(); + await accountListPage.check_pageIsLoaded(); + await accountListPage.check_accountDisplayedInAccountList( + newAccountName, + ); + await accountListPage.switchToAccount(newAccountName); + await headerNavbar.check_accountLabel(newAccountName); + await homePage.check_expectedBalanceIsDisplayed('2.8'); + }, + ); + }); + + it('should be possible to remove an account imported with a private key, but should not be possible to remove an account generated from the SRP imported in onboarding @no-mmi', async function () { + const testPrivateKey: string = + '14abe6f4aab7f9f626fe981c864d0adeb5685f289ac9270c27b8fd790b4235d6'; + + await withFixtures( + { + fixtures: new FixtureBuilder().build(), + title: this.test?.fullTitle(), + }, + async ({ driver }) => { + await loginWithBalanceValidation(driver); + const headerNavbar = new HeaderNavbar(driver); + const homePage = new HomePage(driver); + await headerNavbar.openAccountMenu(); + + // Create new account with default name Account 2 + const accountListPage = new AccountListPage(driver); + await accountListPage.check_pageIsLoaded(); + await accountListPage.addNewAccount(); + await headerNavbar.check_accountLabel('Account 2'); + await homePage.check_expectedBalanceIsDisplayed(); + + // Check user cannot delete 2nd account generated from the SRP imported in onboarding + await headerNavbar.openAccountMenu(); + await accountListPage.check_removeAccountButtonIsNotDisplayed( + 'Account 1', + ); + + // Create 3rd account with private key + await accountListPage.addNewImportedAccount(testPrivateKey); + await headerNavbar.check_accountLabel('Account 3'); + await homePage.check_expectedBalanceIsDisplayed(); + + // Remove the 3rd account imported with a private key + await headerNavbar.openAccountMenu(); + await accountListPage.removeAccount('Account 3'); + await homePage.check_pageIsLoaded(); + await homePage.check_expectedBalanceIsDisplayed(); + await headerNavbar.openAccountMenu(); + await accountListPage.check_accountIsNotDisplayedInAccountList( + 'Account 3', + ); + }, + ); + }); }); }); diff --git a/test/e2e/tests/petnames/petnames-helpers.js b/test/e2e/tests/petnames/petnames-helpers.js index 03747caba4be..c019cfbfa886 100644 --- a/test/e2e/tests/petnames/petnames-helpers.js +++ b/test/e2e/tests/petnames/petnames-helpers.js @@ -3,6 +3,11 @@ async function rejectSignatureOrTransactionRequest(driver) { await driver.delay(3000); } +async function rejectRedesignedSignatureOrTransactionRequest(driver) { + await driver.clickElement({ text: 'Cancel', tag: 'button' }); + await driver.delay(3000); +} + async function focusTestDapp(driver) { const windowHandles = await driver.getAllWindowHandles(); await driver.switchToWindowWithTitle('E2E Test Dapp', windowHandles); @@ -49,6 +54,7 @@ async function saveName(driver, value, name, proposedName) { module.exports = { rejectSignatureOrTransactionRequest, + rejectRedesignedSignatureOrTransactionRequest, focusTestDapp, expectName, clickName, diff --git a/test/e2e/tests/petnames/petnames-transactions.spec.js b/test/e2e/tests/petnames/petnames-transactions.spec.js index 55c295c51c3a..5546de0b4b82 100644 --- a/test/e2e/tests/petnames/petnames-transactions.spec.js +++ b/test/e2e/tests/petnames/petnames-transactions.spec.js @@ -13,6 +13,7 @@ const { focusTestDapp, rejectSignatureOrTransactionRequest, saveName, + rejectRedesignedSignatureOrTransactionRequest, } = require('./petnames-helpers'); async function createDappSendTransaction(driver) { @@ -37,89 +38,196 @@ const CUSTOM_NAME_MOCK = 'Custom Name'; const PROPOSED_NAME_MOCK = 'test4.lens'; describe('Petnames - Transactions', function () { - it('can save petnames for addresses in dapp send transactions', async function () { - await withFixtures( - { - dapp: true, - fixtures: new FixtureBuilder() - .withPermissionControllerConnectedToTestDapp() - .withNoNames() - .build(), - ganacheOptions: defaultGanacheOptions, - title: this.test.fullTitle(), - }, - async ({ driver }) => { - await unlockWallet(driver); - - await tempToggleSettingRedesignedTransactionConfirmations(driver); - - await openDapp(driver); - await createDappSendTransaction(driver); - await switchToNotificationWindow(driver, 3); - await expectName(driver, ABBREVIATED_ADDRESS_MOCK, false); - - // Test custom name. - await saveName( - driver, - ABBREVIATED_ADDRESS_MOCK, - CUSTOM_NAME_MOCK, - undefined, - ); - await rejectSignatureOrTransactionRequest(driver); - await focusTestDapp(driver); - await createDappSendTransaction(driver); - await switchToNotificationWindow(driver, 3); - await expectName(driver, CUSTOM_NAME_MOCK, true); - - // Test proposed name. - await saveName(driver, CUSTOM_NAME_MOCK, undefined, PROPOSED_NAME_MOCK); - await rejectSignatureOrTransactionRequest(driver); - await focusTestDapp(driver); - await createDappSendTransaction(driver); - await switchToNotificationWindow(driver, 3); - await expectName(driver, PROPOSED_NAME_MOCK, true); - }, - ); + describe('Old confirmation screens', function () { + it('can save petnames for addresses in dapp send transactions', async function () { + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withPermissionControllerConnectedToTestDapp() + .withNoNames() + .build(), + ganacheOptions: defaultGanacheOptions, + title: this.test.fullTitle(), + }, + async ({ driver }) => { + await unlockWallet(driver); + + await tempToggleSettingRedesignedTransactionConfirmations(driver); + + await openDapp(driver); + await createDappSendTransaction(driver); + await switchToNotificationWindow(driver, 3); + await expectName(driver, ABBREVIATED_ADDRESS_MOCK, false); + + // Test custom name. + await saveName( + driver, + ABBREVIATED_ADDRESS_MOCK, + CUSTOM_NAME_MOCK, + undefined, + ); + await rejectSignatureOrTransactionRequest(driver); + await focusTestDapp(driver); + await createDappSendTransaction(driver); + await switchToNotificationWindow(driver, 3); + await expectName(driver, CUSTOM_NAME_MOCK, true); + + // Test proposed name. + await saveName( + driver, + CUSTOM_NAME_MOCK, + undefined, + PROPOSED_NAME_MOCK, + ); + await rejectSignatureOrTransactionRequest(driver); + await focusTestDapp(driver); + await createDappSendTransaction(driver); + await switchToNotificationWindow(driver, 3); + await expectName(driver, PROPOSED_NAME_MOCK, true); + }, + ); + }); + + it('can save petnames for addresses in wallet send transactions', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder() + .withPreferencesController({ + featureFlags: { + sendHexData: true, + }, + }) + .withNoNames() + .build(), + ganacheOptions: defaultGanacheOptions, + title: this.test.fullTitle(), + }, + async ({ driver }) => { + await unlockWallet(driver); + await tempToggleSettingRedesignedTransactionConfirmations(driver); + + await createWalletSendTransaction(driver, ADDRESS_MOCK); + await expectName(driver, ABBREVIATED_ADDRESS_MOCK, false); + + // Test custom name. + await saveName( + driver, + ABBREVIATED_ADDRESS_MOCK, + CUSTOM_NAME_MOCK, + undefined, + ); + await rejectSignatureOrTransactionRequest(driver); + await createWalletSendTransaction(driver, ADDRESS_MOCK); + await expectName(driver, CUSTOM_NAME_MOCK, true); + + // Test proposed name. + await saveName( + driver, + CUSTOM_NAME_MOCK, + undefined, + PROPOSED_NAME_MOCK, + ); + await rejectSignatureOrTransactionRequest(driver); + await createWalletSendTransaction(driver, ADDRESS_MOCK); + await expectName(driver, PROPOSED_NAME_MOCK, true); + }, + ); + }); }); - it('can save petnames for addresses in wallet send transactions', async function () { - await withFixtures( - { - fixtures: new FixtureBuilder() - .withPreferencesController({ - featureFlags: { - sendHexData: true, - }, - }) - .withNoNames() - .build(), - ganacheOptions: defaultGanacheOptions, - title: this.test.fullTitle(), - }, - async ({ driver }) => { - await unlockWallet(driver); - await tempToggleSettingRedesignedTransactionConfirmations(driver); - - await createWalletSendTransaction(driver, ADDRESS_MOCK); - await expectName(driver, ABBREVIATED_ADDRESS_MOCK, false); - - // Test custom name. - await saveName( - driver, - ABBREVIATED_ADDRESS_MOCK, - CUSTOM_NAME_MOCK, - undefined, - ); - await rejectSignatureOrTransactionRequest(driver); - await createWalletSendTransaction(driver, ADDRESS_MOCK); - await expectName(driver, CUSTOM_NAME_MOCK, true); - - // Test proposed name. - await saveName(driver, CUSTOM_NAME_MOCK, undefined, PROPOSED_NAME_MOCK); - await rejectSignatureOrTransactionRequest(driver); - await createWalletSendTransaction(driver, ADDRESS_MOCK); - await expectName(driver, PROPOSED_NAME_MOCK, true); - }, - ); + describe('Redesigned confirmation screens', function () { + it('can save petnames for addresses in dapp send transactions', async function () { + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withPermissionControllerConnectedToTestDapp() + .withNoNames() + .build(), + ganacheOptions: defaultGanacheOptions, + title: this.test.fullTitle(), + }, + async ({ driver }) => { + await unlockWallet(driver); + + await openDapp(driver); + await createDappSendTransaction(driver); + await switchToNotificationWindow(driver, 3); + await expectName(driver, ABBREVIATED_ADDRESS_MOCK, false); + + // Test custom name. + await saveName( + driver, + ABBREVIATED_ADDRESS_MOCK, + CUSTOM_NAME_MOCK, + undefined, + ); + await rejectRedesignedSignatureOrTransactionRequest(driver); + await focusTestDapp(driver); + await createDappSendTransaction(driver); + await switchToNotificationWindow(driver, 3); + await expectName(driver, CUSTOM_NAME_MOCK, true); + + // Test proposed name. + await saveName( + driver, + CUSTOM_NAME_MOCK, + undefined, + PROPOSED_NAME_MOCK, + ); + await rejectRedesignedSignatureOrTransactionRequest(driver); + await focusTestDapp(driver); + await createDappSendTransaction(driver); + await switchToNotificationWindow(driver, 3); + await expectName(driver, PROPOSED_NAME_MOCK, true); + }, + ); + }); + + it('can save petnames for addresses in wallet send transactions', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder() + .withPreferencesController({ + featureFlags: { + sendHexData: true, + }, + }) + .withNoNames() + .build(), + ganacheOptions: defaultGanacheOptions, + title: this.test.fullTitle(), + }, + async ({ driver }) => { + await unlockWallet(driver); + + await createWalletSendTransaction(driver, ADDRESS_MOCK); + await expectName(driver, ABBREVIATED_ADDRESS_MOCK, false); + + // Test custom name. + await saveName( + driver, + ABBREVIATED_ADDRESS_MOCK, + CUSTOM_NAME_MOCK, + undefined, + ); + await rejectRedesignedSignatureOrTransactionRequest(driver); + await createWalletSendTransaction(driver, ADDRESS_MOCK); + await expectName(driver, CUSTOM_NAME_MOCK, true); + + // Test proposed name. + await saveName( + driver, + CUSTOM_NAME_MOCK, + undefined, + PROPOSED_NAME_MOCK, + ); + await rejectRedesignedSignatureOrTransactionRequest(driver); + await createWalletSendTransaction(driver, ADDRESS_MOCK); + await expectName(driver, PROPOSED_NAME_MOCK, true); + }, + ); + }); }); }); diff --git a/test/e2e/tests/ppom/ppom-blockaid-alert-simple-send.spec.js b/test/e2e/tests/ppom/ppom-blockaid-alert-simple-send.spec.js index 5368c2617f13..370aab17a499 100644 --- a/test/e2e/tests/ppom/ppom-blockaid-alert-simple-send.spec.js +++ b/test/e2e/tests/ppom/ppom-blockaid-alert-simple-send.spec.js @@ -119,115 +119,157 @@ async function mockInfuraWithFailedResponses(mockServer) { * @see {@link https://wobbly-nutmeg-8a5.notion.site/MM-E2E-Testing-1e51b617f79240a49cd3271565c6e12d} */ describe('Simple Send Security Alert - Blockaid @no-mmi', function () { - it('should not show security alerts for benign requests', async function () { - await withFixtures( - { - dapp: true, - fixtures: new FixtureBuilder() - .withNetworkControllerOnMainnet() - .withPreferencesController({ - securityAlertsEnabled: true, - }) - .build(), - defaultGanacheOptions, - testSpecificMock: mockInfuraWithBenignResponses, - title: this.test.fullTitle(), - }, - - async ({ driver }) => { - await logInWithBalanceValidation(driver); - - await sendScreenToConfirmScreen(driver, mockBenignAddress, '1'); - - const isPresent = await driver.isElementPresent(bannerAlertSelector); - assert.equal(isPresent, false, `Banner alert unexpectedly found.`); - }, - ); - }); + describe('Old confirmation screens', function () { + it('should show "Be careful" if the PPOM request fails to check transaction', async function () { + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withNetworkControllerOnMainnet() + .withPreferencesController({ + securityAlertsEnabled: true, + }) + .build(), + defaultGanacheOptions, + testSpecificMock: mockInfuraWithFailedResponses, + title: this.test.fullTitle(), + }, + + async ({ driver }) => { + await logInWithBalanceValidation(driver); + + await tempToggleSettingRedesignedTransactionConfirmations(driver); - /** - * Disclaimer: This test does not test all reason types. e.g. 'blur_farming', - * 'malicious_domain'. Some other tests are found in other files: - * e.g. test/e2e/flask/ppom-blockaid-alert-.spec.js - */ - it('should show security alerts for malicious requests', async function () { - await withFixtures( - // we need to use localhost instead of the ip - // see issue: https://github.com/MetaMask/MetaMask-planning/issues/3560 - { - dapp: true, - fixtures: new FixtureBuilder() - .withNetworkControllerOnMainnet() - .withPermissionControllerConnectedToTestDapp({ - useLocalhostHostname: true, - }) - .withPreferencesController({ - securityAlertsEnabled: true, - }) - .build(), - defaultGanacheOptions, - testSpecificMock: mockInfuraWithMaliciousResponses, - title: this.test.fullTitle(), - }, - - async ({ driver }) => { - await logInWithBalanceValidation(driver); - - await driver.openNewPage('http://localhost:8080'); - - await driver.clickElement('#maliciousRawEthButton'); - await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); - - await driver.waitForSelector({ - css: '.mm-text--body-lg-medium', - text: expectedMaliciousTitle, - }); - - await driver.waitForSelector({ - css: '.mm-text--body-md', - text: expectedMaliciousDescription, - }); - }, - ); + await sendScreenToConfirmScreen( + driver, + '0xB8c77482e45F1F44dE1745F52C74426C631bDD52', + '1.1', + ); + const expectedTitle = 'Be careful'; + + const bannerAlert = await driver.findElement({ + css: bannerAlertSelector, + text: expectedTitle, + }); + + assert( + bannerAlert, + `Banner alert not found. Expected Title: ${expectedTitle}`, + ); + }, + ); + }); }); - it('should show "Be careful" if the PPOM request fails to check transaction', async function () { - await withFixtures( - { - dapp: true, - fixtures: new FixtureBuilder() - .withNetworkControllerOnMainnet() - .withPreferencesController({ - securityAlertsEnabled: true, - }) - .build(), - defaultGanacheOptions, - testSpecificMock: mockInfuraWithFailedResponses, - title: this.test.fullTitle(), - }, - - async ({ driver }) => { - await logInWithBalanceValidation(driver); - - await tempToggleSettingRedesignedTransactionConfirmations(driver); - - await sendScreenToConfirmScreen( - driver, - '0xB8c77482e45F1F44dE1745F52C74426C631bDD52', - '1.1', - ); - const expectedTitle = 'Be careful'; - - const bannerAlert = await driver.findElement({ - css: bannerAlertSelector, - text: expectedTitle, - }); - - assert( - bannerAlert, - `Banner alert not found. Expected Title: ${expectedTitle}`, - ); - }, - ); + describe('Redesigned confirmation screens', function () { + it('should not show security alerts for benign requests', async function () { + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withNetworkControllerOnMainnet() + .withPreferencesController({ + securityAlertsEnabled: true, + }) + .build(), + defaultGanacheOptions, + testSpecificMock: mockInfuraWithBenignResponses, + title: this.test.fullTitle(), + }, + + async ({ driver }) => { + await logInWithBalanceValidation(driver); + + await sendScreenToConfirmScreen(driver, mockBenignAddress, '1'); + + const isPresent = await driver.isElementPresent(bannerAlertSelector); + assert.equal(isPresent, false, `Banner alert unexpectedly found.`); + }, + ); + }); + + /** + * Disclaimer: This test does not test all reason types. e.g. 'blur_farming', + * 'malicious_domain'. Some other tests are found in other files: + * e.g. test/e2e/flask/ppom-blockaid-alert-.spec.js + */ + it('should show security alerts for malicious requests', async function () { + await withFixtures( + // we need to use localhost instead of the ip + // see issue: https://github.com/MetaMask/MetaMask-planning/issues/3560 + { + dapp: true, + fixtures: new FixtureBuilder() + .withNetworkControllerOnMainnet() + .withPermissionControllerConnectedToTestDapp({ + useLocalhostHostname: true, + }) + .withPreferencesController({ + securityAlertsEnabled: true, + }) + .build(), + defaultGanacheOptions, + testSpecificMock: mockInfuraWithMaliciousResponses, + title: this.test.fullTitle(), + }, + + async ({ driver }) => { + await logInWithBalanceValidation(driver); + + await driver.openNewPage('http://localhost:8080'); + + await driver.clickElement('#maliciousRawEthButton'); + await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); + + await driver.waitForSelector({ + css: '.mm-text--body-lg-medium', + text: expectedMaliciousTitle, + }); + + await driver.waitForSelector({ + css: '.mm-text--body-md', + text: expectedMaliciousDescription, + }); + }, + ); + }); + + it('should show "Be careful" if the PPOM request fails to check transaction', async function () { + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withNetworkControllerOnMainnet() + .withPreferencesController({ + securityAlertsEnabled: true, + }) + .build(), + defaultGanacheOptions, + testSpecificMock: mockInfuraWithFailedResponses, + title: this.test.fullTitle(), + }, + + async ({ driver }) => { + await logInWithBalanceValidation(driver); + + await sendScreenToConfirmScreen( + driver, + '0xB8c77482e45F1F44dE1745F52C74426C631bDD52', + '1.1', + ); + const expectedTitle = 'Be careful'; + + const bannerAlert = await driver.findElement({ + css: '[data-testid="confirm-banner-alert"]', + text: expectedTitle, + }); + + assert( + bannerAlert, + `Banner alert not found. Expected Title: ${expectedTitle}`, + ); + }, + ); + }); }); }); diff --git a/test/e2e/tests/responsive-ui/metamask-responsive-ui.spec.js b/test/e2e/tests/responsive-ui/metamask-responsive-ui.spec.js index c1ff9f3477ab..db43124355c2 100644 --- a/test/e2e/tests/responsive-ui/metamask-responsive-ui.spec.js +++ b/test/e2e/tests/responsive-ui/metamask-responsive-ui.spec.js @@ -11,165 +11,234 @@ const { const FixtureBuilder = require('../../fixture-builder'); describe('MetaMask Responsive UI', function () { - it('Creating a new wallet @no-mmi', async function () { - const driverOptions = { constrainWindowSize: true }; - - await withFixtures( - { - fixtures: new FixtureBuilder({ onboarding: true }).build(), - driverOptions, - title: this.test.fullTitle(), - }, - async ({ driver }) => { - await driver.navigate(); - - // agree to terms of use - await driver.clickElement('[data-testid="onboarding-terms-checkbox"]'); - - // welcome - await driver.clickElement('[data-testid="onboarding-create-wallet"]'); - - // metrics - await driver.clickElement('[data-testid="metametrics-no-thanks"]'); - - // create password - await driver.fill( - '[data-testid="create-password-new"]', - 'correct horse battery staple', - ); - await driver.fill( - '[data-testid="create-password-confirm"]', - 'correct horse battery staple', - ); - await driver.clickElement('[data-testid="create-password-terms"]'); - await driver.clickElement('[data-testid="create-password-wallet"]'); - - // secure wallet - await driver.clickElement('[data-testid="secure-wallet-recommended"]'); - - // review - await driver.clickElement('[data-testid="recovery-phrase-reveal"]'); - const chipTwo = await ( - await driver.findElement('[data-testid="recovery-phrase-chip-2"]') - ).getText(); - const chipThree = await ( - await driver.findElement('[data-testid="recovery-phrase-chip-3"]') - ).getText(); - const chipSeven = await ( - await driver.findElement('[data-testid="recovery-phrase-chip-7"]') - ).getText(); - await driver.clickElement('[data-testid="recovery-phrase-next"]'); - - // confirm - await driver.fill('[data-testid="recovery-phrase-input-2"]', chipTwo); - await driver.fill('[data-testid="recovery-phrase-input-3"]', chipThree); - await driver.fill('[data-testid="recovery-phrase-input-7"]', chipSeven); - await driver.clickElement('[data-testid="recovery-phrase-confirm"]'); - - // complete - await driver.clickElement('[data-testid="onboarding-complete-done"]'); - - // pin extension - await driver.clickElement('[data-testid="pin-extension-next"]'); - await driver.clickElement('[data-testid="pin-extension-done"]'); - await driver.assertElementNotPresent('.loading-overlay__spinner'); - // assert balance - await driver.waitForSelector({ - css: '[data-testid="eth-overview__primary-currency"]', - text: '0', - }); - }, - ); - }); + describe('Old confirmation screens', function () { + it('Send Transaction from responsive window', async function () { + const driverOptions = { constrainWindowSize: true }; + await withFixtures( + { + fixtures: new FixtureBuilder().build(), + driverOptions, + ganacheOptions: defaultGanacheOptions, + title: this.test.fullTitle(), + }, + async ({ driver, ganacheServer }) => { + await logInWithBalanceValidation(driver, ganacheServer); + + await tempToggleSettingRedesignedTransactionConfirmations(driver); + + // Send ETH from inside MetaMask + // starts to send a transaction + await openActionMenuAndStartSendFlow(driver); + await driver.fill( + 'input[placeholder="Enter public address (0x) or domain name"]', + '0x2f318C334780961FB129D2a6c30D0763d9a5C970', + ); + + const inputAmount = await driver.fill('input[placeholder="0"]', '1'); + + const inputValue = await inputAmount.getProperty('value'); + assert.equal(inputValue, '1'); + await driver.clickElement({ text: 'Continue', tag: 'button' }); - it('Importing existing wallet from lock page', async function () { - const driverOptions = { constrainWindowSize: true }; - - await withFixtures( - { - fixtures: new FixtureBuilder().build(), - driverOptions, - title: this.test.fullTitle(), - }, - async ({ driver, ganacheServer }) => { - await driver.navigate(); - - // Import Secret Recovery Phrase - await driver.waitForSelector({ - tag: 'span', - text: 'Localhost 8545', - }); - await driver.clickElement({ - css: '.unlock-page__link', - text: 'Forgot password?', - }); - - await driver.pasteIntoField( - '[data-testid="import-srp__srp-word-0"]', - TEST_SEED_PHRASE_TWO, - ); - - await driver.fill('#password', 'correct horse battery staple'); - await driver.fill('#confirm-password', 'correct horse battery staple'); - await driver.press('#confirm-password', driver.Key.ENTER); - - // balance renders - await locateAccountBalanceDOM(driver, ganacheServer); - }, - ); + // wait for transaction value to be rendered and confirm + await driver.waitForSelector({ + css: '.currency-display-component__text', + text: '1.000042', + }); + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + + // finds the transaction in the transactions list + await driver.clickElement( + '[data-testid="account-overview__activity-tab"]', + ); + await driver.wait(async () => { + const confirmedTxes = await driver.findElements( + '.transaction-list__completed-transactions .activity-list-item', + ); + return confirmedTxes.length === 1; + }, 10000); + + await driver.waitForSelector({ + css: '[data-testid="transaction-list-item-primary-currency"]', + text: '-1 ETH', + }); + }, + ); + }); }); - it('Send Transaction from responsive window', async function () { - const driverOptions = { constrainWindowSize: true }; - await withFixtures( - { - fixtures: new FixtureBuilder().build(), - driverOptions, - ganacheOptions: defaultGanacheOptions, - title: this.test.fullTitle(), - }, - async ({ driver, ganacheServer }) => { - await logInWithBalanceValidation(driver, ganacheServer); - - await tempToggleSettingRedesignedTransactionConfirmations(driver); - - // Send ETH from inside MetaMask - // starts to send a transaction - await openActionMenuAndStartSendFlow(driver); - await driver.fill( - 'input[placeholder="Enter public address (0x) or domain name"]', - '0x2f318C334780961FB129D2a6c30D0763d9a5C970', - ); - - const inputAmount = await driver.fill('input[placeholder="0"]', '1'); - - const inputValue = await inputAmount.getProperty('value'); - assert.equal(inputValue, '1'); - await driver.clickElement({ text: 'Continue', tag: 'button' }); - - // wait for transaction value to be rendered and confirm - await driver.waitForSelector({ - css: '.currency-display-component__text', - text: '1.000042', - }); - await driver.clickElement({ text: 'Confirm', tag: 'button' }); - - // finds the transaction in the transactions list - await driver.clickElement( - '[data-testid="account-overview__activity-tab"]', - ); - await driver.wait(async () => { - const confirmedTxes = await driver.findElements( - '.transaction-list__completed-transactions .activity-list-item', + describe('Redesigned confirmation screens', function () { + it('Creating a new wallet @no-mmi', async function () { + const driverOptions = { constrainWindowSize: true }; + + await withFixtures( + { + fixtures: new FixtureBuilder({ onboarding: true }).build(), + driverOptions, + title: this.test.fullTitle(), + }, + async ({ driver }) => { + await driver.navigate(); + + // agree to terms of use + await driver.clickElement( + '[data-testid="onboarding-terms-checkbox"]', + ); + + // welcome + await driver.clickElement('[data-testid="onboarding-create-wallet"]'); + + // metrics + await driver.clickElement('[data-testid="metametrics-no-thanks"]'); + + // create password + await driver.fill( + '[data-testid="create-password-new"]', + 'correct horse battery staple', + ); + await driver.fill( + '[data-testid="create-password-confirm"]', + 'correct horse battery staple', + ); + await driver.clickElement('[data-testid="create-password-terms"]'); + await driver.clickElement('[data-testid="create-password-wallet"]'); + + // secure wallet + await driver.clickElement( + '[data-testid="secure-wallet-recommended"]', + ); + + // review + await driver.clickElement('[data-testid="recovery-phrase-reveal"]'); + const chipTwo = await ( + await driver.findElement('[data-testid="recovery-phrase-chip-2"]') + ).getText(); + const chipThree = await ( + await driver.findElement('[data-testid="recovery-phrase-chip-3"]') + ).getText(); + const chipSeven = await ( + await driver.findElement('[data-testid="recovery-phrase-chip-7"]') + ).getText(); + await driver.clickElement('[data-testid="recovery-phrase-next"]'); + + // confirm + await driver.fill('[data-testid="recovery-phrase-input-2"]', chipTwo); + await driver.fill( + '[data-testid="recovery-phrase-input-3"]', + chipThree, + ); + await driver.fill( + '[data-testid="recovery-phrase-input-7"]', + chipSeven, + ); + await driver.clickElement('[data-testid="recovery-phrase-confirm"]'); + + // complete + await driver.clickElement('[data-testid="onboarding-complete-done"]'); + + // pin extension + await driver.clickElement('[data-testid="pin-extension-next"]'); + await driver.clickElement('[data-testid="pin-extension-done"]'); + await driver.assertElementNotPresent('.loading-overlay__spinner'); + // assert balance + await driver.waitForSelector({ + css: '[data-testid="eth-overview__primary-currency"]', + text: '0', + }); + }, + ); + }); + + it('Importing existing wallet from lock page', async function () { + const driverOptions = { constrainWindowSize: true }; + + await withFixtures( + { + fixtures: new FixtureBuilder().build(), + driverOptions, + title: this.test.fullTitle(), + }, + async ({ driver, ganacheServer }) => { + await driver.navigate(); + + // Import Secret Recovery Phrase + await driver.waitForSelector({ + tag: 'span', + text: 'Localhost 8545', + }); + await driver.clickElement({ + css: '.unlock-page__link', + text: 'Forgot password?', + }); + + await driver.pasteIntoField( + '[data-testid="import-srp__srp-word-0"]', + TEST_SEED_PHRASE_TWO, + ); + + await driver.fill('#password', 'correct horse battery staple'); + await driver.fill( + '#confirm-password', + 'correct horse battery staple', + ); + await driver.press('#confirm-password', driver.Key.ENTER); + + // balance renders + await locateAccountBalanceDOM(driver, ganacheServer); + }, + ); + }); + + it('Send Transaction from responsive window', async function () { + const driverOptions = { constrainWindowSize: true }; + await withFixtures( + { + fixtures: new FixtureBuilder().build(), + driverOptions, + ganacheOptions: defaultGanacheOptions, + title: this.test.fullTitle(), + }, + async ({ driver, ganacheServer }) => { + await logInWithBalanceValidation(driver, ganacheServer); + + // Send ETH from inside MetaMask + // starts to send a transaction + await openActionMenuAndStartSendFlow(driver); + await driver.fill( + 'input[placeholder="Enter public address (0x) or domain name"]', + '0x2f318C334780961FB129D2a6c30D0763d9a5C970', + ); + + const inputAmount = await driver.fill('input[placeholder="0"]', '1'); + + const inputValue = await inputAmount.getProperty('value'); + assert.equal(inputValue, '1'); + await driver.clickElement({ text: 'Continue', tag: 'button' }); + + // wait for transaction value to be rendered and confirm + await driver.waitForSelector({ + css: 'h2', + text: '1 ETH', + }); + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + + // finds the transaction in the transactions list + await driver.clickElement( + '[data-testid="account-overview__activity-tab"]', ); - return confirmedTxes.length === 1; - }, 10000); - - await driver.waitForSelector({ - css: '[data-testid="transaction-list-item-primary-currency"]', - text: '-1 ETH', - }); - }, - ); + await driver.wait(async () => { + const confirmedTxes = await driver.findElements( + '.transaction-list__completed-transactions .activity-list-item', + ); + return confirmedTxes.length === 1; + }, 10000); + + await driver.waitForSelector({ + css: '[data-testid="transaction-list-item-primary-currency"]', + text: '-1 ETH', + }); + }, + ); + }); }); }); diff --git a/test/e2e/tests/tokens/custom-token-send-transfer.spec.js b/test/e2e/tests/tokens/custom-token-send-transfer.spec.js index 0c5498a82cca..3774af82ae1c 100644 --- a/test/e2e/tests/tokens/custom-token-send-transfer.spec.js +++ b/test/e2e/tests/tokens/custom-token-send-transfer.spec.js @@ -1,4 +1,7 @@ const { strict: assert } = require('assert'); +const { + mockedSourcifyTokenSend, +} = require('../confirmations/transactions/erc20-token-send-redesign.spec'); const { withFixtures, defaultGanacheOptions, @@ -18,215 +21,409 @@ const recipientAddress = '0x2f318C334780961FB129D2a6c30D0763d9a5C970'; describe('Transfer custom tokens @no-mmi', function () { const smartContract = SMART_CONTRACTS.HST; - it('send custom tokens from extension customizing gas values', async function () { - await withFixtures( - { - dapp: true, - fixtures: new FixtureBuilder().withTokensControllerERC20().build(), - ganacheOptions: defaultGanacheOptions, - smartContract, - title: this.test.fullTitle(), - }, - async ({ driver }) => { - await unlockWallet(driver); - - await tempToggleSettingRedesignedTransactionConfirmations(driver); - - // go to custom tokens view on extension, perform send tokens - await driver.clickElement({ - css: '[data-testid="multichain-token-list-item-value"]', - text: '10 TST', - }); - await driver.delay(500); - await driver.clickElement('[data-testid="eth-overview-send"]'); - await driver.fill( - 'input[placeholder="Enter public address (0x) or domain name"]', - recipientAddress, - ); - await driver.waitForSelector({ - css: '.ens-input__selected-input__title', - text: '0x2f318...5C970', - }); - await driver.fill('input[placeholder="0"]', '1'); - await driver.clickElement({ text: 'Continue', tag: 'button' }); - - // check transaction details - await driver.waitForSelector({ - text: '1 TST', - tag: 'h1', - }); - await driver.waitForSelector({ - text: 'Transfer', - css: '.confirm-page-container-summary__action__name', - }); - const estimatedGasFee = await driver.findElements( - '.currency-display-component__text', - ); - assert.notEqual( - await estimatedGasFee[1].getText(), - '0', - 'Estimated gas fee should not be 0', - ); - - // check function name and hex data details in hex tab - await clickNestedButton(driver, 'Hex'); - await driver.waitForSelector({ - text: 'Transfer', - tag: 'span', - }); - await driver.waitForSelector({ - tag: 'p', - text: '0xa9059cbb0000000000000000000000002f318c334780961fb129d2a6c30d0763d9a5c97', - }); - - // edit gas fee - await clickNestedButton(driver, 'Details'); - await driver.clickElement({ text: 'Edit', tag: 'button' }); - await editGasFeeForm(driver, '60000', '10'); - await driver.clickElement({ text: 'Confirm', tag: 'button' }); - - // check that transaction has completed correctly and is displayed in the activity list - await driver.waitForSelector({ - css: '[data-testid="activity-list-item-action"]', - text: 'Send TST', - }); - await driver.waitForSelector( - { - css: '.transaction-list__completed-transactions [data-testid="transaction-list-item-primary-currency"]', - text: '-1 TST', - }, - { timeout: 10000 }, - ); - }, - ); - }); - it('transfer custom tokens from dapp customizing gas values', async function () { - await withFixtures( - { - dapp: true, - fixtures: new FixtureBuilder() - .withPermissionControllerConnectedToTestDapp() - .withTokensControllerERC20() - .build(), - ganacheOptions: defaultGanacheOptions, - smartContract, - title: this.test.fullTitle(), - }, - async ({ driver, contractRegistry }) => { - const contractAddress = await contractRegistry.getContractAddress( + describe('Old confirmation screens', function () { + it('send custom tokens from extension customizing gas values', async function () { + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder().withTokensControllerERC20().build(), + ganacheOptions: defaultGanacheOptions, smartContract, - ); - await unlockWallet(driver); - - await tempToggleSettingRedesignedTransactionConfirmations(driver); - - // transfer token from dapp - await openDapp(driver, contractAddress); - await driver.delay(veryLargeDelayMs); - - await driver.clickElement({ text: 'Transfer Tokens', tag: 'button' }); - - await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); - await driver.waitForSelector({ text: '1.5 TST', tag: 'h1' }); - - // edit gas fee - await driver.clickElement({ text: 'Edit', tag: 'button' }); - await editGasFeeForm(driver, '60000', '10'); - await driver.clickElement({ text: 'Confirm', tag: 'button' }); - - // in extension, check that transaction has completed correctly and is displayed in the activity list - await driver.switchToWindowWithTitle( - WINDOW_TITLES.ExtensionInFullScreenView, - ); - await clickNestedButton(driver, 'Activity'); - await driver.waitForSelector({ - css: '[data-testid="transaction-list-item-primary-currency"]', - text: '-1.5 TST', - }); - - // this selector helps prevent flakiness. it allows driver to wait until send transfer is "confirmed" - await driver.waitForSelector({ - text: 'Confirmed', - tag: 'div', - }); - - // check token amount is correct after transaction - await clickNestedButton(driver, 'Tokens'); - const tokenAmount = await driver.findElement( - { + title: this.test.fullTitle(), + }, + async ({ driver }) => { + await unlockWallet(driver); + + await tempToggleSettingRedesignedTransactionConfirmations(driver); + + // go to custom tokens view on extension, perform send tokens + await driver.clickElement({ css: '[data-testid="multichain-token-list-item-value"]', - text: '8.5 TST', - }, - { timeout: 10000 }, - ); - assert.ok(tokenAmount, 'Token amount is not correct'); - }, - ); + text: '10 TST', + }); + await driver.delay(500); + await driver.clickElement('[data-testid="eth-overview-send"]'); + await driver.fill( + 'input[placeholder="Enter public address (0x) or domain name"]', + recipientAddress, + ); + await driver.waitForSelector({ + css: '.ens-input__selected-input__title', + text: '0x2f318...5C970', + }); + await driver.fill('input[placeholder="0"]', '1'); + await driver.clickElement({ text: 'Continue', tag: 'button' }); + + // check transaction details + await driver.waitForSelector({ + text: '1 TST', + tag: 'h1', + }); + await driver.waitForSelector({ + text: 'Transfer', + css: '.confirm-page-container-summary__action__name', + }); + const estimatedGasFee = await driver.findElements( + '.currency-display-component__text', + ); + assert.notEqual( + await estimatedGasFee[1].getText(), + '0', + 'Estimated gas fee should not be 0', + ); + + // check function name and hex data details in hex tab + await clickNestedButton(driver, 'Hex'); + await driver.waitForSelector({ + text: 'Transfer', + tag: 'span', + }); + await driver.waitForSelector({ + tag: 'p', + text: '0xa9059cbb0000000000000000000000002f318c334780961fb129d2a6c30d0763d9a5c97', + }); + + // edit gas fee + await clickNestedButton(driver, 'Details'); + await driver.clickElement({ text: 'Edit', tag: 'button' }); + await editGasFeeForm(driver, '60000', '10'); + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + + // check that transaction has completed correctly and is displayed in the activity list + await driver.waitForSelector({ + css: '[data-testid="activity-list-item-action"]', + text: 'Send TST', + }); + await driver.waitForSelector( + { + css: '.transaction-list__completed-transactions [data-testid="transaction-list-item-primary-currency"]', + text: '-1 TST', + }, + { timeout: 10000 }, + ); + }, + ); + }); + + it('transfer custom tokens from dapp customizing gas values', async function () { + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withPermissionControllerConnectedToTestDapp() + .withTokensControllerERC20() + .build(), + ganacheOptions: defaultGanacheOptions, + smartContract, + title: this.test.fullTitle(), + }, + async ({ driver, contractRegistry }) => { + const contractAddress = await contractRegistry.getContractAddress( + smartContract, + ); + await unlockWallet(driver); + + await tempToggleSettingRedesignedTransactionConfirmations(driver); + + // transfer token from dapp + await openDapp(driver, contractAddress); + await driver.delay(veryLargeDelayMs); + + await driver.clickElement({ text: 'Transfer Tokens', tag: 'button' }); + + await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); + await driver.waitForSelector({ text: '1.5 TST', tag: 'h1' }); + + // edit gas fee + await driver.clickElement({ text: 'Edit', tag: 'button' }); + await editGasFeeForm(driver, '60000', '10'); + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + + // in extension, check that transaction has completed correctly and is displayed in the activity list + await driver.switchToWindowWithTitle( + WINDOW_TITLES.ExtensionInFullScreenView, + ); + await clickNestedButton(driver, 'Activity'); + await driver.waitForSelector({ + css: '[data-testid="transaction-list-item-primary-currency"]', + text: '-1.5 TST', + }); + + // this selector helps prevent flakiness. it allows driver to wait until send transfer is "confirmed" + await driver.waitForSelector({ + text: 'Confirmed', + tag: 'div', + }); + + // check token amount is correct after transaction + await clickNestedButton(driver, 'Tokens'); + const tokenAmount = await driver.findElement( + { + css: '[data-testid="multichain-token-list-item-value"]', + text: '8.5 TST', + }, + { timeout: 10000 }, + ); + assert.ok(tokenAmount, 'Token amount is not correct'); + }, + ); + }); + + it('transfer custom tokens from dapp without specifying gas', async function () { + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withPermissionControllerConnectedToTestDapp() + .withTokensControllerERC20() + .build(), + ganacheOptions: defaultGanacheOptions, + smartContract, + title: this.test.fullTitle(), + }, + async ({ driver, contractRegistry }) => { + const contractAddress = await contractRegistry.getContractAddress( + smartContract, + ); + await unlockWallet(driver); + + await tempToggleSettingRedesignedTransactionConfirmations(driver); + + // transfer token from dapp + await openDapp(driver, contractAddress); + await driver.delay(veryLargeDelayMs); + await driver.clickElement({ + text: 'Transfer Tokens Without Gas', + tag: 'button', + }); + await switchToNotificationWindow(driver); + await driver.waitForSelector({ text: '1.5 TST', tag: 'h1' }); + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + + // in extension, check that transaction has completed correctly and is displayed in the activity list + await driver.switchToWindowWithTitle( + WINDOW_TITLES.ExtensionInFullScreenView, + ); + await clickNestedButton(driver, 'Activity'); + await driver.waitForSelector({ + css: '[data-testid="transaction-list-item-primary-currency"]', + text: '-1.5 TST', + }); + await driver.waitForSelector({ + css: '[data-testid="activity-list-item-action"]', + text: 'Send TST', + }); + + // this selector helps prevent flakiness. it allows driver to wait until send transfer is "confirmed" + await driver.waitForSelector({ + text: 'Confirmed', + tag: 'div', + }); + + // check token amount is correct after transaction + await clickNestedButton(driver, 'Tokens'); + const tokenAmount = await driver.findElement( + { + css: '[data-testid="multichain-token-list-item-value"]', + text: '8.5 TST', + }, + { timeout: 10000 }, + ); + assert.ok(tokenAmount, 'Token amount is not correct'); + }, + ); + }); }); - it('transfer custom tokens from dapp without specifying gas', async function () { - await withFixtures( - { - dapp: true, - fixtures: new FixtureBuilder() - .withPermissionControllerConnectedToTestDapp() - .withTokensControllerERC20() - .build(), - ganacheOptions: defaultGanacheOptions, - smartContract, - title: this.test.fullTitle(), - }, - async ({ driver, contractRegistry }) => { - const contractAddress = await contractRegistry.getContractAddress( + describe('Redesigned confirmation screens', function () { + it('send custom tokens from extension customizing gas values', async function () { + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder().withTokensControllerERC20().build(), + ganacheOptions: defaultGanacheOptions, smartContract, - ); - await unlockWallet(driver); - - await tempToggleSettingRedesignedTransactionConfirmations(driver); - - // transfer token from dapp - await openDapp(driver, contractAddress); - await driver.delay(veryLargeDelayMs); - await driver.clickElement({ - text: 'Transfer Tokens Without Gas', - tag: 'button', - }); - await switchToNotificationWindow(driver); - await driver.waitForSelector({ text: '1.5 TST', tag: 'h1' }); - await driver.clickElement({ text: 'Confirm', tag: 'button' }); - - // in extension, check that transaction has completed correctly and is displayed in the activity list - await driver.switchToWindowWithTitle( - WINDOW_TITLES.ExtensionInFullScreenView, - ); - await clickNestedButton(driver, 'Activity'); - await driver.waitForSelector({ - css: '[data-testid="transaction-list-item-primary-currency"]', - text: '-1.5 TST', - }); - await driver.waitForSelector({ - css: '[data-testid="activity-list-item-action"]', - text: 'Send TST', - }); - - // this selector helps prevent flakiness. it allows driver to wait until send transfer is "confirmed" - await driver.waitForSelector({ - text: 'Confirmed', - tag: 'div', - }); - - // check token amount is correct after transaction - await clickNestedButton(driver, 'Tokens'); - const tokenAmount = await driver.findElement( - { + title: this.test.fullTitle(), + testSpecificMock: mocks, + }, + async ({ driver }) => { + await unlockWallet(driver); + + // go to custom tokens view on extension, perform send tokens + await driver.clickElement({ css: '[data-testid="multichain-token-list-item-value"]', - text: '8.5 TST', - }, - { timeout: 10000 }, - ); - assert.ok(tokenAmount, 'Token amount is not correct'); - }, - ); + text: '10 TST', + }); + await driver.delay(500); + await driver.clickElement('[data-testid="eth-overview-send"]'); + await driver.fill( + 'input[placeholder="Enter public address (0x) or domain name"]', + recipientAddress, + ); + await driver.waitForSelector({ + css: '.ens-input__selected-input__title', + text: '0x2f318...5C970', + }); + await driver.fill('input[placeholder="0"]', '1'); + await driver.clickElement({ text: 'Continue', tag: 'button' }); + + // check transaction details + await driver.waitForSelector({ + text: '1 TST', + tag: 'h2', + }); + + // edit gas fee + await driver.clickElement('[data-testid="edit-gas-fee-icon"]'); + await editGasFeeForm(driver, '60000', '10'); + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + + // check that transaction has completed correctly and is displayed in the activity list + await driver.waitForSelector({ + css: '[data-testid="activity-list-item-action"]', + text: 'Send TST', + }); + await driver.waitForSelector( + { + css: '.transaction-list__completed-transactions [data-testid="transaction-list-item-primary-currency"]', + text: '-1 TST', + }, + { timeout: 10000 }, + ); + }, + ); + }); + + it('transfer custom tokens from dapp customizing gas values', async function () { + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withPermissionControllerConnectedToTestDapp() + .withTokensControllerERC20() + .build(), + ganacheOptions: defaultGanacheOptions, + smartContract, + title: this.test.fullTitle(), + testSpecificMock: mocks, + }, + async ({ driver, contractRegistry }) => { + const contractAddress = await contractRegistry.getContractAddress( + smartContract, + ); + await unlockWallet(driver); + + // transfer token from dapp + await openDapp(driver, contractAddress); + await driver.delay(veryLargeDelayMs); + + await driver.clickElement({ text: 'Transfer Tokens', tag: 'button' }); + + await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); + await driver.waitForSelector({ text: '1.5 TST', tag: 'h2' }); + + // edit gas fee + await driver.clickElement('[data-testid="edit-gas-fee-icon"]'); + await editGasFeeForm(driver, '60000', '10'); + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + + // in extension, check that transaction has completed correctly and is displayed in the activity list + await driver.switchToWindowWithTitle( + WINDOW_TITLES.ExtensionInFullScreenView, + ); + await clickNestedButton(driver, 'Activity'); + await driver.waitForSelector({ + css: '[data-testid="transaction-list-item-primary-currency"]', + text: '-1.5 TST', + }); + + // this selector helps prevent flakiness. it allows driver to wait until send transfer is "confirmed" + await driver.waitForSelector({ + text: 'Confirmed', + tag: 'div', + }); + + // check token amount is correct after transaction + await clickNestedButton(driver, 'Tokens'); + const tokenAmount = await driver.findElement( + { + css: '[data-testid="multichain-token-list-item-value"]', + text: '8.5 TST', + }, + { timeout: 10000 }, + ); + assert.ok(tokenAmount, 'Token amount is not correct'); + }, + ); + }); + + it('transfer custom tokens from dapp without specifying gas', async function () { + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withPermissionControllerConnectedToTestDapp() + .withTokensControllerERC20() + .build(), + ganacheOptions: defaultGanacheOptions, + smartContract, + title: this.test.fullTitle(), + testSpecificMock: mocks, + }, + async ({ driver, contractRegistry }) => { + const contractAddress = await contractRegistry.getContractAddress( + smartContract, + ); + await unlockWallet(driver); + + // transfer token from dapp + await openDapp(driver, contractAddress); + await driver.delay(veryLargeDelayMs); + await driver.clickElement({ + text: 'Transfer Tokens Without Gas', + tag: 'button', + }); + await switchToNotificationWindow(driver); + await driver.waitForSelector({ text: '1.5 TST', tag: 'h2' }); + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + + // in extension, check that transaction has completed correctly and is displayed in the activity list + await driver.switchToWindowWithTitle( + WINDOW_TITLES.ExtensionInFullScreenView, + ); + await clickNestedButton(driver, 'Activity'); + await driver.waitForSelector({ + css: '[data-testid="transaction-list-item-primary-currency"]', + text: '-1.5 TST', + }); + await driver.waitForSelector({ + css: '[data-testid="activity-list-item-action"]', + text: 'Send TST', + }); + + // this selector helps prevent flakiness. it allows driver to wait until send transfer is "confirmed" + await driver.waitForSelector({ + text: 'Confirmed', + tag: 'div', + }); + + // check token amount is correct after transaction + await clickNestedButton(driver, 'Tokens'); + const tokenAmount = await driver.findElement( + { + css: '[data-testid="multichain-token-list-item-value"]', + text: '8.5 TST', + }, + { timeout: 10000 }, + ); + assert.ok(tokenAmount, 'Token amount is not correct'); + }, + ); + }); + + async function mocks(server) { + return [await mockedSourcifyTokenSend(server)]; + } }); }); diff --git a/test/e2e/tests/tokens/nft/erc721-interaction.spec.js b/test/e2e/tests/tokens/nft/erc721-interaction.spec.js index 8b634ffc3ce3..ecd614f1b8a4 100644 --- a/test/e2e/tests/tokens/nft/erc721-interaction.spec.js +++ b/test/e2e/tests/tokens/nft/erc721-interaction.spec.js @@ -11,551 +11,1028 @@ const { const { SMART_CONTRACTS } = require('../../../seeder/smart-contracts'); const FixtureBuilder = require('../../../fixture-builder'); -describe('ERC721 NFTs testdapp interaction', function () { - const smartContract = SMART_CONTRACTS.NFTS; - - it('should add NFTs to state by parsing tx logs without having to click on watch NFT', async function () { - await withFixtures( - { - dapp: true, - fixtures: new FixtureBuilder() - .withPermissionControllerConnectedToTestDapp() - .build(), - ganacheOptions: defaultGanacheOptions, - smartContract, - title: this.test.fullTitle(), - }, - async ({ driver, _, contractRegistry }) => { - const contract = contractRegistry.getContractAddress(smartContract); - await unlockWallet(driver); - - await tempToggleSettingRedesignedTransactionConfirmations(driver); - - // Open Dapp and wait for deployed contract - await openDapp(driver, contract); - await driver.findClickableElement('#deployButton'); - - // mint NFTs - await driver.fill('#mintAmountInput', '5'); - await driver.clickElement({ text: 'Mint', tag: 'button' }); - - // Notification - await driver.waitUntilXWindowHandles(3); - await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); - await driver.waitForSelector({ - css: '.confirm-page-container-summary__action__name', - text: 'Deposit', - }); - await driver.clickElement({ text: 'Confirm', tag: 'button' }); - await driver.waitUntilXWindowHandles(2); - await driver.switchToWindowWithTitle( - WINDOW_TITLES.ExtensionInFullScreenView, - ); - await driver.clickElement( - '[data-testid="account-overview__activity-tab"]', - ); - await driver.waitForSelector({ - css: '[data-testid="activity-list-item-action"]', - text: 'Deposit', - }); - - // verify the mint transaction has finished - await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp); - await driver.waitForSelector({ - css: '#nftsStatus', - text: 'Mint completed', - }); - - await driver.switchToWindowWithTitle( - WINDOW_TITLES.ExtensionInFullScreenView, - ); - await clickNestedButton(driver, 'NFTs'); - await driver.findElement({ text: 'TestDappNFTs (5)' }); - const nftsListItemsFirstCheck = await driver.findElements( - '.nft-item__container', - ); - assert.equal(nftsListItemsFirstCheck.length, 5); - }, - ); - }); - - it('should prompt users to add their NFTs to their wallet (one by one) @no-mmi', async function () { - await withFixtures( - { - dapp: true, - fixtures: new FixtureBuilder() - .withPermissionControllerConnectedToTestDapp() - .build(), - ganacheOptions: defaultGanacheOptions, - smartContract, - title: this.test.fullTitle(), - }, - async ({ driver, _, contractRegistry }) => { - const contract = contractRegistry.getContractAddress(smartContract); - await unlockWallet(driver); - - await tempToggleSettingRedesignedTransactionConfirmations(driver); - - // Open Dapp and wait for deployed contract - await openDapp(driver, contract); - await driver.findClickableElement('#deployButton'); - - // mint NFT - await driver.fill('#mintAmountInput', '5'); - await driver.clickElement({ text: 'Mint', tag: 'button' }); - - // Notification - await driver.waitUntilXWindowHandles(3); - await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); - await driver.waitForSelector({ - css: '.confirm-page-container-summary__action__name', - text: 'Deposit', - }); - await driver.clickElement({ text: 'Confirm', tag: 'button' }); - await driver.waitUntilXWindowHandles(2); - await driver.switchToWindowWithTitle( - WINDOW_TITLES.ExtensionInFullScreenView, - ); - await driver.clickElement( - '[data-testid="account-overview__activity-tab"]', - ); - await driver.waitForSelector({ - css: '[data-testid="activity-list-item-action"]', - text: 'Deposit', - }); - - // verify the mint transaction has finished - await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp); - const nftsMintStatus = await driver.findElement({ - css: '#nftsStatus', - text: 'Mint completed', - }); - assert.equal(await nftsMintStatus.isDisplayed(), true); - - // watch 3 of the nfts - await driver.fill('#watchNFTInput', '1'); - await driver.clickElement({ text: 'Watch NFT', tag: 'button' }); - await driver.fill('#watchNFTInput', '2'); - await driver.clickElement({ text: 'Watch NFT', tag: 'button' }); - await driver.fill('#watchNFTInput', '3'); - await driver.clickElement({ text: 'Watch NFT', tag: 'button' }); - - await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); - - // avoid race condition - await driver.waitForSelector({ - css: '.confirm-add-suggested-nft__nft-tokenId', - text: '#3', - }); - - // confirm watchNFT - await driver.waitForSelector({ - css: '.mm-text--heading-lg', - text: 'Add suggested NFTs', - }); - await driver.clickElement({ text: 'Add NFTs', tag: 'button' }); - await driver.switchToWindowWithTitle( - WINDOW_TITLES.ExtensionInFullScreenView, - ); - await clickNestedButton(driver, 'NFTs'); - // Changed this check from 3 to 6, because after mint all nfts has been added to state, - await driver.findElement({ text: 'TestDappNFTs (6)' }); - const nftsListItemsFirstCheck = await driver.findElements( - '.nft-item__container', - ); - assert.equal(nftsListItemsFirstCheck.length, 6); - - await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp); - await driver.fill('#watchNFTInput', '4'); - - await driver.clickElement({ text: 'Watch NFT', tag: 'button' }); - await driver.fill('#watchNFTInput', '5'); - await driver.clickElement({ text: 'Watch NFT', tag: 'button' }); - await driver.fill('#watchNFTInput', '6'); - await driver.clickElement({ text: 'Watch NFT', tag: 'button' }); - - await driver.waitUntilXWindowHandles(3); - await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); - - // avoid race condition - await driver.waitForSelector({ - css: '.confirm-add-suggested-nft__nft-tokenId', - text: '#6', - }); - - // confirm watchNFT - await driver.waitForSelector({ - css: '.mm-text--heading-lg', - text: 'Add suggested NFTs', - }); - await driver.clickElement({ text: 'Add NFTs', tag: 'button' }); - await driver.switchToWindowWithTitle( - WINDOW_TITLES.ExtensionInFullScreenView, - ); - await clickNestedButton(driver, 'NFTs'); - await driver.findElement({ text: 'TestDappNFTs (6)' }); - const nftsListItemsSecondCheck = await driver.findElements( - '.nft-item__container', - ); - assert.equal(nftsListItemsSecondCheck.length, 6); - }, - ); - }); +// describe('Old confirmation screens', function () { +// // ... +// }); - it('should prompt users to add their NFTs to their wallet (all at once)', async function () { - await withFixtures( - { - dapp: true, - fixtures: new FixtureBuilder() - .withPermissionControllerConnectedToTestDapp() - .build(), - ganacheOptions: defaultGanacheOptions, - smartContract, - title: this.test.fullTitle(), - }, - async ({ driver, _, contractRegistry }) => { - const contract = contractRegistry.getContractAddress(smartContract); - await unlockWallet(driver); - - await tempToggleSettingRedesignedTransactionConfirmations(driver); - - // Open Dapp and wait for deployed contract - await openDapp(driver, contract); - await driver.findClickableElement('#deployButton'); - - // mint NFT - await driver.fill('#mintAmountInput', '5'); - await driver.clickElement({ text: 'Mint', tag: 'button' }); - - // Notification - await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); - await driver.waitForSelector({ - css: '.confirm-page-container-summary__action__name', - text: 'Deposit', - }); - await driver.clickElementAndWaitForWindowToClose({ - text: 'Confirm', - tag: 'button', - }); - await driver.switchToWindowWithTitle( - WINDOW_TITLES.ExtensionInFullScreenView, - ); - await driver.clickElement( - '[data-testid="account-overview__activity-tab"]', - ); - - // We need to wait until the transaction is confirmed before looking for the tx - // otherwise the element becomes stale, as it updates from 'pending' to 'confirmed' - await driver.waitForSelector('.transaction-status-label--confirmed'); - - await driver.waitForSelector({ - css: '[data-testid="activity-list-item-action"]', - text: 'Deposit', - }); - // verify the mint transaction has finished - await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp); - await driver.waitForSelector({ - css: '#nftsStatus', - text: 'Mint completed', - }); - - // watch all nfts - await driver.clickElement({ text: 'Watch all NFTs', tag: 'button' }); - - await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); - - // confirm watchNFT - await driver.waitForSelector({ - css: '.mm-text--heading-lg', - text: 'Add suggested NFTs', - }); - - await driver.findElements('.confirm-add-suggested-nft__nft-list-item'); - const suggestedNftListItems = await driver.findElements( - '.confirm-add-suggested-nft__nft-list-item', - ); - // there are 6 nfts to add because one is minted as part of the fixture - assert.equal(suggestedNftListItems.length, 6); - - // remove one nft from the list - const removeButtons = await driver.findElements( - '.confirm-add-suggested-nft__nft-remove', - ); - await removeButtons[0].click(); - - await driver.clickElementAndWaitForWindowToClose({ - text: 'Add NFTs', - tag: 'button', - }); - - await driver.switchToWindowWithTitle( - WINDOW_TITLES.ExtensionInFullScreenView, - ); - await clickNestedButton(driver, 'NFTs'); - await driver.findElement({ text: 'TestDappNFTs (5)' }); - const nftsListItemsSecondCheck = await driver.findElements( - '.nft-item__container', - ); - - assert.equal(nftsListItemsSecondCheck.length, 5); - }, - ); - }); - - it('should transfer a single ERC721 NFT from one account to another', async function () { - await withFixtures( - { - dapp: true, - fixtures: new FixtureBuilder() - .withPermissionControllerConnectedToTestDapp() - .build(), - ganacheOptions: defaultGanacheOptions, - smartContract, - title: this.test.fullTitle(), - }, - async ({ driver, _, contractRegistry }) => { - const contract = contractRegistry.getContractAddress(smartContract); - await unlockWallet(driver); - - await tempToggleSettingRedesignedTransactionConfirmations(driver); - - // Open Dapp and wait for deployed contract - await openDapp(driver, contract); - await driver.findClickableElement('#deployButton'); - - // Click Transfer - await driver.fill('#transferTokenInput', '1'); - await driver.clickElement('#transferFromButton'); - await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); - - // Confirm transfer - await driver.waitForSelector({ - css: '.mm-text--heading-md', - text: 'TestDappNFTs', - }); - await driver.clickElement({ text: 'Confirm', tag: 'button' }); - await driver.waitUntilXWindowHandles(2); - await driver.switchToWindowWithTitle( - WINDOW_TITLES.ExtensionInFullScreenView, - ); - await driver.clickElement( - '[data-testid="account-overview__activity-tab"]', - ); - await driver.waitForSelector( - '.transaction-list__completed-transactions .activity-list-item:nth-of-type(1)', - ); - - // Verify transaction - await driver.findElement({ text: 'Send TDN' }); - }, - ); - }); +// describe('Redesigned confirmation screens', function () { +// // ... +// }); - it('should approve an address to transfer a single ERC721 NFT', async function () { - await withFixtures( - { - dapp: true, - fixtures: new FixtureBuilder() - .withPermissionControllerConnectedToTestDapp() - .build(), - ganacheOptions: defaultGanacheOptions, - smartContract, - title: this.test.fullTitle(), - }, - async ({ driver, _, contractRegistry }) => { - const contract = contractRegistry.getContractAddress(smartContract); - await unlockWallet(driver); - - await tempToggleSettingRedesignedTransactionConfirmations(driver); - - // Open Dapp and wait for deployed contract - await openDapp(driver, contract); - await driver.findClickableElement('#deployButton'); - - // Click Approve - const approveInput = await driver.findElement('#approveTokenInput'); - await approveInput.clear(); - await approveInput.sendKeys('1'); - await driver.clickElement('#approveButton'); - - await driver.waitUntilXWindowHandles(3); - await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); - - // Verify dialog - const title = await driver.findElement( - '[data-testid="confirm-approve-title"]', - ); - await driver.clickElement({ - text: 'View full transaction details', - css: '.confirm-approve-content__small-blue-text', - }); - const [func] = await driver.findElements( - '.confirm-approve-content__data .confirm-approve-content__small-text', - ); - assert.equal( - await title.getText(), - 'Allow access to and transfer of your TestDappNFTs (#1)?', - ); - assert.equal(await func.getText(), 'Function: Approve'); - - // Confirm approval - await driver.clickElement({ text: 'Confirm', tag: 'button' }); - await driver.waitUntilXWindowHandles(2); - await driver.switchToWindowWithTitle( - WINDOW_TITLES.ExtensionInFullScreenView, - ); - await driver.clickElement( - '[data-testid="account-overview__activity-tab"]', - ); - await driver.waitForSelector( - '.transaction-list__completed-transactions .transaction-list-item:nth-of-type(1)', - ); - - // Verify transaction - await driver.waitForSelector({ - css: '[data-testid="activity-list-item-action"]', - text: 'Approve TDN spending cap', - }); - }, - ); - }); +describe('ERC721 NFTs testdapp interaction', function () { + const smartContract = SMART_CONTRACTS.NFTS; - it('should enable approval for a third party address to manage all ERC721 NFTs @no-mmi', async function () { - await withFixtures( - { - dapp: true, - fixtures: new FixtureBuilder() - .withPermissionControllerConnectedToTestDapp() - .build(), - ganacheOptions: defaultGanacheOptions, - smartContract, - title: this.test.fullTitle(), - }, - async ({ driver, _, contractRegistry }) => { - const contract = contractRegistry.getContractAddress(smartContract); - await unlockWallet(driver); - - await tempToggleSettingRedesignedTransactionConfirmations(driver); - - // Open Dapp and wait for deployed contract - await openDapp(driver, contract); - await driver.findClickableElement('#deployButton'); - - // Enable Set approval for all - await driver.clickElement('#setApprovalForAllButton'); - await driver.waitUntilXWindowHandles(3); - await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); - - // Verify dialog - const title = await driver.findElement( - '[data-testid="confirm-approve-title"]', - ); - await driver.clickElement({ - text: 'View full transaction details', - css: '.confirm-approve-content__small-blue-text', - }); - const [func, params] = await driver.findElements( - '.confirm-approve-content__data .confirm-approve-content__small-text', - ); - assert.equal( - await title.getText(), - 'Allow access to and transfer of all your TestDappNFTs?', - ); - assert.equal(await func.getText(), 'Function: SetApprovalForAll'); - assert.equal(await params.getText(), 'Parameters: true'); - - // Confirm enabling set approval for all - await driver.clickElement({ text: 'Confirm', tag: 'button' }); - await driver.clickElement({ text: 'Approve', tag: 'button' }); - - await driver.waitUntilXWindowHandles(2); - await driver.switchToWindowWithTitle( - WINDOW_TITLES.ExtensionInFullScreenView, - ); - await driver.clickElement( - '[data-testid="account-overview__activity-tab"]', - ); - await driver.waitForSelector( - '.transaction-list__completed-transactions .activity-list-item:nth-of-type(1)', - ); - - // Verify transaction - await driver.waitForSelector({ - css: '[data-testid="activity-list-item-action"]', - text: 'Approve TDN with no spend limit', - }); - }, - ); + describe('Old confirmation screens', function () { + it('should add NFTs to state by parsing tx logs without having to click on watch NFT', async function () { + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withPermissionControllerConnectedToTestDapp() + .build(), + ganacheOptions: defaultGanacheOptions, + smartContract, + title: this.test.fullTitle(), + }, + async ({ driver, _, contractRegistry }) => { + const contract = contractRegistry.getContractAddress(smartContract); + await unlockWallet(driver); + + await tempToggleSettingRedesignedTransactionConfirmations(driver); + + // Open Dapp and wait for deployed contract + await openDapp(driver, contract); + await driver.findClickableElement('#deployButton'); + + // mint NFTs + await driver.fill('#mintAmountInput', '5'); + await driver.clickElement({ text: 'Mint', tag: 'button' }); + + // Notification + await driver.waitUntilXWindowHandles(3); + await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); + await driver.waitForSelector({ + css: '.confirm-page-container-summary__action__name', + text: 'Deposit', + }); + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + await driver.waitUntilXWindowHandles(2); + await driver.switchToWindowWithTitle( + WINDOW_TITLES.ExtensionInFullScreenView, + ); + await driver.clickElement( + '[data-testid="account-overview__activity-tab"]', + ); + await driver.waitForSelector({ + css: '[data-testid="activity-list-item-action"]', + text: 'Deposit', + }); + + // verify the mint transaction has finished + await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp); + await driver.waitForSelector({ + css: '#nftsStatus', + text: 'Mint completed', + }); + + await driver.switchToWindowWithTitle( + WINDOW_TITLES.ExtensionInFullScreenView, + ); + await clickNestedButton(driver, 'NFTs'); + await driver.findElement({ text: 'TestDappNFTs (5)' }); + const nftsListItemsFirstCheck = await driver.findElements( + '.nft-item__container', + ); + assert.equal(nftsListItemsFirstCheck.length, 5); + }, + ); + }); + + it('should prompt users to add their NFTs to their wallet (one by one) @no-mmi', async function () { + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withPermissionControllerConnectedToTestDapp() + .build(), + ganacheOptions: defaultGanacheOptions, + smartContract, + title: this.test.fullTitle(), + }, + async ({ driver, _, contractRegistry }) => { + const contract = contractRegistry.getContractAddress(smartContract); + await unlockWallet(driver); + + await tempToggleSettingRedesignedTransactionConfirmations(driver); + + // Open Dapp and wait for deployed contract + await openDapp(driver, contract); + await driver.findClickableElement('#deployButton'); + + // mint NFT + await driver.fill('#mintAmountInput', '5'); + await driver.clickElement({ text: 'Mint', tag: 'button' }); + + // Notification + await driver.waitUntilXWindowHandles(3); + await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); + await driver.waitForSelector({ + css: '.confirm-page-container-summary__action__name', + text: 'Deposit', + }); + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + await driver.waitUntilXWindowHandles(2); + await driver.switchToWindowWithTitle( + WINDOW_TITLES.ExtensionInFullScreenView, + ); + await driver.clickElement( + '[data-testid="account-overview__activity-tab"]', + ); + await driver.waitForSelector({ + css: '[data-testid="activity-list-item-action"]', + text: 'Deposit', + }); + + // verify the mint transaction has finished + await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp); + const nftsMintStatus = await driver.findElement({ + css: '#nftsStatus', + text: 'Mint completed', + }); + assert.equal(await nftsMintStatus.isDisplayed(), true); + + // watch 3 of the nfts + await driver.fill('#watchNFTInput', '1'); + await driver.clickElement({ text: 'Watch NFT', tag: 'button' }); + await driver.fill('#watchNFTInput', '2'); + await driver.clickElement({ text: 'Watch NFT', tag: 'button' }); + await driver.fill('#watchNFTInput', '3'); + await driver.clickElement({ text: 'Watch NFT', tag: 'button' }); + + await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); + + // avoid race condition + await driver.waitForSelector({ + css: '.confirm-add-suggested-nft__nft-tokenId', + text: '#3', + }); + + // confirm watchNFT + await driver.waitForSelector({ + css: '.mm-text--heading-lg', + text: 'Add suggested NFTs', + }); + await driver.clickElement({ text: 'Add NFTs', tag: 'button' }); + await driver.switchToWindowWithTitle( + WINDOW_TITLES.ExtensionInFullScreenView, + ); + await clickNestedButton(driver, 'NFTs'); + // Changed this check from 3 to 6, because after mint all nfts has been added to state, + await driver.findElement({ text: 'TestDappNFTs (6)' }); + const nftsListItemsFirstCheck = await driver.findElements( + '.nft-item__container', + ); + assert.equal(nftsListItemsFirstCheck.length, 6); + + await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp); + await driver.fill('#watchNFTInput', '4'); + + await driver.clickElement({ text: 'Watch NFT', tag: 'button' }); + await driver.fill('#watchNFTInput', '5'); + await driver.clickElement({ text: 'Watch NFT', tag: 'button' }); + await driver.fill('#watchNFTInput', '6'); + await driver.clickElement({ text: 'Watch NFT', tag: 'button' }); + + await driver.waitUntilXWindowHandles(3); + await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); + + // avoid race condition + await driver.waitForSelector({ + css: '.confirm-add-suggested-nft__nft-tokenId', + text: '#6', + }); + + // confirm watchNFT + await driver.waitForSelector({ + css: '.mm-text--heading-lg', + text: 'Add suggested NFTs', + }); + await driver.clickElement({ text: 'Add NFTs', tag: 'button' }); + await driver.switchToWindowWithTitle( + WINDOW_TITLES.ExtensionInFullScreenView, + ); + await clickNestedButton(driver, 'NFTs'); + await driver.findElement({ text: 'TestDappNFTs (6)' }); + const nftsListItemsSecondCheck = await driver.findElements( + '.nft-item__container', + ); + assert.equal(nftsListItemsSecondCheck.length, 6); + }, + ); + }); + + it('should prompt users to add their NFTs to their wallet (all at once)', async function () { + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withPermissionControllerConnectedToTestDapp() + .build(), + ganacheOptions: defaultGanacheOptions, + smartContract, + title: this.test.fullTitle(), + }, + async ({ driver, _, contractRegistry }) => { + const contract = contractRegistry.getContractAddress(smartContract); + await unlockWallet(driver); + + await tempToggleSettingRedesignedTransactionConfirmations(driver); + + // Open Dapp and wait for deployed contract + await openDapp(driver, contract); + await driver.findClickableElement('#deployButton'); + + // mint NFT + await driver.fill('#mintAmountInput', '5'); + await driver.clickElement({ text: 'Mint', tag: 'button' }); + + // Notification + await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); + await driver.waitForSelector({ + css: '.confirm-page-container-summary__action__name', + text: 'Deposit', + }); + await driver.clickElementAndWaitForWindowToClose({ + text: 'Confirm', + tag: 'button', + }); + await driver.switchToWindowWithTitle( + WINDOW_TITLES.ExtensionInFullScreenView, + ); + await driver.clickElement( + '[data-testid="account-overview__activity-tab"]', + ); + + // We need to wait until the transaction is confirmed before looking for the tx + // otherwise the element becomes stale, as it updates from 'pending' to 'confirmed' + await driver.waitForSelector('.transaction-status-label--confirmed'); + + await driver.waitForSelector({ + css: '[data-testid="activity-list-item-action"]', + text: 'Deposit', + }); + // verify the mint transaction has finished + await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp); + await driver.waitForSelector({ + css: '#nftsStatus', + text: 'Mint completed', + }); + + // watch all nfts + await driver.clickElement({ text: 'Watch all NFTs', tag: 'button' }); + + await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); + + // confirm watchNFT + await driver.waitForSelector({ + css: '.mm-text--heading-lg', + text: 'Add suggested NFTs', + }); + + await driver.findElements( + '.confirm-add-suggested-nft__nft-list-item', + ); + const suggestedNftListItems = await driver.findElements( + '.confirm-add-suggested-nft__nft-list-item', + ); + // there are 6 nfts to add because one is minted as part of the fixture + assert.equal(suggestedNftListItems.length, 6); + + // remove one nft from the list + const removeButtons = await driver.findElements( + '.confirm-add-suggested-nft__nft-remove', + ); + await removeButtons[0].click(); + + await driver.clickElementAndWaitForWindowToClose({ + text: 'Add NFTs', + tag: 'button', + }); + + await driver.switchToWindowWithTitle( + WINDOW_TITLES.ExtensionInFullScreenView, + ); + await clickNestedButton(driver, 'NFTs'); + await driver.findElement({ text: 'TestDappNFTs (5)' }); + const nftsListItemsSecondCheck = await driver.findElements( + '.nft-item__container', + ); + + assert.equal(nftsListItemsSecondCheck.length, 5); + }, + ); + }); + + it('should transfer a single ERC721 NFT from one account to another', async function () { + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withPermissionControllerConnectedToTestDapp() + .build(), + ganacheOptions: defaultGanacheOptions, + smartContract, + title: this.test.fullTitle(), + }, + async ({ driver, _, contractRegistry }) => { + const contract = contractRegistry.getContractAddress(smartContract); + await unlockWallet(driver); + + await tempToggleSettingRedesignedTransactionConfirmations(driver); + + // Open Dapp and wait for deployed contract + await openDapp(driver, contract); + await driver.findClickableElement('#deployButton'); + + // Click Transfer + await driver.fill('#transferTokenInput', '1'); + await driver.clickElement('#transferFromButton'); + await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); + + // Confirm transfer + await driver.waitForSelector({ + css: '.mm-text--heading-md', + text: 'TestDappNFTs', + }); + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + await driver.waitUntilXWindowHandles(2); + await driver.switchToWindowWithTitle( + WINDOW_TITLES.ExtensionInFullScreenView, + ); + await driver.clickElement( + '[data-testid="account-overview__activity-tab"]', + ); + await driver.waitForSelector( + '.transaction-list__completed-transactions .activity-list-item:nth-of-type(1)', + ); + + // Verify transaction + await driver.findElement({ text: 'Send TDN' }); + }, + ); + }); + + it('should approve an address to transfer a single ERC721 NFT', async function () { + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withPermissionControllerConnectedToTestDapp() + .build(), + ganacheOptions: defaultGanacheOptions, + smartContract, + title: this.test.fullTitle(), + }, + async ({ driver, _, contractRegistry }) => { + const contract = contractRegistry.getContractAddress(smartContract); + await unlockWallet(driver); + + await tempToggleSettingRedesignedTransactionConfirmations(driver); + + // Open Dapp and wait for deployed contract + await openDapp(driver, contract); + await driver.findClickableElement('#deployButton'); + + // Click Approve + const approveInput = await driver.findElement('#approveTokenInput'); + await approveInput.clear(); + await approveInput.sendKeys('1'); + await driver.clickElement('#approveButton'); + + await driver.waitUntilXWindowHandles(3); + await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); + + // Verify dialog + const title = await driver.findElement( + '[data-testid="confirm-approve-title"]', + ); + await driver.clickElement({ + text: 'View full transaction details', + css: '.confirm-approve-content__small-blue-text', + }); + const [func] = await driver.findElements( + '.confirm-approve-content__data .confirm-approve-content__small-text', + ); + assert.equal( + await title.getText(), + 'Allow access to and transfer of your TestDappNFTs (#1)?', + ); + assert.equal(await func.getText(), 'Function: Approve'); + + // Confirm approval + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + await driver.waitUntilXWindowHandles(2); + await driver.switchToWindowWithTitle( + WINDOW_TITLES.ExtensionInFullScreenView, + ); + await driver.clickElement( + '[data-testid="account-overview__activity-tab"]', + ); + await driver.waitForSelector( + '.transaction-list__completed-transactions .transaction-list-item:nth-of-type(1)', + ); + + // Verify transaction + await driver.waitForSelector({ + css: '[data-testid="activity-list-item-action"]', + text: 'Approve TDN spending cap', + }); + }, + ); + }); + + it('should enable approval for a third party address to manage all ERC721 NFTs @no-mmi', async function () { + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withPermissionControllerConnectedToTestDapp() + .build(), + ganacheOptions: defaultGanacheOptions, + smartContract, + title: this.test.fullTitle(), + }, + async ({ driver, _, contractRegistry }) => { + const contract = contractRegistry.getContractAddress(smartContract); + await unlockWallet(driver); + + await tempToggleSettingRedesignedTransactionConfirmations(driver); + + // Open Dapp and wait for deployed contract + await openDapp(driver, contract); + await driver.findClickableElement('#deployButton'); + + // Enable Set approval for all + await driver.clickElement('#setApprovalForAllButton'); + await driver.waitUntilXWindowHandles(3); + await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); + + // Verify dialog + const title = await driver.findElement( + '[data-testid="confirm-approve-title"]', + ); + await driver.clickElement({ + text: 'View full transaction details', + css: '.confirm-approve-content__small-blue-text', + }); + const [func, params] = await driver.findElements( + '.confirm-approve-content__data .confirm-approve-content__small-text', + ); + assert.equal( + await title.getText(), + 'Allow access to and transfer of all your TestDappNFTs?', + ); + assert.equal(await func.getText(), 'Function: SetApprovalForAll'); + assert.equal(await params.getText(), 'Parameters: true'); + + // Confirm enabling set approval for all + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + await driver.clickElement({ text: 'Approve', tag: 'button' }); + + await driver.waitUntilXWindowHandles(2); + await driver.switchToWindowWithTitle( + WINDOW_TITLES.ExtensionInFullScreenView, + ); + await driver.clickElement( + '[data-testid="account-overview__activity-tab"]', + ); + await driver.waitForSelector( + '.transaction-list__completed-transactions .activity-list-item:nth-of-type(1)', + ); + + // Verify transaction + await driver.waitForSelector({ + css: '[data-testid="activity-list-item-action"]', + text: 'Approve TDN with no spend limit', + }); + }, + ); + }); + + it('should disable approval for a third party address to manage all ERC721 NFTs @no-mmi', async function () { + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withPermissionControllerConnectedToTestDapp() + .build(), + ganacheOptions: defaultGanacheOptions, + smartContract, + title: this.test.fullTitle(), + }, + async ({ driver, _, contractRegistry }) => { + const contract = contractRegistry.getContractAddress(smartContract); + await unlockWallet(driver); + + await tempToggleSettingRedesignedTransactionConfirmations(driver); + + // Open Dapp and wait for deployed contract + await openDapp(driver, contract); + await driver.findClickableElement('#deployButton'); + + // Disable Set approval for all + await driver.clickElement('#revokeButton'); + await driver.waitUntilXWindowHandles(3); + await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); + + // Verify dialog + const title = await driver.findElement( + '[data-testid="confirm-approve-title"]', + ); + await driver.clickElement({ + text: 'View full transaction details', + css: '.confirm-approve-content__small-blue-text', + }); + const [func, params] = await driver.findElements( + '.confirm-approve-content__data .confirm-approve-content__small-text', + ); + const proceedWithCautionIsDisplayed = await driver.isElementPresent( + '.dialog--error', + ); + assert.equal( + await title.getText(), + 'Revoke permission to access and transfer all of your TestDappNFTs?', + ); + assert.equal(await func.getText(), 'Function: SetApprovalForAll'); + assert.equal(await params.getText(), 'Parameters: false'); + assert.equal(proceedWithCautionIsDisplayed, false); + + // Confirm disabling set approval for all + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + + await driver.waitUntilXWindowHandles(2); + await driver.switchToWindowWithTitle( + WINDOW_TITLES.ExtensionInFullScreenView, + ); + await driver.clickElement( + '[data-testid="account-overview__activity-tab"]', + ); + await driver.waitForSelector( + '.transaction-list__completed-transactions .transaction-list-item:nth-of-type(1)', + ); + + // Verify transaction + await driver.waitForSelector({ + css: '[data-testid="activity-list-item-action"]', + text: 'Approve TDN with no spend limit', + }); + }, + ); + }); }); - it('should disable approval for a third party address to manage all ERC721 NFTs @no-mmi', async function () { - await withFixtures( - { - dapp: true, - fixtures: new FixtureBuilder() - .withPermissionControllerConnectedToTestDapp() - .build(), - ganacheOptions: defaultGanacheOptions, - smartContract, - title: this.test.fullTitle(), - }, - async ({ driver, _, contractRegistry }) => { - const contract = contractRegistry.getContractAddress(smartContract); - await unlockWallet(driver); - - await tempToggleSettingRedesignedTransactionConfirmations(driver); - - // Open Dapp and wait for deployed contract - await openDapp(driver, contract); - await driver.findClickableElement('#deployButton'); - - // Disable Set approval for all - await driver.clickElement('#revokeButton'); - await driver.waitUntilXWindowHandles(3); - await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); - - // Verify dialog - const title = await driver.findElement( - '[data-testid="confirm-approve-title"]', - ); - await driver.clickElement({ - text: 'View full transaction details', - css: '.confirm-approve-content__small-blue-text', - }); - const [func, params] = await driver.findElements( - '.confirm-approve-content__data .confirm-approve-content__small-text', - ); - const proceedWithCautionIsDisplayed = await driver.isElementPresent( - '.dialog--error', - ); - assert.equal( - await title.getText(), - 'Revoke permission to access and transfer all of your TestDappNFTs?', - ); - assert.equal(await func.getText(), 'Function: SetApprovalForAll'); - assert.equal(await params.getText(), 'Parameters: false'); - assert.equal(proceedWithCautionIsDisplayed, false); - - // Confirm disabling set approval for all - await driver.clickElement({ text: 'Confirm', tag: 'button' }); - - await driver.waitUntilXWindowHandles(2); - await driver.switchToWindowWithTitle( - WINDOW_TITLES.ExtensionInFullScreenView, - ); - await driver.clickElement( - '[data-testid="account-overview__activity-tab"]', - ); - await driver.waitForSelector( - '.transaction-list__completed-transactions .transaction-list-item:nth-of-type(1)', - ); - - // Verify transaction - await driver.waitForSelector({ - css: '[data-testid="activity-list-item-action"]', - text: 'Approve TDN with no spend limit', - }); - }, - ); + describe('Redesigned confirmation screens', function () { + it('should add NFTs to state by parsing tx logs without having to click on watch NFT', async function () { + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withPermissionControllerConnectedToTestDapp() + .build(), + ganacheOptions: defaultGanacheOptions, + smartContract, + title: this.test.fullTitle(), + }, + async ({ driver, _, contractRegistry }) => { + const contract = contractRegistry.getContractAddress(smartContract); + await unlockWallet(driver); + + // Open Dapp and wait for deployed contract + await openDapp(driver, contract); + await driver.findClickableElement('#deployButton'); + + // mint NFTs + await driver.fill('#mintAmountInput', '5'); + await driver.clickElement({ text: 'Mint', tag: 'button' }); + + // Notification + await driver.waitUntilXWindowHandles(3); + await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + await driver.waitUntilXWindowHandles(2); + await driver.switchToWindowWithTitle( + WINDOW_TITLES.ExtensionInFullScreenView, + ); + await driver.clickElement( + '[data-testid="account-overview__activity-tab"]', + ); + await driver.waitForSelector({ + css: '[data-testid="activity-list-item-action"]', + text: 'Deposit', + }); + + // verify the mint transaction has finished + await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp); + await driver.waitForSelector({ + css: '#nftsStatus', + text: 'Mint completed', + }); + + await driver.switchToWindowWithTitle( + WINDOW_TITLES.ExtensionInFullScreenView, + ); + await clickNestedButton(driver, 'NFTs'); + await driver.findElement({ text: 'TestDappNFTs (5)' }); + const nftsListItemsFirstCheck = await driver.findElements( + '.nft-item__container', + ); + assert.equal(nftsListItemsFirstCheck.length, 5); + }, + ); + }); + + it('should prompt users to add their NFTs to their wallet (one by one) @no-mmi', async function () { + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withPermissionControllerConnectedToTestDapp() + .build(), + ganacheOptions: defaultGanacheOptions, + smartContract, + title: this.test.fullTitle(), + }, + async ({ driver, _, contractRegistry }) => { + const contract = contractRegistry.getContractAddress(smartContract); + await unlockWallet(driver); + + // Open Dapp and wait for deployed contract + await openDapp(driver, contract); + await driver.findClickableElement('#deployButton'); + + // mint NFT + await driver.fill('#mintAmountInput', '5'); + await driver.clickElement({ text: 'Mint', tag: 'button' }); + + // Notification + await driver.waitUntilXWindowHandles(3); + await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + await driver.waitUntilXWindowHandles(2); + await driver.switchToWindowWithTitle( + WINDOW_TITLES.ExtensionInFullScreenView, + ); + await driver.clickElement( + '[data-testid="account-overview__activity-tab"]', + ); + await driver.waitForSelector({ + css: '[data-testid="activity-list-item-action"]', + text: 'Deposit', + }); + + // verify the mint transaction has finished + await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp); + const nftsMintStatus = await driver.findElement({ + css: '#nftsStatus', + text: 'Mint completed', + }); + assert.equal(await nftsMintStatus.isDisplayed(), true); + + // watch 3 of the nfts + await driver.fill('#watchNFTInput', '1'); + await driver.clickElement({ text: 'Watch NFT', tag: 'button' }); + await driver.fill('#watchNFTInput', '2'); + await driver.clickElement({ text: 'Watch NFT', tag: 'button' }); + await driver.fill('#watchNFTInput', '3'); + await driver.clickElement({ text: 'Watch NFT', tag: 'button' }); + + await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); + + // avoid race condition + await driver.waitForSelector({ + css: '.confirm-add-suggested-nft__nft-tokenId', + text: '#3', + }); + + // confirm watchNFT + await driver.waitForSelector({ + css: '.mm-text--heading-lg', + text: 'Add suggested NFTs', + }); + await driver.clickElement({ text: 'Add NFTs', tag: 'button' }); + await driver.switchToWindowWithTitle( + WINDOW_TITLES.ExtensionInFullScreenView, + ); + await clickNestedButton(driver, 'NFTs'); + // Changed this check from 3 to 6, because after mint all nfts has been added to state, + await driver.findElement({ text: 'TestDappNFTs (6)' }); + const nftsListItemsFirstCheck = await driver.findElements( + '.nft-item__container', + ); + assert.equal(nftsListItemsFirstCheck.length, 6); + + await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp); + await driver.fill('#watchNFTInput', '4'); + + await driver.clickElement({ text: 'Watch NFT', tag: 'button' }); + await driver.fill('#watchNFTInput', '5'); + await driver.clickElement({ text: 'Watch NFT', tag: 'button' }); + await driver.fill('#watchNFTInput', '6'); + await driver.clickElement({ text: 'Watch NFT', tag: 'button' }); + + await driver.waitUntilXWindowHandles(3); + await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); + + // avoid race condition + await driver.waitForSelector({ + css: '.confirm-add-suggested-nft__nft-tokenId', + text: '#6', + }); + + // confirm watchNFT + await driver.waitForSelector({ + css: '.mm-text--heading-lg', + text: 'Add suggested NFTs', + }); + await driver.clickElement({ text: 'Add NFTs', tag: 'button' }); + await driver.switchToWindowWithTitle( + WINDOW_TITLES.ExtensionInFullScreenView, + ); + await clickNestedButton(driver, 'NFTs'); + await driver.findElement({ text: 'TestDappNFTs (6)' }); + const nftsListItemsSecondCheck = await driver.findElements( + '.nft-item__container', + ); + assert.equal(nftsListItemsSecondCheck.length, 6); + }, + ); + }); + + it('should prompt users to add their NFTs to their wallet (all at once)', async function () { + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withPermissionControllerConnectedToTestDapp() + .build(), + ganacheOptions: defaultGanacheOptions, + smartContract, + title: this.test.fullTitle(), + }, + async ({ driver, _, contractRegistry }) => { + const contract = contractRegistry.getContractAddress(smartContract); + await unlockWallet(driver); + + // Open Dapp and wait for deployed contract + await openDapp(driver, contract); + await driver.findClickableElement('#deployButton'); + + // mint NFT + await driver.fill('#mintAmountInput', '5'); + await driver.clickElement({ text: 'Mint', tag: 'button' }); + + // Notification + await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); + await driver.clickElementAndWaitForWindowToClose({ + text: 'Confirm', + tag: 'button', + }); + await driver.switchToWindowWithTitle( + WINDOW_TITLES.ExtensionInFullScreenView, + ); + await driver.clickElement( + '[data-testid="account-overview__activity-tab"]', + ); + + // We need to wait until the transaction is confirmed before looking for the tx + // otherwise the element becomes stale, as it updates from 'pending' to 'confirmed' + await driver.waitForSelector('.transaction-status-label--confirmed'); + + await driver.waitForSelector({ + css: '[data-testid="activity-list-item-action"]', + text: 'Deposit', + }); + // verify the mint transaction has finished + await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp); + await driver.waitForSelector({ + css: '#nftsStatus', + text: 'Mint completed', + }); + + // watch all nfts + await driver.clickElement({ text: 'Watch all NFTs', tag: 'button' }); + + await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); + + // confirm watchNFT + await driver.waitForSelector({ + css: '.mm-text--heading-lg', + text: 'Add suggested NFTs', + }); + + await driver.findElements( + '.confirm-add-suggested-nft__nft-list-item', + ); + const suggestedNftListItems = await driver.findElements( + '.confirm-add-suggested-nft__nft-list-item', + ); + // there are 6 nfts to add because one is minted as part of the fixture + assert.equal(suggestedNftListItems.length, 6); + + // remove one nft from the list + const removeButtons = await driver.findElements( + '.confirm-add-suggested-nft__nft-remove', + ); + await removeButtons[0].click(); + + await driver.clickElementAndWaitForWindowToClose({ + text: 'Add NFTs', + tag: 'button', + }); + + await driver.switchToWindowWithTitle( + WINDOW_TITLES.ExtensionInFullScreenView, + ); + await clickNestedButton(driver, 'NFTs'); + await driver.findElement({ text: 'TestDappNFTs (5)' }); + const nftsListItemsSecondCheck = await driver.findElements( + '.nft-item__container', + ); + + assert.equal(nftsListItemsSecondCheck.length, 5); + }, + ); + }); + + it('should transfer a single ERC721 NFT from one account to another', async function () { + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withPermissionControllerConnectedToTestDapp() + .build(), + ganacheOptions: defaultGanacheOptions, + smartContract, + title: this.test.fullTitle(), + }, + async ({ driver, _, contractRegistry }) => { + const contract = contractRegistry.getContractAddress(smartContract); + await unlockWallet(driver); + + // Open Dapp and wait for deployed contract + await openDapp(driver, contract); + await driver.findClickableElement('#deployButton'); + + // Click Transfer + await driver.fill('#transferTokenInput', '1'); + await driver.clickElement('#transferFromButton'); + await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); + + // Confirm transfer + await driver.waitForSelector({ + css: 'h2', + text: 'TestDappNFTs', + }); + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + await driver.waitUntilXWindowHandles(2); + await driver.switchToWindowWithTitle( + WINDOW_TITLES.ExtensionInFullScreenView, + ); + await driver.clickElement( + '[data-testid="account-overview__activity-tab"]', + ); + await driver.waitForSelector( + '.transaction-list__completed-transactions .activity-list-item:nth-of-type(1)', + ); + + // Verify transaction + await driver.findElement({ text: 'Send TDN' }); + }, + ); + }); + + it('should approve an address to transfer a single ERC721 NFT', async function () { + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withPermissionControllerConnectedToTestDapp() + .build(), + ganacheOptions: defaultGanacheOptions, + smartContract, + title: this.test.fullTitle(), + }, + async ({ driver, _, contractRegistry }) => { + const contract = contractRegistry.getContractAddress(smartContract); + await unlockWallet(driver); + + // Open Dapp and wait for deployed contract + await openDapp(driver, contract); + await driver.findClickableElement('#deployButton'); + + // Click Approve + const approveInput = await driver.findElement('#approveTokenInput'); + await approveInput.clear(); + await approveInput.sendKeys('1'); + await driver.clickElement('#approveButton'); + + await driver.waitUntilXWindowHandles(3); + await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); + + // Confirm approval + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + await driver.waitUntilXWindowHandles(2); + await driver.switchToWindowWithTitle( + WINDOW_TITLES.ExtensionInFullScreenView, + ); + await driver.clickElement( + '[data-testid="account-overview__activity-tab"]', + ); + await driver.waitForSelector( + '.transaction-list__completed-transactions .transaction-list-item:nth-of-type(1)', + ); + + // Verify transaction + await driver.waitForSelector({ + css: '[data-testid="activity-list-item-action"]', + text: 'Approve TDN spending cap', + }); + }, + ); + }); + + it('should enable approval for a third party address to manage all ERC721 NFTs @no-mmi', async function () { + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withPermissionControllerConnectedToTestDapp() + .build(), + ganacheOptions: defaultGanacheOptions, + smartContract, + title: this.test.fullTitle(), + }, + async ({ driver, _, contractRegistry }) => { + const contract = contractRegistry.getContractAddress(smartContract); + await unlockWallet(driver); + + // Open Dapp and wait for deployed contract + await openDapp(driver, contract); + await driver.findClickableElement('#deployButton'); + + // Enable Set approval for all + await driver.clickElement('#setApprovalForAllButton'); + await driver.waitUntilXWindowHandles(3); + await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); + + // Confirm enabling set approval for all + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + + await driver.waitUntilXWindowHandles(2); + await driver.switchToWindowWithTitle( + WINDOW_TITLES.ExtensionInFullScreenView, + ); + await driver.clickElement( + '[data-testid="account-overview__activity-tab"]', + ); + await driver.waitForSelector( + '.transaction-list__completed-transactions .activity-list-item:nth-of-type(1)', + ); + + // Verify transaction + await driver.waitForSelector({ + css: '[data-testid="activity-list-item-action"]', + text: 'Approve TDN with no spend limit', + }); + }, + ); + }); + + it('should disable approval for a third party address to manage all ERC721 NFTs @no-mmi', async function () { + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withPermissionControllerConnectedToTestDapp() + .build(), + ganacheOptions: defaultGanacheOptions, + smartContract, + title: this.test.fullTitle(), + }, + async ({ driver, _, contractRegistry }) => { + const contract = contractRegistry.getContractAddress(smartContract); + await unlockWallet(driver); + + // Open Dapp and wait for deployed contract + await openDapp(driver, contract); + await driver.findClickableElement('#deployButton'); + + // Disable Set approval for all + await driver.clickElement('#revokeButton'); + await driver.waitUntilXWindowHandles(3); + await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); + + // Confirm disabling set approval for all + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + + await driver.waitUntilXWindowHandles(2); + await driver.switchToWindowWithTitle( + WINDOW_TITLES.ExtensionInFullScreenView, + ); + await driver.clickElement( + '[data-testid="account-overview__activity-tab"]', + ); + await driver.waitForSelector( + '.transaction-list__completed-transactions .transaction-list-item:nth-of-type(1)', + ); + + // Verify transaction + await driver.waitForSelector({ + css: '[data-testid="activity-list-item-action"]', + text: 'Approve TDN with no spend limit', + }); + }, + ); + }); }); }); diff --git a/test/e2e/tests/transaction/change-assets.spec.js b/test/e2e/tests/transaction/change-assets.spec.js index f6a997c164e9..9764941771b7 100644 --- a/test/e2e/tests/transaction/change-assets.spec.js +++ b/test/e2e/tests/transaction/change-assets.spec.js @@ -10,360 +10,721 @@ const { SMART_CONTRACTS } = require('../../seeder/smart-contracts'); const { tEn } = require('../../../lib/i18n-helpers'); describe('Change assets', function () { - it('sends the correct asset when switching from native currency to NFT', async function () { - const smartContract = SMART_CONTRACTS.NFTS; - await withFixtures( - { - dapp: true, - fixtures: new FixtureBuilder().withNftControllerERC721().build(), - ganacheOptions: defaultGanacheOptions, - smartContract, - title: this.test.fullTitle(), - }, - async ({ driver, ganacheServer }) => { - await logInWithBalanceValidation(driver, ganacheServer); - - await tempToggleSettingRedesignedTransactionConfirmations(driver); - - // Wait for balance to load - await driver.delay(500); - - // Click the Send button - await driver.clickElement('[data-testid="eth-overview-send"]'); - - // Chose a recipient - await driver.clickElement('.multichain-account-list-item'); - - // Populate an amount, continue - await driver.clickElement('[data-testid="currency-input"]'); - await driver.press('[data-testid="currency-input"]', '2'); - await driver.clickElement({ text: 'Continue', css: 'button' }); - - // Validate the send amount - await driver.waitForSelector({ - css: '.currency-display-component__text', - text: '2.000042', - }); - - // Click edit - await driver.clickElement( - '[data-testid="confirm-page-back-edit-button"]', - ); - - // Open the Amount modal - await driver.clickElement('.asset-picker__symbol'); - - // Choose an NFT instead - await driver.clickElement({ css: 'button', text: 'NFTs' }); - await driver.clickElement('[data-testid="nft-default-image"]'); - - // Validate that an NFT is chosen in the AssetAmountPicker - await driver.waitForSelector({ - css: '.asset-picker__symbol', - text: 'TDN', - }); - await driver.waitForSelector({ css: 'p', text: '#1' }); - - // Click continue - await driver.assertElementNotPresent('.mm-modal-content'); - await driver.clickElement({ text: 'Continue', css: 'button' }); - - // Ensure NFT is showing - await driver.waitForSelector( - '.confirm-page-container-summary__title img', - ); - await driver.waitForSelector({ css: 'h3', text: 'Test Dapp NFTs #1' }); - - // Send it! - await driver.clickElement({ text: 'Confirm', css: 'button' }); - - // Ensure it was sent - await driver.waitForSelector({ - css: 'p', - text: 'Send Test Dapp NFTs #1', - }); - }, - ); + describe('Old confirmation screens', function () { + it('sends the correct asset when switching from native currency to NFT', async function () { + const smartContract = SMART_CONTRACTS.NFTS; + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder().withNftControllerERC721().build(), + ganacheOptions: defaultGanacheOptions, + smartContract, + title: this.test.fullTitle(), + }, + async ({ driver, ganacheServer }) => { + await logInWithBalanceValidation(driver, ganacheServer); + + await tempToggleSettingRedesignedTransactionConfirmations(driver); + + // Wait for balance to load + await driver.delay(500); + + // Click the Send button + await driver.clickElement('[data-testid="eth-overview-send"]'); + + // Chose a recipient + await driver.clickElement('.multichain-account-list-item'); + + // Populate an amount, continue + await driver.clickElement('[data-testid="currency-input"]'); + await driver.press('[data-testid="currency-input"]', '2'); + await driver.clickElement({ text: 'Continue', css: 'button' }); + + // Validate the send amount + await driver.waitForSelector({ + css: '.currency-display-component__text', + text: '2.000042', + }); + + // Click edit + await driver.clickElement( + '[data-testid="confirm-page-back-edit-button"]', + ); + + // Open the Amount modal + await driver.clickElement('.asset-picker__symbol'); + + // Choose an NFT instead + await driver.clickElement({ css: 'button', text: 'NFTs' }); + await driver.clickElement('[data-testid="nft-default-image"]'); + + // Validate that an NFT is chosen in the AssetAmountPicker + await driver.waitForSelector({ + css: '.asset-picker__symbol', + text: 'TDN', + }); + await driver.waitForSelector({ css: 'p', text: '#1' }); + + // Click continue + await driver.assertElementNotPresent('.mm-modal-content'); + await driver.clickElement({ text: 'Continue', css: 'button' }); + + // Ensure NFT is showing + await driver.waitForSelector( + '.confirm-page-container-summary__title img', + ); + await driver.waitForSelector({ + css: 'h3', + text: 'Test Dapp NFTs #1', + }); + + // Send it! + await driver.clickElement({ text: 'Confirm', css: 'button' }); + + // Ensure it was sent + await driver.waitForSelector({ + css: 'p', + text: 'Send Test Dapp NFTs #1', + }); + }, + ); + }); + + it('sends the correct asset when switching from ERC20 to NFT', async function () { + const smartContract = SMART_CONTRACTS.NFTS; + const tokenContract = SMART_CONTRACTS.HST; + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withTokensControllerERC20() + .withNftControllerERC721() + .build(), + ganacheOptions: defaultGanacheOptions, + smartContract: [smartContract, tokenContract], + title: this.test.fullTitle(), + }, + async ({ driver, ganacheServer }) => { + await logInWithBalanceValidation(driver, ganacheServer); + + await tempToggleSettingRedesignedTransactionConfirmations(driver); + + // Click the Send button + await driver.clickElement({ + css: '[data-testid="multichain-token-list-button"] span', + text: 'TST', + }); + + // Wait for balance to load + await driver.delay(500); + + await driver.clickElement('[data-testid="eth-overview-send"]'); + + // Chose a recipient + await driver.clickElement('.multichain-account-list-item'); + + // Populate an amount, continue + await driver.clickElement('[data-testid="currency-input"]'); + await driver.press('[data-testid="currency-input"]', '0'); + await driver.clickElement({ text: 'Continue', css: 'button' }); + + // Validate the send amount + await driver.waitForSelector({ + css: '.currency-display-component__text', + text: '0.00008455', + }); + + // Click edit + await driver.clickElement( + '[data-testid="confirm-page-back-edit-button"]', + ); + + // Open the Amount modal + await driver.clickElement('.asset-picker__symbol'); + + // Choose an NFT instead + await driver.clickElement({ css: 'button', text: 'NFTs' }); + await driver.clickElement('[data-testid="nft-default-image"]'); + + // Validate that an NFT is chosen in the AssetAmountPicker + await driver.waitForSelector({ + css: '.asset-picker__symbol', + text: 'TDN', + }); + await driver.waitForSelector({ css: 'p', text: '#1' }); + + // Click continue + await driver.assertElementNotPresent('.mm-modal-content'); + await driver.clickElement({ text: 'Continue', css: 'button' }); + + // Ensure NFT is showing + await driver.waitForSelector( + '.confirm-page-container-summary__title img', + ); + await driver.waitForSelector({ + css: 'h3', + text: 'Test Dapp NFTs #1', + }); + + // Send it! + await driver.clickElement({ text: 'Confirm', css: 'button' }); + + // Ensure it was sent + await driver.waitForSelector({ + css: 'p', + text: 'Send Test Dapp NFTs #1', + }); + }, + ); + }); + + it('sends the correct asset when switching from NFT to native currency', async function () { + const smartContract = SMART_CONTRACTS.NFTS; + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder().withNftControllerERC721().build(), + ganacheOptions: defaultGanacheOptions, + smartContract, + title: this.test.fullTitle(), + }, + async ({ driver, ganacheServer }) => { + await logInWithBalanceValidation(driver, ganacheServer); + + await tempToggleSettingRedesignedTransactionConfirmations(driver); + + // Choose the nft + await driver.clickElement( + '[data-testid="account-overview__nfts-tab"]', + ); + await driver.clickElement('[data-testid="nft-default-image"]'); + await driver.clickElement('[data-testid="nft-send-button"]'); + + // Chose a recipient + await driver.clickElement('.multichain-account-list-item'); + + // Validate that an NFT is chosen in the AssetAmountPicker + await driver.waitForSelector({ + css: '.asset-picker__symbol', + text: 'TDN', + }); + await driver.waitForSelector({ css: 'p', text: '#1' }); + await driver.clickElement({ text: 'Continue', css: 'button' }); + + // Ensure NFT is showing + await driver.waitForSelector( + '.confirm-page-container-summary__title img', + ); + await driver.waitForSelector({ + css: 'h3', + text: 'Test Dapp NFTs #1', + }); + + // Click edit + await driver.clickElement( + '[data-testid="confirm-page-back-edit-button"]', + ); + + // Open the Amount modal + await driver.clickElement('.asset-picker__symbol'); + + // Choose tokens + await driver.clickElement({ css: 'button', text: 'Tokens' }); + await driver.clickElement( + '[data-testid="multichain-token-list-button"]', + ); + + // Ensure correct token selected + await driver.waitForSelector({ + css: '.asset-picker__symbol', + text: 'ETH', + }); + + // Populate an amount, continue + await driver.clickElement('[data-testid="currency-input"]'); + await driver.press('[data-testid="currency-input"]', '2'); + await driver.assertElementNotPresent('.mm-modal-content'); + await driver.clickElement({ text: 'Continue', css: 'button' }); + + // Validate the send amount + await driver.waitForSelector({ + css: '.currency-display-component__text', + text: '2.000042', + }); + + // Send it! + await driver.clickElement({ text: 'Confirm', css: 'button' }); + + // Ensure it was sent + await driver.waitForSelector({ css: 'p', text: 'Send' }); + await driver.waitForSelector({ + css: '[data-testid="transaction-list-item-primary-currency"]', + text: '-2 ETH', + }); + }, + ); + }); + + it('changes to native currency when switching accounts during a NFT send', async function () { + const smartContract = SMART_CONTRACTS.NFTS; + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withNftControllerERC721() + .withPreferencesController({ + featureFlags: { + sendHexData: true, + }, + }) + .build(), + ganacheOptions: defaultGanacheOptions, + smartContract, + title: this.test.fullTitle(), + }, + async ({ driver, ganacheServer }) => { + await logInWithBalanceValidation(driver, ganacheServer); + + await tempToggleSettingRedesignedTransactionConfirmations(driver); + + // Create second account + await driver.clickElement('[data-testid="account-menu-icon"]'); + await driver.clickElement( + '[data-testid="multichain-account-menu-popover-action-button"]', + ); + await driver.clickElement( + '[data-testid="multichain-account-menu-popover-add-account"]', + ); + await driver.fill('[placeholder="Account 2"]', 'Account 2'); + await driver.clickElement({ text: tEn('addAccount'), tag: 'button' }); + + // Go back to Account 1 + await driver.clickElement('[data-testid="account-menu-icon"]'); + await driver.clickElement({ + css: `.multichain-account-list-item .multichain-account-list-item__account-name__button`, + text: 'Account 1', + }); + + // Choose the nft + await driver.clickElement( + '[data-testid="account-overview__nfts-tab"]', + ); + await driver.clickElement('[data-testid="nft-default-image"]'); + await driver.clickElement('[data-testid="nft-send-button"]'); + + // Chose a recipient + await driver.clickElement('.multichain-account-list-item'); + + // Validate that an NFT is chosen in the AssetAmountPicker + await driver.waitForSelector({ + css: '.asset-picker__symbol', + text: 'TDN', + }); + await driver.waitForSelector({ css: 'p', text: '#1' }); + + // Switch to Account 2 + await driver.clickElement('[data-testid="send-page-account-picker"]'); + await driver.clickElement({ + css: `.multichain-account-list-item .multichain-account-list-item__account-name__button`, + text: 'Account 2', + }); + + // Ensure that the AssetPicker shows native currency and 0 value + await driver.waitForSelector({ + css: '.asset-picker__symbol', + text: 'ETH', + }); + + // Go back to Account 1 + await driver.clickElement('[data-testid="send-page-account-picker"]'); + await driver.clickElement({ + css: `.multichain-account-list-item .multichain-account-list-item__account-name__button`, + text: 'Account 1', + }); + + // Ensure that the AssetPicker shows native currency and 0 value + await driver.waitForSelector({ + css: '.asset-picker__symbol', + text: 'ETH', + }); + + // Populate an amount, continue + await driver.clickElement('[data-testid="currency-input"]'); + await driver.press('[data-testid="currency-input"]', '2'); + + // Make sure hex data is cleared after switching assets + const hexDataLocator = await driver.findElement( + '[data-testid="send-hex-textarea"]', + ); + const hexDataValue = await hexDataLocator.getProperty('value'); + assert.equal( + hexDataValue, + '', + 'Hex data has not been cleared after switching assets.', + ); + + // Make sure gas is updated by resetting amount and hex data + // Note: this is needed until the race condition is fixed on the wallet level (issue #25243) + await driver.fill('[data-testid="currency-input"]', '2.000042'); + await hexDataLocator.fill('0x'); + await hexDataLocator.fill(''); + + // Go to the last confirmation screen + await driver.clickElement({ text: 'Continue', css: 'button' }); + + // Validate the send amount + await driver.waitForSelector({ + css: '.currency-display-component__text', + text: '2.000042', + }); + }, + ); + }); }); - it('sends the correct asset when switching from ERC20 to NFT', async function () { - const smartContract = SMART_CONTRACTS.NFTS; - const tokenContract = SMART_CONTRACTS.HST; - await withFixtures( - { - dapp: true, - fixtures: new FixtureBuilder() - .withTokensControllerERC20() - .withNftControllerERC721() - .build(), - ganacheOptions: defaultGanacheOptions, - smartContract: [smartContract, tokenContract], - title: this.test.fullTitle(), - }, - async ({ driver, ganacheServer }) => { - await logInWithBalanceValidation(driver, ganacheServer); - - await tempToggleSettingRedesignedTransactionConfirmations(driver); - - // Click the Send button - await driver.clickElement({ - css: '[data-testid="multichain-token-list-button"] span', - text: 'TST', - }); - - // Wait for balance to load - await driver.delay(500); - - await driver.clickElement('[data-testid="eth-overview-send"]'); - - // Chose a recipient - await driver.clickElement('.multichain-account-list-item'); - - // Populate an amount, continue - await driver.clickElement('[data-testid="currency-input"]'); - await driver.press('[data-testid="currency-input"]', '0'); - await driver.clickElement({ text: 'Continue', css: 'button' }); - - // Validate the send amount - await driver.waitForSelector({ - css: '.currency-display-component__text', - text: '0.00008455', - }); - - // Click edit - await driver.clickElement( - '[data-testid="confirm-page-back-edit-button"]', - ); - - // Open the Amount modal - await driver.clickElement('.asset-picker__symbol'); - - // Choose an NFT instead - await driver.clickElement({ css: 'button', text: 'NFTs' }); - await driver.clickElement('[data-testid="nft-default-image"]'); - - // Validate that an NFT is chosen in the AssetAmountPicker - await driver.waitForSelector({ - css: '.asset-picker__symbol', - text: 'TDN', - }); - await driver.waitForSelector({ css: 'p', text: '#1' }); - - // Click continue - await driver.assertElementNotPresent('.mm-modal-content'); - await driver.clickElement({ text: 'Continue', css: 'button' }); - - // Ensure NFT is showing - await driver.waitForSelector( - '.confirm-page-container-summary__title img', - ); - await driver.waitForSelector({ css: 'h3', text: 'Test Dapp NFTs #1' }); - - // Send it! - await driver.clickElement({ text: 'Confirm', css: 'button' }); - - // Ensure it was sent - await driver.waitForSelector({ - css: 'p', - text: 'Send Test Dapp NFTs #1', - }); - }, - ); - }); - - it('sends the correct asset when switching from NFT to native currency', async function () { - const smartContract = SMART_CONTRACTS.NFTS; - await withFixtures( - { - dapp: true, - fixtures: new FixtureBuilder().withNftControllerERC721().build(), - ganacheOptions: defaultGanacheOptions, - smartContract, - title: this.test.fullTitle(), - }, - async ({ driver, ganacheServer }) => { - await logInWithBalanceValidation(driver, ganacheServer); - - await tempToggleSettingRedesignedTransactionConfirmations(driver); - - // Choose the nft - await driver.clickElement('[data-testid="account-overview__nfts-tab"]'); - await driver.clickElement('[data-testid="nft-default-image"]'); - await driver.clickElement('[data-testid="nft-send-button"]'); - - // Chose a recipient - await driver.clickElement('.multichain-account-list-item'); - - // Validate that an NFT is chosen in the AssetAmountPicker - await driver.waitForSelector({ - css: '.asset-picker__symbol', - text: 'TDN', - }); - await driver.waitForSelector({ css: 'p', text: '#1' }); - await driver.clickElement({ text: 'Continue', css: 'button' }); - - // Ensure NFT is showing - await driver.waitForSelector( - '.confirm-page-container-summary__title img', - ); - await driver.waitForSelector({ css: 'h3', text: 'Test Dapp NFTs #1' }); - - // Click edit - await driver.clickElement( - '[data-testid="confirm-page-back-edit-button"]', - ); - - // Open the Amount modal - await driver.clickElement('.asset-picker__symbol'); - - // Choose tokens - await driver.clickElement({ css: 'button', text: 'Tokens' }); - await driver.clickElement( - '[data-testid="multichain-token-list-button"]', - ); - - // Ensure correct token selected - await driver.waitForSelector({ - css: '.asset-picker__symbol', - text: 'ETH', - }); - - // Populate an amount, continue - await driver.clickElement('[data-testid="currency-input"]'); - await driver.press('[data-testid="currency-input"]', '2'); - await driver.assertElementNotPresent('.mm-modal-content'); - await driver.clickElement({ text: 'Continue', css: 'button' }); - - // Validate the send amount - await driver.waitForSelector({ - css: '.currency-display-component__text', - text: '2.000042', - }); - - // Send it! - await driver.clickElement({ text: 'Confirm', css: 'button' }); - - // Ensure it was sent - await driver.waitForSelector({ css: 'p', text: 'Send' }); - await driver.waitForSelector({ - css: '[data-testid="transaction-list-item-primary-currency"]', - text: '-2 ETH', - }); - }, - ); - }); - - it('changes to native currency when switching accounts during a NFT send', async function () { - const smartContract = SMART_CONTRACTS.NFTS; - await withFixtures( - { - dapp: true, - fixtures: new FixtureBuilder() - .withNftControllerERC721() - .withPreferencesController({ - featureFlags: { - sendHexData: true, - }, - }) - .build(), - ganacheOptions: defaultGanacheOptions, - smartContract, - title: this.test.fullTitle(), - }, - async ({ driver, ganacheServer }) => { - await logInWithBalanceValidation(driver, ganacheServer); - - await tempToggleSettingRedesignedTransactionConfirmations(driver); - - // Create second account - await driver.clickElement('[data-testid="account-menu-icon"]'); - await driver.clickElement( - '[data-testid="multichain-account-menu-popover-action-button"]', - ); - await driver.clickElement( - '[data-testid="multichain-account-menu-popover-add-account"]', - ); - await driver.fill('[placeholder="Account 2"]', 'Account 2'); - await driver.clickElement({ text: tEn('addAccount'), tag: 'button' }); - - // Go back to Account 1 - await driver.clickElement('[data-testid="account-menu-icon"]'); - await driver.clickElement({ - css: `.multichain-account-list-item .multichain-account-list-item__account-name__button`, - text: 'Account 1', - }); - - // Choose the nft - await driver.clickElement('[data-testid="account-overview__nfts-tab"]'); - await driver.clickElement('[data-testid="nft-default-image"]'); - await driver.clickElement('[data-testid="nft-send-button"]'); - - // Chose a recipient - await driver.clickElement('.multichain-account-list-item'); - - // Validate that an NFT is chosen in the AssetAmountPicker - await driver.waitForSelector({ - css: '.asset-picker__symbol', - text: 'TDN', - }); - await driver.waitForSelector({ css: 'p', text: '#1' }); - - // Switch to Account 2 - await driver.clickElement('[data-testid="send-page-account-picker"]'); - await driver.clickElement({ - css: `.multichain-account-list-item .multichain-account-list-item__account-name__button`, - text: 'Account 2', - }); - - // Ensure that the AssetPicker shows native currency and 0 value - await driver.waitForSelector({ - css: '.asset-picker__symbol', - text: 'ETH', - }); - - // Go back to Account 1 - await driver.clickElement('[data-testid="send-page-account-picker"]'); - await driver.clickElement({ - css: `.multichain-account-list-item .multichain-account-list-item__account-name__button`, - text: 'Account 1', - }); - - // Ensure that the AssetPicker shows native currency and 0 value - await driver.waitForSelector({ - css: '.asset-picker__symbol', - text: 'ETH', - }); - - // Populate an amount, continue - await driver.clickElement('[data-testid="currency-input"]'); - await driver.press('[data-testid="currency-input"]', '2'); - - // Make sure hex data is cleared after switching assets - const hexDataLocator = await driver.findElement( - '[data-testid="send-hex-textarea"]', - ); - const hexDataValue = await hexDataLocator.getProperty('value'); - assert.equal( - hexDataValue, - '', - 'Hex data has not been cleared after switching assets.', - ); - - // Make sure gas is updated by resetting amount and hex data - // Note: this is needed until the race condition is fixed on the wallet level (issue #25243) - await driver.fill('[data-testid="currency-input"]', '2.000042'); - await hexDataLocator.fill('0x'); - await hexDataLocator.fill(''); - - // Go to the last confirmation screen - await driver.clickElement({ text: 'Continue', css: 'button' }); - - // Validate the send amount - await driver.waitForSelector({ - css: '.currency-display-component__text', - text: '2.000042', - }); - }, - ); + describe('Redesigned confirmation screens', function () { + it('sends the correct asset when switching from native currency to NFT', async function () { + const smartContract = SMART_CONTRACTS.NFTS; + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder().withNftControllerERC721().build(), + ganacheOptions: defaultGanacheOptions, + smartContract, + title: this.test.fullTitle(), + }, + async ({ driver, ganacheServer }) => { + await logInWithBalanceValidation(driver, ganacheServer); + + // Wait for balance to load + await driver.delay(500); + + // Click the Send button + await driver.clickElement('[data-testid="eth-overview-send"]'); + + // Chose a recipient + await driver.clickElement('.multichain-account-list-item'); + + // Populate an amount, continue + await driver.clickElement('[data-testid="currency-input"]'); + await driver.press('[data-testid="currency-input"]', '2'); + await driver.clickElement({ text: 'Continue', css: 'button' }); + + // Click edit + await driver.clickElement( + '[data-testid="wallet-initiated-header-back-button"]', + ); + + // Open the Amount modal + await driver.clickElement('.asset-picker__symbol'); + + // Choose an NFT instead + await driver.clickElement({ css: 'button', text: 'NFTs' }); + await driver.clickElement('[data-testid="nft-default-image"]'); + + // Validate that an NFT is chosen in the AssetAmountPicker + await driver.waitForSelector({ + css: '.asset-picker__symbol', + text: 'TDN', + }); + await driver.waitForSelector({ css: 'p', text: '#1' }); + + // Click continue + await driver.assertElementNotPresent('.mm-modal-content'); + await driver.clickElement({ text: 'Continue', css: 'button' }); + + // Ensure NFT is showing + await driver.waitForSelector('[data-testid="nft-default-image"]'); + await driver.waitForSelector({ + css: 'h2', + text: 'Test Dapp NFTs #1', + }); + + // Send it! + await driver.clickElement({ text: 'Confirm', css: 'button' }); + + // Ensure it was sent + await driver.waitForSelector({ + css: 'p', + text: 'Send Test Dapp NFTs #1', + }); + }, + ); + }); + + it('sends the correct asset when switching from ERC20 to NFT', async function () { + const smartContract = SMART_CONTRACTS.NFTS; + const tokenContract = SMART_CONTRACTS.HST; + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withTokensControllerERC20() + .withNftControllerERC721() + .build(), + ganacheOptions: defaultGanacheOptions, + smartContract: [smartContract, tokenContract], + title: this.test.fullTitle(), + }, + async ({ driver, ganacheServer }) => { + await logInWithBalanceValidation(driver, ganacheServer); + + // Click the Send button + await driver.clickElement({ + css: '[data-testid="multichain-token-list-button"] span', + text: 'TST', + }); + + // Wait for balance to load + await driver.delay(500); + + await driver.clickElement('[data-testid="eth-overview-send"]'); + + // Chose a recipient + await driver.clickElement('.multichain-account-list-item'); + + // Populate an amount, continue + await driver.clickElement('[data-testid="currency-input"]'); + await driver.press('[data-testid="currency-input"]', '0'); + await driver.clickElement({ text: 'Continue', css: 'button' }); + + // Click edit + await driver.clickElement( + '[data-testid="wallet-initiated-header-back-button"]', + ); + + // Open the Amount modal + await driver.clickElement('.asset-picker__symbol'); + + // Choose an NFT instead + await driver.clickElement({ css: 'button', text: 'NFTs' }); + await driver.clickElement('[data-testid="nft-default-image"]'); + + // Validate that an NFT is chosen in the AssetAmountPicker + await driver.waitForSelector({ + css: '.asset-picker__symbol', + text: 'TDN', + }); + await driver.waitForSelector({ css: 'p', text: '#1' }); + + // Click continue + await driver.assertElementNotPresent('.mm-modal-content'); + await driver.clickElement({ text: 'Continue', css: 'button' }); + + // Ensure NFT is showing + await driver.waitForSelector('[data-testid="nft-default-image"]'); + await driver.waitForSelector({ + css: 'h2', + text: 'Test Dapp NFTs #1', + }); + + // Send it! + await driver.clickElement({ text: 'Confirm', css: 'button' }); + + // Ensure it was sent + await driver.waitForSelector({ + css: 'p', + text: 'Send Test Dapp NFTs #1', + }); + }, + ); + }); + + it('sends the correct asset when switching from NFT to native currency', async function () { + const smartContract = SMART_CONTRACTS.NFTS; + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder().withNftControllerERC721().build(), + ganacheOptions: defaultGanacheOptions, + smartContract, + title: this.test.fullTitle(), + }, + async ({ driver, ganacheServer }) => { + await logInWithBalanceValidation(driver, ganacheServer); + + // Choose the nft + await driver.clickElement( + '[data-testid="account-overview__nfts-tab"]', + ); + await driver.clickElement('[data-testid="nft-default-image"]'); + await driver.clickElement('[data-testid="nft-send-button"]'); + + // Chose a recipient + await driver.clickElement('.multichain-account-list-item'); + + // Validate that an NFT is chosen in the AssetAmountPicker + await driver.waitForSelector({ + css: '.asset-picker__symbol', + text: 'TDN', + }); + await driver.waitForSelector({ css: 'p', text: '#1' }); + await driver.clickElement({ text: 'Continue', css: 'button' }); + + // Ensure NFT is showing + await driver.waitForSelector('[data-testid="nft-default-image"]'); + await driver.waitForSelector({ + css: 'h2', + text: 'Test Dapp NFTs #1', + }); + + // Click edit + await driver.clickElement( + '[data-testid="wallet-initiated-header-back-button"]', + ); + + // Open the Amount modal + await driver.clickElement('.asset-picker__symbol'); + + // Choose tokens + await driver.clickElement({ css: 'button', text: 'Tokens' }); + await driver.clickElement( + '[data-testid="multichain-token-list-button"]', + ); + + // Ensure correct token selected + await driver.waitForSelector({ + css: '.asset-picker__symbol', + text: 'ETH', + }); + + // Populate an amount, continue + await driver.clickElement('[data-testid="currency-input"]'); + await driver.press('[data-testid="currency-input"]', '2'); + await driver.assertElementNotPresent('.mm-modal-content'); + await driver.clickElement({ text: 'Continue', css: 'button' }); + + // Validate the send amount + await driver.waitForSelector({ + css: 'h2', + text: '2', + }); + + // Send it! + await driver.clickElement({ text: 'Confirm', css: 'button' }); + + // Ensure it was sent + await driver.waitForSelector({ css: 'p', text: 'Send' }); + await driver.waitForSelector({ + css: '[data-testid="transaction-list-item-primary-currency"]', + text: '-2 ETH', + }); + }, + ); + }); + + it('changes to native currency when switching accounts during a NFT send', async function () { + const smartContract = SMART_CONTRACTS.NFTS; + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withNftControllerERC721() + .withPreferencesController({ + featureFlags: { + sendHexData: true, + }, + }) + .build(), + ganacheOptions: defaultGanacheOptions, + smartContract, + title: this.test.fullTitle(), + }, + async ({ driver, ganacheServer }) => { + await logInWithBalanceValidation(driver, ganacheServer); + + // Create second account + await driver.clickElement('[data-testid="account-menu-icon"]'); + await driver.clickElement( + '[data-testid="multichain-account-menu-popover-action-button"]', + ); + await driver.clickElement( + '[data-testid="multichain-account-menu-popover-add-account"]', + ); + await driver.fill('[placeholder="Account 2"]', 'Account 2'); + await driver.clickElement({ text: tEn('addAccount'), tag: 'button' }); + + // Go back to Account 1 + await driver.clickElement('[data-testid="account-menu-icon"]'); + await driver.clickElement({ + css: `.multichain-account-list-item .multichain-account-list-item__account-name__button`, + text: 'Account 1', + }); + + // Choose the nft + await driver.clickElement( + '[data-testid="account-overview__nfts-tab"]', + ); + await driver.clickElement('[data-testid="nft-default-image"]'); + await driver.clickElement('[data-testid="nft-send-button"]'); + + // Chose a recipient + await driver.clickElement('.multichain-account-list-item'); + + // Validate that an NFT is chosen in the AssetAmountPicker + await driver.waitForSelector({ + css: '.asset-picker__symbol', + text: 'TDN', + }); + await driver.waitForSelector({ css: 'p', text: '#1' }); + + // Switch to Account 2 + await driver.clickElement('[data-testid="send-page-account-picker"]'); + await driver.clickElement({ + css: `.multichain-account-list-item .multichain-account-list-item__account-name__button`, + text: 'Account 2', + }); + + // Ensure that the AssetPicker shows native currency and 0 value + await driver.waitForSelector({ + css: '.asset-picker__symbol', + text: 'ETH', + }); + + // Go back to Account 1 + await driver.clickElement('[data-testid="send-page-account-picker"]'); + await driver.clickElement({ + css: `.multichain-account-list-item .multichain-account-list-item__account-name__button`, + text: 'Account 1', + }); + + // Ensure that the AssetPicker shows native currency and 0 value + await driver.waitForSelector({ + css: '.asset-picker__symbol', + text: 'ETH', + }); + + // Populate an amount, continue + await driver.clickElement('[data-testid="currency-input"]'); + await driver.press('[data-testid="currency-input"]', '2'); + + // Make sure hex data is cleared after switching assets + const hexDataLocator = await driver.findElement( + '[data-testid="send-hex-textarea"]', + ); + const hexDataValue = await hexDataLocator.getProperty('value'); + assert.equal( + hexDataValue, + '', + 'Hex data has not been cleared after switching assets.', + ); + + // Make sure gas is updated by resetting amount and hex data + // Note: this is needed until the race condition is fixed on the wallet level (issue #25243) + await driver.fill('[data-testid="currency-input"]', '2.000042'); + await hexDataLocator.fill('0x'); + await hexDataLocator.fill(''); + + // Go to the last confirmation screen + await driver.clickElement({ text: 'Continue', css: 'button' }); + + // Validate the send amount + await driver.waitForSelector({ + css: 'h2', + text: '2 ETH', + }); + }, + ); + }); }); }); diff --git a/test/e2e/tests/transaction/edit-gas-fee.spec.js b/test/e2e/tests/transaction/edit-gas-fee.spec.js index 3e7655750594..4e30fb8c0be1 100644 --- a/test/e2e/tests/transaction/edit-gas-fee.spec.js +++ b/test/e2e/tests/transaction/edit-gas-fee.spec.js @@ -14,228 +14,456 @@ const { const FixtureBuilder = require('../../fixture-builder'); describe('Editing Confirm Transaction', function () { - it('allows selecting high, medium, low gas estimates on edit gas fee popover @no-mmi', async function () { - await withFixtures( - { - fixtures: new FixtureBuilder().build(), - ganacheOptions: generateGanacheOptions({ hardfork: 'london' }), - title: this.test.fullTitle(), - }, - async ({ driver }) => { - await unlockWallet(driver); - - await tempToggleSettingRedesignedTransactionConfirmations(driver); - - await createInternalTransaction(driver); - - await driver.findElement({ - css: '.currency-display-component__text', - text: '1', - }); - - // update estimates to high - await driver.clickElement('[data-testid="edit-gas-fee-icon"]'); - await driver.waitForSelector({ - text: 'sec', - tag: 'span', - }); - await driver.clickElement( - '[data-testid="edit-gas-fee-item-high"] > span:first-child', - ); - - await driver.waitForSelector({ - text: 'Aggressive', - }); - - // update estimates to medium - await driver.clickElement('[data-testid="edit-gas-fee-icon"]'); - await driver.clickElement( - '[data-testid="edit-gas-fee-item-medium"] > span:first-child', - ); - - await driver.waitForSelector({ - text: 'Market', - }); - - // update estimates to low - await driver.clickElement('[data-testid="edit-gas-fee-icon"]'); - await driver.clickElement( - '[data-testid="edit-gas-fee-item-low"] > span:first-child', - ); - - await driver.waitForSelector({ - text: 'Slow', - }); - await driver.waitForSelector('[data-testid="low-gas-fee-alert"]'); - - // confirms the transaction - await driver.clickElement({ text: 'Confirm', tag: 'button' }); - - await driver.clickElement( - '[data-testid="account-overview__activity-tab"]', - ); - await driver.wait(async () => { - const confirmedTxes = await driver.findElements( - '.transaction-list__completed-transactions .activity-list-item', - ); - return confirmedTxes.length === 1; - }, 10000); - - const txValues = await driver.findElements( - '[data-testid="transaction-list-item-primary-currency"]', - ); - assert.equal(txValues.length, 1); - assert.ok(/-1\s*ETH/u.test(await txValues[0].getText())); - }, - ); - }); + describe('Old confirmation screens', function () { + it('allows selecting high, medium, low gas estimates on edit gas fee popover @no-mmi', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder().build(), + ganacheOptions: generateGanacheOptions({ hardfork: 'london' }), + title: this.test.fullTitle(), + }, + async ({ driver }) => { + await unlockWallet(driver); + + await tempToggleSettingRedesignedTransactionConfirmations(driver); + + await createInternalTransaction(driver); + + await driver.findElement({ + css: '.currency-display-component__text', + text: '1', + }); + + // update estimates to high + await driver.clickElement('[data-testid="edit-gas-fee-icon"]'); + await driver.waitForSelector({ + text: 'sec', + tag: 'span', + }); + await driver.clickElement( + '[data-testid="edit-gas-fee-item-high"] > span:first-child', + ); + + await driver.waitForSelector({ + text: 'Aggressive', + }); + + // update estimates to medium + await driver.clickElement('[data-testid="edit-gas-fee-icon"]'); + await driver.clickElement( + '[data-testid="edit-gas-fee-item-medium"] > span:first-child', + ); + + await driver.waitForSelector({ + text: 'Market', + }); - it('allows accessing advance gas fee popover from edit gas fee popover', async function () { - await withFixtures( - { - fixtures: new FixtureBuilder().build(), - ganacheOptions: generateGanacheOptions({ hardfork: 'london' }), - title: this.test.fullTitle(), - }, - async ({ driver }) => { - await unlockWallet(driver); - - await tempToggleSettingRedesignedTransactionConfirmations(driver); - - await createInternalTransaction(driver); - - await driver.findElement({ - css: '.currency-display-component__text', - text: '1', - }); - - // update estimates to high - await driver.clickElement('[data-testid="edit-gas-fee-icon"]'); - await driver.waitForSelector({ - text: 'sec', - tag: 'span', - }); - await driver.clickElement('[data-testid="edit-gas-fee-item-custom"]'); - - // enter max fee - await driver.fill('[data-testid="base-fee-input"]', '8.5'); - - // enter priority fee - await driver.fill('[data-testid="priority-fee-input"]', '8.5'); - - // save default values - await driver.clickElement('input[type="checkbox"]'); - - // edit gas limit - await driver.clickElement('[data-testid="advanced-gas-fee-edit"]'); - await driver.fill('[data-testid="gas-limit-input"]', '100000'); - - // Submit gas fee changes - await driver.clickElement({ text: 'Save', tag: 'button' }); - - // has correct updated value on the confirm screen the transaction - await driver.waitForSelector({ - css: '.currency-display-component__text', - text: '0.00085', - }); - await driver.waitForSelector({ - css: '.currency-display-component__suffix', - text: 'ETH', - }); - - // confirms the transaction - await driver.clickElement({ text: 'Confirm', tag: 'button' }); - - await driver.clickElement( - '[data-testid="account-overview__activity-tab"]', - ); - await driver.wait(async () => { - const confirmedTxes = await driver.findElements( - '.transaction-list__completed-transactions .activity-list-item', - ); - return confirmedTxes.length === 1; - }, 10000); - - const txValues = await driver.findElements( - '[data-testid="transaction-list-item-primary-currency"]', - ); - assert.equal(txValues.length, 1); - assert.ok(/-1\s*ETH/u.test(await txValues[0].getText())); - }, - ); + // update estimates to low + await driver.clickElement('[data-testid="edit-gas-fee-icon"]'); + await driver.clickElement( + '[data-testid="edit-gas-fee-item-low"] > span:first-child', + ); + + await driver.waitForSelector({ + text: 'Slow', + }); + await driver.waitForSelector('[data-testid="low-gas-fee-alert"]'); + + // confirms the transaction + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + + await driver.clickElement( + '[data-testid="account-overview__activity-tab"]', + ); + await driver.wait(async () => { + const confirmedTxes = await driver.findElements( + '.transaction-list__completed-transactions .activity-list-item', + ); + return confirmedTxes.length === 1; + }, 10000); + + const txValues = await driver.findElements( + '[data-testid="transaction-list-item-primary-currency"]', + ); + assert.equal(txValues.length, 1); + assert.ok(/-1\s*ETH/u.test(await txValues[0].getText())); + }, + ); + }); + + it('allows accessing advance gas fee popover from edit gas fee popover', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder().build(), + ganacheOptions: generateGanacheOptions({ hardfork: 'london' }), + title: this.test.fullTitle(), + }, + async ({ driver }) => { + await unlockWallet(driver); + + await tempToggleSettingRedesignedTransactionConfirmations(driver); + + await createInternalTransaction(driver); + + await driver.findElement({ + css: '.currency-display-component__text', + text: '1', + }); + + // update estimates to high + await driver.clickElement('[data-testid="edit-gas-fee-icon"]'); + await driver.waitForSelector({ + text: 'sec', + tag: 'span', + }); + await driver.clickElement('[data-testid="edit-gas-fee-item-custom"]'); + + // enter max fee + await driver.fill('[data-testid="base-fee-input"]', '8.5'); + + // enter priority fee + await driver.fill('[data-testid="priority-fee-input"]', '8.5'); + + // save default values + await driver.clickElement('input[type="checkbox"]'); + + // edit gas limit + await driver.clickElement('[data-testid="advanced-gas-fee-edit"]'); + await driver.fill('[data-testid="gas-limit-input"]', '100000'); + + // Submit gas fee changes + await driver.clickElement({ text: 'Save', tag: 'button' }); + + // has correct updated value on the confirm screen the transaction + await driver.waitForSelector({ + css: '.currency-display-component__text', + text: '0.00085', + }); + await driver.waitForSelector({ + css: '.currency-display-component__suffix', + text: 'ETH', + }); + + // confirms the transaction + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + + await driver.clickElement( + '[data-testid="account-overview__activity-tab"]', + ); + await driver.wait(async () => { + const confirmedTxes = await driver.findElements( + '.transaction-list__completed-transactions .activity-list-item', + ); + return confirmedTxes.length === 1; + }, 10000); + + const txValues = await driver.findElements( + '[data-testid="transaction-list-item-primary-currency"]', + ); + assert.equal(txValues.length, 1); + assert.ok(/-1\s*ETH/u.test(await txValues[0].getText())); + }, + ); + }); + + it('should use dapp suggested estimates for transaction coming from dapp @no-mmi', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder() + .withPermissionControllerConnectedToTestDapp() + .build(), + ganacheOptions: generateGanacheOptions({ hardfork: 'london' }), + title: this.test.fullTitle(), + dapp: true, + }, + async ({ driver }) => { + // login to extension + await unlockWallet(driver); + + await tempToggleSettingRedesignedTransactionConfirmations(driver); + + await createDappTransaction(driver, { + maxFeePerGas: '0x2000000000', + maxPriorityFeePerGas: '0x1000000000', + }); + + // check transaction in extension popup + await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); + await driver.waitForSelector({ + text: 'Site suggested', + }); + + await driver.clickElement('[data-testid="edit-gas-fee-icon"]'); + // -- should render the popover with no error + // this is to test in MV3 a racing issue when request for suggestedGasFees is not fetched properly + // some data would not be defined yet + await driver.waitForSelector('.edit-gas-fee-popover'); + await driver.clickElement( + '[data-testid="edit-gas-fee-item-dappSuggested"]', + ); + + const transactionAmounts = await driver.findElements( + '.currency-display-component__text', + ); + const transactionAmount = transactionAmounts[0]; + assert.equal(await transactionAmount.getText(), '0.001'); + + // has correct updated value on the confirm screen the transaction + await driver.waitForSelector({ + css: '.currency-display-component__text', + text: '0.00185144', + }); + + // confirms the transaction + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + + // transaction should correct values in activity tab + await driver.switchToWindowWithTitle( + WINDOW_TITLES.ExtensionInFullScreenView, + ); + await driver.clickElement( + '[data-testid="account-overview__activity-tab"]', + ); + await driver.wait(async () => { + const confirmedTxes = await driver.findElements( + '.transaction-list__completed-transactions .activity-list-item', + ); + return confirmedTxes.length === 1; + }, 10000); + + const txValues = await driver.findElements( + '[data-testid="transaction-list-item-primary-currency"]', + ); + assert.equal(txValues.length, 1); + assert.ok(/-0.001\s*ETH/u.test(await txValues[0].getText())); + }, + ); + }); }); - it('should use dapp suggested estimates for transaction coming from dapp @no-mmi', async function () { - await withFixtures( - { - fixtures: new FixtureBuilder() - .withPermissionControllerConnectedToTestDapp() - .build(), - ganacheOptions: generateGanacheOptions({ hardfork: 'london' }), - title: this.test.fullTitle(), - dapp: true, - }, - async ({ driver }) => { - // login to extension - await unlockWallet(driver); - - await tempToggleSettingRedesignedTransactionConfirmations(driver); - - await createDappTransaction(driver, { - maxFeePerGas: '0x2000000000', - maxPriorityFeePerGas: '0x1000000000', - }); - - // check transaction in extension popup - await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); - await driver.waitForSelector({ - text: 'Site suggested', - }); - - await driver.clickElement('[data-testid="edit-gas-fee-icon"]'); - // -- should render the popover with no error - // this is to test in MV3 a racing issue when request for suggestedGasFees is not fetched properly - // some data would not be defined yet - await driver.waitForSelector('.edit-gas-fee-popover'); - await driver.clickElement( - '[data-testid="edit-gas-fee-item-dappSuggested"]', - ); - - const transactionAmounts = await driver.findElements( - '.currency-display-component__text', - ); - const transactionAmount = transactionAmounts[0]; - assert.equal(await transactionAmount.getText(), '0.001'); - - // has correct updated value on the confirm screen the transaction - await driver.waitForSelector({ - css: '.currency-display-component__text', - text: '0.00185144', - }); - - // confirms the transaction - await driver.clickElement({ text: 'Confirm', tag: 'button' }); - - // transaction should correct values in activity tab - await driver.switchToWindowWithTitle( - WINDOW_TITLES.ExtensionInFullScreenView, - ); - await driver.clickElement( - '[data-testid="account-overview__activity-tab"]', - ); - await driver.wait(async () => { - const confirmedTxes = await driver.findElements( - '.transaction-list__completed-transactions .activity-list-item', - ); - return confirmedTxes.length === 1; - }, 10000); - - const txValues = await driver.findElements( - '[data-testid="transaction-list-item-primary-currency"]', - ); - assert.equal(txValues.length, 1); - assert.ok(/-0.001\s*ETH/u.test(await txValues[0].getText())); - }, - ); + describe('Redesigned confirmation screens', function () { + it('allows selecting high, medium, low gas estimates on edit gas fee popover @no-mmi', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder().build(), + ganacheOptions: generateGanacheOptions({ hardfork: 'london' }), + title: this.test.fullTitle(), + }, + async ({ driver }) => { + await unlockWallet(driver); + + await createInternalTransaction(driver); + + await driver.findElement({ + css: 'h2', + text: '1 ETH', + }); + + // update estimates to high + await driver.clickElement('[data-testid="edit-gas-fee-icon"]'); + await driver.waitForSelector({ + text: 'sec', + tag: 'span', + }); + await driver.clickElement( + '[data-testid="edit-gas-fee-item-high"] > span:first-child', + ); + + await driver.waitForSelector({ + text: 'Aggressive', + }); + + // update estimates to medium + await driver.clickElement('[data-testid="edit-gas-fee-icon"]'); + await driver.clickElement( + '[data-testid="edit-gas-fee-item-medium"] > span:first-child', + ); + + await driver.waitForSelector({ + text: 'Market', + }); + + // update estimates to low + await driver.clickElement('[data-testid="edit-gas-fee-icon"]'); + await driver.clickElement( + '[data-testid="edit-gas-fee-item-low"] > span:first-child', + ); + + await driver.waitForSelector({ + text: 'Slow', + }); + await driver.waitForSelector('[data-testid="inline-alert"]'); + + // confirms the transaction + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + + await driver.clickElement( + '[data-testid="account-overview__activity-tab"]', + ); + await driver.wait(async () => { + const confirmedTxes = await driver.findElements( + '.transaction-list__completed-transactions .activity-list-item', + ); + return confirmedTxes.length === 1; + }, 10000); + + const txValues = await driver.findElements( + '[data-testid="transaction-list-item-primary-currency"]', + ); + assert.equal(txValues.length, 1); + assert.ok(/-1\s*ETH/u.test(await txValues[0].getText())); + }, + ); + }); + + it('allows accessing advance gas fee popover from edit gas fee popover', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder().build(), + ganacheOptions: generateGanacheOptions({ hardfork: 'london' }), + title: this.test.fullTitle(), + }, + async ({ driver }) => { + await unlockWallet(driver); + + await createInternalTransaction(driver); + + await driver.findElement({ + css: 'h2', + text: '1 ETH', + }); + + // update estimates to high + await driver.clickElement('[data-testid="edit-gas-fee-icon"]'); + await driver.waitForSelector({ + text: 'sec', + tag: 'span', + }); + await driver.clickElement('[data-testid="edit-gas-fee-item-custom"]'); + + // enter max fee + await driver.fill('[data-testid="base-fee-input"]', '8.5'); + + // enter priority fee + await driver.fill('[data-testid="priority-fee-input"]', '8.5'); + + // save default values + await driver.clickElement('input[type="checkbox"]'); + + // edit gas limit + await driver.clickElement('[data-testid="advanced-gas-fee-edit"]'); + await driver.fill('[data-testid="gas-limit-input"]', '100000'); + + // Submit gas fee changes + await driver.clickElement({ text: 'Save', tag: 'button' }); + + // has correct updated value on the confirm screen the transaction + await driver.waitForSelector({ + css: '[data-testid="first-gas-field"]', + text: '0.0008 ETH', + }); + + await driver.waitForSelector({ + css: '[data-testid="native-currency"]', + text: '$1.44', + }); + + // confirms the transaction + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + + await driver.clickElement( + '[data-testid="account-overview__activity-tab"]', + ); + await driver.wait(async () => { + const confirmedTxes = await driver.findElements( + '.transaction-list__completed-transactions .activity-list-item', + ); + return confirmedTxes.length === 1; + }, 10000); + + const txValues = await driver.findElements( + '[data-testid="transaction-list-item-primary-currency"]', + ); + assert.equal(txValues.length, 1); + assert.ok(/-1\s*ETH/u.test(await txValues[0].getText())); + }, + ); + }); + + it('should use dapp suggested estimates for transaction coming from dapp @no-mmi', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder() + .withPermissionControllerConnectedToTestDapp() + .build(), + ganacheOptions: generateGanacheOptions({ hardfork: 'london' }), + title: this.test.fullTitle(), + dapp: true, + }, + async ({ driver }) => { + // login to extension + await unlockWallet(driver); + + await createDappTransaction(driver, { + maxFeePerGas: '0x2000000000', + maxPriorityFeePerGas: '0x1000000000', + }); + + // check transaction in extension popup + await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); + await driver.waitForSelector({ + text: 'Site suggested', + }); + + await driver.clickElement('[data-testid="edit-gas-fee-icon"]'); + // -- should render the popover with no error + // this is to test in MV3 a racing issue when request for suggestedGasFees is not fetched properly + // some data would not be defined yet + await driver.waitForSelector('.edit-gas-fee-popover'); + await driver.clickElement( + '[data-testid="edit-gas-fee-item-dappSuggested"]', + ); + + await driver.findElements({ + css: 'h2', + text: '0.001 ETH', + }); + + // has correct updated value on the confirm screen the transaction + await driver.waitForSelector({ + css: '[data-testid="first-gas-field"]', + text: '0.0019', + }); + + await driver.waitForSelector({ + css: '[data-testid="native-currency"]', + text: '$3.15', + }); + + // confirms the transaction + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + + // transaction should correct values in activity tab + await driver.switchToWindowWithTitle( + WINDOW_TITLES.ExtensionInFullScreenView, + ); + await driver.clickElement( + '[data-testid="account-overview__activity-tab"]', + ); + await driver.wait(async () => { + const confirmedTxes = await driver.findElements( + '.transaction-list__completed-transactions .activity-list-item', + ); + return confirmedTxes.length === 1; + }, 10000); + + const txValues = await driver.findElements( + '[data-testid="transaction-list-item-primary-currency"]', + ); + assert.equal(txValues.length, 1); + assert.ok(/-0.001\s*ETH/u.test(await txValues[0].getText())); + }, + ); + }); }); }); diff --git a/test/e2e/tests/transaction/gas-estimates.spec.js b/test/e2e/tests/transaction/gas-estimates.spec.js index f12275ad4d9f..77027bc67901 100644 --- a/test/e2e/tests/transaction/gas-estimates.spec.js +++ b/test/e2e/tests/transaction/gas-estimates.spec.js @@ -17,237 +17,488 @@ describe('Gas estimates generated by MetaMask', function () { hardfork: 'london', }); - describe('Send on a network that is EIP-1559 compatible', function () { - it('show expected gas defaults', async function () { - await withFixtures( - { - fixtures: new FixtureBuilder().build(), - ganacheOptions: postLondonGanacheOptions, - title: this.test.fullTitle(), - }, - async ({ driver, ganacheServer }) => { - await logInWithBalanceValidation(driver, ganacheServer); - - await tempToggleSettingRedesignedTransactionConfirmations(driver); - - await openActionMenuAndStartSendFlow(driver); - - await driver.fill( - 'input[placeholder="Enter public address (0x) or domain name"]', - '0x2f318C334780961FB129D2a6c30D0763d9a5C970', - ); - - await driver.fill('input[placeholder="0"]', '1'); - - await driver.clickElement({ css: 'button', text: 'Continue' }); - - // Check that the gas estimation is what we expect - await driver.findElement({ - cass: '[data-testid="confirm-gas-display"]', - text: '0.00043983', - }); - }, - ); - }); + describe('Old confirmation screens', function () { + describe('Send on a network that is EIP-1559 compatible', function () { + it('show expected gas defaults', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder().build(), + ganacheOptions: postLondonGanacheOptions, + title: this.test.fullTitle(), + }, + async ({ driver, ganacheServer }) => { + await logInWithBalanceValidation(driver, ganacheServer); + + await tempToggleSettingRedesignedTransactionConfirmations(driver); + + await openActionMenuAndStartSendFlow(driver); + + await driver.fill( + 'input[placeholder="Enter public address (0x) or domain name"]', + '0x2f318C334780961FB129D2a6c30D0763d9a5C970', + ); + + await driver.fill('input[placeholder="0"]', '1'); + + await driver.clickElement({ css: 'button', text: 'Continue' }); + + // Check that the gas estimation is what we expect + await driver.findElement({ + css: '[data-testid="confirm-gas-display"]', + text: '0.00043983', + }); + }, + ); + }); + + it('show expected gas defaults when API is down', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder().build(), + ganacheOptions: postLondonGanacheOptions, + testSpecificMock: (mockServer) => { + mockServer + .forGet(`${GAS_API_BASE_URL}/networks/1337/suggestedGasFees`) + .thenCallback(() => { + return { + json: { + error: 'cannot get gas prices for chain id 1337', + }, + statusCode: 503, + }; + }); + }, + title: this.test.fullTitle(), + }, + async ({ driver, ganacheServer }) => { + await logInWithBalanceValidation(driver, ganacheServer); + + await tempToggleSettingRedesignedTransactionConfirmations(driver); + + await openActionMenuAndStartSendFlow(driver); + + await driver.fill( + 'input[placeholder="Enter public address (0x) or domain name"]', + '0x2f318C334780961FB129D2a6c30D0763d9a5C970', + ); + + await driver.fill('input[placeholder="0"]', '1'); + + await driver.clickElement({ css: 'button', text: 'Continue' }); + + // Check that the gas estimation is what we expect + await driver.findElement({ + css: '[data-testid="confirm-gas-display"]', + text: '0.00043983', + }); + }, + ); + }); + + it('show expected gas defaults when the network is not supported', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder().build(), + ganacheOptions: postLondonGanacheOptions, + testSpecificMock: (mockServer) => { + mockServer + .forGet(`${GAS_API_BASE_URL}/networks/1337/suggestedGasFees`) + .thenCallback(() => { + return { + statusCode: 422, + }; + }); + }, + title: this.test.fullTitle(), + }, + async ({ driver, ganacheServer }) => { + await logInWithBalanceValidation(driver, ganacheServer); + + await tempToggleSettingRedesignedTransactionConfirmations(driver); - it('show expected gas defaults when API is down', async function () { - await withFixtures( - { - fixtures: new FixtureBuilder().build(), - ganacheOptions: postLondonGanacheOptions, - testSpecificMock: (mockServer) => { - mockServer - .forGet(`${GAS_API_BASE_URL}/networks/1337/suggestedGasFees`) - .thenCallback(() => { - return { - json: { - error: 'cannot get gas prices for chain id 1337', - }, - statusCode: 503, - }; - }); - }, - title: this.test.fullTitle(), - }, - async ({ driver, ganacheServer }) => { - await logInWithBalanceValidation(driver, ganacheServer); - - await tempToggleSettingRedesignedTransactionConfirmations(driver); - - await openActionMenuAndStartSendFlow(driver); - - await driver.fill( - 'input[placeholder="Enter public address (0x) or domain name"]', - '0x2f318C334780961FB129D2a6c30D0763d9a5C970', - ); - - await driver.fill('input[placeholder="0"]', '1'); - - await driver.clickElement({ css: 'button', text: 'Continue' }); - - // Check that the gas estimation is what we expect - await driver.findElement({ - cass: '[data-testid="confirm-gas-display"]', - text: '0.00043983', - }); - }, - ); + await openActionMenuAndStartSendFlow(driver); + + await driver.fill( + 'input[placeholder="Enter public address (0x) or domain name"]', + '0x2f318C334780961FB129D2a6c30D0763d9a5C970', + ); + + await driver.fill('input[placeholder="0"]', '1'); + + await driver.clickElement({ css: 'button', text: 'Continue' }); + + // Check that the gas estimation is what we expect + await driver.findElement({ + css: '[data-testid="confirm-gas-display"]', + text: '0.00043983', + }); + }, + ); + }); }); - it('show expected gas defaults when the network is not supported', async function () { - await withFixtures( - { - fixtures: new FixtureBuilder().build(), - ganacheOptions: postLondonGanacheOptions, - testSpecificMock: (mockServer) => { - mockServer - .forGet(`${GAS_API_BASE_URL}/networks/1337/suggestedGasFees`) - .thenCallback(() => { - return { - statusCode: 422, - }; - }); - }, - title: this.test.fullTitle(), - }, - async ({ driver, ganacheServer }) => { - await logInWithBalanceValidation(driver, ganacheServer); - - await tempToggleSettingRedesignedTransactionConfirmations(driver); - - await openActionMenuAndStartSendFlow(driver); - - await driver.fill( - 'input[placeholder="Enter public address (0x) or domain name"]', - '0x2f318C334780961FB129D2a6c30D0763d9a5C970', - ); - - await driver.fill('input[placeholder="0"]', '1'); - - await driver.clickElement({ css: 'button', text: 'Continue' }); - - // Check that the gas estimation is what we expect - await driver.findElement({ - cass: '[data-testid="confirm-gas-display"]', - text: '0.00043983', - }); - }, - ); + describe('Send on a network that is not EIP-1559 compatible', function () { + it('show expected gas defaults on a network supported by legacy gas API', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder().build(), + ganacheOptions: { + ...preLondonGanacheOptions, + chainId: parseInt(CHAIN_IDS.BSC, 16), + }, + title: this.test.fullTitle(), + }, + async ({ driver, ganacheServer }) => { + await logInWithBalanceValidation(driver, ganacheServer); + + await tempToggleSettingRedesignedTransactionConfirmations(driver); + + await openActionMenuAndStartSendFlow(driver); + await driver.fill( + 'input[placeholder="Enter public address (0x) or domain name"]', + '0x2f318C334780961FB129D2a6c30D0763d9a5C970', + ); + + await driver.fill('input[placeholder="0"]', '1'); + + await driver.clickElement({ css: 'button', text: 'Continue' }); + + // Check that the gas estimation is what we expect + await driver.findElement({ + css: '[data-testid="confirm-gas-display"]', + text: '0.000042', + }); + }, + ); + }); + + it('show expected gas defaults on a network supported by legacy gas API when that API is down', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder().build(), + ganacheOptions: { + ...preLondonGanacheOptions, + chainId: parseInt(CHAIN_IDS.BSC, 16), + }, + testSpecificMock: (mockServer) => { + mockServer + .forGet( + `${GAS_API_BASE_URL}/networks/${parseInt( + CHAIN_IDS.BSC, + 16, + )}/gasPrices`, + ) + .thenCallback(() => { + return { + statusCode: 422, + }; + }); + }, + title: this.test.fullTitle(), + }, + async ({ driver, ganacheServer }) => { + await logInWithBalanceValidation(driver, ganacheServer); + + await tempToggleSettingRedesignedTransactionConfirmations(driver); + + await openActionMenuAndStartSendFlow(driver); + await driver.fill( + 'input[placeholder="Enter public address (0x) or domain name"]', + '0x2f318C334780961FB129D2a6c30D0763d9a5C970', + ); + + await driver.fill('input[placeholder="0"]', '1'); + + await driver.clickElement({ css: 'button', text: 'Continue' }); + + // Check that the gas estimation is what we expect + await driver.findElement({ + css: '[data-testid="confirm-gas-display"]', + text: '0.000042', + }); + }, + ); + }); + + it('show expected gas defaults on a network not supported by legacy gas API', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder().build(), + ganacheOptions: preLondonGanacheOptions, + title: this.test.fullTitle(), + }, + async ({ driver, ganacheServer }) => { + await logInWithBalanceValidation(driver, ganacheServer); + + await tempToggleSettingRedesignedTransactionConfirmations(driver); + + await openActionMenuAndStartSendFlow(driver); + await driver.fill( + 'input[placeholder="Enter public address (0x) or domain name"]', + '0x2f318C334780961FB129D2a6c30D0763d9a5C970', + ); + + await driver.fill('input[placeholder="0"]', '1'); + + await driver.clickElement({ css: 'button', text: 'Continue' }); + + // Check that the gas estimation is what we expect + await driver.findElement({ + css: '[data-testid="confirm-gas-display"]', + text: '0.000042', + }); + }, + ); + }); }); }); - describe('Send on a network that is not EIP-1559 compatible', function () { - it('show expected gas defaults on a network supported by legacy gas API', async function () { - await withFixtures( - { - fixtures: new FixtureBuilder().build(), - ganacheOptions: { - ...preLondonGanacheOptions, - chainId: parseInt(CHAIN_IDS.BSC, 16), - }, - title: this.test.fullTitle(), - }, - async ({ driver, ganacheServer }) => { - await logInWithBalanceValidation(driver, ganacheServer); - - await tempToggleSettingRedesignedTransactionConfirmations(driver); - - await openActionMenuAndStartSendFlow(driver); - await driver.fill( - 'input[placeholder="Enter public address (0x) or domain name"]', - '0x2f318C334780961FB129D2a6c30D0763d9a5C970', - ); - - await driver.fill('input[placeholder="0"]', '1'); - - await driver.clickElement({ css: 'button', text: 'Continue' }); - - // Check that the gas estimation is what we expect - await driver.findElement({ - cass: '[data-testid="confirm-gas-display"]', - text: '0.000042', - }); - }, - ); - }); + describe('Redesigned confirmation screens', function () { + describe('Send on a network that is EIP-1559 compatible', function () { + it('show expected gas defaults', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder().build(), + ganacheOptions: postLondonGanacheOptions, + title: this.test.fullTitle(), + }, + async ({ driver, ganacheServer }) => { + await logInWithBalanceValidation(driver, ganacheServer); + + await openActionMenuAndStartSendFlow(driver); + + await driver.fill( + 'input[placeholder="Enter public address (0x) or domain name"]', + '0x2f318C334780961FB129D2a6c30D0763d9a5C970', + ); + + await driver.fill('input[placeholder="0"]', '1'); + + await driver.clickElement({ css: 'button', text: 'Continue' }); + + // Check that the gas estimation is what we expect + await driver.findElement({ + css: '[data-testid="first-gas-field"]', + text: '0.0004 ETH', + }); + + await driver.waitForSelector({ + css: '[data-testid="native-currency"]', + text: '$0.75', + }); + }, + ); + }); + + it('show expected gas defaults when API is down', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder().build(), + ganacheOptions: postLondonGanacheOptions, + testSpecificMock: (mockServer) => { + mockServer + .forGet(`${GAS_API_BASE_URL}/networks/1337/suggestedGasFees`) + .thenCallback(() => { + return { + json: { + error: 'cannot get gas prices for chain id 1337', + }, + statusCode: 503, + }; + }); + }, + title: this.test.fullTitle(), + }, + async ({ driver, ganacheServer }) => { + await logInWithBalanceValidation(driver, ganacheServer); - it('show expected gas defaults on a network supported by legacy gas API when that API is down', async function () { - await withFixtures( - { - fixtures: new FixtureBuilder().build(), - ganacheOptions: { - ...preLondonGanacheOptions, - chainId: parseInt(CHAIN_IDS.BSC, 16), - }, - testSpecificMock: (mockServer) => { - mockServer - .forGet( - `${GAS_API_BASE_URL}/networks/${parseInt( - CHAIN_IDS.BSC, - 16, - )}/gasPrices`, - ) - .thenCallback(() => { - return { - statusCode: 422, - }; - }); - }, - title: this.test.fullTitle(), - }, - async ({ driver, ganacheServer }) => { - await logInWithBalanceValidation(driver, ganacheServer); - - await tempToggleSettingRedesignedTransactionConfirmations(driver); - - await openActionMenuAndStartSendFlow(driver); - await driver.fill( - 'input[placeholder="Enter public address (0x) or domain name"]', - '0x2f318C334780961FB129D2a6c30D0763d9a5C970', - ); - - await driver.fill('input[placeholder="0"]', '1'); - - await driver.clickElement({ css: 'button', text: 'Continue' }); - - // Check that the gas estimation is what we expect - await driver.findElement({ - cass: '[data-testid="confirm-gas-display"]', - text: '0.000042', - }); - }, - ); + await openActionMenuAndStartSendFlow(driver); + + await driver.fill( + 'input[placeholder="Enter public address (0x) or domain name"]', + '0x2f318C334780961FB129D2a6c30D0763d9a5C970', + ); + + await driver.fill('input[placeholder="0"]', '1'); + + await driver.clickElement({ css: 'button', text: 'Continue' }); + + // Check that the gas estimation is what we expect + await driver.findElement({ + css: '[data-testid="first-gas-field"]', + text: '0 ETH', + }); + await driver.waitForSelector({ + css: '[data-testid="native-currency"]', + text: '$0.07', + }); + }, + ); + }); + + it('show expected gas defaults when the network is not supported', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder().build(), + ganacheOptions: postLondonGanacheOptions, + testSpecificMock: (mockServer) => { + mockServer + .forGet(`${GAS_API_BASE_URL}/networks/1337/suggestedGasFees`) + .thenCallback(() => { + return { + statusCode: 422, + }; + }); + }, + title: this.test.fullTitle(), + }, + async ({ driver, ganacheServer }) => { + await logInWithBalanceValidation(driver, ganacheServer); + + await openActionMenuAndStartSendFlow(driver); + + await driver.fill( + 'input[placeholder="Enter public address (0x) or domain name"]', + '0x2f318C334780961FB129D2a6c30D0763d9a5C970', + ); + + await driver.fill('input[placeholder="0"]', '1'); + + await driver.clickElement({ css: 'button', text: 'Continue' }); + + // Check that the gas estimation is what we expect + await driver.findElement({ + css: '[data-testid="first-gas-field"]', + text: '0 ETH', + }); + await driver.waitForSelector({ + css: '[data-testid="native-currency"]', + text: '$0.07', + }); + }, + ); + }); }); - it('show expected gas defaults on a network not supported by legacy gas API', async function () { - await withFixtures( - { - fixtures: new FixtureBuilder().build(), - ganacheOptions: preLondonGanacheOptions, - title: this.test.fullTitle(), - }, - async ({ driver, ganacheServer }) => { - await logInWithBalanceValidation(driver, ganacheServer); - - await tempToggleSettingRedesignedTransactionConfirmations(driver); - - await openActionMenuAndStartSendFlow(driver); - await driver.fill( - 'input[placeholder="Enter public address (0x) or domain name"]', - '0x2f318C334780961FB129D2a6c30D0763d9a5C970', - ); - - await driver.fill('input[placeholder="0"]', '1'); - - await driver.clickElement({ css: 'button', text: 'Continue' }); - - // Check that the gas estimation is what we expect - await driver.findElement({ - cass: '[data-testid="confirm-gas-display"]', - text: '0.000042', - }); - }, - ); + describe('Send on a network that is not EIP-1559 compatible', function () { + it('show expected gas defaults on a network supported by legacy gas API', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder().build(), + ganacheOptions: { + ...preLondonGanacheOptions, + chainId: parseInt(CHAIN_IDS.BSC, 16), + }, + title: this.test.fullTitle(), + }, + async ({ driver, ganacheServer }) => { + await logInWithBalanceValidation(driver, ganacheServer); + + await openActionMenuAndStartSendFlow(driver); + await driver.fill( + 'input[placeholder="Enter public address (0x) or domain name"]', + '0x2f318C334780961FB129D2a6c30D0763d9a5C970', + ); + + await driver.fill('input[placeholder="0"]', '1'); + + await driver.clickElement({ css: 'button', text: 'Continue' }); + + // Check that the gas estimation is what we expect + await driver.findElement({ + css: '[data-testid="first-gas-field"]', + text: '0 ETH', + }); + await driver.waitForSelector({ + css: '[data-testid="native-currency"]', + text: '$0.07', + }); + }, + ); + }); + + it('show expected gas defaults on a network supported by legacy gas API when that API is down', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder().build(), + ganacheOptions: { + ...preLondonGanacheOptions, + chainId: parseInt(CHAIN_IDS.BSC, 16), + }, + testSpecificMock: (mockServer) => { + mockServer + .forGet( + `${GAS_API_BASE_URL}/networks/${parseInt( + CHAIN_IDS.BSC, + 16, + )}/gasPrices`, + ) + .thenCallback(() => { + return { + statusCode: 422, + }; + }); + }, + title: this.test.fullTitle(), + }, + async ({ driver, ganacheServer }) => { + await logInWithBalanceValidation(driver, ganacheServer); + + await openActionMenuAndStartSendFlow(driver); + await driver.fill( + 'input[placeholder="Enter public address (0x) or domain name"]', + '0x2f318C334780961FB129D2a6c30D0763d9a5C970', + ); + + await driver.fill('input[placeholder="0"]', '1'); + + await driver.clickElement({ css: 'button', text: 'Continue' }); + + // Check that the gas estimation is what we expect + await driver.findElement({ + css: '[data-testid="first-gas-field"]', + text: '0 ETH', + }); + await driver.waitForSelector({ + css: '[data-testid="native-currency"]', + text: '$0.07', + }); + }, + ); + }); + + it('show expected gas defaults on a network not supported by legacy gas API', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder().build(), + ganacheOptions: preLondonGanacheOptions, + title: this.test.fullTitle(), + }, + async ({ driver, ganacheServer }) => { + await logInWithBalanceValidation(driver, ganacheServer); + + await openActionMenuAndStartSendFlow(driver); + await driver.fill( + 'input[placeholder="Enter public address (0x) or domain name"]', + '0x2f318C334780961FB129D2a6c30D0763d9a5C970', + ); + + await driver.fill('input[placeholder="0"]', '1'); + + await driver.clickElement({ css: 'button', text: 'Continue' }); + + // Check that the gas estimation is what we expect + await driver.findElement({ + css: '[data-testid="first-gas-field"]', + text: '0 ETH', + }); + await driver.waitForSelector({ + css: '[data-testid="native-currency"]', + text: '$0.07', + }); + }, + ); + }); }); }); }); diff --git a/test/e2e/tests/transaction/multiple-transactions.spec.js b/test/e2e/tests/transaction/multiple-transactions.spec.js index b7ad05b3a93d..b85937f5b6bd 100644 --- a/test/e2e/tests/transaction/multiple-transactions.spec.js +++ b/test/e2e/tests/transaction/multiple-transactions.spec.js @@ -11,127 +11,252 @@ const { const FixtureBuilder = require('../../fixture-builder'); describe('Multiple transactions', function () { - it('creates multiple queued transactions, then confirms', async function () { - await withFixtures( - { - dapp: true, - fixtures: new FixtureBuilder() - .withPermissionControllerConnectedToTestDapp() - .build(), - ganacheOptions: generateGanacheOptions({ hardfork: 'london' }), - title: this.test.fullTitle(), - }, - async ({ driver }) => { - await unlockWallet(driver); - - await tempToggleSettingRedesignedTransactionConfirmations(driver); - - // initiates a transaction from the dapp - await openDapp(driver); - // creates first transaction - await createDappTransaction(driver); - await driver.waitUntilXWindowHandles(3); - - await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp); - - // creates second transaction - await createDappTransaction(driver); - await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); - - // confirms second transaction - await driver.waitForSelector({ - text: 'Reject 2 transactions', - tag: 'a', - }); - await driver.clickElement({ text: 'Confirm', tag: 'button' }); - await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); - - // wait for the "Reject 2 transactions" to disappear - await driver.assertElementNotPresent( - '.page-container__footer-secondary a', - ); - - // confirms first transaction - await driver.clickElement({ text: 'Confirm', tag: 'button' }); - - await driver.waitUntilXWindowHandles(2); - await driver.switchToWindowWithTitle( - WINDOW_TITLES.ExtensionInFullScreenView, - ); - await driver.delay(regularDelayMs); - await driver.clickElement( - '[data-testid="account-overview__activity-tab"]', - ); - await driver.waitForSelector( - '.transaction-list__completed-transactions .activity-list-item:nth-of-type(2)', - ); - - const confirmedTxes = await driver.findElements( - '.transaction-list__completed-transactions .activity-list-item', - ); - - assert.equal(confirmedTxes.length, 2); - }, - ); + describe('Old confirmation screens', function () { + it('creates multiple queued transactions, then confirms', async function () { + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withPermissionControllerConnectedToTestDapp() + .build(), + ganacheOptions: generateGanacheOptions({ hardfork: 'london' }), + title: this.test.fullTitle(), + }, + async ({ driver }) => { + await unlockWallet(driver); + + await tempToggleSettingRedesignedTransactionConfirmations(driver); + + // initiates a transaction from the dapp + await openDapp(driver); + // creates first transaction + await createDappTransaction(driver); + await driver.waitUntilXWindowHandles(3); + + await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp); + + // creates second transaction + await createDappTransaction(driver); + await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); + + // confirms second transaction + await driver.waitForSelector({ + text: 'Reject 2 transactions', + tag: 'a', + }); + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); + + // wait for the "Reject 2 transactions" to disappear + await driver.assertElementNotPresent( + '.page-container__footer-secondary a', + ); + + // confirms first transaction + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + + await driver.waitUntilXWindowHandles(2); + await driver.switchToWindowWithTitle( + WINDOW_TITLES.ExtensionInFullScreenView, + ); + await driver.delay(regularDelayMs); + await driver.clickElement( + '[data-testid="account-overview__activity-tab"]', + ); + await driver.waitForSelector( + '.transaction-list__completed-transactions .activity-list-item:nth-of-type(2)', + ); + + const confirmedTxes = await driver.findElements( + '.transaction-list__completed-transactions .activity-list-item', + ); + + assert.equal(confirmedTxes.length, 2); + }, + ); + }); + + it('creates multiple queued transactions, then rejects', async function () { + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withPermissionControllerConnectedToTestDapp() + .build(), + ganacheOptions: generateGanacheOptions({ hardfork: 'london' }), + title: this.test.fullTitle(), + }, + async ({ driver }) => { + await unlockWallet(driver); + + await tempToggleSettingRedesignedTransactionConfirmations(driver); + + // initiates a transaction from the dapp + await openDapp(driver); + // creates first transaction + await createDappTransaction(driver); + await driver.waitUntilXWindowHandles(3); + + await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp); + + // creates second transaction + await createDappTransaction(driver); + await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); + + // rejects second transaction + await driver.waitForSelector({ + text: 'Reject 2 transactions', + tag: 'a', + }); + await driver.clickElement({ text: 'Reject', tag: 'button' }); + await driver.assertElementNotPresent('.loading-overlay__spinner'); + // rejects first transaction + await driver.clickElement({ text: 'Reject', tag: 'button' }); + + await driver.waitUntilXWindowHandles(2); + await driver.switchToWindowWithTitle( + WINDOW_TITLES.ExtensionInFullScreenView, + ); + await driver.delay(regularDelayMs); + await driver.clickElement( + '[data-testid="account-overview__activity-tab"]', + ); + + const isTransactionListEmpty = + await driver.isElementPresentAndVisible( + '.transaction-list__empty-text', + ); + assert.equal(isTransactionListEmpty, true); + + // The previous isTransactionListEmpty wait already serves as the guard here for the assertElementNotPresent + await driver.assertElementNotPresent( + '.transaction-list__completed-transactions .activity-list-item', + ); + }, + ); + }); }); - it('creates multiple queued transactions, then rejects', async function () { - await withFixtures( - { - dapp: true, - fixtures: new FixtureBuilder() - .withPermissionControllerConnectedToTestDapp() - .build(), - ganacheOptions: generateGanacheOptions({ hardfork: 'london' }), - title: this.test.fullTitle(), - }, - async ({ driver }) => { - await unlockWallet(driver); - - await tempToggleSettingRedesignedTransactionConfirmations(driver); - - // initiates a transaction from the dapp - await openDapp(driver); - // creates first transaction - await createDappTransaction(driver); - await driver.waitUntilXWindowHandles(3); - - await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp); - - // creates second transaction - await createDappTransaction(driver); - await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); - - // rejects second transaction - await driver.waitForSelector({ - text: 'Reject 2 transactions', - tag: 'a', - }); - await driver.clickElement({ text: 'Reject', tag: 'button' }); - await driver.assertElementNotPresent('.loading-overlay__spinner'); - // rejects first transaction - await driver.clickElement({ text: 'Reject', tag: 'button' }); - - await driver.waitUntilXWindowHandles(2); - await driver.switchToWindowWithTitle( - WINDOW_TITLES.ExtensionInFullScreenView, - ); - await driver.delay(regularDelayMs); - await driver.clickElement( - '[data-testid="account-overview__activity-tab"]', - ); - - const isTransactionListEmpty = await driver.isElementPresentAndVisible( - '.transaction-list__empty-text', - ); - assert.equal(isTransactionListEmpty, true); - - // The previous isTransactionListEmpty wait already serves as the guard here for the assertElementNotPresent - await driver.assertElementNotPresent( - '.transaction-list__completed-transactions .activity-list-item', - ); - }, - ); + describe('Redesigned confirmation screens', function () { + it('creates multiple queued transactions, then confirms', async function () { + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withPermissionControllerConnectedToTestDapp() + .build(), + ganacheOptions: generateGanacheOptions({ hardfork: 'london' }), + title: this.test.fullTitle(), + }, + async ({ driver }) => { + await unlockWallet(driver); + + // initiates a transaction from the dapp + await openDapp(driver); + // creates first transaction + await createDappTransaction(driver); + await driver.waitUntilXWindowHandles(3); + + await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp); + + // creates second transaction + await createDappTransaction(driver); + await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); + + // confirms second transaction + await driver.waitForSelector({ + text: 'Reject all', + tag: 'button', + }); + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); + + // wait for the "Reject 2 transactions" to disappear + await driver.assertElementNotPresent( + '.page-container__footer-secondary a', + ); + + // confirms first transaction + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + + await driver.waitUntilXWindowHandles(2); + await driver.switchToWindowWithTitle( + WINDOW_TITLES.ExtensionInFullScreenView, + ); + await driver.delay(regularDelayMs); + await driver.clickElement( + '[data-testid="account-overview__activity-tab"]', + ); + await driver.waitForSelector( + '.transaction-list__completed-transactions .activity-list-item:nth-of-type(2)', + ); + + const confirmedTxes = await driver.findElements( + '.transaction-list__completed-transactions .activity-list-item', + ); + + assert.equal(confirmedTxes.length, 2); + }, + ); + }); + + it('creates multiple queued transactions, then rejects', async function () { + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withPermissionControllerConnectedToTestDapp() + .build(), + ganacheOptions: generateGanacheOptions({ hardfork: 'london' }), + title: this.test.fullTitle(), + }, + async ({ driver }) => { + await unlockWallet(driver); + + // initiates a transaction from the dapp + await openDapp(driver); + // creates first transaction + await createDappTransaction(driver); + await driver.waitUntilXWindowHandles(3); + + await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp); + + // creates second transaction + await createDappTransaction(driver); + await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); + + // rejects second transaction + await driver.waitForSelector({ + text: 'Reject all', + tag: 'button', + }); + await driver.clickElement({ text: 'Cancel', tag: 'button' }); + await driver.assertElementNotPresent('.loading-overlay__spinner'); + // rejects first transaction + await driver.clickElement({ text: 'Cancel', tag: 'button' }); + + await driver.waitUntilXWindowHandles(2); + await driver.switchToWindowWithTitle( + WINDOW_TITLES.ExtensionInFullScreenView, + ); + await driver.delay(regularDelayMs); + await driver.clickElement( + '[data-testid="account-overview__activity-tab"]', + ); + + const isTransactionListEmpty = + await driver.isElementPresentAndVisible( + '.transaction-list__empty-text', + ); + assert.equal(isTransactionListEmpty, true); + + // The previous isTransactionListEmpty wait already serves as the guard here for the assertElementNotPresent + await driver.assertElementNotPresent( + '.transaction-list__completed-transactions .activity-list-item', + ); + }, + ); + }); }); }); diff --git a/test/e2e/tests/transaction/navigate-transactions.spec.js b/test/e2e/tests/transaction/navigate-transactions.spec.js index 16e8f9374cb5..eb8465fb47a7 100644 --- a/test/e2e/tests/transaction/navigate-transactions.spec.js +++ b/test/e2e/tests/transaction/navigate-transactions.spec.js @@ -1,3 +1,6 @@ +const { + default: Confirmation, +} = require('../../page-objects/pages/confirmations/redesign/confirmation'); const { createDappTransaction, } = require('../../page-objects/flows/transaction'); @@ -19,169 +22,324 @@ const FixtureBuilder = require('../../fixture-builder'); const TRANSACTION_COUNT = 4; describe('Navigate transactions', function () { - it('should navigate the unapproved transactions', async function () { - await withFixtures( - { - fixtures: new FixtureBuilder() - .withPreferencesControllerTxSimulationsDisabled() - .withPermissionControllerConnectedToTestDapp() - .build(), - ganacheOptions: generateGanacheOptions({ hardfork: 'london' }), - title: this.test.fullTitle(), - dapp: true, - }, - async ({ driver }) => { - await unlockWallet(driver); - - await tempToggleSettingRedesignedTransactionConfirmations(driver); - - await createMultipleTransactions(driver, TRANSACTION_COUNT); - - const navigation = new ConfirmationNavigation(driver); - - await navigation.clickNextPage(); - await navigation.check_pageNumbers(2, 4); - - await navigation.clickNextPage(); - await navigation.check_pageNumbers(3, 4); - - await navigation.clickNextPage(); - await navigation.check_pageNumbers(4, 4); - - await navigation.clickFirstPage(); - await navigation.check_pageNumbers(1, 4); - - await navigation.clickLastPage(); - await navigation.check_pageNumbers(4, 4); - - await navigation.clickPreviousPage(); - await navigation.check_pageNumbers(3, 4); - - await navigation.clickPreviousPage(); - await navigation.check_pageNumbers(2, 4); - }, - ); - }); - - it('should add a transaction while the confirm page is in focus', async function () { - await withFixtures( - { - dapp: true, - fixtures: new FixtureBuilder() - .withPermissionControllerConnectedToTestDapp() - .withPreferencesControllerTxSimulationsDisabled() - .build(), - ganacheOptions: generateGanacheOptions({ hardfork: 'london' }), - title: this.test.fullTitle(), - }, - async ({ driver }) => { - await unlockWallet(driver); - - await tempToggleSettingRedesignedTransactionConfirmations(driver); - - await createMultipleTransactions(driver, TRANSACTION_COUNT); - - const navigation = new ConfirmationNavigation(driver); - - await navigation.clickNextPage(); - await navigation.check_pageNumbers(2, 4); - - await driver.switchToWindowWithTitle( - WINDOW_TITLES.ExtensionInFullScreenView, - ); - - // add transaction - await openDapp(driver); - await driver.clickElement({ text: 'Send', tag: 'button' }); - await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); - - await navigation.check_pageNumbers(2, 5); - }, - ); - }); - - it('should reject and remove an unapproved transaction', async function () { - await withFixtures( - { - fixtures: new FixtureBuilder() - .withPreferencesControllerTxSimulationsDisabled() - .withPermissionControllerConnectedToTestDapp() - .build(), - ganacheOptions: generateGanacheOptions({ hardfork: 'london' }), - title: this.test.fullTitle(), - dapp: true, - }, - async ({ driver }) => { - await unlockWallet(driver); - - await tempToggleSettingRedesignedTransactionConfirmations(driver); - - await createMultipleTransactions(driver, TRANSACTION_COUNT); - - // reject transaction - await driver.clickElement({ text: 'Reject', tag: 'button' }); - - const navigation = new ConfirmationNavigation(driver); - await navigation.check_pageNumbers(1, 3); - }, - ); - }); - - it('should confirm and remove an unapproved transaction', async function () { - await withFixtures( - { - fixtures: new FixtureBuilder() - .withPreferencesControllerTxSimulationsDisabled() - .withPermissionControllerConnectedToTestDapp() - .build(), - ganacheOptions: generateGanacheOptions({ hardfork: 'london' }), - title: this.test.fullTitle(), - dapp: true, - }, - async ({ driver }) => { - await unlockWallet(driver); - - await tempToggleSettingRedesignedTransactionConfirmations(driver); - - await createMultipleTransactions(driver, TRANSACTION_COUNT); - - // confirm transaction - await driver.clickElement({ text: 'Confirm', tag: 'button' }); - - const navigation = new ConfirmationNavigation(driver); - await navigation.check_pageNumbers(1, 3); - }, - ); + describe('Old confirmation screens', function () { + it('should navigate the unapproved transactions', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder() + .withPreferencesControllerTxSimulationsDisabled() + .withPermissionControllerConnectedToTestDapp() + .build(), + ganacheOptions: generateGanacheOptions({ hardfork: 'london' }), + title: this.test.fullTitle(), + dapp: true, + }, + async ({ driver }) => { + await unlockWallet(driver); + + await tempToggleSettingRedesignedTransactionConfirmations(driver); + + await createMultipleTransactions(driver, TRANSACTION_COUNT); + + const navigation = new ConfirmationNavigation(driver); + + await navigation.clickNextPage(); + await navigation.check_pageNumbers(2, 4); + + await navigation.clickNextPage(); + await navigation.check_pageNumbers(3, 4); + + await navigation.clickNextPage(); + await navigation.check_pageNumbers(4, 4); + + await navigation.clickFirstPage(); + await navigation.check_pageNumbers(1, 4); + + await navigation.clickLastPage(); + await navigation.check_pageNumbers(4, 4); + + await navigation.clickPreviousPage(); + await navigation.check_pageNumbers(3, 4); + + await navigation.clickPreviousPage(); + await navigation.check_pageNumbers(2, 4); + }, + ); + }); + + it('should add a transaction while the confirm page is in focus', async function () { + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withPermissionControllerConnectedToTestDapp() + .withPreferencesControllerTxSimulationsDisabled() + .build(), + ganacheOptions: generateGanacheOptions({ hardfork: 'london' }), + title: this.test.fullTitle(), + }, + async ({ driver }) => { + await unlockWallet(driver); + + await tempToggleSettingRedesignedTransactionConfirmations(driver); + + await createMultipleTransactions(driver, TRANSACTION_COUNT); + + const navigation = new ConfirmationNavigation(driver); + + await navigation.clickNextPage(); + await navigation.check_pageNumbers(2, 4); + + await driver.switchToWindowWithTitle( + WINDOW_TITLES.ExtensionInFullScreenView, + ); + + // add transaction + await openDapp(driver); + await driver.clickElement({ text: 'Send', tag: 'button' }); + await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); + + await navigation.check_pageNumbers(2, 5); + }, + ); + }); + + it('should reject and remove an unapproved transaction', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder() + .withPreferencesControllerTxSimulationsDisabled() + .withPermissionControllerConnectedToTestDapp() + .build(), + ganacheOptions: generateGanacheOptions({ hardfork: 'london' }), + title: this.test.fullTitle(), + dapp: true, + }, + async ({ driver }) => { + await unlockWallet(driver); + + await tempToggleSettingRedesignedTransactionConfirmations(driver); + + await createMultipleTransactions(driver, TRANSACTION_COUNT); + + // reject transaction + await driver.clickElement({ text: 'Reject', tag: 'button' }); + + const navigation = new ConfirmationNavigation(driver); + await navigation.check_pageNumbers(1, 3); + }, + ); + }); + + it('should confirm and remove an unapproved transaction', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder() + .withPreferencesControllerTxSimulationsDisabled() + .withPermissionControllerConnectedToTestDapp() + .build(), + ganacheOptions: generateGanacheOptions({ hardfork: 'london' }), + title: this.test.fullTitle(), + dapp: true, + }, + async ({ driver }) => { + await unlockWallet(driver); + + await tempToggleSettingRedesignedTransactionConfirmations(driver); + + await createMultipleTransactions(driver, TRANSACTION_COUNT); + + // confirm transaction + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + + const navigation = new ConfirmationNavigation(driver); + await navigation.check_pageNumbers(1, 3); + }, + ); + }); + + it('should reject and remove all unapproved transactions', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder() + .withPreferencesControllerTxSimulationsDisabled() + .withPermissionControllerConnectedToTestDapp() + .build(), + ganacheOptions: generateGanacheOptions({ hardfork: 'london' }), + title: this.test.fullTitle(), + dapp: true, + }, + async ({ driver, ganacheServer }) => { + await unlockWallet(driver); + + await tempToggleSettingRedesignedTransactionConfirmations(driver); + + await createMultipleTransactions(driver, TRANSACTION_COUNT); + + // reject transactions + await driver.clickElement({ text: 'Reject 4', tag: 'a' }); + await driver.clickElement({ text: 'Reject all', tag: 'button' }); + + await driver.switchToWindowWithTitle( + WINDOW_TITLES.ExtensionInFullScreenView, + ); + await locateAccountBalanceDOM(driver, ganacheServer); + }, + ); + }); }); - it('should reject and remove all unapproved transactions', async function () { - await withFixtures( - { - fixtures: new FixtureBuilder() - .withPreferencesControllerTxSimulationsDisabled() - .withPermissionControllerConnectedToTestDapp() - .build(), - ganacheOptions: generateGanacheOptions({ hardfork: 'london' }), - title: this.test.fullTitle(), - dapp: true, - }, - async ({ driver, ganacheServer }) => { - await unlockWallet(driver); - - await tempToggleSettingRedesignedTransactionConfirmations(driver); - - await createMultipleTransactions(driver, TRANSACTION_COUNT); - - // reject transactions - await driver.clickElement({ text: 'Reject 4', tag: 'a' }); - await driver.clickElement({ text: 'Reject all', tag: 'button' }); - - await driver.switchToWindowWithTitle( - WINDOW_TITLES.ExtensionInFullScreenView, - ); - await locateAccountBalanceDOM(driver, ganacheServer); - }, - ); + describe('Redesigned confirmation screens', function () { + it('should navigate the unapproved transactions', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder() + .withPreferencesControllerTxSimulationsDisabled() + .withPermissionControllerConnectedToTestDapp() + .build(), + ganacheOptions: generateGanacheOptions({ hardfork: 'london' }), + title: this.test.fullTitle(), + dapp: true, + }, + async ({ driver }) => { + await unlockWallet(driver); + + await createRedesignedMultipleTransactions(driver, TRANSACTION_COUNT); + + const navigation = new Confirmation(driver); + + await navigation.clickNextPage(); + await navigation.check_pageNumbers(2, 4); + + await navigation.clickNextPage(); + await navigation.check_pageNumbers(3, 4); + + await navigation.clickNextPage(); + await navigation.check_pageNumbers(4, 4); + + await navigation.clickPreviousPage(); + await navigation.check_pageNumbers(3, 4); + + await navigation.clickPreviousPage(); + await navigation.check_pageNumbers(2, 4); + + await navigation.clickPreviousPage(); + await navigation.check_pageNumbers(1, 4); + }, + ); + }); + + it('should add a transaction while the confirm page is in focus', async function () { + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withPermissionControllerConnectedToTestDapp() + .withPreferencesControllerTxSimulationsDisabled() + .build(), + ganacheOptions: generateGanacheOptions({ hardfork: 'london' }), + title: this.test.fullTitle(), + }, + async ({ driver }) => { + await unlockWallet(driver); + + await createRedesignedMultipleTransactions(driver, TRANSACTION_COUNT); + + const navigation = new Confirmation(driver); + + await navigation.clickNextPage(); + await navigation.check_pageNumbers(2, 4); + + await driver.switchToWindowWithTitle( + WINDOW_TITLES.ExtensionInFullScreenView, + ); + + // add transaction + await openDapp(driver); + await driver.clickElement({ text: 'Send', tag: 'button' }); + await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); + + await navigation.check_pageNumbers(2, 5); + }, + ); + }); + + it('should reject and remove an unapproved transaction', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder() + .withPreferencesControllerTxSimulationsDisabled() + .withPermissionControllerConnectedToTestDapp() + .build(), + ganacheOptions: generateGanacheOptions({ hardfork: 'london' }), + title: this.test.fullTitle(), + dapp: true, + }, + async ({ driver }) => { + await unlockWallet(driver); + + await createRedesignedMultipleTransactions(driver, TRANSACTION_COUNT); + + // reject transaction + await driver.clickElement({ text: 'Cancel', tag: 'button' }); + + const navigation = new Confirmation(driver); + await navigation.check_pageNumbers(1, 3); + }, + ); + }); + + it('should confirm and remove an unapproved transaction', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder() + .withPreferencesControllerTxSimulationsDisabled() + .withPermissionControllerConnectedToTestDapp() + .build(), + ganacheOptions: generateGanacheOptions({ hardfork: 'london' }), + title: this.test.fullTitle(), + dapp: true, + }, + async ({ driver }) => { + await unlockWallet(driver); + + await createRedesignedMultipleTransactions(driver, TRANSACTION_COUNT); + + // confirm transaction + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + + const navigation = new Confirmation(driver); + await navigation.check_pageNumbers(1, 3); + }, + ); + }); + + it('should reject and remove all unapproved transactions', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder() + .withPreferencesControllerTxSimulationsDisabled() + .withPermissionControllerConnectedToTestDapp() + .build(), + ganacheOptions: generateGanacheOptions({ hardfork: 'london' }), + title: this.test.fullTitle(), + dapp: true, + }, + async ({ driver, ganacheServer }) => { + await unlockWallet(driver); + + await createRedesignedMultipleTransactions(driver, TRANSACTION_COUNT); + + // reject transactions + await driver.clickElement({ text: 'Reject all', tag: 'button' }); + + await driver.switchToWindowWithTitle( + WINDOW_TITLES.ExtensionInFullScreenView, + ); + await locateAccountBalanceDOM(driver, ganacheServer); + }, + ); + }); }); }); @@ -198,3 +356,17 @@ async function createMultipleTransactions(driver, count) { text: '0.001', }); } + +async function createRedesignedMultipleTransactions(driver, count) { + for (let i = 0; i < count; i++) { + await createDappTransaction(driver); + } + + await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog); + + // Wait until total amount is loaded to mitigate flakiness on reject + await driver.findElement({ + tag: 'h2', + text: '0.001 ETH', + }); +} diff --git a/test/e2e/tests/transaction/send-edit.spec.js b/test/e2e/tests/transaction/send-edit.spec.js index 8d19d6d071b1..2180d65b3ec4 100644 --- a/test/e2e/tests/transaction/send-edit.spec.js +++ b/test/e2e/tests/transaction/send-edit.spec.js @@ -13,168 +13,357 @@ const { const FixtureBuilder = require('../../fixture-builder'); describe('Editing Confirm Transaction', function () { - it('goes back from confirm page to edit eth value, gas price and gas limit', async function () { - await withFixtures( - { - fixtures: new FixtureBuilder().withConversionRateDisabled().build(), - ganacheOptions: defaultGanacheOptions, - title: this.test.fullTitle(), - }, - async ({ driver }) => { - await unlockWallet(driver); - await tempToggleSettingRedesignedTransactionConfirmations(driver); - await createInternalTransaction(driver); - - await driver.findElement({ - css: '.currency-display-component__text', - text: '1', - }); - - await driver.findElement({ - css: '.currency-display-component__text', - text: '1.000042', - }); - - await driver.clickElement( - '.confirm-page-container-header__back-button', - ); - - const inputAmount = await driver.findElement('input[placeholder="0"]'); - - await inputAmount.press(driver.Key.BACK_SPACE); - await inputAmount.press('2'); - await inputAmount.press('.'); - await inputAmount.press('2'); - - await driver.clickElement({ text: 'Continue', tag: 'button' }); - - await driver.clickElement({ text: 'Edit', tag: 'button' }); - - const [gasLimitInput, gasPriceInput] = await driver.findElements( - 'input[type="number"]', - ); - await gasPriceInput.fill('8'); - await gasLimitInput.fill('100000'); - await driver.clickElement({ text: 'Save', tag: 'button' }); - - // has correct updated value on the confirm screen the transaction - await driver.waitForSelector({ - css: '.currency-display-component__text', - text: '0.0008', - }); - await driver.waitForSelector({ - css: '.currency-display-component__suffix', - text: 'ETH', - }); - - // confirms the transaction - await driver.clickElement({ text: 'Confirm', tag: 'button' }); - - await driver.clickElement( - '[data-testid="account-overview__activity-tab"]', - ); - await driver.wait(async () => { - const confirmedTxes = await driver.findElements( - '.transaction-list__completed-transactions .activity-list-item', - ); - return confirmedTxes.length === 1; - }, 10000); - - const txValues = await driver.findElements( - '[data-testid="transaction-list-item-primary-currency"]', - ); - assert.equal(txValues.length, 1); - assert.ok(/-2.2\s*ETH/u.test(await txValues[0].getText())); - }, - ); + describe('Old confirmation screens', function () { + it('goes back from confirm page to edit eth value, gas price and gas limit', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder().withConversionRateDisabled().build(), + ganacheOptions: defaultGanacheOptions, + title: this.test.fullTitle(), + }, + async ({ driver }) => { + await unlockWallet(driver); + await tempToggleSettingRedesignedTransactionConfirmations(driver); + await createInternalTransaction(driver); + + await driver.findElement({ + css: '.currency-display-component__text', + text: '1', + }); + + await driver.findElement({ + css: '.currency-display-component__text', + text: '1.000042', + }); + + await driver.clickElement( + '.confirm-page-container-header__back-button', + ); + + const inputAmount = await driver.findElement( + 'input[placeholder="0"]', + ); + + await inputAmount.press(driver.Key.BACK_SPACE); + await inputAmount.press('2'); + await inputAmount.press('.'); + await inputAmount.press('2'); + + await driver.clickElement({ text: 'Continue', tag: 'button' }); + + await driver.clickElement({ text: 'Edit', tag: 'button' }); + + const [gasLimitInput, gasPriceInput] = await driver.findElements( + 'input[type="number"]', + ); + await gasPriceInput.fill('8'); + await gasLimitInput.fill('100000'); + await driver.clickElement({ text: 'Save', tag: 'button' }); + + // has correct updated value on the confirm screen the transaction + await driver.waitForSelector({ + css: '.currency-display-component__text', + text: '0.0008', + }); + await driver.waitForSelector({ + css: '.currency-display-component__suffix', + text: 'ETH', + }); + + // confirms the transaction + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + + await driver.clickElement( + '[data-testid="account-overview__activity-tab"]', + ); + await driver.wait(async () => { + const confirmedTxes = await driver.findElements( + '.transaction-list__completed-transactions .activity-list-item', + ); + return confirmedTxes.length === 1; + }, 10000); + + const txValues = await driver.findElements( + '[data-testid="transaction-list-item-primary-currency"]', + ); + assert.equal(txValues.length, 1); + assert.ok(/-2.2\s*ETH/u.test(await txValues[0].getText())); + }, + ); + }); + + it('goes back from confirm page to edit eth value, baseFee, priorityFee and gas limit - 1559 V2', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder().withConversionRateDisabled().build(), + ganacheOptions: generateGanacheOptions({ hardfork: 'london' }), + title: this.test.fullTitle(), + }, + async ({ driver }) => { + await unlockWallet(driver); + await tempToggleSettingRedesignedTransactionConfirmations(driver); + + await createInternalTransaction(driver); + + await driver.findElement({ + css: '.currency-display-component__text', + text: '1', + }); + + await driver.findElement({ + css: '.currency-display-component__text', + text: '1.00043983', + }); + + await driver.clickElement( + '.confirm-page-container-header__back-button', + ); + + const inputAmount = await driver.findElement( + 'input[placeholder="0"]', + ); + + await inputAmount.press(driver.Key.BACK_SPACE); + await inputAmount.press('2'); + await inputAmount.press('.'); + await inputAmount.press('2'); + + await driver.clickElement({ text: 'Continue', tag: 'button' }); + + // open gas fee popover + await driver.clickElement('[data-testid="edit-gas-fee-icon"]'); + + await driver.clickElement('[data-testid="edit-gas-fee-item-custom"]'); + + // enter max fee + await driver.fill('[data-testid="base-fee-input"]', '8'); + + // enter priority fee + await driver.fill('[data-testid="priority-fee-input"]', '8'); + + // edit gas limit + await driver.clickElement('[data-testid="advanced-gas-fee-edit"]'); + await driver.fill('[data-testid="gas-limit-input"]', '100000'); + + // save default values + await driver.clickElement('input[type="checkbox"]'); + + // Submit gas fee changes + await driver.clickElement({ text: 'Save', tag: 'button' }); + + // has correct updated value on the confirm screen the transaction + await driver.waitForSelector({ + css: '.currency-display-component__text', + text: '0.0008', + }); + await driver.waitForSelector({ + css: '.currency-display-component__suffix', + text: 'ETH', + }); + + // confirms the transaction + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + + await driver.clickElement( + '[data-testid="account-overview__activity-tab"]', + ); + await driver.wait(async () => { + const confirmedTxes = await driver.findElements( + '.transaction-list__completed-transactions .activity-list-item', + ); + return confirmedTxes.length === 1; + }, 10000); + + const txValues = await driver.findElements( + '[data-testid="transaction-list-item-primary-currency"]', + ); + assert.equal(txValues.length, 1); + assert.ok(/-2.2\s*ETH/u.test(await txValues[0].getText())); + }, + ); + }); }); - it('goes back from confirm page to edit eth value, baseFee, priorityFee and gas limit - 1559 V2', async function () { - await withFixtures( - { - fixtures: new FixtureBuilder().withConversionRateDisabled().build(), - ganacheOptions: generateGanacheOptions({ hardfork: 'london' }), - title: this.test.fullTitle(), - }, - async ({ driver }) => { - await unlockWallet(driver); - await tempToggleSettingRedesignedTransactionConfirmations(driver); - - await createInternalTransaction(driver); - - await driver.findElement({ - css: '.currency-display-component__text', - text: '1', - }); - - await driver.findElement({ - css: '.currency-display-component__text', - text: '1.00043983', - }); - - await driver.clickElement( - '.confirm-page-container-header__back-button', - ); - - const inputAmount = await driver.findElement('input[placeholder="0"]'); - - await inputAmount.press(driver.Key.BACK_SPACE); - await inputAmount.press('2'); - await inputAmount.press('.'); - await inputAmount.press('2'); - - await driver.clickElement({ text: 'Continue', tag: 'button' }); - - // open gas fee popover - await driver.clickElement('[data-testid="edit-gas-fee-icon"]'); - - await driver.clickElement('[data-testid="edit-gas-fee-item-custom"]'); - - // enter max fee - await driver.fill('[data-testid="base-fee-input"]', '8'); - - // enter priority fee - await driver.fill('[data-testid="priority-fee-input"]', '8'); - - // edit gas limit - await driver.clickElement('[data-testid="advanced-gas-fee-edit"]'); - await driver.fill('[data-testid="gas-limit-input"]', '100000'); - - // save default values - await driver.clickElement('input[type="checkbox"]'); - - // Submit gas fee changes - await driver.clickElement({ text: 'Save', tag: 'button' }); - - // has correct updated value on the confirm screen the transaction - await driver.waitForSelector({ - css: '.currency-display-component__text', - text: '0.0008', - }); - await driver.waitForSelector({ - css: '.currency-display-component__suffix', - text: 'ETH', - }); - - // confirms the transaction - await driver.clickElement({ text: 'Confirm', tag: 'button' }); - - await driver.clickElement( - '[data-testid="account-overview__activity-tab"]', - ); - await driver.wait(async () => { - const confirmedTxes = await driver.findElements( - '.transaction-list__completed-transactions .activity-list-item', - ); - return confirmedTxes.length === 1; - }, 10000); - - const txValues = await driver.findElements( - '[data-testid="transaction-list-item-primary-currency"]', - ); - assert.equal(txValues.length, 1); - assert.ok(/-2.2\s*ETH/u.test(await txValues[0].getText())); - }, - ); + describe('Redesigned confirmation screens', function () { + it('goes back from confirm page to edit eth value, gas price and gas limit', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder().withConversionRateDisabled().build(), + ganacheOptions: defaultGanacheOptions, + title: this.test.fullTitle(), + }, + async ({ driver }) => { + await unlockWallet(driver); + + await createInternalTransaction(driver); + + await driver.findElement({ + css: 'h2', + text: '1 ETH', + }); + + await driver.findElement({ + css: '[data-testid="first-gas-field"]', + text: '0 ETH', + }); + + await driver.findElement({ + css: '[data-testid="native-currency"]', + text: '$0.07', + }); + + await driver.clickElement( + '[data-testid="wallet-initiated-header-back-button"]', + ); + + const inputAmount = await driver.findElement( + 'input[placeholder="0"]', + ); + + await inputAmount.press(driver.Key.BACK_SPACE); + await inputAmount.press('2'); + await inputAmount.press('.'); + await inputAmount.press('2'); + + await driver.clickElement({ text: 'Continue', tag: 'button' }); + + await driver.clickElement('[data-testid="edit-gas-fee-icon"]'); + + const [gasLimitInput, gasPriceInput] = await driver.findElements( + 'input[type="number"]', + ); + await gasPriceInput.fill('8'); + await gasLimitInput.fill('100000'); + await driver.clickElement({ text: 'Save', tag: 'button' }); + + // has correct updated value on the confirm screen the transaction + await driver.findElement({ + css: '[data-testid="first-gas-field"]', + text: '0.0008 ETH', + }); + + await driver.findElement({ + css: '[data-testid="native-currency"]', + text: '$1.36', + }); + + // confirms the transaction + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + + await driver.clickElement( + '[data-testid="account-overview__activity-tab"]', + ); + await driver.wait(async () => { + const confirmedTxes = await driver.findElements( + '.transaction-list__completed-transactions .activity-list-item', + ); + return confirmedTxes.length === 1; + }, 10000); + + const txValues = await driver.findElements( + '[data-testid="transaction-list-item-primary-currency"]', + ); + assert.equal(txValues.length, 1); + assert.ok(/-2.2\s*ETH/u.test(await txValues[0].getText())); + }, + ); + }); + + it('goes back from confirm page to edit eth value, baseFee, priorityFee and gas limit - 1559 V2', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder().withConversionRateDisabled().build(), + ganacheOptions: generateGanacheOptions({ hardfork: 'london' }), + title: this.test.fullTitle(), + }, + async ({ driver }) => { + await unlockWallet(driver); + // await tempToggleSettingRedesignedTransactionConfirmations(driver); + + await createInternalTransaction(driver); + + await driver.findElement({ + css: 'h2', + text: '1 ETH', + }); + + await driver.findElement({ + css: '[data-testid="first-gas-field"]', + text: '0.0004 ETH', + }); + + await driver.findElement({ + css: '[data-testid="native-currency"]', + text: '$0.75', + }); + + await driver.clickElement( + '[data-testid="wallet-initiated-header-back-button"]', + ); + + const inputAmount = await driver.findElement( + 'input[placeholder="0"]', + ); + + await inputAmount.press(driver.Key.BACK_SPACE); + await inputAmount.press('2'); + await inputAmount.press('.'); + await inputAmount.press('2'); + + await driver.clickElement({ text: 'Continue', tag: 'button' }); + + // open gas fee popover + await driver.clickElement('[data-testid="edit-gas-fee-icon"]'); + + await driver.clickElement('[data-testid="edit-gas-fee-item-custom"]'); + + // enter max fee + await driver.fill('[data-testid="base-fee-input"]', '8'); + + // enter priority fee + await driver.fill('[data-testid="priority-fee-input"]', '8'); + + // edit gas limit + await driver.clickElement('[data-testid="advanced-gas-fee-edit"]'); + await driver.fill('[data-testid="gas-limit-input"]', '100000'); + + // save default values + await driver.clickElement('input[type="checkbox"]'); + + // Submit gas fee changes + await driver.clickElement({ text: 'Save', tag: 'button' }); + + // has correct updated value on the confirm screen the transaction + await driver.findElement({ + css: '[data-testid="first-gas-field"]', + text: '0.0008 ETH', + }); + + await driver.findElement({ + css: '[data-testid="native-currency"]', + text: '$1.36', + }); + + // confirms the transaction + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + + await driver.clickElement( + '[data-testid="account-overview__activity-tab"]', + ); + await driver.wait(async () => { + const confirmedTxes = await driver.findElements( + '.transaction-list__completed-transactions .activity-list-item', + ); + return confirmedTxes.length === 1; + }, 10000); + + const txValues = await driver.findElements( + '[data-testid="transaction-list-item-primary-currency"]', + ); + assert.equal(txValues.length, 1); + assert.ok(/-2.2\s*ETH/u.test(await txValues[0].getText())); + }, + ); + }); }); }); diff --git a/test/e2e/tests/transaction/send-eth.spec.js b/test/e2e/tests/transaction/send-eth.spec.js index 9ee1b58dc170..7bffb3f1cde1 100644 --- a/test/e2e/tests/transaction/send-eth.spec.js +++ b/test/e2e/tests/transaction/send-eth.spec.js @@ -14,244 +14,398 @@ const { const FixtureBuilder = require('../../fixture-builder'); describe('Send ETH', function () { - describe('from inside MetaMask', function () { - it('finds the transaction in the transactions list using default gas', async function () { - await withFixtures( - { - fixtures: new FixtureBuilder().build(), - ganacheOptions: defaultGanacheOptions, - title: this.test.fullTitle(), - }, - async ({ driver, ganacheServer }) => { - await logInWithBalanceValidation(driver, ganacheServer); - - await openActionMenuAndStartSendFlow(driver); - - await driver.fill( - 'input[placeholder="Enter public address (0x) or domain name"]', - '0x2f318C334780961FB129D2a6c30D0763d9a5C970', - ); + describe('Old confirmation screens', function () { + describe('from inside MetaMask', function () { + /* eslint-disable-next-line mocha/max-top-level-suites */ + it('finds the transaction in the transactions list using advanced gas modal', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder().build(), + ganacheOptions: defaultGanacheOptions, + defaultGanacheOptions, + title: this.test.fullTitle(), + }, + async ({ driver }) => { + await unlockWallet(driver); - const inputAmount = await driver.findElement( - 'input[placeholder="0"]', - ); + await tempToggleSettingRedesignedTransactionConfirmations(driver); - await inputAmount.press('1'); - await inputAmount.press('0'); - await inputAmount.press('0'); - await inputAmount.press('0'); + await driver.delay(1000); - await driver.findElement({ - css: '[data-testid="send-page-amount-error"]', - text: '. Insufficient funds.', - }); + await openActionMenuAndStartSendFlow(driver); + await driver.fill( + 'input[placeholder="Enter public address (0x) or domain name"]', + '0x2f318C334780961FB129D2a6c30D0763d9a5C970', + ); - await inputAmount.press(driver.Key.BACK_SPACE); - await inputAmount.press(driver.Key.BACK_SPACE); - await inputAmount.press(driver.Key.BACK_SPACE); + const inputAmount = await driver.findElement( + 'input[placeholder="0"]', + ); + await inputAmount.press('1'); - await driver.assertElementNotPresent('.send-v2__error-amount', { - waitAtLeastGuard: 100, // A waitAtLeastGuard of 100ms is the best choice here - }); + const inputValue = await inputAmount.getProperty('value'); + assert.equal(inputValue, '1'); - const amountMax = await driver.findClickableElement( - '[data-testid="max-clear-button"]', - ); - await amountMax.click(); + // Continue to next screen + await driver.clickElement({ text: 'Continue', tag: 'button' }); - let inputValue = await inputAmount.getProperty('value'); + await driver.delay(1000); + const transactionAmounts = await driver.findElements( + '.currency-display-component__text', + ); + const transactionAmount = transactionAmounts[0]; + assert.equal(await transactionAmount.getText(), '1'); - assert(Number(inputValue) > 24); + await driver.clickElement({ text: 'Confirm', tag: 'button' }); - await amountMax.click(); + await driver.wait(async () => { + const confirmedTxes = await driver.findElements( + '.transaction-list__completed-transactions .activity-list-item', + ); + return confirmedTxes.length === 1; + }, 10000); - assert.equal(await inputAmount.isEnabled(), true); + await driver.waitForSelector({ + css: '[data-testid="transaction-list-item-primary-currency"]', + text: '-1 ETH', + }); + }, + ); + }); - await inputAmount.fill('1'); + describe('from dapp using advanced gas controls', function () { + it('should display the correct gas price on the legacy transaction', async function () { + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withPermissionControllerConnectedToTestDapp() + .build(), + ganacheOptions: defaultGanacheOptions, + defaultGanacheOptions, + title: this.test.fullTitle(), + }, + async ({ driver }) => { + await unlockWallet(driver); + + await tempToggleSettingRedesignedTransactionConfirmations(driver); + + // initiates a send from the dapp + await openDapp(driver); + await driver.clickElement({ text: 'Send', tag: 'button' }); + const windowHandles = await driver.waitUntilXWindowHandles(3); + const extension = windowHandles[0]; + await driver.switchToWindowWithTitle( + WINDOW_TITLES.Dialog, + windowHandles, + ); + + await driver.assertElementNotPresent( + { text: 'Data', tag: 'li' }, + { findElementGuard: { text: 'Estimated gas fee', tag: 'h6' } }, // make sure the Dialog has loaded + ); + + await driver.clickElement({ text: 'Edit', tag: 'button' }); + await driver.waitForSelector({ + text: '0.00021 ETH', + }); + await driver.clickElement({ + text: 'Edit suggested gas fee', + tag: 'button', + }); + await driver.waitForSelector({ + text: 'Edit priority', + tag: 'header', + }); + await editGasFeeForm(driver, '21000', '100'); + await driver.waitForSelector({ + css: '.transaction-detail-item:nth-of-type(1) h6:nth-of-type(2)', + text: '0.0021 ETH', + }); + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + await driver.waitUntilXWindowHandles(2); + await driver.switchToWindow(extension); + + // finds the transaction in the transactions list + await driver.clickElement( + '[data-testid="account-overview__activity-tab"]', + ); + await driver.waitForSelector( + '.transaction-list__completed-transactions .activity-list-item:nth-of-type(1)', + ); + await driver.waitForSelector({ + css: '[data-testid="transaction-list-item-primary-currency"]', + text: '-0 ETH', + }); + + // the transaction has the expected gas price + await driver.clickElement( + '[data-testid="transaction-list-item-primary-currency"]', + ); + await driver.waitForSelector({ + css: '[data-testid="transaction-breakdown__gas-price"]', + text: '100', + }); + }, + ); + }); + + it('should display correct gas values for EIP-1559 transaction', async function () { + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withPermissionControllerConnectedToTestDapp() + .build(), + ganacheOptions: { + ...defaultGanacheOptions, + hardfork: 'london', + }, + title: this.test.fullTitle(), + }, + async ({ driver }) => { + await unlockWallet(driver); + + await tempToggleSettingRedesignedTransactionConfirmations(driver); + + // initiates a transaction from the dapp + await openDapp(driver); + await driver.clickElement({ + text: 'Create Token', + tag: 'button', + }); + const windowHandles = await driver.waitUntilXWindowHandles(3); + + const extension = windowHandles[0]; + await driver.switchToWindowWithTitle( + WINDOW_TITLES.Dialog, + windowHandles, + ); + + await driver.assertElementNotPresent( + { text: 'Data', tag: 'li' }, + { findElementGuard: { text: 'Estimated fee' } }, // make sure the Dialog has loaded + ); + + await driver.clickElement('[data-testid="edit-gas-fee-icon"]'); + await driver.clickElement( + '[data-testid="edit-gas-fee-item-custom"]', + ); + + const baseFeeInput = await driver.findElement( + '[data-testid="base-fee-input"]', + ); + await baseFeeInput.fill('25'); + const priorityFeeInput = await driver.findElement( + '[data-testid="priority-fee-input"]', + ); + await priorityFeeInput.fill('1'); + + await driver.clickElement({ text: 'Save', tag: 'button' }); + + await driver.waitForSelector({ + css: '.currency-display-component__text', + text: '0.0550741', + }); + + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + await driver.waitUntilXWindowHandles(2); + await driver.switchToWindow(extension); + + // Identify the transaction in the transactions list + await driver.waitForSelector( + '[data-testid="eth-overview__primary-currency"]', + ); + + await driver.clickElement( + '[data-testid="account-overview__activity-tab"]', + ); + await driver.waitForSelector( + '.transaction-list__completed-transactions .activity-list-item:nth-of-type(1)', + ); + await driver.waitForSelector({ + css: '[data-testid="transaction-list-item-primary-currency"]', + text: '-0 ETH', + }); + + // the transaction has the expected gas value + await driver.clickElement( + '[data-testid="transaction-list-item-primary-currency"]', + ); + + await driver.waitForSelector({ + xpath: "//div[contains(text(), 'Base fee')]", + }); + + const allFeeValues = await driver.findElements( + '.currency-display-component__text', + ); + + /** + * Below lines check that fee values are numeric. + * Because these values change for every e2e run, + * It's better to just check that the values are there and are numeric + */ + assert.equal(allFeeValues.length > 0, true); + + allFeeValues.forEach(async (feeValue) => { + assert.equal(/\d+\.?\d*/u.test(await feeValue.getText()), true); + }); + }, + ); + }); + }); - inputValue = await inputAmount.getProperty('value'); - assert.equal(inputValue, '1'); + describe('to non-contract address with data that matches ERC20 transfer data signature', function () { + it('renders the correct recipient on the confirmation screen', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder() + .withPreferencesController({ + featureFlags: { + sendHexData: true, + }, + }) + .withPreferencesControllerPetnamesDisabled() + .build(), + ganacheOptions: defaultGanacheOptions, + title: this.test.fullTitle(), + }, + async ({ driver }) => { + await unlockWallet(driver); + + await tempToggleSettingRedesignedTransactionConfirmations(driver); + + await driver.assertElementNotPresent('.loading-overlay__spinner'); + const balance = await driver.findElement( + '[data-testid="eth-overview__primary-currency"]', + ); + assert.ok(/^[\d.]+\sETH$/u.test(await balance.getText())); + + await openActionMenuAndStartSendFlow(driver); + + await driver.fill( + 'input[placeholder="Enter public address (0x) or domain name"]', + '0xc427D562164062a23a5cFf596A4a3208e72Acd28', + ); + + await driver.fill( + 'textarea[placeholder="Optional', + '0xa9059cbb0000000000000000000000002f318C334780961FB129D2a6c30D0763d9a5C970000000000000000000000000000000000000000000000000000000000000000a', + ); + + await driver.findClickableElement({ + text: 'Continue', + tag: 'button', + }); + await driver.clickElement({ text: 'Continue', tag: 'button' }); + + await driver.findClickableElement( + '[data-testid="sender-to-recipient__name"]', + ); + await driver.clickElement( + '[data-testid="sender-to-recipient__name"]', + ); + + const recipientAddress = await driver.findElements({ + text: '0xc427D562164062a23a5cFf596A4a3208e72Acd28', + }); + + assert.equal(recipientAddress.length, 1); + }, + ); + }); + }); + }); + }); - // Continue to next screen - await driver.clickElement({ text: 'Continue', tag: 'button' }); + describe('Redesigned confirmation screens', function () { + describe('from inside MetaMask', function () { + it('finds the transaction in the transactions list using default gas', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder().build(), + ganacheOptions: defaultGanacheOptions, + title: this.test.fullTitle(), + }, + async ({ driver, ganacheServer }) => { + await logInWithBalanceValidation(driver, ganacheServer); - await driver.clickElement({ text: 'Confirm', tag: 'button' }); + await openActionMenuAndStartSendFlow(driver); - await driver.clickElement( - '[data-testid="account-overview__activity-tab"]', - ); - await driver.wait(async () => { - const confirmedTxes = await driver.findElements( - '.transaction-list__completed-transactions .activity-list-item', + await driver.fill( + 'input[placeholder="Enter public address (0x) or domain name"]', + '0x2f318C334780961FB129D2a6c30D0763d9a5C970', ); - return confirmedTxes.length === 1; - }, 10000); - - await driver.waitForSelector({ - css: '[data-testid="transaction-list-item-primary-currency"]', - text: '-1 ETH', - }); - }, - ); - }); - - /* eslint-disable-next-line mocha/max-top-level-suites */ - it('finds the transaction in the transactions list using advanced gas modal', async function () { - await withFixtures( - { - fixtures: new FixtureBuilder().build(), - ganacheOptions: defaultGanacheOptions, - defaultGanacheOptions, - title: this.test.fullTitle(), - }, - async ({ driver }) => { - await unlockWallet(driver); - - await tempToggleSettingRedesignedTransactionConfirmations(driver); - - await driver.delay(1000); - - await openActionMenuAndStartSendFlow(driver); - await driver.fill( - 'input[placeholder="Enter public address (0x) or domain name"]', - '0x2f318C334780961FB129D2a6c30D0763d9a5C970', - ); - const inputAmount = await driver.findElement( - 'input[placeholder="0"]', - ); - await inputAmount.press('1'); + const inputAmount = await driver.findElement( + 'input[placeholder="0"]', + ); - const inputValue = await inputAmount.getProperty('value'); - assert.equal(inputValue, '1'); + await inputAmount.press('1'); + await inputAmount.press('0'); + await inputAmount.press('0'); + await inputAmount.press('0'); - // Continue to next screen - await driver.clickElement({ text: 'Continue', tag: 'button' }); + await driver.findElement({ + css: '[data-testid="send-page-amount-error"]', + text: '. Insufficient funds.', + }); - await driver.delay(1000); - const transactionAmounts = await driver.findElements( - '.currency-display-component__text', - ); - const transactionAmount = transactionAmounts[0]; - assert.equal(await transactionAmount.getText(), '1'); + await inputAmount.press(driver.Key.BACK_SPACE); + await inputAmount.press(driver.Key.BACK_SPACE); + await inputAmount.press(driver.Key.BACK_SPACE); - await driver.clickElement({ text: 'Confirm', tag: 'button' }); + await driver.assertElementNotPresent('.send-v2__error-amount', { + waitAtLeastGuard: 100, // A waitAtLeastGuard of 100ms is the best choice here + }); - await driver.wait(async () => { - const confirmedTxes = await driver.findElements( - '.transaction-list__completed-transactions .activity-list-item', + const amountMax = await driver.findClickableElement( + '[data-testid="max-clear-button"]', ); - return confirmedTxes.length === 1; - }, 10000); - - await driver.waitForSelector({ - css: '[data-testid="transaction-list-item-primary-currency"]', - text: '-1 ETH', - }); - }, - ); - }); + await amountMax.click(); - it('finds the transaction in the transactions list when sending to a Multisig Address', async function () { - const smartContract = SMART_CONTRACTS.MULTISIG; - await withFixtures( - { - fixtures: new FixtureBuilder().build(), - ganacheOptions: { - ...defaultGanacheOptions, - hardfork: 'london', - }, - smartContract, - title: this.test.fullTitle(), - }, - async ({ driver, contractRegistry, ganacheServer }) => { - const contractAddress = await contractRegistry.getContractAddress( - smartContract, - ); - await logInWithBalanceValidation(driver, ganacheServer); + let inputValue = await inputAmount.getProperty('value'); - // Wait for balance to load - await driver.delay(500); + assert(Number(inputValue) > 24); - await driver.clickElement('[data-testid="eth-overview-send"]'); - await driver.fill( - 'input[placeholder="Enter public address (0x) or domain name"]', - contractAddress, - ); + await amountMax.click(); - const inputAmount = await driver.findElement( - 'input[placeholder="0"]', - ); - await inputAmount.press('1'); - - // Continue to next screen - await driver.clickElement({ text: 'Continue', tag: 'button' }); - await driver.clickElement({ text: 'Confirm', tag: 'button' }); + assert.equal(await inputAmount.isEnabled(), true); - // Go back to home screen to check txn - const balance = await driver.findElement( - '[data-testid="eth-overview__primary-currency"]', - ); + await inputAmount.fill('1'); - assert.ok(/^[\d.]+\sETH$/u.test(await balance.getText())); + inputValue = await inputAmount.getProperty('value'); + assert.equal(inputValue, '1'); - await driver.clickElement( - '[data-testid="account-overview__activity-tab"]', - ); + // Continue to next screen + await driver.clickElement({ text: 'Continue', tag: 'button' }); - await driver.findElement( - '.transaction-list__completed-transactions .activity-list-item', - ); + await driver.clickElement({ text: 'Confirm', tag: 'button' }); - // The previous findElement already serves as the guard here for the assertElementNotPresent - await driver.assertElementNotPresent( - '.transaction-status-label--failed', - ); - }, - ); - }); + await driver.clickElement( + '[data-testid="account-overview__activity-tab"]', + ); + await driver.wait(async () => { + const confirmedTxes = await driver.findElements( + '.transaction-list__completed-transactions .activity-list-item', + ); + return confirmedTxes.length === 1; + }, 10000); - it('shows no error when cancel transaction when sending via QR code', async function () { - await withFixtures( - { - fixtures: new FixtureBuilder().build(), - ganacheOptions: defaultGanacheOptions, - title: this.test.fullTitle(), - }, - async ({ driver }) => { - await unlockWallet(driver); - - await driver.assertElementNotPresent('.loading-overlay__spinner'); - const balance = await driver.findElement( - '[data-testid="eth-overview__primary-currency"]', - ); - assert.ok(/^[\d.]+\sETH$/u.test(await balance.getText())); - - await openActionMenuAndStartSendFlow(driver); - // choose to scan via QR code - await driver.clickElement('[data-testid="ens-qr-scan-button"]'); - await driver.findVisibleElement('[data-testid="qr-scanner-modal"]'); - // cancel action will close the dialog and shut down camera initialization - await driver.waitForSelector({ - css: '.qr-scanner__error', - text: "We couldn't access your camera. Please give it another try.", - }); - await driver.clickElement({ text: 'Cancel', tag: 'button' }); - await driver.assertElementNotPresent( - '[data-testid="qr-scanner-modal"]', - ); - }, - ); - }); + await driver.waitForSelector({ + css: '[data-testid="transaction-list-item-primary-currency"]', + text: '-1 ETH', + }); + }, + ); + }); - describe('from dapp using advanced gas controls', function () { - it('should display the correct gas price on the legacy transaction', async function () { + /* eslint-disable-next-line mocha/max-top-level-suites */ + it('finds the transaction in the transactions list using advanced gas modal', async function () { await withFixtures( { - dapp: true, - fixtures: new FixtureBuilder() - .withPermissionControllerConnectedToTestDapp() - .build(), + fixtures: new FixtureBuilder().build(), ganacheOptions: defaultGanacheOptions, defaultGanacheOptions, title: this.test.fullTitle(), @@ -259,191 +413,119 @@ describe('Send ETH', function () { async ({ driver }) => { await unlockWallet(driver); - await tempToggleSettingRedesignedTransactionConfirmations(driver); + await driver.delay(1000); - // initiates a send from the dapp - await openDapp(driver); - await driver.clickElement({ text: 'Send', tag: 'button' }); - const windowHandles = await driver.waitUntilXWindowHandles(3); - const extension = windowHandles[0]; - await driver.switchToWindowWithTitle( - WINDOW_TITLES.Dialog, - windowHandles, + await openActionMenuAndStartSendFlow(driver); + await driver.fill( + 'input[placeholder="Enter public address (0x) or domain name"]', + '0x2f318C334780961FB129D2a6c30D0763d9a5C970', ); - await driver.assertElementNotPresent( - { text: 'Data', tag: 'li' }, - { findElementGuard: { text: 'Estimated gas fee', tag: 'h6' } }, // make sure the Dialog has loaded + const inputAmount = await driver.findElement( + 'input[placeholder="0"]', ); + await inputAmount.press('1'); - await driver.clickElement({ text: 'Edit', tag: 'button' }); - await driver.waitForSelector({ - text: '0.00021 ETH', - }); - await driver.clickElement({ - text: 'Edit suggested gas fee', - tag: 'button', - }); - await driver.waitForSelector({ - text: 'Edit priority', - tag: 'header', - }); - await editGasFeeForm(driver, '21000', '100'); - await driver.waitForSelector({ - css: '.transaction-detail-item:nth-of-type(1) h6:nth-of-type(2)', - text: '0.0021 ETH', + const inputValue = await inputAmount.getProperty('value'); + assert.equal(inputValue, '1'); + + // Continue to next screen + await driver.clickElement({ text: 'Continue', tag: 'button' }); + + await driver.delay(1000); + + // Transaction Amount + await driver.findElement({ + css: 'h2', + text: '1 ETH', }); + await driver.clickElement({ text: 'Confirm', tag: 'button' }); - await driver.waitUntilXWindowHandles(2); - await driver.switchToWindow(extension); - // finds the transaction in the transactions list - await driver.clickElement( - '[data-testid="account-overview__activity-tab"]', - ); - await driver.waitForSelector( - '.transaction-list__completed-transactions .activity-list-item:nth-of-type(1)', - ); - await driver.waitForSelector({ - css: '[data-testid="transaction-list-item-primary-currency"]', - text: '-0 ETH', - }); + await driver.wait(async () => { + const confirmedTxes = await driver.findElements( + '.transaction-list__completed-transactions .activity-list-item', + ); + return confirmedTxes.length === 1; + }, 10000); - // the transaction has the expected gas price - await driver.clickElement( - '[data-testid="transaction-list-item-primary-currency"]', - ); await driver.waitForSelector({ - css: '[data-testid="transaction-breakdown__gas-price"]', - text: '100', + css: '[data-testid="transaction-list-item-primary-currency"]', + text: '-1 ETH', }); }, ); }); - it('should display correct gas values for EIP-1559 transaction', async function () { + it('finds the transaction in the transactions list when sending to a Multisig Address', async function () { + const smartContract = SMART_CONTRACTS.MULTISIG; await withFixtures( { - dapp: true, - fixtures: new FixtureBuilder() - .withPermissionControllerConnectedToTestDapp() - .build(), + fixtures: new FixtureBuilder().build(), ganacheOptions: { ...defaultGanacheOptions, hardfork: 'london', }, + smartContract, title: this.test.fullTitle(), }, - async ({ driver }) => { - await unlockWallet(driver); - - await tempToggleSettingRedesignedTransactionConfirmations(driver); - - // initiates a transaction from the dapp - await openDapp(driver); - await driver.clickElement({ text: 'Create Token', tag: 'button' }); - const windowHandles = await driver.waitUntilXWindowHandles(3); - - const extension = windowHandles[0]; - await driver.switchToWindowWithTitle( - WINDOW_TITLES.Dialog, - windowHandles, + async ({ driver, contractRegistry, ganacheServer }) => { + const contractAddress = await contractRegistry.getContractAddress( + smartContract, ); + await logInWithBalanceValidation(driver, ganacheServer); - await driver.assertElementNotPresent( - { text: 'Data', tag: 'li' }, - { findElementGuard: { text: 'Estimated fee' } }, // make sure the Dialog has loaded - ); + // Wait for balance to load + await driver.delay(500); - await driver.clickElement('[data-testid="edit-gas-fee-icon"]'); - await driver.clickElement( - '[data-testid="edit-gas-fee-item-custom"]', + await driver.clickElement('[data-testid="eth-overview-send"]'); + await driver.fill( + 'input[placeholder="Enter public address (0x) or domain name"]', + contractAddress, ); - const baseFeeInput = await driver.findElement( - '[data-testid="base-fee-input"]', - ); - await baseFeeInput.fill('25'); - const priorityFeeInput = await driver.findElement( - '[data-testid="priority-fee-input"]', + const inputAmount = await driver.findElement( + 'input[placeholder="0"]', ); - await priorityFeeInput.fill('1'); - - await driver.clickElement({ text: 'Save', tag: 'button' }); - - await driver.waitForSelector({ - css: '.currency-display-component__text', - text: '0.0550741', - }); + await inputAmount.press('1'); + // Continue to next screen + await driver.clickElement({ text: 'Continue', tag: 'button' }); await driver.clickElement({ text: 'Confirm', tag: 'button' }); - await driver.waitUntilXWindowHandles(2); - await driver.switchToWindow(extension); - // Identify the transaction in the transactions list - await driver.waitForSelector( + // Go back to home screen to check txn + const balance = await driver.findElement( '[data-testid="eth-overview__primary-currency"]', ); + assert.ok(/^[\d.]+\sETH$/u.test(await balance.getText())); + await driver.clickElement( '[data-testid="account-overview__activity-tab"]', ); - await driver.waitForSelector( - '.transaction-list__completed-transactions .activity-list-item:nth-of-type(1)', - ); - await driver.waitForSelector({ - css: '[data-testid="transaction-list-item-primary-currency"]', - text: '-0 ETH', - }); - // the transaction has the expected gas value - await driver.clickElement( - '[data-testid="transaction-list-item-primary-currency"]', + await driver.findElement( + '.transaction-list__completed-transactions .activity-list-item', ); - await driver.waitForSelector({ - xpath: "//div[contains(text(), 'Base fee')]", - }); - - const allFeeValues = await driver.findElements( - '.currency-display-component__text', + // The previous findElement already serves as the guard here for the assertElementNotPresent + await driver.assertElementNotPresent( + '.transaction-status-label--failed', ); - - /** - * Below lines check that fee values are numeric. - * Because these values change for every e2e run, - * It's better to just check that the values are there and are numeric - */ - assert.equal(allFeeValues.length > 0, true); - - allFeeValues.forEach(async (feeValue) => { - assert.equal(/\d+\.?\d*/u.test(await feeValue.getText()), true); - }); }, ); }); - }); - describe('to non-contract address with data that matches ERC20 transfer data signature', function () { - it('renders the correct recipient on the confirmation screen', async function () { + it('shows no error when cancel transaction when sending via QR code', async function () { await withFixtures( { - fixtures: new FixtureBuilder() - .withPreferencesController({ - featureFlags: { - sendHexData: true, - }, - }) - .withPreferencesControllerPetnamesDisabled() - .build(), + fixtures: new FixtureBuilder().build(), ganacheOptions: defaultGanacheOptions, title: this.test.fullTitle(), }, async ({ driver }) => { await unlockWallet(driver); - await tempToggleSettingRedesignedTransactionConfirmations(driver); - await driver.assertElementNotPresent('.loading-overlay__spinner'); const balance = await driver.findElement( '[data-testid="eth-overview__primary-currency"]', @@ -451,37 +533,254 @@ describe('Send ETH', function () { assert.ok(/^[\d.]+\sETH$/u.test(await balance.getText())); await openActionMenuAndStartSendFlow(driver); - - await driver.fill( - 'input[placeholder="Enter public address (0x) or domain name"]', - '0xc427D562164062a23a5cFf596A4a3208e72Acd28', + // choose to scan via QR code + await driver.clickElement('[data-testid="ens-qr-scan-button"]'); + await driver.findVisibleElement('[data-testid="qr-scanner-modal"]'); + // cancel action will close the dialog and shut down camera initialization + await driver.waitForSelector({ + css: '.qr-scanner__error', + text: "We couldn't access your camera. Please give it another try.", + }); + await driver.clickElement({ text: 'Cancel', tag: 'button' }); + await driver.assertElementNotPresent( + '[data-testid="qr-scanner-modal"]', ); + }, + ); + }); - await driver.fill( - 'textarea[placeholder="Optional', - '0xa9059cbb0000000000000000000000002f318C334780961FB129D2a6c30D0763d9a5C970000000000000000000000000000000000000000000000000000000000000000a', - ); + describe('from dapp using advanced gas controls', function () { + it('should display the correct gas price on the legacy transaction', async function () { + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withPermissionControllerConnectedToTestDapp() + .build(), + ganacheOptions: defaultGanacheOptions, + defaultGanacheOptions, + title: this.test.fullTitle(), + }, + async ({ driver }) => { + await unlockWallet(driver); + + // initiates a send from the dapp + await openDapp(driver); + await driver.clickElement({ text: 'Send', tag: 'button' }); + const windowHandles = await driver.waitUntilXWindowHandles(3); + const extension = windowHandles[0]; + await driver.switchToWindowWithTitle( + WINDOW_TITLES.Dialog, + windowHandles, + ); + + await driver.clickElement('[data-testid="edit-gas-fee-icon"]'); + await driver.waitForSelector({ + text: '0.00021 ETH', + }); + await driver.clickElement({ + text: 'Edit suggested gas fee', + tag: 'button', + }); + await driver.waitForSelector({ + text: 'Edit priority', + tag: 'header', + }); + await editGasFeeForm(driver, '21000', '100'); + await driver.findElement({ + css: '[data-testid="first-gas-field"]', + text: '0.0021 ETH', + }); + + await driver.findElement({ + css: '[data-testid="native-currency"]', + text: '$3.57', + }); + + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + await driver.waitUntilXWindowHandles(2); + await driver.switchToWindow(extension); + + // finds the transaction in the transactions list + await driver.clickElement( + '[data-testid="account-overview__activity-tab"]', + ); + await driver.waitForSelector( + '.transaction-list__completed-transactions .activity-list-item:nth-of-type(1)', + ); + await driver.waitForSelector({ + css: '[data-testid="transaction-list-item-primary-currency"]', + text: '-0 ETH', + }); + + // the transaction has the expected gas price + await driver.clickElement( + '[data-testid="transaction-list-item-primary-currency"]', + ); + await driver.waitForSelector({ + css: '[data-testid="transaction-breakdown__gas-price"]', + text: '100', + }); + }, + ); + }); + + it('should display correct gas values for EIP-1559 transaction', async function () { + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withPermissionControllerConnectedToTestDapp() + .build(), + ganacheOptions: { + ...defaultGanacheOptions, + hardfork: 'london', + }, + title: this.test.fullTitle(), + }, + async ({ driver }) => { + await unlockWallet(driver); + + // initiates a transaction from the dapp + await openDapp(driver); + await driver.clickElement({ + text: 'Create Token', + tag: 'button', + }); + const windowHandles = await driver.waitUntilXWindowHandles(3); + + const extension = windowHandles[0]; + await driver.switchToWindowWithTitle( + WINDOW_TITLES.Dialog, + windowHandles, + ); + + await driver.clickElement('[data-testid="edit-gas-fee-icon"]'); + await driver.clickElement( + '[data-testid="edit-gas-fee-item-custom"]', + ); + + const baseFeeInput = await driver.findElement( + '[data-testid="base-fee-input"]', + ); + await baseFeeInput.fill('25'); + const priorityFeeInput = await driver.findElement( + '[data-testid="priority-fee-input"]', + ); + await priorityFeeInput.fill('1'); + + await driver.clickElement({ text: 'Save', tag: 'button' }); + + await driver.findElement({ + css: '[data-testid="first-gas-field"]', + text: '0.045 ETH', + }); + + await driver.findElement({ + css: '[data-testid="native-currency"]', + text: '$76.57', + }); + + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + await driver.waitUntilXWindowHandles(2); + await driver.switchToWindow(extension); + + // Identify the transaction in the transactions list + await driver.waitForSelector( + '[data-testid="eth-overview__primary-currency"]', + ); + + await driver.clickElement( + '[data-testid="account-overview__activity-tab"]', + ); + await driver.waitForSelector( + '.transaction-list__completed-transactions .activity-list-item:nth-of-type(1)', + ); + await driver.waitForSelector({ + css: '[data-testid="transaction-list-item-primary-currency"]', + text: '-0 ETH', + }); + + // the transaction has the expected gas value + await driver.clickElement( + '[data-testid="transaction-list-item-primary-currency"]', + ); + + await driver.waitForSelector({ + xpath: "//div[contains(text(), 'Base fee')]", + }); + + const allFeeValues = await driver.findElements( + '.currency-display-component__text', + ); + + /** + * Below lines check that fee values are numeric. + * Because these values change for every e2e run, + * It's better to just check that the values are there and are numeric + */ + assert.equal(allFeeValues.length > 0, true); + + allFeeValues.forEach(async (feeValue) => { + assert.equal(/\d+\.?\d*/u.test(await feeValue.getText()), true); + }); + }, + ); + }); + }); - await driver.findClickableElement({ - text: 'Continue', - tag: 'button', - }); - await driver.clickElement({ text: 'Continue', tag: 'button' }); + describe('to non-contract address with data that matches ERC20 transfer data signature', function () { + it('renders the correct recipient on the confirmation screen', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder() + .withPreferencesController({ + featureFlags: { + sendHexData: true, + }, + }) + .withPreferencesControllerPetnamesDisabled() + .build(), + ganacheOptions: defaultGanacheOptions, + title: this.test.fullTitle(), + }, + async ({ driver }) => { + await unlockWallet(driver); - await driver.findClickableElement( - '[data-testid="sender-to-recipient__name"]', - ); - await driver.clickElement( - '[data-testid="sender-to-recipient__name"]', - ); + await driver.assertElementNotPresent('.loading-overlay__spinner'); + const balance = await driver.findElement( + '[data-testid="eth-overview__primary-currency"]', + ); + assert.ok(/^[\d.]+\sETH$/u.test(await balance.getText())); - const recipientAddress = await driver.findElements({ - text: '0xc427D562164062a23a5cFf596A4a3208e72Acd28', - }); + await openActionMenuAndStartSendFlow(driver); - assert.equal(recipientAddress.length, 1); - }, - ); + await driver.fill( + 'input[placeholder="Enter public address (0x) or domain name"]', + '0xc427D562164062a23a5cFf596A4a3208e72Acd28', + ); + + await driver.fill( + 'textarea[placeholder="Optional', + '0xa9059cbb0000000000000000000000002f318C334780961FB129D2a6c30D0763d9a5C970000000000000000000000000000000000000000000000000000000000000000a', + ); + + await driver.findClickableElement({ + text: 'Continue', + tag: 'button', + }); + await driver.clickElement({ text: 'Continue', tag: 'button' }); + + await driver.clickElement('[data-testid="recipient-address"]'); + + const recipientAddress = await driver.findElements({ + text: '0xc427D562164062a23a5cFf596A4a3208e72Acd28', + }); + + assert.equal(recipientAddress.length, 1); + }, + ); + }); }); }); }); diff --git a/test/e2e/tests/transaction/send-hex-address.spec.js b/test/e2e/tests/transaction/send-hex-address.spec.js index b6ad969c6735..64522c706f6b 100644 --- a/test/e2e/tests/transaction/send-hex-address.spec.js +++ b/test/e2e/tests/transaction/send-hex-address.spec.js @@ -11,228 +11,377 @@ const FixtureBuilder = require('../../fixture-builder'); const hexPrefixedAddress = '0x2f318C334780961FB129D2a6c30D0763d9a5C970'; const nonHexPrefixedAddress = hexPrefixedAddress.substring(2); -describe('Send ETH to a 40 character hexadecimal address', function () { - it('should ensure the address is prefixed with 0x when pasted and should send ETH to a valid hexadecimal address', async function () { - await withFixtures( - { - fixtures: new FixtureBuilder() - .withPreferencesControllerPetnamesDisabled() - .build(), - ganacheOptions: defaultGanacheOptions, - title: this.test.fullTitle(), - }, - async ({ driver, ganacheServer }) => { - await logInWithBalanceValidation(driver, ganacheServer); - - // Send ETH - await openActionMenuAndStartSendFlow(driver); - // Paste address without hex prefix - await driver.pasteIntoField( - 'input[placeholder="Enter public address (0x) or domain name"]', - nonHexPrefixedAddress, - ); - await driver.findElement({ - css: '.ens-input__selected-input__title', - text: '0x2f318...5C970', - }); - await driver.clickElement({ text: 'Continue', tag: 'button' }); - - // Confirm transaction - await driver.clickElement({ text: 'Confirm', tag: 'button' }); - await driver.clickElement( - '[data-testid="account-overview__activity-tab"]', - ); - const sendTransactionListItem = await driver.findElement( - '.transaction-list__completed-transactions .activity-list-item', - ); - await sendTransactionListItem.click(); - await driver.clickElement({ text: 'Activity log', tag: 'summary' }); - await driver.clickElement('[data-testid="sender-to-recipient__name"]'); - - // Verify address in activity log - await driver.findElement({ - css: '.nickname-popover__public-address', - text: hexPrefixedAddress, - }); - }, - ); - }); - it('should ensure the address is prefixed with 0x when typed and should send ETH to a valid hexadecimal address', async function () { - await withFixtures( - { - fixtures: new FixtureBuilder() - .withPreferencesControllerPetnamesDisabled() - .build(), - ganacheOptions: defaultGanacheOptions, - title: this.test.fullTitle(), - }, - async ({ driver, ganacheServer }) => { - await logInWithBalanceValidation(driver, ganacheServer); - - // Send ETH - await openActionMenuAndStartSendFlow(driver); - // Type address without hex prefix - await driver.fill( - 'input[placeholder="Enter public address (0x) or domain name"]', - nonHexPrefixedAddress, - ); - await driver.findElement({ - css: '.ens-input__selected-input__title', - text: '0x2f318...5C970', - }); - await driver.clickElement({ text: 'Continue', tag: 'button' }); - - // Confirm transaction - await driver.clickElement({ text: 'Confirm', tag: 'button' }); - await driver.clickElement( - '[data-testid="account-overview__activity-tab"]', - ); - await driver.clickElement( - '.transaction-list__completed-transactions .activity-list-item', - ); - await driver.clickElement({ text: 'Activity log', tag: 'summary' }); - await driver.clickElement('[data-testid="sender-to-recipient__name"]'); - - // Verify address in activity log - await driver.findElement({ - css: '.nickname-popover__public-address', - text: hexPrefixedAddress, - }); - }, - ); +describe('Old confirmation screens', function () { + describe('Send ERC20 to a 40 character hexadecimal address', function () { + const smartContract = SMART_CONTRACTS.HST; + + it('should ensure the address is prefixed with 0x when pasted and should send TST to a valid hexadecimal address', async function () { + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withPreferencesControllerPetnamesDisabled() + .withTokensControllerERC20() + .build(), + ganacheOptions: defaultGanacheOptions, + smartContract, + title: this.test.fullTitle(), + }, + async ({ driver, ganacheServer }) => { + await logInWithBalanceValidation(driver, ganacheServer); + + await tempToggleSettingRedesignedTransactionConfirmations(driver); + + // Send TST + await driver.clickElement( + '[data-testid="account-overview__asset-tab"]', + ); + await driver.clickElement( + '[data-testid="multichain-token-list-button"]', + ); + await driver.clickElement('[data-testid="coin-overview-send"]'); + // Paste address without hex prefix + await driver.pasteIntoField( + 'input[placeholder="Enter public address (0x) or domain name"]', + nonHexPrefixedAddress, + ); + await driver.findElement({ + css: '.ens-input__selected-input__title', + text: '0x2f318...5C970', + }); + + await driver.clickElement({ text: 'Continue', tag: 'button' }); + + // Confirm transaction + await driver.findElement({ + css: '.confirm-page-container-summary__title', + text: '0', + }); + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + await driver.clickElement( + '[data-testid="account-overview__activity-tab"]', + ); + await driver.findElement( + '.transaction-list__completed-transactions .activity-list-item:nth-of-type(1)', + ); + const sendTransactionListItem = await driver.findElement( + '.transaction-list__completed-transactions .activity-list-item:nth-of-type(1)', + ); + await sendTransactionListItem.click(); + await driver.clickElement({ text: 'Activity log', tag: 'summary' }); + await driver.clickElement( + '[data-testid="sender-to-recipient__name"]', + ); + + // Verify address in activity log + await driver.findElement({ + css: '.nickname-popover__public-address', + text: hexPrefixedAddress, + }); + }, + ); + }); + + it('should ensure the address is prefixed with 0x when typed and should send TST to a valid hexadecimal address', async function () { + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withPreferencesControllerPetnamesDisabled() + .withTokensControllerERC20() + .build(), + ganacheOptions: defaultGanacheOptions, + smartContract, + title: this.test.fullTitle(), + }, + async ({ driver, ganacheServer }) => { + await logInWithBalanceValidation(driver, ganacheServer); + + await tempToggleSettingRedesignedTransactionConfirmations(driver); + + // Send TST + await driver.clickElement( + '[data-testid="account-overview__asset-tab"]', + ); + await driver.clickElement( + '[data-testid="multichain-token-list-button"]', + ); + await driver.clickElement('[data-testid="coin-overview-send"]'); + + // Type address without hex prefix + await driver.fill( + 'input[placeholder="Enter public address (0x) or domain name"]', + nonHexPrefixedAddress, + ); + await driver.findElement({ + css: '.ens-input__selected-input__title', + text: '0x2f318...5C970', + }); + + await driver.clickElement({ text: 'Continue', tag: 'button' }); + + // Confirm transaction + await driver.findElement({ + css: '.confirm-page-container-summary__title', + text: '0', + }); + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + await driver.clickElement( + '[data-testid="account-overview__activity-tab"]', + ); + await driver.findElement( + '.transaction-list__completed-transactions .activity-list-item:nth-of-type(1)', + ); + const sendTransactionListItem = await driver.findElement( + '.transaction-list__completed-transactions .activity-list-item:nth-of-type(1)', + ); + await sendTransactionListItem.click(); + await driver.clickElement({ text: 'Activity log', tag: 'summary' }); + await driver.clickElement( + '[data-testid="sender-to-recipient__name"]', + ); + + // Verify address in activity log + await driver.findElement({ + css: '.nickname-popover__public-address', + text: hexPrefixedAddress, + }); + }, + ); + }); }); }); -describe('Send ERC20 to a 40 character hexadecimal address', function () { - const smartContract = SMART_CONTRACTS.HST; - - it('should ensure the address is prefixed with 0x when pasted and should send TST to a valid hexadecimal address', async function () { - await withFixtures( - { - dapp: true, - fixtures: new FixtureBuilder() - .withPreferencesControllerPetnamesDisabled() - .withTokensControllerERC20() - .build(), - ganacheOptions: defaultGanacheOptions, - smartContract, - title: this.test.fullTitle(), - }, - async ({ driver, ganacheServer }) => { - await logInWithBalanceValidation(driver, ganacheServer); - - await tempToggleSettingRedesignedTransactionConfirmations(driver); - - // Send TST - await driver.clickElement( - '[data-testid="account-overview__asset-tab"]', - ); - await driver.clickElement( - '[data-testid="multichain-token-list-button"]', - ); - await driver.clickElement('[data-testid="coin-overview-send"]'); - // Paste address without hex prefix - await driver.pasteIntoField( - 'input[placeholder="Enter public address (0x) or domain name"]', - nonHexPrefixedAddress, - ); - await driver.findElement({ - css: '.ens-input__selected-input__title', - text: '0x2f318...5C970', - }); - - await driver.clickElement({ text: 'Continue', tag: 'button' }); - - // Confirm transaction - await driver.findElement({ - css: '.confirm-page-container-summary__title', - text: '0', - }); - await driver.clickElement({ text: 'Confirm', tag: 'button' }); - await driver.clickElement( - '[data-testid="account-overview__activity-tab"]', - ); - await driver.findElement( - '.transaction-list__completed-transactions .activity-list-item:nth-of-type(1)', - ); - const sendTransactionListItem = await driver.findElement( - '.transaction-list__completed-transactions .activity-list-item:nth-of-type(1)', - ); - await sendTransactionListItem.click(); - await driver.clickElement({ text: 'Activity log', tag: 'summary' }); - await driver.clickElement('[data-testid="sender-to-recipient__name"]'); - - // Verify address in activity log - await driver.findElement({ - css: '.nickname-popover__public-address', - text: hexPrefixedAddress, - }); - }, - ); +describe('Redesigned confirmation screens', function () { + describe('Send ETH to a 40 character hexadecimal address', function () { + it('should ensure the address is prefixed with 0x when pasted and should send ETH to a valid hexadecimal address', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder() + .withPreferencesControllerPetnamesDisabled() + .build(), + ganacheOptions: defaultGanacheOptions, + title: this.test.fullTitle(), + }, + async ({ driver, ganacheServer }) => { + await logInWithBalanceValidation(driver, ganacheServer); + + // Send ETH + await openActionMenuAndStartSendFlow(driver); + // Paste address without hex prefix + await driver.pasteIntoField( + 'input[placeholder="Enter public address (0x) or domain name"]', + nonHexPrefixedAddress, + ); + await driver.findElement({ + css: '.ens-input__selected-input__title', + text: '0x2f318...5C970', + }); + await driver.clickElement({ text: 'Continue', tag: 'button' }); + + // Confirm transaction + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + await driver.clickElement( + '[data-testid="account-overview__activity-tab"]', + ); + const sendTransactionListItem = await driver.findElement( + '.transaction-list__completed-transactions .activity-list-item', + ); + await sendTransactionListItem.click(); + await driver.clickElement({ text: 'Activity log', tag: 'summary' }); + await driver.clickElement( + '[data-testid="sender-to-recipient__name"]', + ); + + // Verify address in activity log + await driver.findElement({ + css: '.nickname-popover__public-address', + text: hexPrefixedAddress, + }); + }, + ); + }); + + it('should ensure the address is prefixed with 0x when typed and should send ETH to a valid hexadecimal address', async function () { + await withFixtures( + { + fixtures: new FixtureBuilder() + .withPreferencesControllerPetnamesDisabled() + .build(), + ganacheOptions: defaultGanacheOptions, + title: this.test.fullTitle(), + }, + async ({ driver, ganacheServer }) => { + await logInWithBalanceValidation(driver, ganacheServer); + + // Send ETH + await openActionMenuAndStartSendFlow(driver); + // Type address without hex prefix + await driver.fill( + 'input[placeholder="Enter public address (0x) or domain name"]', + nonHexPrefixedAddress, + ); + await driver.findElement({ + css: '.ens-input__selected-input__title', + text: '0x2f318...5C970', + }); + await driver.clickElement({ text: 'Continue', tag: 'button' }); + + // Confirm transaction + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + await driver.clickElement( + '[data-testid="account-overview__activity-tab"]', + ); + await driver.clickElement( + '.transaction-list__completed-transactions .activity-list-item', + ); + await driver.clickElement({ text: 'Activity log', tag: 'summary' }); + await driver.clickElement( + '[data-testid="sender-to-recipient__name"]', + ); + + // Verify address in activity log + await driver.findElement({ + css: '.nickname-popover__public-address', + text: hexPrefixedAddress, + }); + }, + ); + }); }); - it('should ensure the address is prefixed with 0x when typed and should send TST to a valid hexadecimal address', async function () { - await withFixtures( - { - dapp: true, - fixtures: new FixtureBuilder() - .withPreferencesControllerPetnamesDisabled() - .withTokensControllerERC20() - .build(), - ganacheOptions: defaultGanacheOptions, - smartContract, - title: this.test.fullTitle(), - }, - async ({ driver, ganacheServer }) => { - await logInWithBalanceValidation(driver, ganacheServer); - - await tempToggleSettingRedesignedTransactionConfirmations(driver); - - // Send TST - await driver.clickElement( - '[data-testid="account-overview__asset-tab"]', - ); - await driver.clickElement( - '[data-testid="multichain-token-list-button"]', - ); - await driver.clickElement('[data-testid="coin-overview-send"]'); - - // Type address without hex prefix - await driver.fill( - 'input[placeholder="Enter public address (0x) or domain name"]', - nonHexPrefixedAddress, - ); - await driver.findElement({ - css: '.ens-input__selected-input__title', - text: '0x2f318...5C970', - }); - - await driver.clickElement({ text: 'Continue', tag: 'button' }); - - // Confirm transaction - await driver.findElement({ - css: '.confirm-page-container-summary__title', - text: '0', - }); - await driver.clickElement({ text: 'Confirm', tag: 'button' }); - await driver.clickElement( - '[data-testid="account-overview__activity-tab"]', - ); - await driver.findElement( - '.transaction-list__completed-transactions .activity-list-item:nth-of-type(1)', - ); - const sendTransactionListItem = await driver.findElement( - '.transaction-list__completed-transactions .activity-list-item:nth-of-type(1)', - ); - await sendTransactionListItem.click(); - await driver.clickElement({ text: 'Activity log', tag: 'summary' }); - await driver.clickElement('[data-testid="sender-to-recipient__name"]'); - - // Verify address in activity log - await driver.findElement({ - css: '.nickname-popover__public-address', - text: hexPrefixedAddress, - }); - }, - ); + + describe('Send ERC20 to a 40 character hexadecimal address', function () { + const smartContract = SMART_CONTRACTS.HST; + + it('should ensure the address is prefixed with 0x when pasted and should send TST to a valid hexadecimal address', async function () { + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withPreferencesControllerPetnamesDisabled() + .withTokensControllerERC20() + .build(), + ganacheOptions: defaultGanacheOptions, + smartContract, + title: this.test.fullTitle(), + }, + async ({ driver, ganacheServer }) => { + await logInWithBalanceValidation(driver, ganacheServer); + + // Send TST + await driver.clickElement( + '[data-testid="account-overview__asset-tab"]', + ); + await driver.clickElement( + '[data-testid="multichain-token-list-button"]', + ); + await driver.clickElement('[data-testid="coin-overview-send"]'); + // Paste address without hex prefix + await driver.pasteIntoField( + 'input[placeholder="Enter public address (0x) or domain name"]', + nonHexPrefixedAddress, + ); + await driver.findElement({ + css: '.ens-input__selected-input__title', + text: '0x2f318...5C970', + }); + + await driver.clickElement({ text: 'Continue', tag: 'button' }); + + // Confirm transaction + await driver.findElement({ + css: 'h2', + text: '0 ETH', + }); + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + await driver.clickElement( + '[data-testid="account-overview__activity-tab"]', + ); + await driver.findElement( + '.transaction-list__completed-transactions .activity-list-item:nth-of-type(1)', + ); + const sendTransactionListItem = await driver.findElement( + '.transaction-list__completed-transactions .activity-list-item:nth-of-type(1)', + ); + await sendTransactionListItem.click(); + await driver.clickElement({ text: 'Activity log', tag: 'summary' }); + await driver.clickElement( + '[data-testid="sender-to-recipient__name"]', + ); + + // Verify address in activity log + await driver.findElement({ + css: '.nickname-popover__public-address', + text: hexPrefixedAddress, + }); + }, + ); + }); + + it('should ensure the address is prefixed with 0x when typed and should send TST to a valid hexadecimal address', async function () { + await withFixtures( + { + dapp: true, + fixtures: new FixtureBuilder() + .withPreferencesControllerPetnamesDisabled() + .withTokensControllerERC20() + .build(), + ganacheOptions: defaultGanacheOptions, + smartContract, + title: this.test.fullTitle(), + }, + async ({ driver, ganacheServer }) => { + await logInWithBalanceValidation(driver, ganacheServer); + + // Send TST + await driver.clickElement( + '[data-testid="account-overview__asset-tab"]', + ); + await driver.clickElement( + '[data-testid="multichain-token-list-button"]', + ); + await driver.clickElement('[data-testid="coin-overview-send"]'); + + // Type address without hex prefix + await driver.fill( + 'input[placeholder="Enter public address (0x) or domain name"]', + nonHexPrefixedAddress, + ); + await driver.findElement({ + css: '.ens-input__selected-input__title', + text: '0x2f318...5C970', + }); + + await driver.clickElement({ text: 'Continue', tag: 'button' }); + + // Confirm transaction + await driver.findElement({ + css: 'h2', + text: '0 ETH', + }); + await driver.clickElement({ text: 'Confirm', tag: 'button' }); + await driver.clickElement( + '[data-testid="account-overview__activity-tab"]', + ); + await driver.findElement( + '.transaction-list__completed-transactions .activity-list-item:nth-of-type(1)', + ); + const sendTransactionListItem = await driver.findElement( + '.transaction-list__completed-transactions .activity-list-item:nth-of-type(1)', + ); + await sendTransactionListItem.click(); + await driver.clickElement({ text: 'Activity log', tag: 'summary' }); + await driver.clickElement( + '[data-testid="sender-to-recipient__name"]', + ); + + // Verify address in activity log + await driver.findElement({ + css: '.nickname-popover__public-address', + text: hexPrefixedAddress, + }); + }, + ); + }); }); }); diff --git a/ui/pages/confirmations/components/confirm/info/hooks/use-token-values.ts b/ui/pages/confirmations/components/confirm/info/hooks/use-token-values.ts index a8dc62e5719c..53987ffd06e6 100644 --- a/ui/pages/confirmations/components/confirm/info/hooks/use-token-values.ts +++ b/ui/pages/confirmations/components/confirm/info/hooks/use-token-values.ts @@ -61,7 +61,6 @@ export const useTokenValues = (transactionMeta: TransactionMeta) => { ).toFixed(), isDecodedTransferValuePending: false, }; - // }; }, [value, decimals]); const [exchangeRate, setExchangeRate] = useState(); diff --git a/ui/pages/confirmations/components/confirm/info/token-transfer/__snapshots__/transaction-flow-section.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/token-transfer/__snapshots__/transaction-flow-section.test.tsx.snap index b42f23b15d4b..89750227da0f 100644 --- a/ui/pages/confirmations/components/confirm/info/token-transfer/__snapshots__/transaction-flow-section.test.tsx.snap +++ b/ui/pages/confirmations/components/confirm/info/token-transfer/__snapshots__/transaction-flow-section.test.tsx.snap @@ -28,6 +28,7 @@ exports[` renders correctly 1`] = `
renders correctly 1`] = `
{ flexDirection: FlexDirection.Column, }} > - + { flexDirection: FlexDirection.Column, }} > - +

1 of diff --git a/ui/pages/confirmations/components/confirm/nav/nav.tsx b/ui/pages/confirmations/components/confirm/nav/nav.tsx index 4a58e1c364dd..2d962fb5b6ab 100644 --- a/ui/pages/confirmations/components/confirm/nav/nav.tsx +++ b/ui/pages/confirmations/components/confirm/nav/nav.tsx @@ -120,6 +120,7 @@ const Nav = () => { color={TextColor.textAlternative} marginInline={2} variant={TextVariant.bodySm} + data-testid="confirm-page-nav-position" > {currentConfirmationPosition + 1} of {pendingConfirmations.length}