add browser test for testing external web3

ci/browser_tests.sh

@@ -15,6 +15,7 @@ BUILD_ID=${CIRCLE_BUILD_NUM:-${TRAVIS_JOB_NUMBER}}
 echo "$BUILD_ID"
 TEST_EXITCODE=0
 
+npm run ganache-cli &
 npm run serve &
 setupRemixd
 

package.json

@@ -37,6 +37,7 @@
     "exorcist": "^0.4.0",
     "fast-async": "^7.0.6",
     "fast-levenshtein": "^2.0.6",
+    "ganache-cli": "^6.8.1",
     "gists": "^1.0.1",
     "ipfs-mini": "^1.1.5",
     "is-electron": "^2.2.0",
@@ -182,6 +183,7 @@
     "test": "csslint && standard && node test/index.js",
     "test-browser": "npm-run-all -lpr selenium downloadsolc_root make-mock-compiler serve browsertest",
     "watch": "watchify src/index.js -dv -p browserify-reload -o build/app.js --exclude solc",
-    "reinstall": "rm ./node-modules/ -rf; rm package-lock.json; rm ./build/ -rf; npm install; npm run build"
+    "reinstall": "rm ./node-modules/ -rf; rm package-lock.json; rm ./build/ -rf; npm install; npm run build",
+    "ganache-cli": "npx ganache-cli"
   }
 }

src/app/panels/terminal.js

@@ -148,7 +148,7 @@ class Terminal extends Plugin {
         ${self._view.dragbar}
         <div class="${css.menu} border-top border-dark bg-light">
           ${self._view.icon}
-          <div class=${css.clear} onclick=${clear}>
+          <div class=${css.clear} id="clearConsole" onclick=${clear}>
             <i class="fas fa-ban" aria-hidden="true" title="Clear console"
             onmouseenter=${hover} onmouseleave=${hover}></i>
           </div>

test-browser/commands/clickInstance.js

@@ -3,7 +3,8 @@ const EventEmitter = require('events')
 class ClickInstance extends EventEmitter {
   command (index) {
     index = index + 2
-    this.api.click('.instance:nth-of-type(' + index + ') > div > button').perform(() => { this.emit('complete') })
+    let selector = '.instance:nth-of-type(' + index + ') > div > button'
+    this.api.waitForElementPresent(selector).click(selector).perform(() => { this.emit('complete') })
     return this
   }
 }

test-browser/commands/journalLastChildIncludes.js

+const EventEmitter = require('events')
+
+/*
+  Check if the last log in the console contains a specific text
+*/
+class JournalLastChildIncludes extends EventEmitter {
+  command (val) {
+    this.api
+    .waitForElementVisible('#journal > div:last-child', 10000)
+    .getText('#journal > div:last-child', (result) => {
+      console.log('JournalLastChildIncludes', result.value)
+      if (result.value.indexOf(val) === -1) return this.api.assert.fail(`wait for ${val} in ${result.value}`)
+      this.emit('complete')
+    })
+    return this
+  }
+}
+
+module.exports = JournalLastChildIncludes

test-browser/tests/ballot.js

@@ -55,8 +55,25 @@ module.exports = {
     .testFunction('delegate - transact (not payable)', '0xca58080c8099429caeeffe43b8104df919c2c543dceb9edf9242fa55f045c803',
             `[vm]\nfrom:0xca3...a733c\nto:Ballot.delegate(address) 0x692...77b3a\nvalue:0 wei\ndata:0x5c1...4d2db\nlogs:0\nhash:0xca5...5c803`,
             {types: 'address to', values: '"0x4b0897b0513fdc7c541b6d9d7e929c4e5364d2db"'}, null, null)
+  },
+
+  'Deploy and use Ballot using external web3': function (browser) {
+    browser
+    .click('#selectExEnvOptions #web3-mode')
+    .modalFooterOKClick()
+    .clickLaunchIcon('solidity')
+    .testContracts('Untitled.sol', sources[0]['browser/Untitled.sol'], ['Ballot'])
+    .clickLaunchIcon('udapp')
+    .setValue('input[placeholder="bytes32[] proposalNames"]', '["0x48656c6c6f20576f726c64210000000000000000000000000000000000000000"]')
+    .click('#runTabView button[class^="instanceButton"]')
+    .clickInstance(0)
+    .click('#clearConsole')
+    .clickFunction('delegate - transact (not payable)', {types: 'address to', values: '0xCA35b7d915458EF540aDe6068dFe2F44E8fa733c'})
+    .journalLastChildIncludes('Ballot.delegate(address)')
+    .journalLastChildIncludes('data:0x5c1...a733c')
     .end()
   },
+
   tearDown: sauce
 }