From 54e14b9433dcea88ee8eef4904974b4210a4032a Mon Sep 17 00:00:00 2001 From: Oliver Eyton-Williams Date: Tue, 11 Sep 2018 20:34:08 +0200 Subject: [PATCH] fix(console): output user logs after running tests --- .../Challenges/rechallenge/transformers.js | 13 ------------- .../Challenges/redux/execute-challenge-epic.js | 15 ++++++++------- .../learn/src/templates/Challenges/utils/build.js | 5 +---- .../learn/src/templates/Challenges/utils/frame.js | 6 +++--- 4 files changed, 12 insertions(+), 27 deletions(-) diff --git a/packages/learn/src/templates/Challenges/rechallenge/transformers.js b/packages/learn/src/templates/Challenges/rechallenge/transformers.js index 239b83f83d..d9fdb93404 100644 --- a/packages/learn/src/templates/Challenges/rechallenge/transformers.js +++ b/packages/learn/src/templates/Challenges/rechallenge/transformers.js @@ -31,7 +31,6 @@ const babelTransformCode = code => Babel.transform(code, babelOptions).code; // const sourceReg = // /()([\s\S]*?)(?=)/g; -const console$logReg = /(?:\b)console(\.log\S+)/g; const NBSPReg = new RegExp(String.fromCharCode(160), 'g'); const isJS = matchesProperty('ext', 'js'); @@ -39,18 +38,6 @@ 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 index b2ff12778f..05c68fe68c 100644 --- 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 index aa4ba1bc9e..a64de105b0 100644 --- 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 index 972bce47e8..73bc532949 100644 --- 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 );