content: import React from 'react';
  import {connect} from 'react-redux';
  
  import Button from './../shared/Button';
  import Title from './../shared/Title';
  import {getTests} from './../../reducers/selectors';
  import {runTests} from './../../actions/problem';
  import './TestResults.css';
  
  const PASSED_COLORS = {
    true: '#42b72a',
    false: '#fa3e3e',
  };
  
  const _formatJSON = (value) => JSON.stringify(value, null, 1);
  
  const ItemField = ({
    label,
    value,
    passed,
  }) => (
    <div className="TestResults-itemField">
      <div className="TestResults-itemLabel">
        {label}
      </div>
      <div
        className="TestResults-itemValue"
        style={{color: PASSED_COLORS[passed]}}>
        {value}
      </div>
    </div>
  );
  
  class TestResults extends React.Component {
  
    _renderTestResults() {
      const {tests} = this.props;
      if (!tests.length) {
        return null;
      }
      const passedTests = tests.filter(test => test.passed).length;
      const testResults = tests.map((test, key) => {
        const {args, error, expected, number, passed, received} = test;
        let errorComponent;
        if (error) {
          errorComponent = (
            <div className="TestResults-error">
              {error.toString()}
            </div>
          );
        }
        return (
          <div key={key} className="TestResults-item">
            <div
              className="TestResults-number"
              style={{color: PASSED_COLORS[passed]}}>
              {`Test ${number} ${passed ? '✔' : '✘'}`}
            </div>
            <ItemField
              label="Args"
              value={<code>{_formatJSON(args)}</code>}
            />
            <ItemField
              label="Expected"
              value={_formatJSON(expected)}
            />
            <ItemField
              label="Received"
              value={_formatJSON(received)}
              passed={passed}
            />
            {errorComponent}
          </div>
        );
      });
      return (
        <div className="TestResults-container">
          <div
            className="TestResults-summary"
            style={{color: PASSED_COLORS[passedTests === tests.length]}}>
            {`${passedTests}/${tests.length} tests passed successfully!`}
          </div>
          {testResults}
        </div>
      );
    }
  
    render () {
      return (
        <div className="TestResults">
          <Title value="Tests" />
          <Button
            label="Run Tests"
            onClick={this.props.runTests}
          />
          {this._renderTestResults()}
        </div>
      );
    };
  }
  
  const mapStateToProps = (state) => ({
    tests: getTests(state),
  });
  
  export default connect(
    mapStateToProps,
    {runTests},
  )(TestResults);
  