Merge pull request #1356 from MetaMask/mascaraTuneUps

Mascara tune ups

Author: kumavis

.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,12 +1,13 @@
 global.window = global
+const self = global
 const pipe = require('pump')
 
 const SwGlobalListener = require('sw-stream/lib/sw-global-listener.js')
 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

@@ -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/proxy.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/src/ui.js

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

mascara/test/helpers.js

@@ -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.html

@@ -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/index.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/jquery-3.1.0.min.js

@@ -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"