Merge pull request #4764 from MetaMask/i4404-confirm-refactor-with-e2e-upgrades

e2e beta test upgrades for confirm refactor

development/backGroundConnectionModifiers.js

@@ -10,7 +10,7 @@ module.exports = {
     signPersonalMessage: (msgData, cb) => {
       const stateUpdate = {
         unapprovedPersonalMsgs: {},
-        unapprovedPersonalMsgsCount: 0,
+        unapprovedPersonalMsgCount: 0,
       }
       return cb(null, stateUpdate)
     },

development/states/confirm-new-ui.json

@@ -156,5 +156,23 @@
     "fromDropdownOpen": false,
     "toDropdownOpen": false,
     "errors": {}
+  },
+  "confirmTransaction": {
+    "txData": {},
+    "tokenData": {},
+    "methodData": {},
+    "tokenProps": {
+      "tokenDecimals": "",
+      "tokenSymbol": ""
+    },
+    "fiatTransactionAmount": "",
+    "fiatTransactionFee": "",
+    "fiatTransactionTotal": "",
+    "ethTransactionAmount": "",
+    "ethTransactionFee": "",
+    "ethTransactionTotal": "",
+    "hexGasTotal": "",
+    "nonce": "",
+    "fetchingMethodData": false
   }
 }

development/states/confirm-sig-requests.json

@@ -73,7 +73,7 @@
           "from": "0x0d0c7188d9c72b019a5da9bca0d127680c22e658"
         },
         "status": "unapproved",
-        "time": 1537889069339,
+        "time": 1537889070000,
         "type": "eth_sign"
       }
     },
@@ -86,11 +86,11 @@
           "from": "0x0d0c7188d9c72b019a5da9bca0d127680c22e659"
         },
         "status": "unapproved",
-        "time": 1517889069339,
+        "time": 1537889065000,
         "type": "personal_sign"
       }
     },
-    "unapprovedPersonalMsgCount": 0,
+    "unapprovedPersonalMsgCount": 1 ,
     "unapprovedTypedMessages": {
       "8997167822566869": {
         "id": 8997167822566869,
@@ -102,7 +102,7 @@
           "from": "0x0d0c7188d9c72b019a5da9bca0d127680c22e659"
         },
         "status": "unapproved",
-        "time": 1617889069339,
+        "time": 1537889060000,
         "type": "eth_signTypedData"
       }
     },
@@ -172,5 +172,32 @@
     "scrollToBottom": false,
     "forgottenPassword": null
   },
-  "identities": {}
+  "identities": {},
+  "confirmTransaction": {
+    "txData": {
+      "id": 8927167822566864,
+      "msgParams": {
+        "data": "0x879a053d4800c6354e76c7985a865d2922c82fb5b3f4577b2fe08b998954f2e0",
+        "from": "0x0d0c7188d9c72b019a5da9bca0d127680c22e658"
+      },
+      "status": "unapproved",
+      "time": 1537889069339,
+      "type": "eth_sign"
+    },
+    "tokenData": {},
+    "methodData": {},
+    "tokenProps": {
+      "tokenDecimals": "",
+      "tokenSymbol": ""
+    },
+    "fiatTransactionAmount": "",
+    "fiatTransactionFee": "",
+    "fiatTransactionTotal": "",
+    "ethTransactionAmount": "",
+    "ethTransactionFee": "",
+    "ethTransactionTotal": "",
+    "hexGasTotal": "",
+    "nonce": "",
+    "fetchingMethodData": false
+  }
 }

development/states/currency-localization.json

@@ -130,5 +130,23 @@
     "scrollToBottom": false,
     "forgottenPassword": null
   },
-  "identities": {}
+  "identities": {},
+  "confirmTransaction": {
+    "txData": {},
+    "tokenData": {},
+    "methodData": {},
+    "tokenProps": {
+      "tokenDecimals": "",
+      "tokenSymbol": ""
+    },
+    "fiatTransactionAmount": "",
+    "fiatTransactionFee": "",
+    "fiatTransactionTotal": "",
+    "ethTransactionAmount": "",
+    "ethTransactionFee": "",
+    "ethTransactionTotal": "",
+    "hexGasTotal": "",
+    "nonce": "",
+    "fetchingMethodData": false
+  }
 }

development/states/first-time.json

@@ -58,5 +58,23 @@
     }
   },
   "identities": {},
-  "computedBalances": {}
+  "computedBalances": {},
+  "confirmTransaction": {
+    "txData": {},
+    "tokenData": {},
+    "methodData": {},
+    "tokenProps": {
+      "tokenDecimals": "",
+      "tokenSymbol": ""
+    },
+    "fiatTransactionAmount": "",
+    "fiatTransactionFee": "",
+    "fiatTransactionTotal": "",
+    "ethTransactionAmount": "",
+    "ethTransactionFee": "",
+    "ethTransactionTotal": "",
+    "hexGasTotal": "",
+    "nonce": "",
+    "fetchingMethodData": false
+  }
 }

development/states/send-edit.json

@@ -156,5 +156,23 @@
     "fromDropdownOpen": false,
     "toDropdownOpen": false,
     "errors": {}
