testkit: Enable browser tests log on terminal (#1181)

Introduce a Console message in the protocol between the LocalController
on Browser and the RemoteController in Node for enabling the logs and
other console messages to be printed in terminal and be available in
artifacts.

This feature should help debugging the errors in the testing pipeline.

Author: bigmontz

packages/testkit-backend/src/channel/websocket.js

@@ -17,8 +17,7 @@ export default class WebSocketChannel extends Channel {
     if (!this._ws) {
       this._ws = new WebSocket(this._adddress)
       this._ws.onmessage = ({ data: message }) => {
-        console.log(message)
-        console.debug('[WebSocketChannel] Received messsage', message)
+        console.debug('[WebSocketChannel] Received message', message)
         const { messageType, contextId, data } = JSON.parse(message)
 
         switch (messageType) {
@@ -45,12 +44,16 @@ export default class WebSocketChannel extends Channel {
     }
   }
 
-  writeResponse (contextId, response) {
+  writeResponse (contextId, response, skipLogging) {
     if (this._ws) {
-      console.debug('[WebSocketChannel] Writing response', { contextId, response })
+      if (!skipLogging) {
+        console.debug('[WebSocketChannel] Writing response', { contextId, response })
+      }
       return this._ws.send(this._serialize({ contextId, response }))
     }
-    console.error('[WebSocketChannel] Websocket is not connected')
+    if (!skipLogging) {
+      console.error('[WebSocketChannel] Websocket is not connected')
+    }
   }
 
   _serialize (val) {

packages/testkit-backend/src/console.remote.js

@@ -0,0 +1,31 @@
+import { response } from './responses'
+
+const originalConsole = console
+
+export default {
+  install: (channel) => {
+    // eslint-disable-next-line no-global-assign
+    console = new Proxy({}, {
+      get: (_, method) => (...args) => {
+        originalConsole[method].apply(originalConsole, args)
+        channel.writeResponse(null, response('Console', {
+          method,
+          args
+        }), true)
+      }
+    })
+  },
+  handleConsole: (message) => {
+    if (message.response.name === 'Console') {
+      const { method, args } = message.response.data
+      args[0] = typeof args[0] === 'string' ? `[RemoteConsole] ${args[0]}` : args[0]
+      console[method].apply(console, args)
+      return true
+    }
+    return false
+  },
+  uninstall: () => {
+    // eslint-disable-next-line no-global-assign
+    console = originalConsole
+  }
+}

packages/testkit-backend/src/controller/remote.js

@@ -2,6 +2,7 @@ import Controller from './interface'
 import { WebSocketServer } from 'ws'
 import { createServer } from 'http'
 import { HttpStaticServer } from '../infrastructure'
+import consoleRemote from '../console.remote'
 
 /**
  * RemoteController handles the requests by sending them a remote client.
@@ -81,7 +82,11 @@ export default class RemoteController extends Controller {
     this._ws = ws
     this._ws.on('message', safeRun(buffer => {
       const message = JSON.parse(buffer.toString())
-      console.debug('[RemoteController] Received messsage', message)
+
+      if (consoleRemote.handleConsole(message)) {
+        return
+      }
+
       const { contextId, response } = message
       this._writeResponse(contextId, response)
     }))

packages/testkit-backend/src/index.js

@@ -7,6 +7,7 @@ import { getShouldRunTest } from './skipped-tests'
 import { createGetFeatures } from './feature'
 import * as REQUEST_HANDLERS from './request-handlers.js'
 import * as RX_REQUEST_HANDLERS from './request-handlers-rx.js'
+import remoteConsole from './console.remote.js'
 
 const SUPPORTED_TLS = (() => {
   if (tls.DEFAULT_MAX_VERSION) {
@@ -40,7 +41,9 @@ function main () {
 
   const newChannel = () => {
     if (channelType.toUpperCase() === 'WEBSOCKET') {
-      return new WebSocketChannel(new URL(`ws://localhost:${backendPort}`))
+      const channel = new WebSocketChannel(new URL(`ws://localhost:${backendPort}`))
+      remoteConsole.install(channel)
+      return channel
     }
     return new SocketChannel(backendPort)
   }

packages/testkit-backend/src/responses.js

@@ -160,6 +160,6 @@ export function FakeTimeAck () {
   return response('FakeTimeAck', {})
 }
 
-function response (name, data) {
+export function response (name, data) {
   return { name, data }
 }