render()

in src/pr/TestReportRenderer.js [86:183]

• 97 lines of code
• 8 McCabe index (conditional complexity)

  render() {
    const toggle = () => {
      const prev = this.state.showDetail;
      this.setState({ showDetail: !prev });
    };
    let suiteDetail = null;

    let data = [];
    for (const [filename, classes] of Object.entries(this.props.info)) {
      for (const [classname, stats] of Object.entries(classes)) {
        stats.filename = filename;
        stats.classname = classname;
        data.push(stats);
      }
    }
    data = data.sort((a, b) => {
      a = a.passed + a.error;
      b = b.passed + b.error;
      return b - a;
    });
    let totals = {
      passed: 0,
      error: 0,
      skipped: 0,
    };
    for (const item of data) {
      totals.passed += item.passed;
      totals.error += item.error;
      totals.skipped += item.skipped;
    }
    if (this.state.showDetail) {
      let rows = [];
      for (const classStats of data) {
        let filename = classStats.filename.split("/").slice(-1)[0];
        let name = `${filename}:${classStats.classname}`;
        rows.push(
          <tr
            style={{
              fontSize: "12px",
              backgroundColor: classStats.error > 0 ? "#ffe4e4" : "white",
            }}
            key={name}
          >
            <td style={{ fontFamily: '"Monaco", monospace' }}>
              <span style={{ color: "grey" }}>{filename}:</span>
              <span>{classStats.classname}</span>
            </td>
            <td className="center">{classStats.passed}</td>
            <td className="center">{classStats.error}</td>
            <td className="center">{classStats.skipped}</td>
          </tr>
        );
      }
      suiteDetail = (
        <table style={{ marginTop: "6px" }} className="table">
          <thead>
            <tr>
              <th className="center">Name</th>
              <th className="center">Passed</th>
              <th className="center">Errors</th>
              <th className="center">Skipped</th>
            </tr>
          </thead>
          <tbody>{rows}</tbody>
        </table>
      );
    }
    return (
      <Card
        style={{
          marginTop: "5px",
        }}
      >
        <Card.Body>
          <Card.Title style={{ marginBottom: 0 }}>Test Summary</Card.Title>
          <div>
            <p style={{ marginBottom: 0 }}>
              Ran {this.props.totals.cases} test cases in{" "}
              {this.props.totals.classes} classes from {this.props.totals.files}{" "}
              files
            </p>
            <p style={{ marginBottom: 0 }}>
              {totals.passed} tests passed, {totals.error} tests failed,{" "}
              {totals.skipped} tests skipped
              <button
                style={{ marginLeft: "10px", fontSize: "0.8em" }}
                className="btn btn-secondary"
                onClick={toggle}
              >
                {this.state.showDetail ? "Hide" : "Show"} Details
              </button>
            </p>
            {suiteDetail}
          </div>
        </Card.Body>
      </Card>
    );
  }