Merge pull request #2069 from MetaMask/integration-tests-fix2

Integration test improvements

circle.yml

@@ -3,4 +3,15 @@ machine:
     version: 8.1.4
 test:
   override:
-    - "npm run ci"
+    - "npm run ci"
+dependencies:
+  pre:
+    - sudo apt-get update
+    # get latest stable firefox
+    - sudo apt-get install firefox
+    - firefox_cmd=`which firefox`; sudo rm -f $firefox_cmd; sudo ln -s `which firefox.ubuntu` $firefox_cmd
+    # get latest stable chrome
+    - wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -
+    - sudo sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
+    - sudo apt-get update
+    - sudo apt-get install google-chrome-stable

karma.conf.js

@@ -0,0 +1,61 @@
+// Karma configuration
+// Generated on Mon Sep 11 2017 18:45:48 GMT-0700 (PDT)
+
+module.exports = function(config) {
+  config.set({
+    // base path that will be used to resolve all patterns (eg. files, exclude)
+    basePath: process.cwd(),
+
+    browserConsoleLogOptions: {
+      terminal: false,
+    },
+
+    // frameworks to use
+    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+    frameworks: ['qunit'],
+
+    // 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 },
+    ],
+
+    proxies: {
+      '/images/': '/base/dist/chrome/images/',
+      '/fonts/': '/base/dist/chrome/fonts/',
+    },
+
+    // test results reporter to use
+    // possible values: 'dots', 'progress'
+    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
+    reporters: ['progress'],
+
+    // web server port
+    port: 9876,
+
+    // enable / disable colors in the output (reporters and logs)
+    colors: true,
+
+    // level of logging
+    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+    logLevel: config.LOG_INFO,
+
+    // enable / disable watching file and executing tests whenever any file changes
+    autoWatch: false,
+
+    // start these browsers
+    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+    browsers: ['Chrome', 'Firefox'],
+
+    // Continuous Integration mode
+    // if true, Karma captures browsers, runs the tests and exits
+    singleRun: true,
+
+    // Concurrency level
+    // how many browser should be started simultaneous
+    concurrency: Infinity
+  })
+}

mock-dev.js

