diff --git a/wallets/metamask/src/metamask.ts b/wallets/metamask/src/metamask.ts index 5c3c0e3fa..ef978a8c7 100644 --- a/wallets/metamask/src/metamask.ts +++ b/wallets/metamask/src/metamask.ts @@ -165,7 +165,9 @@ export class MetaMask { // ---- EXPERIMENTAL FEATURES ---- public readonly experimental = { - confirmTransactionAndWaitForMining: async () => await this.confirmTransactionAndWaitForMining() + confirmTransactionAndWaitForMining: async () => await this.confirmTransactionAndWaitForMining(), + openTransactionDetails: async (txIndex: number) => await this.openTransactionDetails(txIndex), + closeTransactionDetails: async () => await this.closeTransactionDetails() } private async confirmTransactionAndWaitForMining() { @@ -175,4 +177,12 @@ export class MetaMask { await this.notificationPage.confirmTransactionAndWaitForMining(this.extensionId) } + + private async openTransactionDetails(txIndex: number) { + await this.homePage.openTransactionDetails(txIndex) + } + + private async closeTransactionDetails() { + await this.homePage.closeTransactionDetails() + } } diff --git a/wallets/metamask/src/pages/HomePage/actions/index.ts b/wallets/metamask/src/pages/HomePage/actions/index.ts index b1f6cd3ea..c9b76deec 100644 --- a/wallets/metamask/src/pages/HomePage/actions/index.ts +++ b/wallets/metamask/src/pages/HomePage/actions/index.ts @@ -4,3 +4,4 @@ export * from './switchAccount' export * from './settings' export * from './switchNetwork' export * from './addNetwork' +export * from './transactionDetails' diff --git a/wallets/metamask/src/pages/HomePage/actions/transactionDetails.ts b/wallets/metamask/src/pages/HomePage/actions/transactionDetails.ts new file mode 100644 index 000000000..7e3b4ff7d --- /dev/null +++ b/wallets/metamask/src/pages/HomePage/actions/transactionDetails.ts @@ -0,0 +1,34 @@ +import type { Page } from '@playwright/test' +import { waitFor } from '../../../utils/waitFor' +import Selectors from '../selectors' + +const openTransactionDetails = async (page: Page, txIndex: number) => { + let visibleTxs = await page.locator(Selectors.activityTab.completedTransactions).count() + + while (txIndex >= visibleTxs) { + try { + await page.locator(Selectors.activityTab.viewMoreButton).click({ + timeout: 3_000 // TODO: Extract timeout. + }) + } catch (e) { + console.log(e) + throw new Error(`Transaction with index ${txIndex} not found. There are only ${visibleTxs} transactions visible.`) + } + + visibleTxs = await page.locator(Selectors.activityTab.completedTransactions).count() + } + + await page.locator(Selectors.activityTab.completedTransactions).nth(txIndex).click() + + // TODO: Extract timeout. + await waitFor(() => page.locator(Selectors.transactionPopover.closeButton).isVisible(), 3_000) +} + +const closeTransactionDetails = async (page: Page) => { + await page.locator(Selectors.transactionPopover.closeButton).click() +} + +export const transactionDetails = { + open: openTransactionDetails, + close: closeTransactionDetails +} diff --git a/wallets/metamask/src/pages/HomePage/page.ts b/wallets/metamask/src/pages/HomePage/page.ts index 648e9bfff..43cd037f4 100644 --- a/wallets/metamask/src/pages/HomePage/page.ts +++ b/wallets/metamask/src/pages/HomePage/page.ts @@ -1,5 +1,13 @@ import type { Page } from '@playwright/test' -import { addNetwork, importWalletFromPrivateKey, lock, settings, switchAccount, switchNetwork } from './actions' +import { + addNetwork, + importWalletFromPrivateKey, + lock, + settings, + switchAccount, + switchNetwork, + transactionDetails +} from './actions' import type { Network } from './actions' import Selectors from './selectors' import type { SettingsSidebarMenus } from './selectors/settings' @@ -53,4 +61,12 @@ export class HomePage { async addNetwork(network: Network) { await addNetwork(this.page, network) } + + async openTransactionDetails(txIndex: number) { + await transactionDetails.open(this.page, txIndex) + } + + async closeTransactionDetails() { + await transactionDetails.close(this.page) + } } diff --git a/wallets/metamask/src/pages/HomePage/selectors/index.ts b/wallets/metamask/src/pages/HomePage/selectors/index.ts index def680bc6..06c001027 100644 --- a/wallets/metamask/src/pages/HomePage/selectors/index.ts +++ b/wallets/metamask/src/pages/HomePage/selectors/index.ts @@ -36,7 +36,13 @@ const activityTab = { pendingUnapprovedTransactions: `${tabContainer} .transaction-list__pending-transactions .transaction-list-item .transaction-status-label--unapproved`, pendingApprovedTransactions: `${tabContainer} .transaction-list__pending-transactions .transaction-list-item .transaction-status-label--pending`, completedTransactionsList: `${tabContainer} .transaction-list__completed-transactions`, - completedTransactions: `${tabContainer} .transaction-list__completed-transactions .transaction-list-item` + completedTransactions: `${tabContainer} .transaction-list__completed-transactions .transaction-list-item`, + viewMoreButton: `${tabContainer} .transaction-list__completed-transactions button.btn-secondary` +} + +const popoverContainer = '.popover-container' +const transactionPopover = { + closeButton: `${popoverContainer} ${createDataTestSelector('popover-close')}` } export default { @@ -48,5 +54,6 @@ export default { networkDropdown, accountMenu, importAccountScreen, - recoveryPhraseReminder + recoveryPhraseReminder, + transactionPopover } diff --git a/wallets/metamask/test/e2e/metamask/confirmTransaction.spec.ts b/wallets/metamask/test/e2e/metamask/confirmTransaction.spec.ts index 4465a7e8c..07f55276c 100644 --- a/wallets/metamask/test/e2e/metamask/confirmTransaction.spec.ts +++ b/wallets/metamask/test/e2e/metamask/confirmTransaction.spec.ts @@ -29,7 +29,7 @@ test('should confirm legacy transaction', async ({ page, metamask }) => { await metamask.confirmTransaction() }) -test('should confirm EIP 1559 transaction', async ({ page, metamask }) => { +test('should confirm EIP-1559 transaction', async ({ page, metamask }) => { await page.locator('#addEthereumChain').click() await metamask.approveNewNetwork() diff --git a/wallets/metamask/test/e2e/metamask/confirmTransactionAndWaitForMining.spec.ts b/wallets/metamask/test/e2e/metamask/confirmTransactionAndWaitForMining.spec.ts index bc7de0d1d..66c6feb7d 100644 --- a/wallets/metamask/test/e2e/metamask/confirmTransactionAndWaitForMining.spec.ts +++ b/wallets/metamask/test/e2e/metamask/confirmTransactionAndWaitForMining.spec.ts @@ -34,7 +34,7 @@ test.skip('should confirm legacy transaction and wait for mining', async ({ page await metamask.experimental.confirmTransactionAndWaitForMining() }) -test.skip('should confirm EIP 1559 transaction and wait for mining', async ({ page, metamask }) => { +test.skip('should confirm EIP-1559 transaction and wait for mining', async ({ page, metamask }) => { await page.locator('#addEthereumChain').click() await metamask.approveNewNetwork() diff --git a/wallets/metamask/test/e2e/metamask/openTransactionDetails.spec.ts b/wallets/metamask/test/e2e/metamask/openTransactionDetails.spec.ts new file mode 100644 index 000000000..bea9a923a --- /dev/null +++ b/wallets/metamask/test/e2e/metamask/openTransactionDetails.spec.ts @@ -0,0 +1,25 @@ +import { waitFor } from '../../../src/utils/waitFor' +import { testWithMetaMask } from '../testWithMetaMask' + +const test = testWithMetaMask + +const { expect } = test + +test('should open transaction details', async ({ page, metamask, metamaskPage }) => { + await page.locator('#addEthereumChain').click() + + const isPopperVisible = await waitFor(() => metamaskPage.locator('.tippy-popper button').isVisible(), 1000, false) + if (isPopperVisible) { + await metamaskPage.locator('.tippy-popper button').click() + } + + await metamask.approveNewNetwork() + await metamask.approveSwitchNetwork() + + await page.locator('#sendEIP1559Button').click() + await metamask.experimental.confirmTransactionAndWaitForMining() + + await metamask.experimental.openTransactionDetails(0) + + await expect(metamaskPage.locator(metamask.homePage.selectors.transactionPopover.closeButton)).toBeVisible() +})