+  },
+  "confirmTransaction": {
+    "txData": {},
+    "tokenData": {},
+    "methodData": {},
+    "tokenProps": {
+      "tokenDecimals": "",
+      "tokenSymbol": ""
+    },
+    "fiatTransactionAmount": "",
+    "fiatTransactionFee": "",
+    "fiatTransactionTotal": "",
+    "ethTransactionAmount": "",
+    "ethTransactionFee": "",
+    "ethTransactionTotal": "",
+    "hexGasTotal": "",
+    "nonce": "",
+    "fetchingMethodData": false
   }
 }

development/states/send-new-ui.json

@@ -135,5 +135,23 @@
     "fromDropdownOpen": false,
     "toDropdownOpen": false,
     "errors": {}
+  },
+  "confirmTransaction": {
+    "txData": {},
+    "tokenData": {},
+    "methodData": {},
+    "tokenProps": {
+      "tokenDecimals": "",
+      "tokenSymbol": ""
+    },
+    "fiatTransactionAmount": "",
+    "fiatTransactionFee": "",
+    "fiatTransactionTotal": "",
+    "ethTransactionAmount": "",
+    "ethTransactionFee": "",
+    "ethTransactionTotal": "",
+    "hexGasTotal": "",
+    "nonce": "",
+    "fetchingMethodData": false
   }
 }

test/e2e/beta/contract-test/index.html

@@ -1,8 +1,33 @@
 <html>
+<head>
+  <title>E2E Test Dapp</title>
+</head>
 <body>
+  <div style="display: flex; flex-flow: column;">
+    <div style="display: flex; font-size: 1.25rem;">Contract</div>
+    <div style="display: flex;">
       <button id="deployButton">Deploy Contract</button>
       <button id="depositButton">Deposit</button>
       <button id="withdrawButton">Withdraw</button>
-</body>
+    </div>
+  </div>
+  <div style="display: flex; flex-flow: column;">
+    <div style="display: flex; font-size: 1.25rem;">Send eth</div>
+    <div style="display: flex;">
+      <button id="sendButton">Send</button>
+    </div>
+  </div>
+  <div style="display: flex; flex-flow: column;">
+    <div style="display: flex; font-size: 1.25rem;">Send tokens</div>
+    <div id="tokenAddress"></div>
+    <div style="display: flex;">
+      <button id="createToken">Create Token</button>
+      <button id="transferTokens">Transfer Tokens</button>
+      <button id="approveTokens">Approve Tokens</button>
+    </div>
+  </div>
+
 <script src="contract.js"></script>
+</body>
+
 </html>

test/e2e/beta/helpers.js

@@ -1,16 +1,21 @@
 const fs = require('fs')
 const mkdirp = require('mkdirp')
 const pify = require('pify')
