Merge pull request #2098 from MetaMask/mascara-tests

Integration test suite improvements

17 files changed, 114 insertions, 229 deletions

diff --git a/circle.yml b/circle.yml
index f5da6857d..6aba5c1be 100644
--- a/circle.yml
+++ b/circle.yml
@@ -3,7 +3,7 @@ machine:
     version: 8.1.4
 test:
   override:
-    - "npm run ci"
+    - "npm test"
 dependencies:
   pre:
     - sudo apt-get update
diff --git a/development/index.html b/development/index.html
index 048aa3f35..a0814cb55 100644
--- a/development/index.html
+++ b/development/index.html
@@ -14,13 +14,13 @@
   </body>
 
 <style>
-html, body, #app-content, .super-dev-container {
+html, body, #test-container, .super-dev-container {
   height: 100%;
   width: 100%;
   position: relative;
   background: white;
 }
-.mock-app-root {
+#app-content {
   background: #F7F7F7;
 }
 </style>
diff --git a/development/test.html b/development/test.html
index 702be7fa0..49084c0a4 100644
--- a/development/test.html
+++ b/development/test.html
@@ -18,13 +18,14 @@
   </body>
 
 <style>
-html, body, #app-content, .super-dev-container {
+html, body, #test-container, .super-dev-container {
   height: 100%;
   width: 100%;
   position: relative;
   background: white;
 }
-.mock-app-root {
+
+#app-content {
   background: #F7F7F7;
 }
 </style>
diff --git a/mascara/src/proxy.js b/mascara/src/proxy.js
index 5b95175f1..07c5b0e3c 100644
--- a/mascara/src/proxy.js
+++ b/mascara/src/proxy.js
@@ -1,7 +1,6 @@
 const createParentStream = require('iframe-stream').ParentStream
 const SWcontroller = require('client-sw-ready-event/lib/sw-client.js')
 const SwStream = require('sw-stream/lib/sw-stream.js')
