test(e2e): de-flake wrap (#6589)

* test(e2e): mv swap to dir

* test(e2e): split swap/wrap/errors

* test(e2e): de-flake wrap

cypress/e2e/swap/wrap.test.ts

-import { SupportedChainId, WETH9 } from '@uniswap/sdk-core'
+import { CurrencyAmount, SupportedChainId, WETH9 } from '@uniswap/sdk-core'
 
 import { getTestSelector } from '../../utils'
 
+const WETH = WETH9[SupportedChainId.MAINNET]
+
+function getWethBalance() {
+  return cy
+    .hardhat()
+    .then((hardhat) => hardhat.getBalance(hardhat.wallet, WETH))
+    .then((balance) => Number(balance.toFixed(1)))
+}
+
 describe('Swap', () => {
+  beforeEach(() => {
+    cy.visit('/swap', { ethereum: 'hardhat' }).hardhat({ automine: false })
+  })
+
   it('should be able to wrap ETH', () => {
-    const BALANCE_INCREMENT = 1
-    cy.visit('/swap', { ethereum: 'hardhat' })
-      .hardhat()
-      .then((hardhat) => {
-        cy.then(() => hardhat.getBalance(hardhat.wallet.address, WETH9[SupportedChainId.MAINNET]))
-          .then((balance) => Number(balance.toFixed(1)))
-          .then((initialWethBalance) => {
-            // Select WETH for the token output.
-            cy.get('#swap-currency-output .open-currency-select-button').click()
-            cy.contains('WETH').click()
-
-            // Enter the amount to wrap.
-            cy.get('#swap-currency-output .token-amount-input').clear().type(BALANCE_INCREMENT.toString())
-            cy.get('#swap-currency-input .token-amount-input').should('not.equal', '')
-
-            // Click the wrap button.
-            cy.get(getTestSelector('wrap-button')).should('not.be.disabled')
-            cy.get(getTestSelector('wrap-button')).click()
-
-            // The pending transaction indicator should be visible.
-            cy.get(getTestSelector('web3-status-connected')).should('have.descendants', ':contains("1 Pending")')
-
-            // <automine transaction>
-
-            // The pending transaction indicator should be gone.
-            cy.get(getTestSelector('web3-status-connected')).should('not.have.descendants', ':contains("1 Pending")')
-
-            // The UI balance should have increased.
-            cy.get('#swap-currency-output [data-testid="balance-text"]').should(
-              'have.text',
-              `Balance: ${initialWethBalance + BALANCE_INCREMENT}`
-            )
-
-            // There should be a successful wrap notification.
-            cy.contains('Wrapped').should('exist')
-
-            // The user's WETH account balance should have increased
-            cy.then(() => hardhat.getBalance(hardhat.wallet.address, WETH9[SupportedChainId.MAINNET]))
-              .then((balance) => Number(balance.toFixed(1)))
-              .should('eq', initialWethBalance + BALANCE_INCREMENT)
-          })
-      })
+    getWethBalance().then((initialWethBalance) => {
+      // Select WETH for the token output.
+      cy.get('#swap-currency-output').contains('Select token').click()
+      cy.contains('WETH').click()
+      cy.contains('Enter ETH amount')
+
+      // Enter the amount to wrap.
+      cy.get('#swap-currency-output .token-amount-input').click().type('1')
+      cy.get('#swap-currency-input .token-amount-input').should('have.value', 1)
+
+      // Click the wrap button.
+      cy.contains('Wrap').click()
+
+      // The pending transaction indicator should reflect the state.
+      cy.get(getTestSelector('web3-status-connected')).should('contain', '1 Pending')
+      cy.hardhat().then((hardhat) => hardhat.mine())
+      cy.get(getTestSelector('web3-status-connected')).should('not.contain', 'Pending')
+
+      // There should be a successful wrap notification.
+      cy.get(getTestSelector('transaction-popup')).contains('Wrapped')
+      cy.get(getTestSelector('transaction-popup')).contains('1.00 ETH for 1.00 WETH')
+
+      // The UI balance should have increased.
+      cy.get('#swap-currency-output').should('contain', `Balance: ${initialWethBalance + 1}`)
+
+      // The user's WETH account balance should have increased
+      getWethBalance().should('equal', initialWethBalance + 1)
+    })
   })
 
   it('should be able to unwrap WETH', () => {
-    const BALANCE_INCREMENT = 1
-    cy.visit('/swap', { ethereum: 'hardhat' })
-      .hardhat()
-      .then((hardhat) => {
-        cy.then(() => hardhat.getBalance(hardhat.wallet.address, WETH9[SupportedChainId.MAINNET])).then(
-          (initialBalance) => {
-            // Select WETH for the token output.
-            cy.get('#swap-currency-output .open-currency-select-button').click()
-            cy.contains('WETH').click()
-
-            // Enter the amount to wrap.
-            cy.get('#swap-currency-output .token-amount-input').clear().type(BALANCE_INCREMENT.toString())
-            cy.get('#swap-currency-input .token-amount-input').should('not.equal', '')
-
-            // Click the wrap button.
-            cy.get(getTestSelector('wrap-button')).should('not.be.disabled')
-            cy.get(getTestSelector('wrap-button')).click()
-
-            // <automine transaction>
-
-            // The pending transaction indicator should be visible.
-            cy.contains('1 Pending').should('exist')
-            // The user should see a notification telling them they successfully wrapped their ETH.
-            cy.contains('Wrapped').should('exist')
-
-            // Switch to unwrapping the ETH we just wrapped.
-            cy.get(getTestSelector('swap-currency-button')).click()
-            cy.get(getTestSelector('wrap-button')).should('not.be.disabled')
-
-            // Click the Unwrap button.
-            cy.get(getTestSelector('wrap-button')).click()
-
-            // The pending transaction indicator should be visible.
-            cy.contains('1 Pending').should('exist')
-
-            // <automine transaction>
-
-            // The pending transaction indicator should be gone.
-            cy.contains('1 Pending').should('not.exist')
-            // The user should see a notification telling them they successfully unwrapped their ETH.
-            cy.contains('Unwrapped').should('exist')
-
-            // The UI balance should have decreased.
-            cy.get('#swap-currency-input [data-testid="balance-text"]').should(
-              'have.text',
-              `Balance: ${initialBalance.toFixed(0)}`
-            )
-
-            // There should be a successful unwrap notification.
-            cy.contains('Unwrapped').should('exist')
-
-            // The user's WETH account balance should not have changed from the initial balance
-            cy.then(() => hardhat.getBalance(hardhat.wallet.address, WETH9[SupportedChainId.MAINNET]))
-              .then((balance) => balance.toFixed(0))
-              .should('eq', initialBalance.toFixed(0))
-          }
-        )
-      })
+    cy.hardhat().then(async (hardhat) => {
+      await hardhat.fund(hardhat.wallet, CurrencyAmount.fromRawAmount(WETH, 1e18))
+      await hardhat.mine()
+    })
+
+    getWethBalance().then((initialWethBalance) => {
+      // Select WETH for the token output.
+      cy.get('#swap-currency-output').contains('Select token').click()
+      cy.contains('WETH').click()
+
+      // Swap input/output to unwrap WETH.
+      cy.get(getTestSelector('swap-currency-button')).click()
+      cy.contains('Enter WETH amount')
+
+      // Enter the amount to unwrap.
+      cy.get('#swap-currency-output .token-amount-input').click().type('1')
+      cy.get('#swap-currency-input .token-amount-input').should('have.value', 1)
+
+      // Click the unwrap button.
+      cy.contains('Unwrap').click()
+
+      // The pending transaction indicator should reflect the state.
+      cy.get(getTestSelector('web3-status-connected')).should('contain', '1 Pending')
+      cy.hardhat().then((hardhat) => hardhat.mine())
+      cy.get(getTestSelector('web3-status-connected')).should('not.contain', 'Pending')
+
+      // There should be a successful wrap notification.
+      cy.get(getTestSelector('transaction-popup')).contains('Unwrapped')
+      cy.get(getTestSelector('transaction-popup')).contains('1.00 WETH for 1.00 ETH')
+
+      // The UI balance should have increased.
+      cy.get('#swap-currency-input').should('contain', `Balance: ${initialWethBalance - 1}`)
+
+      // The user's WETH account balance should have increased
+      getWethBalance().should('equal', initialWethBalance - 1)
+    })
   })
 })

src/components/AccountDrawer/MiniPortfolio/PortfolioRow.tsx

@@ -22,12 +22,14 @@ const EndColumn = styled(Column)`
 `
 
 export default function PortfolioRow({
+  ['data-testid']: testId,
   left,
   title,
   descriptor,
   right,
   onClick,
 }: {
+  'data-testid'?: string
   left: React.ReactNode
   title: React.ReactNode
   descriptor?: React.ReactNode
@@ -36,7 +38,7 @@ export default function PortfolioRow({
   onClick?: () => void
 }) {
   return (
-    <PortfolioRowWrapper onClick={onClick}>
+    <PortfolioRowWrapper data-testid={testId} onClick={onClick}>
       {left}
       <AutoColumn grow>
         {title}

src/components/Popups/TransactionPopup.tsx

@@ -29,6 +29,7 @@ function TransactionPopupContent({ tx, chainId }: { tx: TransactionDetails; chai
 
   return (
     <PortfolioRow
+      data-testid="transaction-popup"
       left={
         success ? (
           <Column>