+const assert = require('assert')
 const {until} = require('selenium-webdriver')
 const { delay } = require('../func')
 
 module.exports = {
+  assertElementNotPresent,
   checkBrowserForConsoleErrors,
-  loadExtension,
-  verboseReportOnFailure,
+  closeAllWindowHandlesExcept,
   findElement,
   findElements,
+  loadExtension,
   openNewPage,
+  switchToWindowWithTitle,
+  verboseReportOnFailure,
+  waitUntilXWindowHandles,
 }
 
 async function loadExtension (driver, extensionId) {
@@ -72,9 +77,57 @@ async function openNewPage (driver, url) {
   await delay(1000)
 
   const handles = await driver.getAllWindowHandles()
-  const secondHandle = handles[1]
-  await driver.switchTo().window(secondHandle)
+  const lastHandle = handles[handles.length - 1]
+  await driver.switchTo().window(lastHandle)
 
   await driver.get(url)
   await delay(1000)
 }
+
+async function waitUntilXWindowHandles (driver, x) {
+  const windowHandles = await driver.getAllWindowHandles()
+  if (windowHandles.length === x) return
+  await delay(1000)
+  return await waitUntilXWindowHandles(driver, x)
+}
+
+async function switchToWindowWithTitle (driver, title, windowHandles) {
+  if (!windowHandles) {
+    windowHandles = await driver.getAllWindowHandles()
+  } else if (windowHandles.length === 0) {
+    throw new Error('No window with title: ' + title)
+  }
+  const firstHandle = windowHandles[0]
+  await driver.switchTo().window(firstHandle)
+  const handleTitle = await driver.getTitle()
+
+  if (handleTitle === title) {
+    return firstHandle
+  } else {
+    return await switchToWindowWithTitle(driver, title, windowHandles.slice(1))
+  }
+}
+
+async function closeAllWindowHandlesExcept (driver, exceptions, windowHandles) {
+  exceptions = typeof exceptions === 'string' ? [ exceptions ] : exceptions
+  windowHandles = windowHandles || await driver.getAllWindowHandles()
+  const lastWindowHandle = windowHandles.pop()
+  if (!exceptions.includes(lastWindowHandle)) {
+    await driver.switchTo().window(lastWindowHandle)
+    await delay(1000)
+    await driver.close()
+    await delay(1000)
+  }
+  return windowHandles.length && await closeAllWindowHandlesExcept(driver, exceptions, windowHandles)
+}
+
+async function assertElementNotPresent (webdriver, driver, by) {
+  try {
+    const dataTab = await findElement(driver, by, 4000)
+    if (dataTab) {
+      assert(false, 'Data tab should not be present')
+    }
+  } catch (err) {
+    assert(err instanceof webdriver.error.NoSuchElementError)
+  }
+}

test/e2e/beta/metamask-beta-ui.spec.js

@@ -11,12 +11,16 @@ const {
   getExtensionIdFirefox,
 } = require('../func')
 const {
+  assertElementNotPresent,
+  checkBrowserForConsoleErrors,
+  closeAllWindowHandlesExcept,
   findElement,
   findElements,
-  checkBrowserForConsoleErrors,
   loadExtension,
-  verboseReportOnFailure,
   openNewPage,
+  switchToWindowWithTitle,
+  verboseReportOnFailure,
+  waitUntilXWindowHandles,
 } = require('./helpers')
 
 describe('MetaMask', function () {
@@ -25,7 +29,7 @@ describe('MetaMask', function () {
   let tokenAddress
 
   const testSeedPhrase = 'phrase upgrade clock rough situate wedding elder clever doctor stamp excess tent'
-  const tinyDelayMs = 1000
+  const tinyDelayMs = 200
   const regularDelayMs = tinyDelayMs * 2
   const largeDelayMs = regularDelayMs * 2
 
@@ -80,20 +84,29 @@ describe('MetaMask', function () {
         networkSelector = await findElement(driver, By.css('#network_component'))
       } catch (e) {
         await loadExtension(driver, extensionId)
+        await delay(largeDelayMs * 2)
+        networkSelector = await findElement(driver, By.css('#network_component'))
       }
       await delay(regularDelayMs)
     })
 
-    it('use the local network', async function () {
+    it('uses the local network', async function () {
       await networkSelector.click()
       await delay(regularDelayMs)
 
-      const localhost = await findElement(driver, By.xpath(`//li[contains(text(), 'Localhost')]`))
+      const networks = await findElements(driver, By.css('.dropdown-menu-item'))
+      const localhost = networks[4]
+      await driver.wait(until.elementTextMatches(localhost, /Localhost/))
       await localhost.click()
       await delay(regularDelayMs)
     })
 
     it('selects the new UI option', async () => {
+      try {
+        const overlay = await findElement(driver, By.css('.full-flex-height'))
+        await driver.wait(until.stalenessOf(overlay))
+      } catch (e) {}
+
       const button = await findElement(driver, By.xpath("//p[contains(text(), 'Try Beta Version')]"))
       await button.click()
       await delay(regularDelayMs)
@@ -188,8 +201,20 @@ describe('MetaMask', function () {
       await delay(regularDelayMs)
     })
 
-    async function retypeSeedPhrase (words) {
+    async function retypeSeedPhrase (words, wasReloaded) {
       try {
+        if (wasReloaded) {
+          const byRevealButton = By.css('.backup-phrase__secret-blocker .backup-phrase__reveal-button')
+          await driver.wait(until.elementLocated(byRevealButton, 10000))
+          const revealSeedPhraseButton = await findElement(driver, byRevealButton, 10000)
+          await revealSeedPhraseButton.click()
+          await delay(regularDelayMs)
+
+          const nextScreen = await findElement(driver, By.css('.backup-phrase button'))
+          await nextScreen.click()
+          await delay(regularDelayMs)
+        }
+
         const word0 = await findElement(driver, By.xpath(`//button[contains(text(), '${words[0]}')]`), 10000)
 
         await word0.click()
@@ -250,7 +275,7 @@ describe('MetaMask', function () {
         await delay(tinyDelayMs)
       } catch (e) {
         await loadExtension(driver, extensionId)
-        await retypeSeedPhrase(words)
+        await retypeSeedPhrase(words, true)
       }
     }
 
@@ -303,7 +328,7 @@ describe('MetaMask', function () {
     it('accepts the account password after lock', async () => {
       await driver.findElement(By.id('password')).sendKeys('correct horse battery staple')
       await driver.findElement(By.id('password')).sendKeys(Key.ENTER)
-      await delay(regularDelayMs * 4)
+      await delay(largeDelayMs * 4)
     })
   })
 
@@ -324,10 +349,10 @@ describe('MetaMask', function () {
 
       const create = await findElement(driver, By.xpath(`//button[contains(text(), 'Create')]`))
       await create.click()
-      await delay(regularDelayMs)
+      await delay(largeDelayMs)
     })
 
-    it('should correct account name', async () => {
+    it('should display correct account name', async () => {
       const accountName = await findElement(driver, By.css('.account-name'))
       assert.equal(await accountName.getText(), '2nd account')
       await delay(regularDelayMs)
@@ -366,8 +391,7 @@ describe('MetaMask', function () {
 
     it('balance renders', async () => {
       const balance = await findElement(driver, By.css('.balance-display .token-amount'))
-      const tokenAmount = await balance.getText()
-      assert.equal(tokenAmount, '100.000 ETH')
+      await driver.wait(until.elementTextMatches(balance, /100.+ETH/))
       await delay(regularDelayMs)
     })
   })
@@ -383,6 +407,9 @@ describe('MetaMask', function () {
       await inputAddress.sendKeys('0x2f318C334780961FB129D2a6c30D0763d9a5C970')
       await inputAmount.sendKeys('1')
 
+      const inputValue = await inputAmount.getAttribute('value')
+      assert.equal(inputValue, '1')
+
       // Set the gas limit
       const configureGas = await findElement(driver, By.css('.send-v2__gas-fee-display button'))
       await configureGas.click()
@@ -404,59 +431,71 @@ describe('MetaMask', function () {
     it('confirms the transaction', async function () {
       const confirmButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Confirm')]`))
       await confirmButton.click()
-      await delay(regularDelayMs)
+      await delay(largeDelayMs)
     })
 
     it('finds the transaction in the transactions list', async function () {
       const transactions = await findElements(driver, By.css('.tx-list-item'))
       assert.equal(transactions.length, 1)
 
+      if (process.env.SELENIUM_BROWSER !== 'firefox') {
         const txValues = await findElement(driver, By.css('.tx-list-value'))
         await driver.wait(until.elementTextMatches(txValues, /1\sETH/), 10000)
+      }
     })
   })
 
-  describe('Send ETH from Faucet', () => {
-    it('starts a send transaction inside Faucet', async () => {
-      await openNewPage(driver, 'https://faucet.metamask.io')
+  describe('Send ETH from dapp', () => {
+    it('starts a send transaction inside the dapp', async () => {
+      await openNewPage(driver, 'http://127.0.0.1:8080/')
+      await delay(regularDelayMs)
 
-      const [extension, faucet] = await driver.getAllWindowHandles()
-      await driver.switchTo().window(faucet)
+      await waitUntilXWindowHandles(driver, 2)
+      let windowHandles = await driver.getAllWindowHandles()
+      const extension = windowHandles[0]
+      const dapp = windowHandles[1]
 
-      const faucetPageTitle = await findElement(driver, By.css('.container-fluid'))
-      await driver.wait(until.elementTextMatches(faucetPageTitle, /MetaMask/))
+      await driver.switchTo().window(dapp)
       await delay(regularDelayMs)
 
-      const send1eth = await findElement(driver, By.xpath(`//button[contains(text(), '10 ether')]`), 14000)
-      await send1eth.click()
+      const send3eth = await findElement(driver, By.xpath(`//button[contains(text(), 'Send')]`), 10000)
+      await send3eth.click()
       await delay(regularDelayMs)
 
-      await driver.switchTo().window(extension)
-      await loadExtension(driver, extensionId)
+      windowHandles = await driver.getAllWindowHandles()
+      await driver.switchTo().window(windowHandles[2])
       await delay(regularDelayMs)
 
-      const confirmButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Confirm')]`), 14000)
+      assertElementNotPresent(webdriver, driver, By.xpath(`//li[contains(text(), 'Data')]`))
+
+      const confirmButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Confirm')]`), 10000)
       await confirmButton.click()
       await delay(regularDelayMs)
 
-      await driver.switchTo().window(faucet)
-      await delay(regularDelayMs)
-      await driver.close()
-      await delay(regularDelayMs)
+      await closeAllWindowHandlesExcept(driver, [extension, dapp])
       await driver.switchTo().window(extension)
       await delay(regularDelayMs)
-      await loadExtension(driver, extensionId)
-      await delay(regularDelayMs)
+    })
+
+    it('finds the transaction in the transactions list', async function () {
+      const transactions = await findElements(driver, By.css('.tx-list-item'))
+      assert.equal(transactions.length, 2)
+
+      const txValues = await findElement(driver, By.css('.tx-list-value'))
+      await driver.wait(until.elementTextMatches(txValues, /3\sETH/), 10000)
     })
   })
 
   describe('Deploy contract and call contract methods', () => {
     let extension
-    let contractTestPage
-    it('confirms a deploy contract transaction', async () => {
-      await openNewPage(driver, 'http://127.0.0.1:8080/');
+    let dapp
+    it('creates a deploy contract transaction', async () => {
+      const windowHandles = await driver.getAllWindowHandles()
+      extension = windowHandles[0]
+      dapp = windowHandles[1]
+      await delay(tinyDelayMs)
 
-      [extension, contractTestPage] = await driver.getAllWindowHandles()
+      await driver.switchTo().window(dapp)
       await delay(regularDelayMs)
 
       const deployContractButton = await findElement(driver, By.css('#deployButton'))
@@ -466,10 +505,28 @@ describe('MetaMask', function () {
       await driver.switchTo().window(extension)
       await delay(regularDelayMs)
 
-      const txListItem = await findElement(driver, By.css('.tx-list-item'))
+      const txListItem = await findElement(driver, By.xpath(`//span[contains(text(), 'Contract Deployment')]`))
       await txListItem.click()
       await delay(regularDelayMs)
+    })
+
+    it('displays the contract creation data', async () => {
+      const dataTab = await findElement(driver, By.xpath(`//li[contains(text(), 'Data')]`))
+      dataTab.click()
+      await (regularDelayMs)
 
+      await findElement(driver, By.xpath(`//div[contains(text(), '127.0.0.1')]`))
+
+      const confirmDataDiv = await findElement(driver, By.css('.confirm-page-container-content__data-box'))
+      const confirmDataText = await confirmDataDiv.getText()
+      assert.equal(confirmDataText.match(/0x608060405234801561001057600080fd5b5033600160006101000a81548173ffffffffffffffffffffffffffffffffffffffff/))
+
+      const detailsTab = await findElement(driver, By.xpath(`//li[contains(text(), 'Details')]`))
+      detailsTab.click()
+      await (regularDelayMs)
+    })
+
+    it('confirms a deploy contract transaction', async () => {
       const confirmButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Confirm')]`))
       await confirmButton.click()
       await delay(regularDelayMs)
@@ -479,10 +536,11 @@ describe('MetaMask', function () {
 
       const txAccounts = await findElements(driver, By.css('.tx-list-account'))
       assert.equal(await txAccounts[0].getText(), 'Contract Deployment')
+      await delay(regularDelayMs)
     })
 
     it('calls and confirms a contract method where ETH is sent', async () => {
-      await driver.switchTo().window(contractTestPage)
+      await driver.switchTo().window(dapp)
       await delay(regularDelayMs)
 
       const depositButton = await findElement(driver, By.css('#depositButton'))
@@ -492,17 +550,19 @@ describe('MetaMask', function () {
       await driver.switchTo().window(extension)
       await delay(regularDelayMs)
 
-      const txListItem = await findElement(driver, By.css('.tx-list-item'))
-      await txListItem.click()
+      await findElements(driver, By.css('.tx-list-pending-item-container'))
+      const [txListValue] = await findElements(driver, By.css('.tx-list-value'))
+      await driver.wait(until.elementTextMatches(txListValue, /4\sETH/), 10000)
+      await txListValue.click()
       await delay(regularDelayMs)
 
       // Set the gas limit
-      const configureGas = await findElement(driver, By.css('.sliders-icon-container'))
+      const configureGas = await findElement(driver, By.css('.confirm-detail-row__header-text--edit'))
       await configureGas.click()
       await delay(regularDelayMs)
 
       const gasModal = await driver.findElement(By.css('span .modal'))
-      await driver.wait(until.elementLocated(By.css('.send-v2__customize-gas__title')))
+      await driver.wait(until.elementLocated(By.css('.customize-gas__title')))
 
       const [gasPriceInput, gasLimitInput] = await findElements(driver, By.css('.customize-gas-input'))
       await gasPriceInput.clear()
@@ -524,7 +584,7 @@ describe('MetaMask', function () {
       await driver.wait(until.elementTextMatches(txStatuses[0], /Confirmed/))
 
       const txValues = await findElement(driver, By.css('.tx-list-value'))
-      await driver.wait(until.elementTextMatches(txValues, /3\sETH/), 10000)
+      await driver.wait(until.elementTextMatches(txValues, /4\sETH/), 10000)
 
       const txAccounts = await findElements(driver, By.css('.tx-list-account'))
       const firstTxAddress = await txAccounts[0].getText()
@@ -532,7 +592,7 @@ describe('MetaMask', function () {
     })
 
     it('calls and confirms a contract method where ETH is received', async () => {
-      await driver.switchTo().window(contractTestPage)
+      await driver.switchTo().window(dapp)
       await delay(regularDelayMs)
 
       const withdrawButton = await findElement(driver, By.css('#withdrawButton'))
@@ -556,38 +616,31 @@ describe('MetaMask', function () {
       const txValues = await findElement(driver, By.css('.tx-list-value'))
       await driver.wait(until.elementTextMatches(txValues, /0\sETH/), 10000)
 
-      await driver.switchTo().window(contractTestPage)
-      await driver.close()
+      await closeAllWindowHandlesExcept(driver, [extension, dapp])
       await driver.switchTo().window(extension)
     })
 
     it('renders the correct ETH balance', async () => {
       const balance = await findElement(driver, By.css('.tx-view .balance-display .token-amount'))
-      await driver.wait(until.elementTextMatches(balance, /^86.*ETH.*$/), 10000)
+      await delay(regularDelayMs)
+      if (process.env.SELENIUM_BROWSER !== 'firefox') {
+        await driver.wait(until.elementTextMatches(balance, /^92.*ETH.*$/), 10000)
         const tokenAmount = await balance.getText()
-      assert.ok(/^86.*ETH.*$/.test(tokenAmount))
+        assert.ok(/^92.*ETH.*$/.test(tokenAmount))
         await delay(regularDelayMs)
+      }
     })
   })
 
-  describe('Add a custom token from TokenFactory', () => {
+  describe('Add a custom token from a dapp', () => {
     it('creates a new token', async () => {
-      openNewPage(driver, 'https://tokenfactory.surge.sh/#/factory')
+      const windowHandles = await driver.getAllWindowHandles()
+      const extension = windowHandles[0]
+      const dapp = windowHandles[1]
+      await delay(regularDelayMs * 2)
 
-      await delay(regularDelayMs * 10)
-      const [extension, tokenFactory] = await driver.getAllWindowHandles()
-
-      const [
-        totalSupply,
-        tokenName,
-        tokenDecimal,
-        tokenSymbol,
-      ] = await findElements(driver, By.css('.form-control'))
-
-      await totalSupply.sendKeys('100')
-      await tokenName.sendKeys('Test')
-      await tokenDecimal.sendKeys('0')
-      await tokenSymbol.sendKeys('TST')
+      await driver.switchTo().window(dapp)
+      await delay(regularDelayMs)
 
       const createToken = await findElement(driver, By.xpath(`//button[contains(text(), 'Create Token')]`))
       await createToken.click()
@@ -601,15 +654,16 @@ describe('MetaMask', function () {
       await confirmButton.click()
       await delay(regularDelayMs)
 
-      await driver.switchTo().window(tokenFactory)
-      await delay(regularDelayMs)
+      await driver.switchTo().window(dapp)
+      await delay(tinyDelayMs)
 
-      const tokenContactAddress = await driver.findElement(By.css('div > div > div:nth-child(2) > span:nth-child(3)'))
-      tokenAddress = await tokenContactAddress.getText()
+      const tokenContractAddress = await driver.findElement(By.css('#tokenAddress'))
+      await driver.wait(until.elementTextMatches(tokenContractAddress, /0x/))
+      tokenAddress = await tokenContractAddress.getText()
 
-      await driver.close()
-      await driver.switchTo().window(extension)
-      await loadExtension(driver, extensionId)
+      await delay(regularDelayMs)
+      await closeAllWindowHandlesExcept(driver, [extension, dapp])
+      await delay(regularDelayMs)
       await driver.switchTo().window(extension)
       await delay(regularDelayMs)
 
@@ -668,7 +722,7 @@ describe('MetaMask', function () {
       gasModal = await driver.findElement(By.css('span .modal'))
     })
 
-    it('customizes gas', async () => {
+    it('opens customizes gas modal', async () => {
       await driver.wait(until.elementLocated(By.css('.send-v2__customize-gas__title')))
       const save = await findElement(driver, By.xpath(`//button[contains(text(), 'Save')]`))
       await save.click()
@@ -684,6 +738,24 @@ describe('MetaMask', function () {
       await delay(regularDelayMs)
     })
 
+    it('displays the token transfer data', async () => {
+      const dataTab = await findElement(driver, By.xpath(`//li[contains(text(), 'Data')]`))
+      dataTab.click()
+      await (regularDelayMs)
+
+      const functionType = await findElement(driver, By.css('.confirm-page-container-content__function-type'))
+      const functionTypeText = await functionType.getText()
+      assert.equal(functionTypeText, 'Transfer')
+
+      const confirmDataDiv = await findElement(driver, By.css('.confirm-page-container-content__data-box'))
+      const confirmDataText = await confirmDataDiv.getText()
+      assert.equal(confirmDataText.match(/0xa9059cbb0000000000000000000000002f318c334780961fb129d2a6c30d0763d9a5c97/))
+
+      const detailsTab = await findElement(driver, By.xpath(`//li[contains(text(), 'Details')]`))
+      detailsTab.click()
+      await (regularDelayMs)
+    })
+
     it('submits the transaction', async function () {
       const confirmButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Confirm')]`))
       await confirmButton.click()
@@ -709,37 +781,33 @@ describe('MetaMask', function () {
     })
   })
 
-  describe('Send a custom token from TokenFactory', () => {
+  describe('Send a custom token from dapp', () => {
     let gasModal
     it('sends an already created token', async () => {
-     openNewPage(driver, `https://tokenfactory.surge.sh/#/token/${tokenAddress}`)
-
-      const [extension] = await driver.getAllWindowHandles()
-
-      const [
-        transferToAddress,
-        transferToAmount,
-      ] = await findElements(driver, By.css('.form-control'))
+      const windowHandles = await driver.getAllWindowHandles()
+      const extension = windowHandles[0]
+      const dapp = await switchToWindowWithTitle(driver, 'E2E Test Dapp', windowHandles)
+      await closeAllWindowHandlesExcept(driver, [extension, dapp])
+      await delay(regularDelayMs)
 
-      await transferToAddress.sendKeys('0x2f318C334780961FB129D2a6c30D0763d9a5C970')
-      await transferToAmount.sendKeys('26')
+      await driver.switchTo().window(dapp)
+      await delay(tinyDelayMs)
 
-      const transferAmountButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Transfer Amount')]`))
-      await transferAmountButton.click()
-      await delay(regularDelayMs)
+      const transferTokens = await findElement(driver, By.xpath(`//button[contains(text(), 'Transfer Tokens')]`))
+      await transferTokens.click()
 
-      const [,, popup] = await driver.getAllWindowHandles()
-      await driver.switchTo().window(popup)
-      await driver.close()
+      await closeAllWindowHandlesExcept(driver, [extension, dapp])
       await driver.switchTo().window(extension)
-      await delay(regularDelayMs)
+      await delay(largeDelayMs)
 
-      const [txListItem] = await findElements(driver, By.css('.tx-list-item'))
-      await txListItem.click()
+      await findElements(driver, By.css('.tx-list-pending-item-container'))
+      const [txListValue] = await findElements(driver, By.css('.tx-list-value'))
+      await driver.wait(until.elementTextMatches(txListValue, /7\sTST/), 10000)
+      await txListValue.click()
       await delay(regularDelayMs)
 
       // Set the gas limit
-      const configureGas = await driver.wait(until.elementLocated(By.css('.send-v2__gas-fee-display button')))
+      const configureGas = await driver.wait(until.elementLocated(By.css('.confirm-detail-row__header-text--edit')), 10000)
       await configureGas.click()
       await delay(regularDelayMs)
 
@@ -747,7 +815,7 @@ describe('MetaMask', function () {
     })
 
     it('customizes gas', async () => {
-      await driver.wait(until.elementLocated(By.css('.send-v2__customize-gas__title')))
+      await driver.wait(until.elementLocated(By.css('.customize-gas__title')))
 
       const [gasPriceInput, gasLimitInput] = await findElements(driver, By.css('.customize-gas-input'))
       await gasPriceInput.clear()
@@ -766,12 +834,12 @@ describe('MetaMask', function () {
         await gasLimitInput.sendKeys(Key.BACK_SPACE)
       }
 
-      const save = await findElement(driver, By.css('.send-v2__customize-gas__save'))
+      const save = await findElement(driver, By.css('.customize-gas__save'))
       await save.click()
       await driver.wait(until.stalenessOf(gasModal))
 
-      const gasFeeInput = await findElement(driver, By.css('.currency-display__input'))
-      assert.equal(await gasFeeInput.getAttribute('value'), 0.0006)
+      const gasFeeInputs = await findElements(driver, By.css('.confirm-detail-row__eth'))
+      assert.equal(await gasFeeInputs[0].getText(), '♦ 0.0006')
     })
 
     it('submits the transaction', async function () {
@@ -785,7 +853,7 @@ describe('MetaMask', function () {
       assert.equal(transactions.length, 2)
 
       const txValues = await findElements(driver, By.css('.tx-list-value'))
-      await driver.wait(until.elementTextMatches(txValues[0], /26\sTST/))
+      await driver.wait(until.elementTextMatches(txValues[0], /7\sTST/))
       const txStatuses = await findElements(driver, By.css('.tx-list-status'))
       await driver.wait(until.elementTextMatches(txStatuses[0], /Confirmed/))
 
@@ -799,8 +867,107 @@ describe('MetaMask', function () {
       // or possibly until we use latest version of firefox in the tests
       if (process.env.SELENIUM_BROWSER !== 'firefox') {
         const tokenBalanceAmount = await findElement(driver, By.css('.token-balance__amount'))
-        assert.equal(await tokenBalanceAmount.getText(), '24')
+        assert.equal(await tokenBalanceAmount.getText(), '43')
+      }
+    })
+  })
+
+  describe('Approves a custom token from dapp', () => {
+    let gasModal
+    it('approves an already created token', async () => {
+      const windowHandles = await driver.getAllWindowHandles()
+      const extension = windowHandles[0]
+      const dapp = await switchToWindowWithTitle(driver, 'E2E Test Dapp', windowHandles)
+      await closeAllWindowHandlesExcept(driver, [extension, dapp])
+      await delay(regularDelayMs)
+
+      await driver.switchTo().window(dapp)
+      await delay(tinyDelayMs)
+
+      const transferTokens = await findElement(driver, By.xpath(`//button[contains(text(), 'Approve Tokens')]`))
+      await transferTokens.click()
+
+      await closeAllWindowHandlesExcept(driver, extension)
+      await driver.switchTo().window(extension)
+      await delay(regularDelayMs)
+
+      const [txListItem] = await findElements(driver, By.css('.tx-list-item'))
+      const [txListValue] = await findElements(driver, By.css('.tx-list-value'))
+      await driver.wait(until.elementTextMatches(txListValue, /0\sETH/))
+      await txListItem.click()
+      await delay(regularDelayMs)
+    })
+
+    it('displays the token approval data', async () => {
+      const dataTab = await findElement(driver, By.xpath(`//li[contains(text(), 'Data')]`))
+      dataTab.click()
+      await (regularDelayMs)
+
+      const functionType = await findElement(driver, By.css('.confirm-page-container-content__function-type'))
+      const functionTypeText = await functionType.getText()
+      assert.equal(functionTypeText, 'Approve')
+
+      const confirmDataDiv = await findElement(driver, By.css('.confirm-page-container-content__data-box'))
+      const confirmDataText = await confirmDataDiv.getText()
+      assert.equal(confirmDataText.match(/0x095ea7b30000000000000000000000002f318c334780961fb129d2a6c30d0763d9a5c97/))
+
+      const detailsTab = await findElement(driver, By.xpath(`//li[contains(text(), 'Details')]`))
+      detailsTab.click()
+      await (regularDelayMs)
+
+      const approvalWarning = await findElement(driver, By.css('.confirm-page-container-warning__warning'))
+      const approvalWarningText = await approvalWarning.getText()
+      assert(approvalWarningText.match(/By approving this/))
+      await (regularDelayMs)
+    })
+
+    it('opens the gas edit modal', async () => {
+      const configureGas = await driver.wait(until.elementLocated(By.css('.confirm-detail-row__header-text--edit')))
+      await configureGas.click()
+      await delay(regularDelayMs)
+
+      gasModal = await driver.findElement(By.css('span .modal'))
+    })
+
+    it('customizes gas', async () => {
+      await driver.wait(until.elementLocated(By.css('.customize-gas__title')))
+
+      const [gasPriceInput, gasLimitInput] = await findElements(driver, By.css('.customize-gas-input'))
+      await gasPriceInput.clear()
+      await delay(tinyDelayMs)
+      await gasPriceInput.sendKeys('10')
+      await delay(tinyDelayMs)
+      await gasLimitInput.clear()
+      await delay(tinyDelayMs)
+      await gasLimitInput.sendKeys(Key.chord(Key.CONTROL, 'a'))
+      await gasLimitInput.sendKeys('60000')
+      await gasLimitInput.sendKeys(Key.chord(Key.CONTROL, 'e'))
+
+      // Needed for different behaviour of input in different versions of firefox
+      const gasLimitInputValue = await gasLimitInput.getAttribute('value')
+      if (gasLimitInputValue === '600001') {
+        await gasLimitInput.sendKeys(Key.BACK_SPACE)
       }
+
+      const save = await findElement(driver, By.css('.customize-gas__save'))
+      await save.click()
+      await driver.wait(until.stalenessOf(gasModal))
+
+      const gasFeeInputs = await findElements(driver, By.css('.confirm-detail-row__eth'))
+      assert.equal(await gasFeeInputs[0].getText(), '♦ 0.0006')
+    })
+
+    it('submits the transaction', async function () {
+      const confirmButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Confirm')]`))
+      await confirmButton.click()
+      await delay(regularDelayMs)
+    })
+
+    it('finds the transaction in the transactions list', async function () {
+      const txValues = await findElements(driver, By.css('.tx-list-value'))
+      await driver.wait(until.elementTextMatches(txValues[0], /0\sETH/))
+      const txStatuses = await findElements(driver, By.css('.tx-list-status'))
+      await driver.wait(until.elementTextMatches(txStatuses[0], /Confirmed/))
     })
   })
 

test/e2e/metamask.spec.js

@@ -234,7 +234,7 @@ describe('Metamask popup page', function () {
 
       submitButton.click()
 
-      await delay(500)
+      await delay(1500)
     })
 
     it('finds the transaction in the transactions list', async function () {

test/integration/lib/confirm-sig-requests.js

@@ -1,5 +1,6 @@
 const reactTriggerChange = require('react-trigger-change')
 const {
+  timeout,
   queryAsync,
 } = require('../../lib/util')
 
@@ -18,14 +19,14 @@ async function runConfirmSigRequestsTest (assert, done) {
   selectState.val('confirm sig requests')
   reactTriggerChange(selectState[0])
 
-  // await timeout(1000000)
-
   const pendingRequestItem = $.find('.tx-list-item.tx-list-pending-item-container.tx-list-clickable')
 
   if (pendingRequestItem[0]) {
     pendingRequestItem[0].click()
   }
 
+  await timeout(1000)
+
   let confirmSigHeadline = await queryAsync($, '.request-signature__headline')
   assert.equal(confirmSigHeadline[0].textContent, 'Your signature is being requested')
 
@@ -37,7 +38,7 @@ async function runConfirmSigRequestsTest (assert, done) {
 
   let confirmSigSignButton = await queryAsync($, 'button.btn-primary.btn--large')
   confirmSigSignButton[0].click()
-
+  await timeout(1000)
   confirmSigHeadline = await queryAsync($, '.request-signature__headline')
   assert.equal(confirmSigHeadline[0].textContent, 'Your signature is being requested')
 
@@ -46,7 +47,7 @@ async function runConfirmSigRequestsTest (assert, done) {
 
   confirmSigSignButton = await queryAsync($, 'button.btn-primary.btn--large')
   confirmSigSignButton[0].click()
-
+  await timeout(1000)
   confirmSigHeadline = await queryAsync($, '.request-signature__headline')
   assert.equal(confirmSigHeadline[0].textContent, 'Your signature is being requested')
 
@@ -57,6 +58,5 @@ async function runConfirmSigRequestsTest (assert, done) {
   confirmSigSignButton = await queryAsync($, 'button.btn-primary.btn--large')
   confirmSigSignButton[0].click()
 
-  const txView = await queryAsync($, '.tx-view')
-  assert.ok(txView[0], 'Should return to the account details screen after confirming')
+  await timeout(2000)
 }

test/integration/lib/currency-localization.js

@@ -19,6 +19,7 @@ async function runCurrencyLocalizationTest (assert, done) {
   console.log('*** start runCurrencyLocalizationTest')
   const selectState = await queryAsync($, 'select')
   selectState.val('currency localization')
+  await timeout(1000)
   reactTriggerChange(selectState[0])
   await timeout(1000)
   const txView = await queryAsync($, '.tx-view')

test/integration/lib/send-new-ui.js

@@ -125,18 +125,18 @@ async function runSendFlowTest (assert, done) {
   reactTriggerChange(selectState[0])
 
   const confirmFromName = (await queryAsync($, '.sender-to-recipient__sender-name')).first()
-  assert.equal(confirmFromName[0].textContent, 'Send Account 2', 'confirm screen should show correct from name')
+  assert.equal(confirmFromName[0].textContent, 'Send Account 4', 'confirm screen should show correct from name')
 
   const confirmToName = (await queryAsync($, '.sender-to-recipient__recipient-name')).last()
   assert.equal(confirmToName[0].textContent, 'Send Account 3', 'confirm screen should show correct to name')
 
-  const confirmScreenRows = await queryAsync($, '.confirm-screen-rows')
-  const confirmScreenGas = confirmScreenRows.find('.currency-display__converted-value')[0]
-  assert.equal(confirmScreenGas.textContent, '$3.60 USD', 'confirm screen should show correct gas')
-  const confirmScreenTotal = confirmScreenRows.find('.confirm-screen-row-info')[2]
-  assert.equal(confirmScreenTotal.textContent, '$2,405.36 USD', 'confirm screen should show correct total')
+  const confirmScreenRowFiats = await queryAsync($, '.confirm-detail-row__fiat')
+  const confirmScreenGas = confirmScreenRowFiats[0]
+  assert.equal(confirmScreenGas.textContent, '$3.60', 'confirm screen should show correct gas')
+  const confirmScreenTotal = confirmScreenRowFiats[1]
+  assert.equal(confirmScreenTotal.textContent, '$2,405.36', 'confirm screen should show correct total')
 
-  const confirmScreenBackButton = await queryAsync($, '.page-container__back-button')
+  const confirmScreenBackButton = await queryAsync($, '.confirm-page-container-header__back-button')
   confirmScreenBackButton[0].click()
 
   const sendFromFieldItemInEdit = await queryAsync($, '.account-list-item')