fix: avoid ES6+ syntax in client scripts (#3629)

* remove template literals and arrow functions that break in IE11 
Fixes #3630

Author: longlho

client/karma.js

@@ -191,7 +191,7 @@ function Karma (updater, socket, iframe, opener, navigator, location, document)
     }
 
     socket.emit('karma_error', message)
-    self.updater.updateTestStatus(`karma_error ${message}`)
+    self.updater.updateTestStatus('karma_error ' + message)
     this.complete()
     return false
   }
@@ -240,8 +240,9 @@ function Karma (updater, socket, iframe, opener, navigator, location, document)
 
     // A test could have incorrectly issued a navigate. Wait one turn
     // to ensure the error from an incorrect navigate is processed.
-    setTimeout(() => {
-      if (this.config.clearContext) {
+    var config = this.config
+    setTimeout(function () {
+      if (config.clearContext) {
         navigateContextTo('about:blank')
       }
 

client/updater.js

@@ -29,7 +29,7 @@ function StatusUpdater (socket, titleElement, bannerElement, browsersElement) {
     if (!titleElement || !bannerElement) {
       return
     }
-    titleElement.textContent = `Karma v ${VERSION} - ${connectionText}; test: ${testText}; ${pingText}`
+    titleElement.textContent = 'Karma v ' + VERSION + ' - ' + connectionText + '; test: ' + testText + '; ' + pingText
     bannerElement.className = connectionText === 'connected' ? 'online' : 'offline'
   }
 
@@ -46,32 +46,32 @@ function StatusUpdater (socket, titleElement, bannerElement, browsersElement) {
     updateBanner()
   }
 
-  socket.on('connect', () => {
+  socket.on('connect', function () {
     updateConnectionStatus('connected')
   })
-  socket.on('disconnect', () => {
+  socket.on('disconnect', function () {
     updateConnectionStatus('disconnected')
   })
-  socket.on('reconnecting', (sec) => {
-    updateConnectionStatus(`reconnecting in ${sec} seconds`)
+  socket.on('reconnecting', function (sec) {
+    updateConnectionStatus('reconnecting in ' + sec + ' seconds')
   })
-  socket.on('reconnect', () => {
+  socket.on('reconnect', function () {
     updateConnectionStatus('reconnected')
   })
-  socket.on('reconnect_failed', () => {
+  socket.on('reconnect_failed', function () {
     updateConnectionStatus('reconnect_failed')
   })
 
   socket.on('info', updateBrowsersInfo)
-  socket.on('disconnect', () => {
+  socket.on('disconnect', function () {
     updateBrowsersInfo([])
   })
 
-  socket.on('ping', () => {
+  socket.on('ping', function () {
     updatePingStatus('ping...')
   })
-  socket.on('pong', (latency) => {
-    updatePingStatus(`ping ${latency}ms`)
+  socket.on('pong', function (latency) {
+    updatePingStatus('ping ' + latency + 'ms')
   })
 
   return { updateTestStatus: updateTestStatus }

static/karma.js

@@ -201,7 +201,7 @@ function Karma (updater, socket, iframe, opener, navigator, location, document)
     }
 
     socket.emit('karma_error', message)
-    self.updater.updateTestStatus(`karma_error ${message}`)
+    self.updater.updateTestStatus('karma_error ' + message)
     this.complete()
     return false
   }
@@ -250,8 +250,9 @@ function Karma (updater, socket, iframe, opener, navigator, location, document)
 
     // A test could have incorrectly issued a navigate. Wait one turn
     // to ensure the error from an incorrect navigate is processed.
-    setTimeout(() => {
-      if (this.config.clearContext) {
+    var config = this.config
+    setTimeout(function () {
+      if (config.clearContext) {
         navigateContextTo('about:blank')
       }
 
@@ -384,7 +385,7 @@ function StatusUpdater (socket, titleElement, bannerElement, browsersElement) {
     if (!titleElement || !bannerElement) {
       return
     }
-    titleElement.textContent = `Karma v ${VERSION} - ${connectionText}; test: ${testText}; ${pingText}`
+    titleElement.textContent = 'Karma v ' + VERSION + ' - ' + connectionText + '; test: ' + testText + '; ' + pingText
     bannerElement.className = connectionText === 'connected' ? 'online' : 'offline'
   }
 
@@ -401,32 +402,32 @@ function StatusUpdater (socket, titleElement, bannerElement, browsersElement) {
     updateBanner()
   }
 
-  socket.on('connect', () => {
+  socket.on('connect', function () {
     updateConnectionStatus('connected')
   })
-  socket.on('disconnect', () => {
+  socket.on('disconnect', function () {
     updateConnectionStatus('disconnected')
   })
-  socket.on('reconnecting', (sec) => {
-    updateConnectionStatus(`reconnecting in ${sec} seconds`)
+  socket.on('reconnecting', function (sec) {
+    updateConnectionStatus('reconnecting in ' + sec + ' seconds')
   })
-  socket.on('reconnect', () => {
+  socket.on('reconnect', function () {
     updateConnectionStatus('reconnected')
   })
-  socket.on('reconnect_failed', () => {
+  socket.on('reconnect_failed', function () {
     updateConnectionStatus('reconnect_failed')
   })
 
   socket.on('info', updateBrowsersInfo)
-  socket.on('disconnect', () => {
+  socket.on('disconnect', function () {
     updateBrowsersInfo([])
   })
 
-  socket.on('ping', () => {
+  socket.on('ping', function () {
     updatePingStatus('ping...')
   })
-  socket.on('pong', (latency) => {
-    updatePingStatus(`ping ${latency}ms`)
+  socket.on('pong', function (latency) {
+    updatePingStatus('ping ' + latency + 'ms')
   })
 
   return { updateTestStatus: updateTestStatus }