fix(client): log to console saga

client/src/client/frame-runner.js

@@ -10,13 +10,6 @@ if (window.frameElement && window.frameElement.id === testId) {
 }
 
 function initTestFrame() {
-  // window.__logs = [];
-  // const oldLog = window.console.log.bind(window.console);
-  // window.console.log = function proxyConsole(...args) {
-  //   window.__logs = [...window.__logs, ...args];
-  //   return oldLog(...args);
-  // };
-
   const frameReady = document.__frameReady;
   const source = document.__source;
   const __getUserInput = document.__getUserInput || (x => x);
@@ -49,7 +42,6 @@ function initTestFrame() {
   }
 
   document.__runTest = async function runTests(testString) {
-    window.__logs = [];
     /* eslint-disable no-unused-vars */
     const code = source.slice(0);
     const editor = {
@@ -72,7 +64,7 @@ function initTestFrame() {
       if (typeof test === 'function') {
         await test(getUserInput);
       }
-      return { pass: true, logs: window.__logs.map(String) };
+      return { pass: true };
     } catch (err) {
       if (!(err instanceof chai.AssertionError)) {
         console.error(err);
@@ -81,8 +73,7 @@ function initTestFrame() {
         err: {
           message: err.message,
           stack: err.stack
-        },
-        logs: window.__logs.map(String)
+        }
       };
     }
   };

client/src/templates/Challenges/redux/execute-challenge-saga.js

@@ -1,5 +1,13 @@
-import { put, select, call, takeLatest, race } from 'redux-saga/effects';
-import { delay } from 'redux-saga';
+import {
+  put,
+  select,
+  call,
+  takeLatest,
+  takeEvery,
+  race,
+  fork
+} from 'redux-saga/effects';
+import { delay, channel } from 'redux-saga';
 
 import {
   challengeMetaSelector,
@@ -109,36 +117,31 @@ function createTestFrame(state, ctx, proxyLogger) {
   }).then(() => console.log('Frame ready'));
 }
 
-function* proxyLogger() {
-  let args = yield;
-  while (true) {
-    args = yield put(updateLogs(args));
-  }
+function* logToConsole(channel) {
+  yield takeEvery(channel, function*(args) {
+    yield put(updateLogs(args));
+  });
 }
 
 function* ExecuteDOMChallengeSaga(tests) {
   const testResults = [];
   const state = yield select();
   const ctx = yield call(buildFromFiles, state);
-  const proxy = proxyLogger();
-  proxy.next('1');
-  proxy.next('2');
-  proxy.next('3');
-  yield call(createTestFrame, state, ctx, proxy);
+  const consoleProxy = yield channel();
+  yield fork(logToConsole, consoleProxy);
+
+  yield call(createTestFrame, state, ctx, consoleProxy);
 
   for (const { text, testString } of tests) {
     const newTest = { text, testString };
     try {
-      const [{ pass, err, logs }, timeout] = yield race([
+      const [{ pass, err }, timeout] = yield race([
         call(runTestInTestFrame, document, testString),
         delay(testTimeout, 'timeout')
       ]);
       if (timeout) {
         throw timeout;
       }
-      for (const log of logs) {
-        yield put(updateLogs(log));
-      }
       if (pass) {
         newTest.pass = true;
       } else {
@@ -160,6 +163,7 @@ function* ExecuteDOMChallengeSaga(tests) {
       testResults.push(newTest);
     }
   }
+  consoleProxy.close();
   return testResults;
 }
 

client/src/templates/Challenges/utils/frame.js

@@ -77,7 +77,7 @@ const mountFrame = document => ({ element, ...rest }) => {
 const buildProxyConsole = proxyLogger => ctx => {
   const oldLog = ctx.window.console.log.bind(ctx.window.console);
   ctx.window.console.log = function proxyConsole(...args) {
-    proxyLogger.next(args);
+    proxyLogger.put(args);
     return oldLog(...args);
   };
   return ctx;