Use locally served dapp to test contract calls in e2e beta tests

5 files changed, 130 insertions, 174 deletions

diff --git a/test/e2e/beta/contract-test/contract.js b/test/e2e/beta/contract-test/contract.js
new file mode 100644
index 000000000..19c29e5c1
--- /dev/null
+++ b/test/e2e/beta/contract-test/contract.js
@@ -0,0 +1,61 @@
+/*
+The `piggybankContract` is compiled from:
+
+  pragma solidity ^0.4.0;
+  contract PiggyBank {
+
+      uint private balance;
+      address public owner;
+
+      function PiggyBank() public {
+          owner = msg.sender;
+          balance = 0;
+      }
+
+      function deposit() public payable returns (uint) {
+          balance += msg.value;
+          return balance;
+      }
+
+      function withdraw(uint withdrawAmount) public returns (uint remainingBal) {
+          require(msg.sender == owner);
+          balance -= withdrawAmount;
+
+          msg.sender.transfer(withdrawAmount);
+
+          return balance;
+      }
+  }
+*/
+
+var piggybankContract = web3.eth.contract([{"constant":false,"inputs":[{"name":"withdrawAmount","type":"uint256"}],"name":"withdraw","outputs":[{"name":"remainingBal","type":"uint256"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"owner","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[],"name":"deposit","outputs":[{"name":"","type":"uint256"}],"payable":true,"stateMutability":"payable","type":"function"},{"inputs":[],"payable":false,"stateMutability":"nonpayable","type":"constructor"}]);
+
+deployButton.addEventListener('click', function (event) {
+    
+    var piggybank = piggybankContract.new(
+       {
+         from: web3.eth.accounts[0], 
+         data: '0x608060405234801561001057600080fd5b5033600160006101000a81548173ffffffffffffffffffffffffffffffffffffffff021916908373ffffffffffffffffffffffffffffffffffffffff1602179055506000808190555061023b806100686000396000f300608060405260043610610057576000357c0100000000000000000000000000000000000000000000000000000000900463ffffffff1680632e1a7d4d1461005c5780638da5cb5b1461009d578063d0e30db0146100f4575b600080fd5b34801561006857600080fd5b5061008760048036038101908080359060200190929190505050610112565b6040518082815260200191505060405180910390f35b3480156100a957600080fd5b506100b26101d0565b604051808273ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff16815260200191505060405180910390f35b6100fc6101f6565b6040518082815260200191505060405180910390f35b6000600160009054906101000a900473ffffffffffffffffffffffffffffffffffffffff1673ffffffffffffffffffffffffffffffffffffffff163373ffffffffffffffffffffffffffffffffffffffff1614151561017057600080fd5b8160008082825403925050819055503373ffffffffffffffffffffffffffffffffffffffff166108fc839081150290604051600060405180830381858888f193505050501580156101c5573d6000803e3d6000fd5b506000549050919050565b600160009054906101000a900473ffffffffffffffffffffffffffffffffffffffff1681565b60003460008082825401925050819055506000549050905600a165627a7a72305820f237db3ec816a52589d82512117bc85bc08d3537683ffeff9059108caf3e5d400029', 
+         gas: '4700000'
+       }, function (e, contract){
+        console.log(e, contract);
+        if (typeof contract.address !== 'undefined') {
+          console.log('Contract mined! address: ' + contract.address + ' transactionHash: ' + contract.transactionHash);
+
+          console.log(`contract`, contract);
+
+          depositButton.addEventListener('click', function (event) {
+           contract.deposit({ from: web3.eth.accounts[0], value: '0x29a2241af62c0000' }, function (result) {
+             console.log(result)
+           })
+          })
+
+          withdrawButton.addEventListener('click', function (event) {
+           contract.withdraw('0xde0b6b3a7640000', { from: web3.eth.accounts[0] }, function (result) {
+             console.log(result)
+           })
+          })
+        }
+     })
+
+})
\ No newline at end of file
diff --git a/test/e2e/beta/contract-test/index.html b/test/e2e/beta/contract-test/index.html
new file mode 100644
index 000000000..0868633f7
--- /dev/null
+++ b/test/e2e/beta/contract-test/index.html
@@ -0,0 +1,8 @@
+<html>
+<body>
+  <button id="deployButton">Deploy Contract</button>
+  <button id="depositButton">Deposit</button>
+  <button id="withdrawButton">Withdraw</button>
+</body>
+<script src="contract.js"></script>
+</html>
\ No newline at end of file
diff --git a/test/e2e/beta/helpers.js b/test/e2e/beta/helpers.js
index c1080e8db..fcc3e96d6 100644
--- a/test/e2e/beta/helpers.js
+++ b/test/e2e/beta/helpers.js
@@ -4,34 +4,6 @@ const pify = require('pify')
 const {until} = require('selenium-webdriver')
 const { delay } = require('../func')
 
-const testContract = `
-  pragma solidity ^0.4.0;
-  contract PiggyBank {
-
-      uint private balance;
-      address public owner;
-
-      function PiggyBank() public {
-          owner = msg.sender;
-          balance = 0;
-      }
-
-      function deposit() public payable returns (uint) {
-          balance += msg.value;
-          return balance;
-      }
-
-      function withdraw(uint withdrawAmount) public returns (uint remainingBal) {
-          require(msg.sender == owner);
-          balance -= withdrawAmount;
-
-          msg.sender.transfer(withdrawAmount);
-
-          return balance;
-      }
-  }
-`
-
 module.exports = {
   checkBrowserForConsoleErrors,
   loadExtension,
@@ -39,7 +11,6 @@ module.exports = {
   findElement,
   findElements,
   openNewPage,
-  testContract,
 }
 
 async function loadExtension (driver, extensionId) {
@@ -101,8 +72,8 @@ async function openNewPage (driver, url) {
   await delay(1000)
 
   const handles = await driver.getAllWindowHandles()
-  const lastHandle = handles.pop()
-  await driver.switchTo().window(lastHandle)
+  const secondHandle = handles[1]
+  await driver.switchTo().window(secondHandle)
 
   await driver.get(url)
   await delay(1000)
diff --git a/test/e2e/beta/metamask-beta-ui.spec.js b/test/e2e/beta/metamask-beta-ui.spec.js
index 21578ae36..d5f41a6ef 100644
--- a/test/e2e/beta/metamask-beta-ui.spec.js
+++ b/test/e2e/beta/metamask-beta-ui.spec.js
@@ -16,7 +16,6 @@ const {
   checkBrowserForConsoleErrors,
   loadExtension,
   verboseReportOnFailure,
-  testContract,
   openNewPage,
 } = require('./helpers')
 
@@ -417,45 +416,24 @@ describe('MetaMask', function () {
     })
   })
 
-  describe('Deploy contract and call contract method from Remix', () => {
-    it('writes a contract to remix', async () => {
-      await openNewPage(driver, 'https://remix.ethereum.org/')
+  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/');
 
-      const byFilePanel = By.css('#filepanel')
-      await driver.wait(until.elementLocated(byFilePanel))
+      [extension, contractTestPage] = await driver.getAllWindowHandles()
       await delay(regularDelayMs)
 
-      const newContractButton = await findElement(driver, By.css('.fa-plus-circle'))
-      await newContractButton.click()
+      const deployContractButton = await findElement(driver, By.css('#deployButton'))
+      await deployContractButton.click()
       await delay(regularDelayMs)
 
-      const modalFooterOkay = await findElement(driver, By.css('#modal-footer-ok'))
-      await modalFooterOkay.click()
-      await delay(regularDelayMs)
-
-      await driver.executeScript('window.document.getElementById("input").editor.session.setValue(arguments[0])', testContract)
-      await delay(regularDelayMs)
-    })
-
-    it('compiles the contract', async () => {
-      const [extension, remix] = await driver.getAllWindowHandles()
-
-      const compileButton = await findElement(driver, By.css('#compile'))
-      compileButton.click()
-      const byOption = By.xpath(`//option[contains(text(), 'PiggyBank')]`)
-      await driver.wait(until.elementLocated(byOption, 10000))
-      await delay(regularDelayMs)
-
-      const runTab = await findElement(driver, By.xpath(`//li[contains(text(), 'Run')]`))
-      await runTab.click()
-      await delay(regularDelayMs)
-
-      const deployButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Deploy')]`))
-      await deployButton.click()
+      await driver.switchTo().window(extension)
       await delay(regularDelayMs)
 
-      await driver.switchTo().window(extension)
-      await loadExtension(driver, extensionId)
+      const txListItem = await findElement(driver, By.css('.tx-list-item'))
+      await txListItem.click()
       await delay(regularDelayMs)
 
       const confirmButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Confirm')]`))
@@ -469,17 +447,19 @@ describe('MetaMask', function () {
       assert.equal(await txAccounts[0].getText(), 'Contract Deployment')
     })
 
-    it('calls and confirms a contract method', async () => {
-      const [extension, remix] = await driver.getAllWindowHandles()
-      await driver.switchTo().window(remix)
+    it('calls and confirms a contract method where ETH is sent', async () => {
+      await driver.switchTo().window(contractTestPage)
       await delay(regularDelayMs)
 
-      const depositButton = await findElement(driver, By.xpath(`//button[contains(text(), 'deposit')]`))
+      const depositButton = await findElement(driver, By.css('#depositButton'))
       await depositButton.click()
       await delay(regularDelayMs)
 
       await driver.switchTo().window(extension)
-      await loadExtension(driver, extensionId)
+      await delay(regularDelayMs)
+
+      const txListItem = await findElement(driver, By.css('.tx-list-item'))
+      await txListItem.click()
       await delay(regularDelayMs)
 
       // Set the gas limit
@@ -509,14 +489,49 @@ describe('MetaMask', function () {
       const txStatuses = await findElements(driver, By.css('.tx-list-status'))
       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)
+
       const txAccounts = await findElements(driver, By.css('.tx-list-account'))
       const firstTxAddress = await txAccounts[0].getText()
       assert(firstTxAddress.match(/^0x\w{8}\.{3}\w{4}$/))
+    })
+
+    it('calls and confirms a contract method where ETH is received', async () => {
+      await driver.switchTo().window(contractTestPage)
+      await delay(regularDelayMs)
+
+      const withdrawButton = await findElement(driver, By.css('#withdrawButton'))
+      await withdrawButton.click()
+      await delay(regularDelayMs)
+
+      await driver.switchTo().window(extension)
+      await delay(regularDelayMs)
+
+      const txListItem = await findElement(driver, By.css('.tx-list-item'))
+      await txListItem.click()
+      await delay(regularDelayMs)
+
+      const confirmButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Confirm')]`))
+      await confirmButton.click()
+      await delay(regularDelayMs)
+
+      const txStatuses = await findElements(driver, By.css('.tx-list-status'))
+      await driver.wait(until.elementTextMatches(txStatuses[0], /Confirmed/))
 
-      await driver.switchTo().window(remix)
-      await driver.executeScript("window.onbeforeunload = 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 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)
+      const tokenAmount = await balance.getText()
+      assert.ok(/^86.*ETH.*$/.test(tokenAmount))
       await delay(regularDelayMs)
     })
   })
@@ -719,112 +734,13 @@ describe('MetaMask', function () {
 
     it('finds the transaction in the transactions list', async function () {
       const transactions = await findElements(driver, By.css('.tx-list-item'))
-      assert.equal(transactions.length, 5)
-
-      const txValues = await findElements(driver, By.css('.tx-list-value'))
-      assert.equal(txValues.length, 5)
-      assert.equal(await txValues[0].getText(), '26 TST')
-      const txStatuses = await findElements(driver, By.css('.tx-list-status'))
-      await driver.wait(until.elementTextMatches(txStatuses[1], /Confirmed/))
-
-      const tokenBalanceAmount = await findElement(driver, By.css('.token-balance__amount'))
-      assert.equal(tokenBalanceAmount.getText(), '24 TST')
-    })
-  })
-
-  describe('Send token from inside MetaMask', () => {
-    let gasModal
-    it('starts to send a transaction', async function () {
-      const sendButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Send')]`))
-      await sendButton.click()
-      await delay(regularDelayMs)
-
-      const inputAddress = await findElement(driver, By.css('input[placeholder="Recipient Address"]'))
-      const inputAmount = await findElement(driver, By.css('.currency-display__input'))
-      await inputAddress.sendKeys('0x2f318C334780961FB129D2a6c30D0763d9a5C970')
-      await inputAmount.sendKeys('50')
-
-      // Set the gas limit
-      const configureGas = await findElement(driver, By.css('.send-v2__gas-fee-display button'))
-      await configureGas.click()
-      await delay(regularDelayMs)
-
-      gasModal = await driver.findElement(By.css('span .modal'))
-    })
-
-    it('customizes gas', async () => {
-      const [gasPriceInput, gasLimitInput] = await findElements(driver, By.css('.customize-gas-input'))
-      await gasPriceInput.clear()
-      await gasPriceInput.sendKeys('12.5')
-      await gasLimitInput.clear()
-      await gasLimitInput.sendKeys('56789')
-
-      const save = await findElement(driver, By.xpath(`//button[contains(text(), 'Save')]`))
-      await save.click()
-      await delay(regularDelayMs)
-    })
-
-    it('transitions to the confirm screen', async () => {
-      await driver.wait(until.stalenessOf(gasModal))
-
-      // Continue to next screen
-      const nextScreen = await findElement(driver, By.xpath(`//button[contains(text(), 'Next')]`))
-      await nextScreen.click()
-      await delay(regularDelayMs)
-    })
-
-    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 transactions = await findElements(driver, By.css('.tx-list-item'))
-      assert.equal(transactions.length, 1)
-
-      const txValues = await findElements(driver, By.css('.tx-list-value'))
-      assert.equal(txValues.length, 1)
-      assert.equal(await txValues[0].getText(), '50 TST')
-      const txStatuses = await findElements(driver, By.css('.tx-list-status'))
-      await driver.wait(until.elementTextMatches(txStatuses[0], /Confirmed/))
-    })
-  })
-
-  describe('Send a custom token from TokenFactory', () => {
-    it('sends an already created token', async () => {
-      await driver.executeScript(`window.open("https://tokenfactory.surge.sh/#/token/${tokenAddress}")`)
-      await delay(waitingNewPageDelayMs)
-
-      const [extension, tokenFactory] = await driver.getAllWindowHandles()
-      await driver.switchTo().window(tokenFactory)
-      const [
-        transferToAddress,
-        transferToAmount,
-      ] = await findElements(driver, By.css('.form-control'))
-
-      await transferToAddress.sendKeys('0x2f318C334780961FB129D2a6c30D0763d9a5C970')
-      await transferToAmount.sendKeys('26')
-
-      const transferAmountButton = await findElement(driver, By.xpath(`//button[contains(text(), 'Transfer Amount')]`))
-      await transferAmountButton.click()
-      await delay(regularDelayMs)
-
-      await driver.switchTo().window(extension)
-      await loadExtension(driver, extensionId)
-      await delay(regularDelayMs)
-
-      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 transactions = await findElements(driver, By.css('.tx-list-item'))
-      assert.equal(transactions.length, 7)
+      assert.equal(transactions.length, 8)
 
       const txValues = await findElements(driver, By.css('.tx-list-value'))
-      assert.equal(txValues.length, 7)
+      assert.equal(txValues.length, 8)
       assert.equal(await txValues[0].getText(), '26 TST')
       const txStatuses = await findElements(driver, By.css('.tx-list-status'))
       await driver.wait(until.elementTextMatches(txStatuses[0], /Confirmed/))
diff --git a/test/e2e/beta/run-all.sh b/test/e2e/beta/run-all.sh
index b0b6ecca8..49b2ee4ec 100755
--- a/test/e2e/beta/run-all.sh
+++ b/test/e2e/beta/run-all.sh
@@ -6,5 +6,5 @@ set -o pipefail
 
 export PATH="$PATH:./node_modules/.bin"
 
-shell-parallel -s 'npm run ganache:start' -x 'sleep 5 && mocha test/e2e/beta/metamask-beta-ui.spec'
-shell-parallel -s 'npm run ganache:start -- -d' -x 'sleep 5 && mocha test/e2e/beta/from-import-beta-ui.spec'
+shell-parallel -s 'npm run ganache:start' -x 'sleep 5 && http-server test/e2e/beta/contract-test/' -x 'sleep 5 && mocha test/e2e/beta/metamask-beta-ui.spec'
+shell-parallel -s 'npm run ganache:start -- -d'  -x 'sleep 5 && http-server test/e2e/beta/contract-test/' -x 'sleep 5 && mocha test/e2e/beta/from-import-beta-ui.spec'