tests - integration - get flat and mascara tests closer to compatible

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>

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>

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')
 
@@ -32,7 +30,7 @@ const connectApp = function (readSw) {
     serviceWorker: background.controller,
     context: name,
   })
-  startPopup({container, connectionStream}, (err, store) => {
+  startPopup({ container, connectionStream }, (err, store) => {
     if (err) return displayCriticalError(err)
     store.subscribe(() => {
       const state = store.getState()
@@ -49,8 +47,8 @@ background.on('updatefound', windowReload)
 background.startWorker()
 .then(() => {
   setTimeout(() => {
-    const appContent = document.getElementById(`app-content`)
-    if (!appContent.children.length) windowReload()
+    const container = document.getElementById(`app-content`)
+    if (!container.children.length) windowReload()
   }, 2000)
 })
 console.log('hello from MetaMascara ui!')

mascara/test/lib/first-time.js

@@ -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()
-  })
-})

mascara/test/test-ui.js

@@ -7,7 +7,6 @@ window.addEventListener('load', () => {
   const container = document.createElement('div')
   container.id = 'app-content'
   body.appendChild(container)
-
   // start ui
   require('../src/ui.js')
 })

mock-dev.js

@@ -94,7 +94,7 @@ startApp()
 function startApp(){
   const body = document.body
   const container = document.createElement('div')
-  container.id = 'app-content'
+  container.id = 'test-container'
   body.appendChild(container)
 
   render(
@@ -112,7 +112,7 @@ function startApp(){
 
       h(Selector, { actions, selectedKey: selectedView, states, store }),
 
-      h('.mock-app-root', {
+      h('#app-content', {
         style: {
           height: '500px',
           width: '360px',

test/integration/lib/first-time.js

@@ -10,19 +10,11 @@ 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) {
 
   await timeout()
 
-  const app = $('#app-content .mock-app-root')
+  const app = $('#app-content')
 
   // recurse notices
   while (true) {
@@ -32,10 +24,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
     }
   }

test/mascara.conf.js

@@ -10,5 +10,8 @@ module.exports = function(config) {
   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)
 }

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',