Merge 7e47e84 into 3fca456

client/karma.js

@@ -2,7 +2,8 @@ var stringify = require('../common/stringify')
 var constant = require('./constants')
 var util = require('../common/util')
 
-function Karma (socket, iframe, opener, navigator, location, document) {
+function Karma (updater, socket, iframe, opener, navigator, location, document) {
+  this.updater = updater
   var startEmitted = false
   var karmaNavigating = false
   var self = this
@@ -190,6 +191,7 @@ function Karma (socket, iframe, opener, navigator, location, document) {
     }
 
     socket.emit('karma_error', message)
+    self.updater.updateTestStatus(`karam_error ${message}`)
     this.complete()
     return false
   }
@@ -212,17 +214,20 @@ function Karma (socket, iframe, opener, navigator, location, document) {
 
     if (!startEmitted) {
       socket.emit('start', { total: null })
+      self.updater.updateTestStatus('start')
       startEmitted = true
     }
 
     if (resultsBufferLimit === 1) {
+      self.updater.updateTestStatus('result')
       return socket.emit('result', convertedResult)
     }
 
     resultsBuffer.push(convertedResult)
 
     if (resultsBuffer.length === resultsBufferLimit) {
       socket.emit('result', resultsBuffer)
+      self.updater.updateTestStatus('result')
       resultsBuffer = []
     }
   }
@@ -232,6 +237,7 @@ function Karma (socket, iframe, opener, navigator, location, document) {
       socket.emit('result', resultsBuffer)
       resultsBuffer = []
     }
+
     // A test could have incorrectly issued a navigate. Wait one turn
     // to ensure the error from an incorrect navigate is processed.
     setTimeout(() => {
@@ -240,6 +246,7 @@ function Karma (socket, iframe, opener, navigator, location, document) {
       }
 
       socket.emit('complete', result || {})
+      self.updater.updateTestStatus('complete')
 
       if (returnUrl) {
         location.href = returnUrl
@@ -258,6 +265,7 @@ function Karma (socket, iframe, opener, navigator, location, document) {
   }
 
   socket.on('execute', function (cfg) {
+    self.updater.updateTestStatus('execute')
     // reset startEmitted and reload the iframe
     startEmitted = false
     self.config = cfg

client/main.js

@@ -20,6 +20,6 @@ var socket = io(location.host, {
 })
 
 // instantiate the updater of the view
-new StatusUpdater(socket, util.elm('title'), util.elm('banner'), util.elm('browsers'))
-window.karma = new Karma(socket, util.elm('context'), window.open,
+var updater = new StatusUpdater(socket, util.elm('title'), util.elm('banner'), util.elm('browsers'))
+window.karma = new Karma(updater, socket, util.elm('context'), window.open,
   window.navigator, window.location, window.document)

client/updater.js

@@ -21,26 +21,60 @@ function StatusUpdater (socket, titleElement, bannerElement, browsersElement) {
     }
   }
 
-  function updateBanner (status) {
-    return function (param) {
-      if (!titleElement || !bannerElement) {
-        return
-      }
-      var paramStatus = param ? status.replace('$', param) : status
-      titleElement.textContent = 'Karma v' + VERSION + ' - ' + paramStatus
-      bannerElement.className = status === 'connected' ? 'online' : 'offline'
+  var connectionText = 'never-connected'
+  var testText = 'loading'
+  var pingText = ''
+
+  function updateBanner () {
+    if (!titleElement || !bannerElement) {
+      return
     }
+    titleElement.textContent = `Karma v ${VERSION} - ${connectionText}; test: ${testText}; ${pingText}`
+    bannerElement.className = connectionText === 'connected' ? 'online' : 'offline'
+  }
+
+  function updateConnectionStatus (connectionStatus) {
+    connectionText = connectionStatus || connectionText
+    updateBanner()
   }
+  function updateTestStatus (testStatus) {
+    testText = testStatus || testText
+    updateBanner()
+  }
+  function updatePingStatus (pingStatus) {
+    pingText = pingStatus || pingText
+    updateBanner()
+  }
+
+  socket.on('connect', () => {
+    updateConnectionStatus('connected')
+  })
+  socket.on('disconnect', () => {
+    updateConnectionStatus('disconnected')
+  })
+  socket.on('reconnecting', (sec) => {
+    updateConnectionStatus(`reconnecting in ${sec} seconds`)
+  })
+  socket.on('reconnect', () => {
+    updateConnectionStatus('reconnected')
+  })
+  socket.on('reconnect_failed', () => {
+    updateConnectionStatus('reconnect_failed')
+  })
 
-  socket.on('connect', updateBanner('connected'))
-  socket.on('disconnect', updateBanner('disconnected'))
-  socket.on('reconnecting', updateBanner('reconnecting in $ seconds...'))
-  socket.on('reconnect', updateBanner('connected'))
-  socket.on('reconnect_failed', updateBanner('failed to reconnect'))
   socket.on('info', updateBrowsersInfo)
-  socket.on('disconnect', function () {
+  socket.on('disconnect', () => {
     updateBrowsersInfo([])
   })
+
+  socket.on('ping', () => {
+    updatePingStatus('ping...')
+  })
+  socket.on('pong', (latency) => {
+    updatePingStatus(`ping ${latency}ms`)
+  })
+
+  return { updateTestStatus: updateTestStatus }
 }
 
 module.exports = StatusUpdater