Connect integration tests (#757)

* Connect a testing wallet

* Replace with a funded address

* Fix the balance checking and adding logging

cypress.json

 {
-  "baseUrl": "http://localhost:3000"
+  "baseUrl": "http://localhost:3000",
+  "pluginsFile": false,
+  "fixturesFolder": false,
+  "supportFile": "cypress/support/index.js",
+  "video": false
 }

cypress/integration/landing.test.ts

+import { TEST_ADDRESS_NEVER_USE } from '../support/commands'
+
 describe('Landing Page', () => {
   beforeEach(() => cy.visit('/'))
-
   it('loads exchange page', () => {
     cy.get('#exchangePage')
   })
@@ -18,4 +19,9 @@ describe('Landing Page', () => {
     cy.get('#pool-navLink').click()
     cy.url().should('include', '/pool')
   })
+
+  it('is connected', () => {
+    cy.get('#web3-status-connected').click()
+    cy.get('#web3-account-identifier-row').contains(TEST_ADDRESS_NEVER_USE)
+  })
 })

cypress/integration/swap.test.ts

@@ -4,7 +4,15 @@ describe('Swap', () => {
     cy.get('#swapInputField').type('0.001')
   })
 
+  it('zero swap amount', () => {
+    cy.get('#swapInputField').type('0.0')
+  })
+
   it('can enter an amount into output', () => {
     cy.get('#swapOutputField').type('0.001')
   })
+
+  it('zero output amount', () => {
+    cy.get('#swapOutputField').type('0.0')
+  })
 })

cypress/plugins/index.js

-/// <reference types="cypress" />
-// ***********************************************************
-// This example plugins/index.tsx can be used to load plugins
-//
-// You can change the location of this file or turn off loading
-// the plugins file with the 'pluginsFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/plugins-guide
-// ***********************************************************
-
-// This function is called when a project is opened or re-opened (e.g. due to
-// the project's config changing)
-
-/**
- * @type {Cypress.PluginConfig}
- */
-module.exports = () => {
-  // `on` is used to hook into various events Cypress emits
-  // `config` is the resolved Cypress config
-}

cypress/support/commands.d.ts

+export const TEST_ADDRESS_NEVER_USE: string
+
+// declare namespace Cypress {
+//   // eslint-disable-next-line @typescript-eslint/class-name-casing
+//   interface cy {
+//     additionalCommands(): void
+//   }
+// }

cypress/support/commands.js

+// ***********************************************
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+
+import { JsonRpcProvider } from '@ethersproject/providers'
+import { Wallet } from '@ethersproject/wallet'
+import { _Eip1193Bridge } from '@ethersproject/experimental/lib/eip1193-bridge'
+
+// never send real ether to this, obviously
+const PRIVATE_KEY_TEST_NEVER_USE = '0xad20c82497421e9784f18460ad2fe84f73569068e98e270b3e63743268af5763'
+
+// address of the above key
+export const TEST_ADDRESS_NEVER_USE = '0x0fF2D1eFd7A57B7562b2bf27F3f37899dB27F4a5'
+
+class CustomizedBridge extends _Eip1193Bridge {
+  async sendAsync(...args) {
+    console.debug('sendAsync called', ...args)
+    return this.send(...args)
+  }
+  async send(...args) {
+    console.debug('send called', ...args)
+    const isCallbackForm = typeof args[0] === 'object' && typeof args[1] === 'function'
+    let callback
+    let method
+    let params
+    if (isCallbackForm) {
+      callback = args[1]
+      method = args[0].method
+      params = args[0].params
+    } else {
+      method = args[0]
+      params = args[1]
+    }
+    if (method === 'eth_requestAccounts' || method === 'eth_accounts') {
+      if (isCallbackForm) {
+        callback({ result: [TEST_ADDRESS_NEVER_USE] })
+      } else {
+        return Promise.resolve([TEST_ADDRESS_NEVER_USE])
+      }
+    }
+    if (method === 'eth_chainId') {
+      if (isCallbackForm) {
+        callback(null, { result: '0x4' })
+      } else {
+        return Promise.resolve('0x4')
+      }
+    }
+    try {
+      const result = await super.send(method, params)
+      console.debug('result received', method, params, result)
+      if (isCallbackForm) {
+        callback(null, { result })
+      } else {
+        return result
+      }
+    } catch (error) {
+      if (isCallbackForm) {
+        callback(error, null)
+      } else {
+        throw error
+      }
+    }
+  }
+}
+
+// sets up the injected provider to be a mock ethereum provider with the given mnemonic/index
+Cypress.Commands.overwrite('visit', (original, url, options) => {
+  return original(url, {
+    ...options,
+    onBeforeLoad(win) {
+      options && options.onBeforeLoad && options.onBeforeLoad(win)
+      const provider = new JsonRpcProvider('https://rinkeby.infura.io/v3/b8800ce81b8c451698081d269b86692b', 4)
+      const signer = new Wallet(PRIVATE_KEY_TEST_NEVER_USE, provider)
+      const bridge = new CustomizedBridge(signer, provider)
+      win.ethereum = bridge
+    }
+  })
+})

