test(e2e): slippage failure (#6464)

* initial draft

* remove logs

* assertions improvement

* add more comments

* add explicit call to disable automine

* test out a very long timeout

* Revert "test out a very long timeout"

This reverts commit 0fc2666d6f4cb02739d14cf2aa07f041e6046669.

* improve test reliability

* remove mock list response

* remove hardhat reset and clean up tests

* simplify assertion

* add zzmp's nits

cypress/e2e/swap.test.ts

+import { BigNumber } from '@ethersproject/bignumber'
+import { parseEther } from '@ethersproject/units'
 import { SupportedChainId, WETH9 } from '@uniswap/sdk-core'
 
 import { UNI as UNI_MAINNET, USDC_MAINNET } from '../../src/constants/tokens'
@@ -412,4 +414,71 @@ describe('Swap', () => {
       cy.contains('Connect to Arbitrum').should('exist')
     })
   })
+
+  it('should render an error for slippage failure', () => {
+    cy.visit('/swap', { ethereum: 'hardhat' })
+      .hardhat()
+      .then((hardhat) => {
+        cy.then(() => hardhat.setAutomine(false))
+          .then(() => hardhat.provider.getBalance(hardhat.wallet.address))
+          .then((initialBalance) => {
+            // Gas estimation fails for this transaction (that would normally fail), so we stub it.
+            const send = cy.stub(hardhat.provider, 'send')
+            send.withArgs('eth_estimateGas').resolves(BigNumber.from(2_000_000))
+            send.callThrough()
+
+            // Set slippage to a very low value.
+            cy.get(getTestSelector('open-settings-dialog-button')).click()
+            cy.get(getTestSelector('slippage-input')).clear().type('0.01')
+            cy.get('body').click('topRight')
+            cy.get(getTestSelector('slippage-input')).should('not.exist')
+
+            // Open the currency select modal.
+            cy.get('#swap-currency-output .open-currency-select-button').click()
+
+            // Wait for the currency list to load
+            cy.contains('1inch').should('exist')
+
+            // Select UNI as output token
+            cy.get(getTestSelector('token-search-input')).clear().type('Uniswap')
+            cy.get(getTestSelector('currency-list-wrapper'))
+              .contains(/^Uniswap$/)
+              .first()
+              .should('exist')
+              .click()
+
+            // Swap 2 times.
+            const AMOUNT_TO_SWAP = 400
+            const NUMBER_OF_SWAPS = 2
+            const INDIVIDUAL_SWAP_INPUT = AMOUNT_TO_SWAP / NUMBER_OF_SWAPS
+            cy.get('#swap-currency-input .token-amount-input').clear().type(INDIVIDUAL_SWAP_INPUT.toString())
+            cy.get('#swap-currency-output .token-amount-input').should('not.equal', '')
+            cy.get('#swap-button').click()
+            cy.get('#confirm-swap-or-send').click()
+            cy.get(getTestSelector('dismiss-tx-confirmation')).click()
+            cy.get('#swap-currency-input .token-amount-input').clear().type(INDIVIDUAL_SWAP_INPUT.toString())
+            cy.get('#swap-currency-output .token-amount-input').should('not.equal', '')
+            cy.get('#swap-button').click()
+            cy.get('#confirm-swap-or-send').click()
+            cy.get(getTestSelector('dismiss-tx-confirmation')).click()
+
+            // The pending transaction indicator should be visible.
+            cy.contains('Pending').should('exist')
+
+            cy.then(() => hardhat.mine()).then(() => {
+              // The pending transaction indicator should not be visible.
+              cy.contains('Pending').should('not.exist')
+
+              // Check for a failed transaction notification.
+              cy.contains('Swap failed').should('exist')
+
+              // Assert that at least one of the swaps failed due to slippage.
+              cy.then(() => hardhat.provider.getBalance(hardhat.wallet.address)).then((finalBalance) => {
+                expect(finalBalance.gt(initialBalance.sub(parseEther(AMOUNT_TO_SWAP.toString())))).to.be.true
+              })
+            })
+          })
+          .then(() => hardhat.setAutomine(true))
+      })
+  })
 })

src/components/SearchModal/CurrencyList/index.tsx

@@ -294,7 +294,7 @@ export default function CurrencyList({
   }, [])
 
   return (
-    <ListWrapper>
+    <ListWrapper data-testid="currency-list-wrapper">
       {isLoading ? (
         <FixedSizeList
           className={scrollbarStyle}

src/components/TransactionSettings/index.tsx

@@ -199,6 +199,7 @@ export default function TransactionSettings({ placeholderSlippage }: Transaction
                 </SlippageEmojiContainer>
               ) : null}
               <Input
+                data-testid="slippage-input"
                 placeholder={placeholderSlippage.toFixed(2)}
                 value={
                   slippageInput.length > 0