-const SetupUntrustedComunication = ('./lib/setup-untrusted-connection.js')
 
 let intervalDelay =  Math.floor(Math.random() * (30000 - 1000)) + 1000
 const background = new SWcontroller({
@@ -12,7 +11,7 @@ const background = new SWcontroller({
 })
 
 const pageStream = createParentStream()
-background.on('ready', (_) => {
+background.on('ready', () => {
   let swStream = SwStream({
     serviceWorker: background.controller,
     context: 'dapp',
diff --git a/mascara/src/ui.js b/mascara/src/ui.js
index 5f9be542f..2f940ad1a 100644
--- a/mascara/src/ui.js
+++ b/mascara/src/ui.js
@@ -2,8 +2,6 @@ const injectCss = require('inject-css')
 const SWcontroller = require('client-sw-ready-event/lib/sw-client.js')
 const SwStream = require('sw-stream/lib/sw-stream.js')
 const MetaMaskUiCss = require('../../ui/css')
-const setupIframe = require('./lib/setup-iframe.js')
-const MetamaskInpageProvider = require('../../app/scripts/lib/inpage-provider.js')
 const MetamascaraPlatform = require('../../app/scripts/platforms/window')
 const startPopup = require('../../app/scripts/popup-core')
 
@@ -17,6 +15,7 @@ const container = document.getElementById('app-content')
 
 var name = 'popup'
 window.METAMASK_UI_TYPE = name
+window.METAMASK_PLATFORM_TYPE = 'mascara'
 
 let intervalDelay =  Math.floor(Math.random() * (30000 - 1000)) + 1000
 
@@ -32,25 +31,39 @@ const connectApp = function (readSw) {
     serviceWorker: background.controller,
     context: name,
   })
-  startPopup({container, connectionStream}, (err, store) => {
-    if (err) return displayCriticalError(err)
-    store.subscribe(() => {
-      const state = store.getState()
-      if (state.appState.shouldClose) window.close()
+  return new Promise((resolve, reject) => {
+    startPopup({ container, connectionStream }, (err, store) => {
+      console.log('hello from MetaMascara ui!')
+      if (err) reject(err)
+      store.subscribe(() => {
+        const state = store.getState()
+        if (state.appState.shouldClose) window.close()
+      })
+      resolve()
     })
   })
 }
-background.on('ready', (sw) => {
-  background.removeListener('updatefound', connectApp)
-  connectApp(sw)
+background.on('ready', async (sw) => {
+  try {
+    background.removeListener('updatefound', connectApp)
+    await timeout(1000)
+    await connectApp(sw)
+    console.log('hello from cb ready event!')
+  } catch (e) {
+    console.error(e)
+  }
 })
-background.on('updatefound', () => window.location.reload())
+background.on('updatefound', windowReload)
 
 background.startWorker()
-.then(() => {
-  setTimeout(() => {
-    const appContent = document.getElementById(`app-content`)
-    if (!appContent.children.length) window.location.reload()
-  }, 2000)
-})
-console.log('hello from MetaMascara ui!')
+
+function windowReload() {
+  if (window.METAMASK_SKIP_RELOAD) return
+  window.location.reload()
+}
+
+function timeout (time) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, time || 1500)
+  })
+}
\ No newline at end of file
diff --git a/mascara/test/index.html b/mascara/test/index.html
deleted file mode 100644
index 6495c2cfc..000000000
--- a/mascara/test/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width">
-  <title>QUnit Example</title>
-  <link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.0.0.css">
-</head>
-<body>
-  <div id="qunit"></div>
-  <div id="qunit-fixture"></div>
-  <script src="https://code.jquery.com/qunit/qunit-2.0.0.js"></script>
-  <script src="./jquery-3.1.0.min.js"></script>
-  <script src="./helpers.js"></script>
-  <script src="./test-bundle.js"></script>
-  <script src="/testem.js"></script>
-
-  <div id="app-content"></div>
-  <script src="./bundle.js"></script>
-</body>
-</html>
diff --git a/mascara/test/lib/first-time.js b/mascara/test/lib/first-time.js
deleted file mode 100644
index e42c9e39d..000000000
--- a/mascara/test/lib/first-time.js
+++ /dev/null
@@ -1,119 +0,0 @@
-const PASSWORD = 'password123'
-
-QUnit.module('first time usage')
-
-QUnit.test('render init screen', function (assert) {
-  var done = assert.async()
-  let app
-
-  wait(1000).then(function() {
-    app = $('#app-content').contents()
-    const recurseNotices = function () {
-      let button = app.find('button')
-      if (button.html() === 'Accept') {
-        let termsPage = app.find('.markdown')[0]
-        termsPage.scrollTop = termsPage.scrollHeight
-        return wait().then(() => {
-          button.click()
-          return wait()
-        }).then(() => {
-          return recurseNotices()
-        })
-      } else {
-        return wait()
-      }
-    }
-    return recurseNotices()
-  }).then(function() {
-    // Scroll through terms
-    var title = app.find('h1').text()
-    assert.equal(title, 'MetaMask', 'title screen')
-
-    // enter password
-    var pwBox = app.find('#password-box')[0]
-    var confBox = app.find('#password-box-confirm')[0]
-    pwBox.value = PASSWORD
-    confBox.value = PASSWORD
-
-    return wait()
-  }).then(function() {
-
-    // create vault
-    var createButton = app.find('button.primary')[0]
-    createButton.click()
-
-    return wait(1500)
-  }).then(function() {
-
-    var created = app.find('h3')[0]
-    assert.equal(created.textContent, 'Vault Created', 'Vault created screen')
-
-    // Agree button
-    var button = app.find('button')[0]
-    assert.ok(button, 'button present')
-    button.click()
-
-    return wait(1000)
-  }).then(function() {
-
-    var detail = app.find('.account-detail-section')[0]
-    assert.ok(detail, 'Account detail section loaded.')
-
-    var sandwich = app.find('.sandwich-expando')[0]
-    sandwich.click()
-
-    return wait()
-  }).then(function() {
-
-    var sandwich = app.find('.menu-droppo')[0]
-    var children = sandwich.children
-    var lock = children[children.length - 2]
-    assert.ok(lock, 'Lock menu item found')
-    lock.click()
-
-    return wait(1000)
-  }).then(function() {
-
-    var pwBox = app.find('#password-box')[0]
-    pwBox.value = PASSWORD
-
-    var createButton = app.find('button.primary')[0]
-    createButton.click()
-
-    return wait(1000)
-  }).then(function() {
-
-    var detail = app.find('.account-detail-section')[0]
-    assert.ok(detail, 'Account detail section loaded again.')
-
-    return wait()
-  }).then(function (){
-
-    var qrButton = app.find('.fa.fa-qrcode')[0]
-    qrButton.click()
-
-    return wait(1000)
-  }).then(function (){
-
-    var qrHeader = app.find('.qr-header')[0]
-    var qrContainer = app.find('#qr-container')[0]
-    assert.equal(qrHeader.textContent, 'Account 1', 'Should show account label.')
-    assert.ok(qrContainer, 'QR Container found')
-
-    return wait()
-  }).then(function (){
-
-    var networkMenu = app.find('.network-indicator')[0]
-    networkMenu.click()
-
-    return wait()
-  }).then(function (){
-
-    var networkMenu = app.find('.network-indicator')[0]
-    var children = networkMenu.children
-    children.length[3]
-    assert.ok(children, 'All network options present')
-
-    done()
-  })
-})
diff --git a/mascara/test/test-ui.js b/mascara/test/test-ui.js
new file mode 100644
index 000000000..b9bc42dff
--- /dev/null
+++ b/mascara/test/test-ui.js
@@ -0,0 +1,12 @@
+const Helper = require('./util/mascara-test-helper.js')
+
+window.addEventListener('load', () => {
+  window.METAMASK_SKIP_RELOAD = true
+  // inject app container
+  const body = document.body
+  const container = document.createElement('div')
+  container.id = 'app-content'
+  body.appendChild(container)
+  // start ui
+  require('../src/ui.js')
+})
diff --git a/mascara/test/testem.yml b/mascara/test/testem.yml
deleted file mode 100644
index f1f5844bd..000000000
--- a/mascara/test/testem.yml
+++ /dev/null
@@ -1,13 +0,0 @@
-launch_in_dev:
-  - Chrome
-  - Firefox
-  - Opera
-launch_in_ci:
-  - Chrome
-  - Firefox
-  - Opera
-framework:
-  - qunit
-before_tests: "npm run mascaraCi"
-after_tests: "rm ./background.js ./test-bundle.js ./bundle.js"
-test_page: "./index.html"
diff --git a/mascara/test/window-load.js b/mascara/test/window-load.js
deleted file mode 100644
index d3f44f05f..000000000
--- a/mascara/test/window-load.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const Helper = require('./util/mascara-test-helper.js')
-
-window.addEventListener('load', () => {
-  require('../src/ui.js')
-})
diff --git a/mock-dev.js b/mock-dev.js
index b6652bdf7..a47f1ed4d 100644
--- a/mock-dev.js
+++ b/mock-dev.js
@@ -94,9 +94,8 @@ startApp()
 function startApp(){
   const body = document.body
   const container = document.createElement('div')
-  container.id = 'app-content'
+  container.id = 'test-container'
   body.appendChild(container)
-  console.log('container', container)
 
   render(
     h('.super-dev-container', [
@@ -113,7 +112,7 @@ function startApp(){
 
       h(Selector, { actions, selectedKey: selectedView, states, store }),
 
-      h('.mock-app-root', {
+      h('#app-content', {
         style: {
           height: '500px',
           width: '360px',
diff --git a/package.json b/package.json
index 3f9d9c538..14e7f100f 100644
--- a/package.json
+++ b/package.json
@@ -6,30 +6,33 @@
   "scripts": {
     "start": "npm run dev",
     "dev": "gulp dev --debug",
-    "disc": "gulp disc --debug",
-    "clear": "rm -rf node_modules/eth-contract-metadata && rm -rf node_modules/eth-phishing-detect",
-    "dist": "npm run clear && npm install && gulp dist",
-    "test": "npm run lint && npm run test-unit && npm run test-integration",
-    "test-unit": "METAMASK_ENV=test mocha --require test/helper.js --recursive \"test/unit/**/*.js\"",
-    "single-test": "METAMASK_ENV=test mocha --require test/helper.js",
-    "test-integration": "npm run buildMock && npm run buildCiUnits && karma start",
-    "test-coverage": "nyc npm run test-unit && if [ $COVERALLS_REPO_TOKEN ]; then nyc report --reporter=text-lcov | coveralls; fi",
-    "ci": "npm run lint && npm run test-coverage && npm run test-integration",
-    "lint": "gulp lint",
-    "buildCiUnits": "node test/integration/index.js",
-    "watch": "mocha watch --recursive \"test/unit/**/*.js\"",
-    "genStates": "node development/genStates.js",
-    "ui": "npm run genStates && beefy ui-dev.js:bundle.js --live --open --index=./development/index.html --cwd ./",
+    "ui": "npm run test:flat:build:states && beefy ui-dev.js:bundle.js --live --open --index=./development/index.html --cwd ./",
     "mock": "beefy mock-dev.js:bundle.js --live --open --index=./development/index.html --cwd ./",
-    "buildMock": "npm run genStates && browserify ./mock-dev.js -o ./development/bundle.js",
+    "watch": "mocha watch --recursive \"test/unit/**/*.js\"",
+    "mascara": "node ./mascara/example/server",
+    "dist": "npm run dist:clear && npm install && gulp dist",
+    "dist:clear": "rm -rf node_modules/eth-contract-metadata && rm -rf node_modules/eth-phishing-detect",
+    "test": "npm run lint && npm run test:coverage && npm run test:integration",
+    "test:unit": "METAMASK_ENV=test mocha --require test/helper.js --recursive \"test/unit/**/*.js\"",
+    "test:single": "METAMASK_ENV=test mocha --require test/helper.js",
+    "test:integration": "npm run test:flat",
+    "test:coverage": "nyc npm run test:unit && npm run test:coveralls-upload",
+    "test:coveralls-upload": "if [ $COVERALLS_REPO_TOKEN ]; then nyc report --reporter=text-lcov | coveralls; fi",
+    "test:flat": "npm run test:flat:build && karma start test/flat.conf.js",
+    "test:flat:build": "npm run test:flat:build:ui && npm run test:flat:build:tests",
+    "test:flat:build:tests": "node test/integration/index.js",
+    "test:flat:build:states": "node development/genStates.js",
+    "test:flat:build:ui": "npm run test:flat:build:states && browserify ./mock-dev.js -o ./development/bundle.js",
+    "test:mascara": "npm run test:mascara:build && karma start test/mascara.conf.js",
+    "test:mascara:build": "mkdir -p dist/mascara && npm run test:mascara:build:ui && npm run test:mascara:build:background && npm run test:mascara:build:tests",
+    "test:mascara:build:ui": "browserify mascara/test/test-ui.js -o dist/mascara/ui.js",
+    "test:mascara:build:background": "browserify mascara/src/background.js -o dist/mascara/background.js",
+    "test:mascara:build:tests": "browserify test/integration/lib/first-time.js -o dist/mascara/tests.js",
+    "lint": "gulp lint",
+    "disc": "gulp disc --debug",
     "announce": "node development/announcer.js",
     "generateNotice": "node notices/notice-generator.js",
-    "deleteNotice": "node notices/notice-delete.js",
-    "mascara": "node ./mascara/example/server",
-    "buildMascaraCi": "browserify mascara/test/window-load.js -o mascara/test/bundle.js",
-    "buildMascaraSWCi": "browserify mascara/src/background.js -o mascara/test/background.js",
-    "mascaraCi": "npm run buildMascaraCi && npm run buildMascaraSWCi && node mascara/test/index.js",
-    "testMascara": "cd mascara/test && npm run mascaraCi && testem ci -P 3"
+    "deleteNotice": "node notices/notice-delete.js"
   },
   "browserify": {
     "transform": [
diff --git a/karma.conf.js b/test/base.conf.js
index 8e6d55972..122392822 100644
--- a/karma.conf.js
+++ b/test/base.conf.js
@@ -2,7 +2,7 @@
 // Generated on Mon Sep 11 2017 18:45:48 GMT-0700 (PDT)
 
 module.exports = function(config) {
-  config.set({
+  return {
     // base path that will be used to resolve all patterns (eg. files, exclude)
     basePath: process.cwd(),
 
@@ -16,9 +16,7 @@ module.exports = function(config) {
 
     // list of files / patterns to load in the browser
     files: [
-      'development/bundle.js',
       'test/integration/jquery-3.1.0.min.js',
-      'test/integration/bundle.js',
       { pattern: 'dist/chrome/images/**/*.*', watched: false, included: false, served: true },
       { pattern: 'dist/chrome/fonts/**/*.*', watched: false, included: false, served: true },
     ],
@@ -57,5 +55,5 @@ module.exports = function(config) {
     // Concurrency level
     // how many browser should be started simultaneous
     concurrency: Infinity
-  })
+  }
 }
diff --git a/test/flat.conf.js b/test/flat.conf.js
new file mode 100644
index 000000000..cd2dbdcdc
--- /dev/null
+++ b/test/flat.conf.js
@@ -0,0 +1,8 @@
+const getBaseConfig = require('./base.conf.js')
+
+module.exports = function(config) {
+  const settings = getBaseConfig(config)
+  settings.files.push('development/bundle.js')
+  settings.files.push('test/integration/bundle.js')
+  config.set(settings)
+}
diff --git a/test/integration/lib/first-time.js b/test/integration/lib/first-time.js
index 38a94e551..104f22772 100644
--- a/test/integration/lib/first-time.js
+++ b/test/integration/lib/first-time.js
@@ -10,19 +10,12 @@ QUnit.test('render init screen', (assert) => {
   })
 })
 
-// QUnit.testDone(({ module, name, total, passed, failed, skipped, todo, runtime }) => {
-//   if (failed > 0) {
-//     const app = $('iframe').contents()[0].documentElement
-//     console.warn('Test failures - dumping DOM:')
-//     console.log(app.innerHTML)
-//   }
-// })
-
 async function runFirstTimeUsageTest(assert, done) {
+  let waitTime = 0
+  if (window.METAMASK_PLATFORM_TYPE === 'mascara') waitTime = 4000
+  await timeout(waitTime)
 
-  await timeout()
-
-  const app = $('#app-content .mock-app-root')
+  const app = $('#app-content')
 
   // recurse notices
   while (true) {
@@ -32,10 +25,12 @@ async function runFirstTimeUsageTest(assert, done) {
       const termsPage = app.find('.markdown')[0]
       termsPage.scrollTop = termsPage.scrollHeight
       await timeout()
+      console.log('Clearing notice')
       button.click()
       await timeout()
     } else {
       // exit loop
+      console.log('No more notices...')
       break
     }
   }
@@ -129,10 +124,8 @@ async function runFirstTimeUsageTest(assert, done) {
   assert.ok(children2, 'All network options present')
 }
 
-function timeout(time) {
-  return new Promise(function (resolve, reject) {
-    setTimeout(function () {
-      resolve()
-    }, time * 3 || 1500)
+function timeout (time) {
+  return new Promise((resolve, reject) => {
+    setTimeout(resolve, time || 1500)
   })
 }
\ No newline at end of file
diff --git a/test/mascara.conf.js b/test/mascara.conf.js
new file mode 100644
index 000000000..97e53fc2b
--- /dev/null
+++ b/test/mascara.conf.js
@@ -0,0 +1,17 @@
+const getBaseConfig = require('./base.conf.js')
+
+module.exports = function(config) {
+  const settings = getBaseConfig(config)
+
+  // ui and tests
+  settings.files.push('dist/mascara/ui.js')
+  settings.files.push('dist/mascara/tests.js')
+  // service worker background
+  settings.files.push({ pattern: 'dist/mascara/background.js', watched: false, included: false, served: true }),
+  settings.proxies['/background.js'] = '/base/dist/mascara/background.js'
+
+  // use this to keep the browser open for debugging
+  settings.browserNoActivityTimeout = 10000000
+
+  config.set(settings)
+}
diff --git a/ui-dev.js b/ui-dev.js
index 367b5d546..de5dfd8ef 100644
--- a/ui-dev.js
+++ b/ui-dev.js
@@ -61,7 +61,7 @@ const actions = {
 var css = MetaMaskUiCss()
 injectCss(css)
 
-const container = document.querySelector('#app-content')
+const container = document.querySelector('#test-container')
 
 // parse opts
 var store = configureStore(states[selectedView])
@@ -72,7 +72,7 @@ render(
 
     h(Selector, { actions, selectedKey: selectedView, states, store }),
 
-    h('.mock-app-root', {
+    h('#app-content', {
       style: {
         height: '500px',
         width: '360px',