Merge pull request #1356 from MetaMask/mascaraTuneUps

Mascara tune ups

.gitignore

@@ -16,3 +16,6 @@ development/bundle.js
 builds.zip
 test/integration/bundle.js
 development/states.js
+test/background.js
+test/bundle.js
+test/test-bundle.js

mascara/README.md

@@ -1,20 +1,24 @@
 start the dual servers (dapp + mascara)
 ```
-node server.js
+npm run mascara
 ```
 
 ## First time use:
 
-- navigate to: http://localhost:9001/popup/popup.html
+- navigate to: http://localhost:9001
 - Create an Account
-- go back to http://localhost:9002/
+- go back to http://localhost:9002
 - open devTools
 - click Sync Tx
 
-### Todos
+## Tests:
 
-  - [ ] Figure out user flows and UI redesign
-  - [ ] Figure out FireFox
-    Standing problems:
-    - [ ] IndexDb
+```
+npm run testMascara
+```
 
+Test will run in browser, you will have to have these browsers installed:
+
+- Chrome
+- Firefox
+- Opera

mascara/src/background.js

@@ -1,4 +1,5 @@
 global.window = global
+const self = global
 const pipe = require('pump')
 
 const SwGlobalListener = require('sw-stream/lib/sw-global-listener.js')
@@ -6,7 +7,7 @@ const connectionListener = new SwGlobalListener(self)
 const setupMultiplex = require('../../app/scripts/lib/stream-utils.js').setupMultiplex
 const PortStream = require('../../app/scripts/lib/port-stream.js')
 
-const DbController = require('./lib/index-db-controller')
+const DbController = require('idb-global')
 
 const SwPlatform = require('../../app/scripts/platforms/sw')
 const MetamaskController = require('../../app/scripts/metamask-controller')
@@ -21,6 +22,7 @@ const STORAGE_KEY = 'metamask-config'
 // const METAMASK_DEBUG = 'GULP_METAMASK_DEBUG'
 const METAMASK_DEBUG = true
 let popupIsOpen = false
+let connectedClientCount = 0
 
 const log = require('loglevel')
 global.log = log
@@ -31,6 +33,11 @@ self.addEventListener('install', function(event) {
 })
 self.addEventListener('activate', function(event) {
   event.waitUntil(self.clients.claim())
+  self.clients.matchAll()
+  .then((clients) => {
+    if (connectedClientCount < clients.length) sendMessageToAllClients('reconnect')
+  })
+
 })
 
 console.log('inside:open')
@@ -40,7 +47,6 @@ console.log('inside:open')
 let diskStore
 const dbController = new DbController({
   key: STORAGE_KEY,
-  version: 2,
 })
 loadStateFromPersistence()
 .then((initState) => setupController(initState))