@@ -85,40 +85,47 @@ actions.update = function(stateName) {
 var css = MetaMaskUiCss()
 injectCss(css)
 
-const container = document.querySelector('#app-content')
-
 // parse opts
 var store = configureStore(firstState)
 
 // start app
-render(
-  h('.super-dev-container', [
+startApp()
 
-    h('button', {
-      onClick: (ev) => {
-        ev.preventDefault()
-        store.dispatch(actions.update('terms'))
-      },
-      style: {
-        margin: '19px 19px 0px 19px',
-      },
-    }, 'Reset State'),
+function startApp(){
+  const body = document.body
+  const container = document.createElement('div')
+  container.id = 'app-content'
+  body.appendChild(container)
+  console.log('container', container)
 
-    h(Selector, { actions, selectedKey: selectedView, states, store }),
+  render(
+    h('.super-dev-container', [
 
-    h('.mock-app-root', {
-      style: {
-        height: '500px',
-        width: '360px',
-        boxShadow: 'grey 0px 2px 9px',
-        margin: '20px',
-      },
-    }, [
-      h(Root, {
-       store: store,
-      }),
-    ]),
+      h('button', {
+        onClick: (ev) => {
+          ev.preventDefault()
+          store.dispatch(actions.update('terms'))
+        },
+        style: {
+          margin: '19px 19px 0px 19px',
+        },
+      }, 'Reset State'),
 
-  ]
-), container)
+      h(Selector, { actions, selectedKey: selectedView, states, store }),
 
+      h('.mock-app-root', {
+        style: {
+          height: '500px',
+          width: '360px',
+          boxShadow: 'grey 0px 2px 9px',
+          margin: '20px',
+        },
+      }, [
+        h(Root, {
+         store: store,
+        }),
+      ]),
+
+    ]
+  ), container)
+}

package.json

@@ -12,8 +12,8 @@
     "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 && testem ci -P 2",
-    "test-coverage": "nyc npm run test-unit && nyc report --reporter=text-lcov | coveralls",
+    "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",
@@ -22,7 +22,6 @@
     "ui": "npm run genStates && 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",
-    "testem": "npm run buildMock && testem",
     "announce": "node development/announcer.js",
     "generateNotice": "node notices/notice-generator.js",
     "deleteNotice": "node notices/notice-delete.js",
@@ -172,6 +171,11 @@
     "jsdom-global": "^3.0.2",
     "jshint-stylish": "~2.2.1",
     "json-rpc-engine": "^3.0.1",
+    "karma": "^1.7.1",
+    "karma-chrome-launcher": "^2.2.0",
+    "karma-cli": "^1.0.1",
+    "karma-firefox-launcher": "^1.0.1",
+    "karma-qunit": "^1.2.1",
     "lodash.assign": "^4.0.6",
     "mocha": "^3.4.2",
     "mocha-eslint": "^4.0.0",

test/integration/helpers.js

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

test/integration/index.js

@@ -1,5 +1,6 @@
 const fs = require('fs')
 const path = require('path')
+const pump = require('pump')
 const browserify = require('browserify')
 const tests = fs.readdirSync(path.join(__dirname, 'lib'))
 const bundlePath = path.join(__dirname, 'bundle.js')
@@ -9,11 +10,17 @@ const b = browserify()
 const writeStream = fs.createWriteStream(bundlePath)
 
 tests.forEach(function (fileName) {
-  b.add(path.join(__dirname, 'lib', fileName))
+  const filePath = path.join(__dirname, 'lib', fileName)
+  console.log(`bundling test "${filePath}"`)
+  b.add(filePath)
 })
 
-b.bundle()
-.pipe(writeStream)
-.on('error', (err) => {
-  throw err
-})
+pump(
+  b.bundle(),
+  writeStream,
+  (err) => {
+    if (err) throw err
+    console.log(`Integration test build completed: "${bundlePath}"`)
+    process.exit(0)
+  }
+)

test/integration/lib/first-time.js

@@ -5,31 +5,42 @@ QUnit.module('first time usage')
 QUnit.test('render init screen', (assert) => {
   const done = assert.async()
   runFirstTimeUsageTest(assert).then(done).catch((err) => {
-    assert.notOk(err, 'Should not error')
+    assert.notOk(err, `Error was thrown: ${err.stack}`)
     done()
   })
 })
 
+// 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 wait()
 
-  const app = $('iframe').contents().find('#app-content .mock-app-root')
+  await timeout()
 
-  const recurseNotices = async () => {
+  const app = $('#app-content .mock-app-root')
+
+  // recurse notices
+  while (true) {
     const button = app.find('button')
     if (button.html() === 'Accept') {
+      // still notices to accept
       const termsPage = app.find('.markdown')[0]
       termsPage.scrollTop = termsPage.scrollHeight
-      await wait()
+      await timeout()
       button.click()
-      await wait()
-      await recurseNotices()
+      await timeout()
     } else {
-      await wait()
+      // exit loop
+      break
     }
   }
 
-  await recurseNotices()
+  await timeout()
 
   // Scroll through terms
   const title = app.find('h1').text()
@@ -41,13 +52,13 @@ async function runFirstTimeUsageTest(assert, done) {
   pwBox.value = PASSWORD
   confBox.value = PASSWORD
 
-  await wait()
+  await timeout()
 
   // create vault
   const createButton = app.find('button.primary')[0]
   createButton.click()
 
-  await wait(1500)
+  await timeout(1500)
 
   const created = app.find('h3')[0]
   assert.equal(created.textContent, 'Vault Created', 'Vault created screen')
@@ -57,7 +68,7 @@ async function runFirstTimeUsageTest(assert, done) {
   assert.ok(button, 'button present')
   button.click()
 
-  await wait(1000)
+  await timeout(1000)
 
   const detail = app.find('.account-detail-section')[0]
   assert.ok(detail, 'Account detail section loaded.')
@@ -65,7 +76,7 @@ async function runFirstTimeUsageTest(assert, done) {
   const sandwich = app.find('.sandwich-expando')[0]
   sandwich.click()
 
-  await wait()
+  await timeout()
 
   const menu = app.find('.menu-droppo')[0]
   const children = menu.children
@@ -73,7 +84,7 @@ async function runFirstTimeUsageTest(assert, done) {
   assert.ok(lock, 'Lock menu item found')
   lock.click()
 
-  await wait(1000)
+  await timeout(1000)
 
   const pwBox2 = app.find('#password-box')[0]
   pwBox2.value = PASSWORD
@@ -81,39 +92,47 @@ async function runFirstTimeUsageTest(assert, done) {
   const createButton2 = app.find('button.primary')[0]
   createButton2.click()
 
-  await wait(1000)
+  await timeout(1000)
 
   const detail2 = app.find('.account-detail-section')[0]
   assert.ok(detail2, 'Account detail section loaded again.')
 
-  await wait()
+  await timeout()
 
   // open account settings dropdown
   const qrButton = app.find('.fa.fa-ellipsis-h')[0]
   qrButton.click()
 
-  await wait(1000)
+  await timeout(1000)
 
   // qr code item
   const qrButton2 = app.find('.dropdown-menu-item')[1]
   qrButton2.click()
 
-  await wait(1000)
+  await timeout(1000)
 
   const qrHeader = app.find('.qr-header')[0]
   const qrContainer = app.find('#qr-container')[0]
   assert.equal(qrHeader.textContent, 'Account 1', 'Should show account label.')
   assert.ok(qrContainer, 'QR Container found')
 
-  await wait()
+  await timeout()
 
   const networkMenu = app.find('.network-indicator')[0]
   networkMenu.click()
 
-  await wait()
+  await timeout()
 
   const networkMenu2 = app.find('.network-indicator')[0]
   const children2 = networkMenu2.children
   children2.length[3]
   assert.ok(children2, 'All network options present')
+}
+
+function timeout(time) {
+  return new Promise(function (resolve, reject) {
+    setTimeout(function () {
+      resolve()
+    }, time * 3 || 1500)
+  })
 }

testem.yml

@@ -1,10 +0,0 @@
-launch_in_dev:
-  - Chrome
-  - Firefox
-launch_in_ci:
-  - Chrome
-  - Firefox
-framework:
-  - qunit
-before_tests: "npm run buildCiUnits"
-test_page: "test/integration/index.html"