test - integration - drop testem for karma

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(
+startApp()
-  h('.super-dev-container', [
 
-    h('button', {
+function startApp(){
-      onClick: (ev) => {
+  const body = document.body
-        ev.preventDefault()
+  const container = document.createElement('div')
-        store.dispatch(actions.update('terms'))
+  container.id = 'app-content'
-      },
+  body.appendChild(container)
-      style: {
+  console.log('container', container)
-        margin: '19px 19px 0px 19px',
-      },
-    }, 'Reset State'),
 
-    h(Selector, { actions, selectedKey: selectedView, states, store }),
+  render(
+    h('.super-dev-container', [
 
-    h('.mock-app-root', {
+      h('button', {
-      style: {
+        onClick: (ev) => {
-        height: '500px',
+          ev.preventDefault()
-        width: '360px',
+          store.dispatch(actions.update('terms'))
-        boxShadow: 'grey 0px 2px 9px',
+        },
-        margin: '20px',
+        style: {
-      },
+          margin: '19px 19px 0px 19px',
-    }, [
+        },
-      h(Root, {
+      }, 'Reset State'),
-       store: store,
-      }),
-    ]),
 
-  ]
+      h(Selector, { actions, selectedKey: selectedView, states, store }),
-), container)
 
+      h('.mock-app-root', {
+        style: {
+          height: '500px',
+          width: '360px',
+          boxShadow: 'grey 0px 2px 9px',
+          margin: '20px',
+        },
+      }, [
+        h(Root, {
+         store: store,
+        }),
+      ]),
+
+    ]
+  ), container)
+}

package.json

@@ -12,7 +12,7 @@
     "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-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",
@@ -171,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/lib/first-time.js

@@ -10,26 +10,46 @@ QUnit.test('render init screen', (assert) => {
   })
 })
 
-async function runFirstTimeUsageTest(assert, done) {
+<<<<<<< HEAD
-  await wait()
+=======
+// 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)
+//   }
+// })
 
-  const app = $('iframe').contents().find('#app-content .mock-app-root')
+>>>>>>> 5c53bab... test - integration - drop testem for karma
+async function runFirstTimeUsageTest(assert, done) {
+
+  await timeout()
+
+  const app = $('#app-content .mock-app-root')
 
   const recurseNotices = async () => {
     const button = app.find('button')
     if (button.html() === 'Accept') {
       const termsPage = app.find('.markdown')[0]
       termsPage.scrollTop = termsPage.scrollHeight
-      await wait()
+      await timeout()
       button.click()
+<<<<<<< HEAD
       await wait()
       await recurseNotices()
+=======
+      await timeout()
+>>>>>>> 5c53bab... test - integration - drop testem for karma
     } else {
       await wait()
     }
   }
 
+<<<<<<< HEAD
   await recurseNotices()
+=======
+  await timeout()
+>>>>>>> 5c53bab... test - integration - drop testem for karma
 
   // Scroll through terms
   const title = app.find('h1').text()
@@ -41,13 +61,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 +77,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 +85,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 +93,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 +101,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)
+  })
+}