fix(console): output user logs after running tests

chris-steenkamp · Sep 27, 2018 · 54e14b9 · 54e14b9
1 parent 0dc455c
commit 54e14b9
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 27 deletions.
diff --git a/packages/learn/src/templates/Challenges/rechallenge/transformers.js b/packages/learn/src/templates/Challenges/rechallenge/transformers.js
@@ -31,26 +31,13 @@ const babelTransformCode = code => Babel.transform(code, babelOptions).code;
 
 // const sourceReg =
 //  /(<!-- fcc-start-source -->)([\s\S]*?)(?=<!-- fcc-end-source -->)/g;
-const console$logReg = /(?:\b)console(\.log\S+)/g;
 const NBSPReg = new RegExp(String.fromCharCode(160), 'g');
 
 const isJS = matchesProperty('ext', 'js');
 const testHTML = matchesProperty('ext', 'html');
 const testHTMLJS = overSome(isJS, testHTML);
 export const testJS$JSX = overSome(isJS, matchesProperty('ext', 'jsx'));
 
-// if shouldProxyConsole then we change instances of console log
-// to `window.__console.log`
-// this let's us tap into logging into the console.
-// currently we only do this to the main window and not the test window
-export const proxyLoggerTransformer = partial(
-  vinyl.transformHeadTailAndContents,
-  source =>
-    source.replace(console$logReg, (match, methodCall) => {
-      return 'window.__console' + methodCall;
-    })
-);
-
 export const replaceNBSP = cond([
   [
     testHTMLJS,

diff --git a/packages/learn/src/templates/Challenges/redux/execute-challenge-epic.js b/packages/learn/src/templates/Challenges/redux/execute-challenge-epic.js
@@ -26,6 +26,7 @@ import {
   initConsole,
   updateConsole,
   initLogs,
+  updateLogs,
   logsToConsole,
   checkChallenge,
   updateTests,
@@ -53,7 +54,7 @@ function updateMainEpic(actions, { getState }, { document }) {
         ofType(types.updateFile, types.challengeMounted),
         debounceTime(executeDebounceTimeout),
         switchMap(() =>
-          buildFromFiles(getState(), true).pipe(
+          buildFromFiles(getState()).pipe(
             map(frameMain),
             ignoreElements(),
             startWith(initConsole('')),
@@ -71,13 +72,12 @@ function executeChallengeEpic(action$, { getState }, { document }) {
     filter(Boolean),
     switchMap(() => {
       const frameReady = new Subject();
-      // Removed for investigation into freeCodeCamp/Learn#291
-      // const proxyLogger = new Subject();
+      const proxyLogger = new Subject();
       const frameTests = createTestFramer(
         document,
         getState,
-        frameReady
-        // proxyLogger
+        frameReady,
+        proxyLogger
       );
       const challengeResults = frameReady.pipe(
         pluck('checkChallengePayload'),
@@ -114,7 +114,7 @@ function executeChallengeEpic(action$, { getState }, { document }) {
           const build =
             challengeType === backend
               ? buildBackendChallenge(state)
-              : buildFromFiles(state, false);
+              : buildFromFiles(state);
           return build.pipe(
             tap(frameTests),
             ignoreElements(),
@@ -124,7 +124,8 @@ function executeChallengeEpic(action$, { getState }, { document }) {
           );
         })
       );
-      return merge(buildAndFrameChallenge, challengeResults);
+      return merge(buildAndFrameChallenge, challengeResults,
+        proxyLogger.map(updateLogs));
     })
   );
 }

diff --git a/packages/learn/src/templates/Challenges/utils/build.js b/packages/learn/src/templates/Challenges/utils/build.js
@@ -1,6 +1,5 @@
 import { combineLatest } from 'rxjs/observable/combineLatest';
 import { map } from 'rxjs/operators/map';
-import identity from 'lodash/identity';
 
 import { fetchScript } from './fetch-and-cache.js';
 import throwers from '../rechallenge/throwers';
@@ -12,7 +11,6 @@ import {
 } from '../redux';
 import {
   applyTransformers,
-  proxyLoggerTransformer,
   testJS$JSX
 } from '../rechallenge/transformers';
 import { cssToHtml, jsToHtml, concatHtml } from '../rechallenge/builders.js';
@@ -40,7 +38,7 @@ function filterJSIfDisabled(state) {
   return file => !(testJS$JSX(file) && !isJSEnabled);
 }
 
-export function buildFromFiles(state, shouldProxyConsole) {
+export function buildFromFiles(state) {
   const files = challengeFilesSelector(state);
   const { required, template } = challengeMetaSelector(state);
   const finalRequires = [...globalRequires, ...required];
@@ -51,7 +49,6 @@ export function buildFromFiles(state, shouldProxyConsole) {
   return createFileStream(requiredFiles)
     ::pipe(throwers)
     ::pipe(applyTransformers)
-    ::pipe(shouldProxyConsole ? proxyLoggerTransformer : identity)
     ::pipe(jsToHtml)
     ::pipe(cssToHtml)
     ::concatHtml(finalRequires, template);

diff --git a/packages/learn/src/templates/Challenges/utils/frame.js b/packages/learn/src/templates/Challenges/utils/frame.js
@@ -84,8 +84,7 @@ const addDepsToDocument = ctx => {
 
 const buildProxyConsole = proxyLogger => ctx => {
   const oldLog = ctx.window.console.log.bind(ctx.window.console);
-  ctx.window.__console = {};
-  ctx.window.__console.log = function proxyConsole(...args) {
+  ctx.window.console.log = function proxyConsole(...args) {
     proxyLogger.next(args);
     return oldLog(...args);
   };
@@ -140,11 +139,12 @@ export const createMainFramer = (document, getState, proxyLogger) =>
     writeContentToFrame
   );
 
-export const createTestFramer = (document, getState, frameReady) =>
+export const createTestFramer = (document, getState, frameReady, proxyLogger) =>
   flow(
     createFrame(document, getState, testId),
     mountFrame(document),
     addDepsToDocument,
     writeTestDepsToDocument(frameReady),
+    buildProxyConsole(proxyLogger),
     writeContentToFrame
   );