refactor: test output -> arrays (#39178)

client/src/templates/Challenges/classic/Show.js

@@ -74,7 +74,7 @@ const propTypes = {
   }),
   initConsole: PropTypes.func.isRequired,
   initTests: PropTypes.func.isRequired,
-  output: PropTypes.string,
+  output: PropTypes.arrayOf(PropTypes.string),
   pageContext: PropTypes.shape({
     challengeMeta: PropTypes.shape({
       id: PropTypes.string,

client/src/templates/Challenges/components/Output.js

@@ -3,18 +3,23 @@ import PropTypes from 'prop-types';
 import sanitizeHtml from 'sanitize-html';
 
 import './output.css';
+import { isEmpty } from 'lodash';
 
 const propTypes = {
   defaultOutput: PropTypes.string,
-  output: PropTypes.string
+  output: PropTypes.arrayOf(PropTypes.string)
 };
 
 class Output extends Component {
   render() {
     const { output, defaultOutput } = this.props;
-    const message = sanitizeHtml(output ? output : defaultOutput, {
+    console.log('output', output);
-      allowedTags: ['b', 'i', 'em', 'strong', 'code', 'wbr']
+    const message = sanitizeHtml(
-    });
+      !isEmpty(output) ? output.join('\n') : defaultOutput,
+      {
+        allowedTags: ['b', 'i', 'em', 'strong', 'code', 'wbr']
+      }
+    );
     return (
       <pre
         className='output-text'

client/src/templates/Challenges/projects/backend/Show.js

@@ -46,7 +46,7 @@ const propTypes = {
   initConsole: PropTypes.func.isRequired,
   initTests: PropTypes.func.isRequired,
   isSignedIn: PropTypes.bool,
-  output: PropTypes.string,
+  output: PropTypes.arrayOf(PropTypes.string),
   pageContext: PropTypes.shape({
     challengeMeta: PropTypes.object
   }),
@@ -128,7 +128,7 @@ export class BackEnd extends Component {
       },
       pageContext: { challengeMeta }
     } = this.props;
-    initConsole('');
+    initConsole();
     initTests(tests);
     updateChallengeMeta({ ...challengeMeta, title, challengeType });
     challengeMounted(challengeMeta.id);

client/src/templates/Challenges/redux/index.js

@@ -13,6 +13,7 @@ import { createExecuteChallengeSaga } from './execute-challenge-saga';
 import { createCurrentChallengeSaga } from './current-challenge-saga';
 import { challengeTypes } from '../../../../utils/challengeTypes';
 import { completedChallengesSelector } from '../../../redux';
+import { isEmpty } from 'lodash';
 
 export const ns = 'challenge';
 export const backendNS = 'backendChallenge';
@@ -30,11 +31,12 @@ const initialState = {
     challengeType: -1
   },
   challengeTests: [],
-  consoleOut: '',
+  consoleOut: [],
   hasCompletedBlock: false,
   inAccessibilityMode: false,
   isCodeLocked: false,
   isBuildEnabled: true,
+  logsOut: [],
   modal: {
     completion: false,
     help: false,
@@ -241,8 +243,6 @@ export const canFocusEditorSelector = state => state[ns].canFocusEditor;
 export const inAccessibilityModeSelector = state =>
   state[ns].inAccessibilityMode;
 
-const MAX_LOGS_SIZE = 64 * 1024;
-
 export const reducer = handleActions(
   {
     [types.createFiles]: (state, { payload }) => ({
@@ -275,25 +275,25 @@ export const reducer = handleActions(
 
     [types.initConsole]: (state, { payload }) => ({
       ...state,
-      consoleOut: payload
+      consoleOut: payload ? [payload] : []
     }),
     [types.updateConsole]: (state, { payload }) => ({
       ...state,
-      consoleOut: state.consoleOut + '\n' + payload
+      consoleOut: state.consoleOut.concat(payload)
     }),
     [types.initLogs]: state => ({
       ...state,
-      logsOut: ''
+      logsOut: []
     }),
     [types.updateLogs]: (state, { payload }) => ({
       ...state,
-      logsOut: (state.logsOut + '\n' + payload).slice(-MAX_LOGS_SIZE)
+      logsOut: state.logsOut.concat(payload)
     }),
     [types.logsToConsole]: (state, { payload }) => ({
       ...state,
-      consoleOut:
+      consoleOut: isEmpty(state.logsOut)
-        state.consoleOut +
+        ? state.consoleOut
-        (state.logsOut ? '\n' + payload + '\n' + state.logsOut : '')
+        : state.consoleOut.concat(payload, state.logsOut)
     }),
     [types.updateChallengeMeta]: (state, { payload }) => ({
       ...state,
@@ -321,7 +321,7 @@ export const reducer = handleActions(
         text,
         testString
       })),
-      consoleOut: ''
+      consoleOut: []
     }),
     [types.updateSolutionFormValues]: (state, { payload }) => ({
       ...state,

cypress/integration/learn/challenges/output.js

@@ -0,0 +1,61 @@
+/* global cy */
+
+const selectors = {
+  defaultOutput: '.output-text',
+  hotkeys: '.default-layout > div',
+  runTestsButton: 'button:contains("Run the Tests")'
+};
+
+const locations = {
+  index:
+    '/learn/responsive-web-design/basic-html-and-html5/' +
+    'say-hello-to-html-elements'
+};
+
+const defaultOutput = `
+/**
+* Your test output will go here.
+*/`;
+
+const runningOutput = '// running tests';
+const finishedOutput = '// tests completed';
+
+describe('Classic challenge', function() {
+  it('renders', () => {
+    cy.visit(locations.index);
+
+    cy.title().should(
+      'eq',
+      'Learn Basic HTML and HTML5: Say Hello to HTML Elements |' +
+        ' freeCodeCamp.org'
+    );
+  });
+
+  it('renders the default output text', () => {
+    cy.visit(locations.index);
+    cy.get(selectors.defaultOutput).contains(defaultOutput);
+  });
+
+  it('shows test output when the tests are run', () => {
+    cy.visit(locations.index);
+    cy.get(selectors.runTestsButton)
+      .click()
+      .then(() => {
+        cy.get(selectors.defaultOutput)
+          .contains(runningOutput)
+          .contains(finishedOutput);
+      });
+  });
+
+  it('shows test output when the tests are triggered by the keyboard', () => {
+    cy.visit(locations.index);
+    cy.get(selectors.hotkeys)
+      .focus()
+      .type('{ctrl}{enter}')
+      .then(() => {
+        cy.get(selectors.defaultOutput)
+          .contains(runningOutput)
+          .contains(finishedOutput);
+      });
+  });
+});