Update tests to use pass/err to determine refresh

common/app/routes/challenges/components/classic/Side-Panel.jsx

@@ -15,21 +15,18 @@ const mapStateToProps = createSelector(
   state => state.app.windowHeight,
   state => state.app.navHeight,
   state => state.challengesApp.tests,
-  state => state.challengesApp.refresh,
   state => state.challengesApp.output,
   (
     { challenge: { title, description } = {} },
     windowHeight,
     navHeight,
     tests,
-    refresh,
     output
   ) => ({
     title,
     description,
     height: windowHeight - navHeight - 20,
     tests,
-    refresh,
     output
   })
 );
@@ -46,7 +43,6 @@ export class SidePanel extends PureComponent {
     height: PropTypes.number,
     tests: PropTypes.arrayOf(PropTypes.object),
     title: PropTypes.string,
-    refresh: PropTypes.bool,
     output: PropTypes.string
   };
 
@@ -74,7 +70,6 @@ export class SidePanel extends PureComponent {
       description,
       height,
       tests = [],
-      refresh,
       output
     } = this.props;
     const style = {
@@ -104,9 +99,7 @@ export class SidePanel extends PureComponent {
         <ToolPanel />
         <Output output={ output }/>
         <br />
-        <TestSuite
+        <TestSuite tests={ tests } />
-          refresh={ refresh }
-          tests={ tests } />
       </div>
     );
   }

common/app/routes/challenges/components/classic/Test-Suite.jsx

@@ -6,17 +6,20 @@ import { Col, Row } from 'react-bootstrap';
 export default class extends PureComponent {
   static displayName = 'TestSuite';
   static proptTypes = {
-    tests: PropTypes.arrayOf(PropTypes.object),
+    tests: PropTypes.arrayOf(PropTypes.object)
-    refresh: PropTypes.bool
   };
 
-  renderTests(tests = [], refresh = false) {
+  renderTests(tests = []) {
-    return tests.map(({ err, text = '' }, index)=> {
+    // err && pass > invalid state
+    // err && !pass > failed tests
+    // !err && pass > passed tests
+    // !err && !pass > in-progress
+    return tests.map(({ err, pass = false, text = '' }, index)=> {
       const iconClass = classnames({
         'big-icon': true,
-        'ion-close-circled error-icon': !refresh && err,
+        'ion-close-circled error-icon': err && !pass,
-        'ion-checkmark-circled success-icon': !refresh && !err,
+        'ion-checkmark-circled success-icon': !err && pass,
-        'ion-refresh refresh-icon': refresh
+        'ion-refresh refresh-icon': !err && !pass
       });
       return (
         <Row key={ text.slice(-6) + index }>
@@ -35,12 +38,12 @@ export default class extends PureComponent {
   }
 
   render() {
-    const { tests, refresh } = this.props;
+    const { tests } = this.props;
     return (
       <div
         className='challenge-test-suite'
         style={{ marginTop: '10px' }}>
-        { this.renderTests(tests, refresh) }
+        { this.renderTests(tests) }
       </div>
     );
   }

common/app/routes/challenges/redux/reducer.js

@@ -30,7 +30,6 @@ const mainReducer = handleActions(
     }),
     [types.updateCurrentChallenge]: (state, { payload: challenge }) => ({
       ...state,
-      refresh: true,
       id: challenge.id,
       // used mainly to find code storage
       legacyKey: challenge.name,
@@ -40,10 +39,12 @@ const mainReducer = handleActions(
     }),
     [types.updateTests]: (state, { payload: tests }) => ({
       ...state,
-      refresh: false,
       tests
     }),
-    [types.executeChallenge]: state => ({ ...state, refresh: true }),
+    [types.executeChallenge]: state => ({
+      ...state,
+      tests: state.tests.map(test => ({ ...test, err: false, pass: false }))
+    }),
 
     // map
     [types.updateFilter]: (state, { payload = ''}) => ({