fix: Init test output on backend challenges

Makes sure the test output console is initialized on backend as well as
classic challenges.  Previously it was tied to SidePanel which was not
always present.

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

@@ -10,6 +10,7 @@ import {
   challengeMounted,
   challengeTestsSelector,
   consoleOutputSelector,
+  initConsole,
   initTests,
   updateBackendFormValues,
   updateChallengeMeta,
@@ -44,6 +45,7 @@ const propTypes = {
   description: PropTypes.string,
   executeChallenge: PropTypes.func.isRequired,
   id: PropTypes.string,
+  initConsole: PropTypes.func.isRequired,
   initTests: PropTypes.func.isRequired,
   isSignedIn: PropTypes.bool,
   output: PropTypes.string,
@@ -71,6 +73,7 @@ const mapStateToProps = createSelector(
 const mapDispatchToActions = {
   challengeMounted,
   executeChallenge,
+  initConsole,
   initTests,
   updateBackendFormValues,
   updateChallengeMeta,
@@ -96,6 +99,7 @@ export class BackEnd extends Component {
   componentDidMount() {
     const {
       challengeMounted,
+      initConsole,
       initTests,
       updateChallengeMeta,
       data: {
@@ -106,6 +110,7 @@ export class BackEnd extends Component {
       },
       pageContext: { challengeMeta }
     } = this.props;
+    initConsole('');
     initTests(tests);
     updateChallengeMeta({ ...challengeMeta, challengeType });
     challengeMounted(challengeMeta.id);
@@ -128,6 +133,7 @@ export class BackEnd extends Component {
     } = prevProps;
     const {
       challengeMounted,
+      initConsole,
       initTests,
       updateChallengeMeta,
       data: {
@@ -140,6 +146,7 @@ export class BackEnd extends Component {
       pageContext: { challengeMeta }
     } = this.props;
     if (prevTitle !== currentTitle) {
+      initConsole('');
       initTests(tests);
       updateChallengeMeta({ ...challengeMeta, challengeType });
       challengeMounted(challengeMeta.id);

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

@@ -28,6 +28,7 @@ import {
   createFiles,
   challengeFilesSelector,
   challengeTestsSelector,
+  initConsole,
   initTests,
   updateChallengeMeta,
   challengeMounted,
@@ -47,6 +48,7 @@ const mapDispatchToProps = dispatch =>
   bindActionCreators(
     {
       createFiles,
+      initConsole,
       initTests,
       updateChallengeMeta,
       challengeMounted
@@ -63,6 +65,7 @@ const propTypes = {
   files: PropTypes.shape({
     key: PropTypes.string
   }),
+  initConsole: PropTypes.func.isRequired,
   initTests: PropTypes.func.isRequired,
   output: PropTypes.string,
   pageContext: PropTypes.shape({
@@ -104,6 +107,7 @@ class ShowClassic extends Component {
     const {
       challengeMounted,
       createFiles,
+      initConsole,
       initTests,
       updateChallengeMeta,
       data: {
@@ -116,6 +120,7 @@ class ShowClassic extends Component {
       },
       pageContext: { challengeMeta }
     } = this.props;
+    initConsole('');
     createFiles(files);
     initTests(tests);
     updateChallengeMeta({ ...challengeMeta, title, challengeType });
@@ -131,6 +136,7 @@ class ShowClassic extends Component {
     const {
       challengeMounted,
       createFiles,
+      initConsole,
       initTests,
       updateChallengeMeta,
       data: {
@@ -144,6 +150,7 @@ class ShowClassic extends Component {
       pageContext: { challengeMeta }
     } = this.props;
     if (prevTitle !== currentTitle) {
+      initConsole('');
       createFiles(files);
       initTests(tests);
       updateChallengeMeta({

client/src/templates/Challenges/components/Side-Panel.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
 
 import ChallengeTitle from './Challenge-Title';
 import ChallengeDescription from './Challenge-Description';
@@ -9,7 +8,7 @@ import ToolPanel from './Tool-Panel';
 import TestSuite from './Test-Suite';
 import Spacer from '../../../components/helpers/Spacer';
 
-import { initConsole, challengeTestsSelector } from '../redux';
+import { challengeTestsSelector } from '../redux';
 import { createSelector } from 'reselect';
 import './side-panel.css';
 
@@ -20,20 +19,11 @@ const mapStateToProps = createSelector(
   })
 );
 
-const mapDispatchToProps = dispatch =>
-  bindActionCreators(
-    {
-      initConsole
-    },
-    dispatch
-  );
-
 const MathJax = global.MathJax;
 
 const propTypes = {
   description: PropTypes.string,
   guideUrl: PropTypes.string,
-  initConsole: PropTypes.func.isRequired,
   instructions: PropTypes.string,
   introPath: PropTypes.string,
   nextChallengePath: PropTypes.string,
@@ -60,7 +50,6 @@ export class SidePanel extends Component {
       MathJax.Hub,
       document.querySelector('.rosetta-code')
     ]);
-    this.props.initConsole('');
   }
 
   render() {
@@ -106,7 +95,4 @@ export class SidePanel extends Component {
 SidePanel.displayName = 'SidePanel';
 SidePanel.propTypes = propTypes;
 
-export default connect(
+export default connect(mapStateToProps)(SidePanel);
-  mapStateToProps,
-  mapDispatchToProps
-)(SidePanel);