cypress/support/commands.ts

-// ***********************************************
-// This example commands.js shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add("login", (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
-
-// TODO(moodysalem): commands for connecting a mock ethereum provider.

cypress/support/index.ts → cypress/support/index.js

 // ***********************************************************
-// This example support/index.ts is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
+// This file is processed and loaded automatically before your test files.
 //
 // You can read more here:
 // https://on.cypress.io/configuration
@@ -15,6 +7,3 @@
 
 // Import commands.ts using ES2015 syntax:
 import './commands'
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')

package.json

@@ -54,6 +54,8 @@
     "use-media": "^1.4.0"
   },
   "devDependencies": {
+    "@ethersproject/experimental": "^5.0.0-beta.141",
+    "@ethersproject/wallet": "^5.0.0-beta.141",
     "@types/jest": "^25.2.1",
     "@types/node": "^13.13.5",
     "@types/react": "^16.9.34",
@@ -62,6 +64,7 @@
     "@types/react-router-dom": "^5.0.0",
     "@types/rebass": "^4.0.5",
     "@types/styled-components": "^4.2.0",
+    "@types/testing-library__cypress": "^5.0.5",
     "@typescript-eslint/eslint-plugin": "^2.31.0",
     "@typescript-eslint/parser": "^2.31.0",
     "cypress": "^4.5.0",

src/components/AccountDetails/index.tsx

@@ -325,7 +325,7 @@ export default function AccountDetails({
                   </CircleWrapper>
                 </div>
               </AccountGroupingRow>
-              <AccountGroupingRow>
+              <AccountGroupingRow id="web3-account-identifier-row">
                 {ENSName ? (
                   <>
                     <AccountControl hasENS={!!ENSName} isENS={true}>

src/components/WalletModal/Option.tsx

@@ -96,10 +96,22 @@ export default function Option({
   header,
   subheader = null,
   icon,
-  active = false
+  active = false,
+  id
+}: {
+  link?: string | null
+  clickable?: boolean
+  size?: number | null
+  onClick?: null | (() => void)
+  color: string
+  header: React.ReactNode
+  subheader: React.ReactNode | null
+  icon: string
+  active?: boolean
+  id: string
 }) {
   const content = (
-    <OptionCardClickable onClick={onClick} clickable={clickable && !active} active={active}>
+    <OptionCardClickable id={id} onClick={onClick} clickable={clickable && !active} active={active}>
       <OptionCardLeft>
         <HeaderText color={color}>
           {' '}

src/components/WalletModal/PendingView.tsx

@@ -126,6 +126,7 @@ export default function PendingView({
           }
           return (
             <Option
+              id={`connect-${key}`}
               key={key}
               clickable={false}
               color={option.color}

src/components/WalletModal/index.tsx

@@ -223,6 +223,7 @@ export default function WalletModal({
               onClick={() => {
                 option.connector !== connector && !option.href && tryActivation(option.connector)
               }}
+              id={`connect-${key}`}
               key={key}
               active={option.connector && option.connector === connector}
               color={option.color}
@@ -243,6 +244,7 @@ export default function WalletModal({
           if (option.name === 'MetaMask') {
             return (
               <Option
+                id={`connect-${key}`}
                 key={key}
                 color={'#E8831D'}
                 header={'Install Metamask'}
@@ -270,6 +272,7 @@ export default function WalletModal({
         !isMobile &&
         !option.mobileOnly && (
           <Option
+            id={`connect-${key}`}
             onClick={() => {
               option.connector === connector
                 ? setWalletView(WALLET_VIEWS.ACCOUNT)

src/components/Web3Status/index.tsx

@@ -170,7 +170,7 @@ export default function Web3Status() {
   function getWeb3Status() {
     if (account) {
       return (
-        <Web3StatusConnected onClick={toggleWalletModal} pending={hasPendingTransactions}>
+        <Web3StatusConnected id="web3-status-connected" onClick={toggleWalletModal} pending={hasPendingTransactions}>
           {hasPendingTransactions ? (
             <RowBetween>
               <Text>{pending?.length} Pending</Text> <SpinnerWrapper src={LightCircle} alt="loader" />
@@ -190,7 +190,7 @@ export default function Web3Status() {
       )
     } else {
       return (
-        <Web3StatusConnect onClick={toggleWalletModal} faded={!account}>
+        <Web3StatusConnect id="connect-wallet" onClick={toggleWalletModal} faded={!account}>
           <Text>{t('Connect to a Wallet')}</Text>
         </Web3StatusConnect>
       )