From 4bf90f70f46cddf52a55d8f2b9ce0ccd2d4a4d3b Mon Sep 17 00:00:00 2001 From: johnjbarton Date: Wed, 13 Jan 2021 08:48:03 -0800 Subject: [PATCH] feat(client): update banner with connection, test status, ping times (#3611) The banner is visible in videos so we can have some client side info on the state if it breaks. --- client/karma.js | 10 +++++- client/main.js | 4 +-- client/updater.js | 62 ++++++++++++++++++++++++-------- static/karma.js | 76 ++++++++++++++++++++++++++++++--------- test/client/karma.spec.js | 19 +++++++--- 5 files changed, 132 insertions(+), 39 deletions(-) diff --git a/client/karma.js b/client/karma.js index 0f1e05ede..0734822ff 100644 --- a/client/karma.js +++ b/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(`karma_error ${message}`) this.complete() return false } @@ -212,10 +214,12 @@ 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) } @@ -223,6 +227,7 @@ function Karma (socket, iframe, opener, navigator, location, document) { 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 diff --git a/client/main.js b/client/main.js index d07aa71af..8780d8768 100644 --- a/client/main.js +++ b/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) diff --git a/client/updater.js b/client/updater.js index d8a5cbff0..3365b5253 100644 --- a/client/updater.js +++ b/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 diff --git a/static/karma.js b/static/karma.js index 9a66d9f0d..8c08d3fca 100644 --- a/static/karma.js +++ b/static/karma.js @@ -12,7 +12,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 @@ -200,6 +201,7 @@ function Karma (socket, iframe, opener, navigator, location, document) { } socket.emit('karma_error', message) + self.updater.updateTestStatus(`karma_error ${message}`) this.complete() return false } @@ -222,10 +224,12 @@ 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) } @@ -233,6 +237,7 @@ function Karma (socket, iframe, opener, navigator, location, document) { if (resultsBuffer.length === resultsBufferLimit) { socket.emit('result', resultsBuffer) + self.updater.updateTestStatus('result') resultsBuffer = [] } } @@ -242,6 +247,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(() => { @@ -250,6 +256,7 @@ function Karma (socket, iframe, opener, navigator, location, document) { } socket.emit('complete', result || {}) + self.updater.updateTestStatus('complete') if (returnUrl) { location.href = returnUrl @@ -268,6 +275,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 @@ -340,8 +348,8 @@ 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) },{"../common/util":6,"./constants":1,"./karma":2,"./updater":4}],4:[function(require,module,exports){ @@ -368,26 +376,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' } - 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')) + 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('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 diff --git a/test/client/karma.spec.js b/test/client/karma.spec.js index 21966464f..b1c50a00a 100644 --- a/test/client/karma.spec.js +++ b/test/client/karma.spec.js @@ -6,8 +6,8 @@ var ContextKarma = require('../../context/karma') var MockSocket = require('./mocks').Socket describe('Karma', function () { - var socket, k, ck, windowNavigator, windowLocation, windowStub, startSpy, iframe, clientWindow - var windowDocument, elements + var updater, socket, k, ck, windowNavigator, windowLocation, windowStub, startSpy, iframe, clientWindow + var windowDocument, elements, mockTestStatus function setTransportTo (transportName) { socket._setTransportNameTo(transportName) @@ -15,6 +15,12 @@ describe('Karma', function () { } beforeEach(function () { + mockTestStatus = '' + updater = { + updateTestStatus: (s) => { + mockTestStatus = s + } + } socket = new MockSocket() iframe = {} windowNavigator = {} @@ -23,7 +29,7 @@ describe('Karma', function () { elements = [{ style: {} }, { style: {} }] windowDocument = { querySelectorAll: sinon.stub().returns(elements) } - k = new ClientKarma(socket, iframe, windowStub, windowNavigator, windowLocation, windowDocument) + k = new ClientKarma(updater, socket, iframe, windowStub, windowNavigator, windowLocation, windowDocument) clientWindow = { karma: k } @@ -217,7 +223,7 @@ describe('Karma', function () { it('should report browser id', function () { windowLocation.search = '?id=567' socket = new MockSocket() - k = new ClientKarma(socket, {}, windowStub, windowNavigator, windowLocation) + k = new ClientKarma(updater, socket, {}, windowStub, windowNavigator, windowLocation) var spyInfo = sinon.spy(function (info) { assert(info.id === '567') @@ -439,7 +445,7 @@ describe('Karma', function () { it('should navigate the client to return_url if specified', function (done) { windowLocation.search = '?id=567&return_url=http://return.com' socket = new MockSocket() - k = new ClientKarma(socket, iframe, windowStub, windowNavigator, windowLocation) + k = new ClientKarma(updater, socket, iframe, windowStub, windowNavigator, windowLocation) clientWindow = { karma: k } ck = new ContextKarma(ContextKarma.getDirectCallParentKarmaMethod(clientWindow)) ck.config = {} @@ -479,11 +485,14 @@ describe('Karma', function () { } socket.emit('execute', config) + assert(mockTestStatus === 'execute') + clock.tick(1) var CURRENT_URL = iframe.src ck.complete() clock.tick(1) assert.strictEqual(iframe.src, CURRENT_URL) + assert(mockTestStatus === 'complete') }) it('should accept multiple calls to loaded', function () {