@@ -107,6 +113,7 @@ function setupController (initState, client) {
 
   connectionListener.on('remote', (portStream, messageEvent) => {
     console.log('REMOTE CONECTION FOUND***********')
+    connectedClientCount += 1
     connectRemote(portStream, messageEvent.data.context)
   })
 
@@ -142,4 +149,12 @@ function setupController (initState, client) {
   return Promise.resolve()
 
 }
+
+function sendMessageToAllClients (message) {
+  self.clients.matchAll().then(function(clients) {
+    clients.forEach(function(client) {
+      client.postMessage(message)
+    })
+  })
+}
 function noop () {}

mascara/src/lib/index-db-controller.js

@@ -1,71 +0,0 @@
-const EventEmitter = require('events')
-module.exports = class IndexDbController extends EventEmitter {
-
-  constructor (opts) {
-    super()
-    global.IDBTransaction = global.IDBTransaction || global.webkitIDBTransaction || global.msIDBTransaction || {READ_WRITE: "readwrite"}; // This line should only be needed if it is needed to support the object's constants for older browsers
-    global.IDBKeyRange = global.IDBKeyRange || global.webkitIDBKeyRange || global.msIDBKeyRange
-    this.migrations = opts.migrations
-    this.key = opts.key
-    this.version = opts.version
-    this.initialState = opts.initialState
-  }
-
-  // Opens the database connection and returns a promise
-  open () {
-    return this.get('dataStore')
-    .then((data) => {
-      if (!data) {
-        return this._add('dataStore', this.initialState)
-          .then(() => this.get('dataStore'))
-          .then((versionedData) => Promise.resolve(versionedData))
-      }
-      return Promise.resolve(data)
-    })
-  }
-
-
-  get (key = 'dataStore') {
-    return this._request('get', key)
-  }
-  put (state) {
-    return this._request('put', state, 'dataStore')
-  }
-
-  _add (key = 'dataStore', objStore) {
-    return this._request('add', objStore, key)
-  }
-
-  _request (call, ...args) {
-    return new Promise((resolve, reject) => {
-      const self = this
-      const dbOpenRequest = global.indexedDB.open(this.key, this.version)
-
-      dbOpenRequest.addEventListener('upgradeneeded', (event) => {
-        this.db = event.target.result
-        this.db.createObjectStore('dataStore')
-      })
-
-      dbOpenRequest.onsuccess = (event) => {
-        this.db = dbOpenRequest.result
-        this.emit('success')
-        const dbTransaction = this.db.transaction('dataStore', 'readwrite')
-        const request = dbTransaction.objectStore('dataStore')
-        const objRequest = request[call](...args)
-        objRequest.addEventListener('success', (event) => {
-          return resolve(objRequest.result)
-        })
-        objRequest.addEventListener('error', (err) => {
-          return reject(`IndexDBController - ${call} failed to excute on indexedDB`)
-        })
-        dbTransaction.addEventListener('complete', (event) => {
-          this.emit('complete')
-        })
-      }
-
-      dbOpenRequest.addEventListener('error', (event) => {
-        return reject({message: `IndexDBController - open:@${call} failed to excute on indexedDB`, errorEvent: event})
-      })
-    })
-  }
-}

mascara/src/proxy.js

@@ -20,6 +20,7 @@ background.on('ready', (_) => {
   pageStream.pipe(swStream).pipe(pageStream)
 
 })
+background.on('updatefound', () => window.location.reload())
 
 background.on('error', console.error)
 background.startWorker()

mascara/src/ui.js

@@ -27,7 +27,7 @@ const background = new SWcontroller({
   wakeUpInterval: 20000
 })
 // Setup listener for when the service worker is read
-background.on('ready', (readSw) => {
+const connectApp = function (readSw) {
   let connectionStream = SwStream({
     serviceWorker: background.controller,
     context: name,
@@ -39,6 +39,14 @@ background.on('ready', (readSw) => {
       if (state.appState.shouldClose) window.close()
     })
   })
+}
+
+background.on('ready', (sw) => {
+  background.removeListener('updatefound', connectApp)
+  connectApp(sw)
 })
+background.on('updatefound', () => window.location.reload())
+
 background.startWorker()
+// background.startWorker()
 console.log('hello from MetaMascara ui!')

mascara/test/helpers.js

@@ -0,0 +1,7 @@
+function wait(time) {
+  return new Promise(function(resolve, reject) {
+    setTimeout(function() {
+      resolve()
+    }, time * 3 || 1500)
+  })
+}

mascara/test/index.html

@@ -0,0 +1,21 @@
+<!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>

mascara/test/index.js

@@ -0,0 +1,22 @@
+var fs = require('fs')
+var path = require('path')
+var browserify = require('browserify');
+var tests = fs.readdirSync(path.join(__dirname, 'lib'))
+var bundlePath = path.join(__dirname, 'test-bundle.js')
+var b = browserify();
+
+// Remove old bundle
+try {
+  fs.unlinkSync(bundlePath)
+} catch (e) {
+  console.error(e)
+}
+
+var writeStream = fs.createWriteStream(bundlePath)
+
+tests.forEach(function(fileName) {
+  b.add(path.join(__dirname, 'lib', fileName))
+})
+
+b.bundle().pipe(writeStream);
+

mascara/test/lib/first-time.js

@@ -0,0 +1,119 @@
+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() === 'Continue') {
+        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()
+  })
+})

mascara/test/testem.yml

@@ -0,0 +1,13 @@
+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"

mascara/test/util/mascara-test-helper.js

@@ -0,0 +1,40 @@
+const EventEmitter = require('events')
+const IDB = require('idb-global')
+const KEY = 'metamask-test-config'
+module.exports = class Helper extends EventEmitter {
+  constructor () {
+    super()
+  }
+
+  tryToCleanContext () {
+    this.unregister()
+    .then(() => this.clearDb())
+    .then(() => super.emit('complete'))
+    .catch((err) => super.emit('complete'))
+  }
+
+  unregister () {
+    return global.navigator.serviceWorker.getRegistration()
+    .then((registration) => {
+      if (registration) return registration.unregister()
+      .then((b) => b ? Promise.resolve() : Promise.reject())
+      else return Promise.resolve()
+    })
+  }
+  clearDb () {
+    return new Promise ((resolve, reject) => {
+      const deleteRequest = global.indexDB.deleteDatabase(KEY)
+      deleteRequest.addEventListener('success', resolve)
+      deleteRequest.addEventListener('error', reject)
+    })
+
+  }
+  mockState (state) {
+    const db = new IDB({
+      version: 2,
+      key: KEY,
+      initialState: state
+    })
+    return db.open()
+  }
+}

mascara/test/window-load.js

@@ -0,0 +1,5 @@
+const Helper = require('./util/mascara-test-helper.js')
+
+window.addEventListener('load', () => {
+  require('../src/ui.js')
+})

package.json

@@ -21,7 +21,12 @@
     "testem": "npm run buildMock && testem",
     "announce": "node development/announcer.js",
     "generateNotice": "node notices/notice-generator.js",
-    "deleteNotice": "node notices/notice-delete.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"
   },
   "browserify": {
     "transform": [
@@ -44,7 +49,7 @@
     "bluebird": "^3.5.0",
     "browser-passworder": "^2.0.3",
     "browserify-derequire": "^0.9.4",
-    "client-sw-ready-event": "^3.0.1",
+    "client-sw-ready-event": "^3.0.3",
     "clone": "^1.0.2",
     "copy-to-clipboard": "^2.0.0",
     "debounce": "^1.0.0",
@@ -68,6 +73,7 @@
     "extensionizer": "^1.0.0",
     "gulp-eslint": "^2.0.0",
     "hat": "0.0.3",
+    "idb-global": "^1.0.0",
     "identicon.js": "^1.2.1",
     "iframe": "^1.0.0",
     "iframe-stream": "^1.0.2",