feat: highlight browser failures

lib/reporters/html.js

@@ -32,11 +32,12 @@ var Date = global.Date;
 exports = module.exports = HTML;
 
 /**
- * Stats template.
+ * Stats template: Result, progress, passes, failures, and duration.
  */
 
 var statsTemplate =
   '<ul id="mocha-stats">' +
+  '<li class="result"></li>' +
   '<li class="progress-contain"><progress class="progress-element" max="100" value="0"></progress><svg class="progress-ring"><circle class="ring-flatlight" stroke-dasharray="100%,0%"/><circle class="ring-highlight" stroke-dasharray="0%,100%"/></svg><div class="progress-text">0%</div></li>' +
   '<li class="passes"><a href="javascript:void(0);">passes:</a> <em>0</em></li>' +
   '<li class="failures"><a href="javascript:void(0);">failures:</a> <em>0</em></li>' +
@@ -62,18 +63,35 @@ function HTML(runner, options) {
   var stats = this.stats;
   var stat = fragment(statsTemplate);
   var items = stat.getElementsByTagName('li');
-  var passes = items[1].getElementsByTagName('em')[0];
-  var passesLink = items[1].getElementsByTagName('a')[0];
-  var failures = items[2].getElementsByTagName('em')[0];
-  var failuresLink = items[2].getElementsByTagName('a')[0];
-  var duration = items[3].getElementsByTagName('em')[0];
+  const resultIndex = 0;
+  const progressIndex = 1;
+  const passesIndex = 2;
+  const failuresIndex = 3;
+  const durationIndex = 4;
+  /** Stat item containing the root suite pass or fail indicator (hasFailures ? '✖' : '✓') */
+  var resultIndicator = items[resultIndex];
+  /** Passes text and count */
+  const passesStat = items[passesIndex];
+  /** Stat item containing the pass count (not the word, just the number) */
+  const passesCount = passesStat.getElementsByTagName('em')[0];
+  /** Stat item linking to filter to show only passing tests */
+  const passesLink = passesStat.getElementsByTagName('a')[0];
+  /** Failures text and count */
+  const failuresStat = items[failuresIndex];
+  /** Stat item containing the failure count (not the word, just the number) */
+  const failuresCount = failuresStat.getElementsByTagName('em')[0];
+  /** Stat item linking to filter to show only failing tests */
+  const failuresLink = failuresStat.getElementsByTagName('a')[0];
+  /** Stat item linking to the duration time (not the word or unit, just the number) */
+  var duration = items[durationIndex].getElementsByTagName('em')[0];
   var report = fragment('<ul id="mocha-report"></ul>');
   var stack = [report];
-  var progressText = items[0].getElementsByTagName('div')[0];
-  var progressBar = items[0].getElementsByTagName('progress')[0];
+  var progressText = items[progressIndex].getElementsByTagName('div')[0];
+  var progressBar = items[progressIndex].getElementsByTagName('progress')[0];
   var progressRing = [
-    items[0].getElementsByClassName('ring-flatlight')[0],
-    items[0].getElementsByClassName('ring-highlight')[0]];
+    items[progressIndex].getElementsByClassName('ring-flatlight')[0],
+    items[progressIndex].getElementsByClassName('ring-highlight')[0]
+  ];
   var progressRingRadius = null; // computed CSS unavailable now, so set later
   var root = document.getElementById('mocha');
 
@@ -127,6 +145,10 @@ function HTML(runner, options) {
 
   runner.on(EVENT_SUITE_END, function (suite) {
     if (suite.root) {
+      if (stats.failures === 0) {
+        text(resultIndicator, '✓');
+        stat.className += ' pass';
+      }
       updateStats();
       return;
     }
@@ -147,6 +169,10 @@ function HTML(runner, options) {
   });
 
   runner.on(EVENT_TEST_FAIL, function (test) {
+    // Update stat items
+    text(resultIndicator, '✖');
+    stat.className += ' fail';
+
     var el = fragment(
       '<li class="test fail"><h2>%e <a href="%e" class="replay">' +
         playIcon +
@@ -219,7 +245,6 @@ function HTML(runner, options) {
   }
 
   function updateStats() {
-    // TODO: add to stats
     var percent = ((stats.tests / runner.total) * 100) | 0;
     progressBar.value = percent;
     if (progressText) {
@@ -245,8 +270,8 @@ function HTML(runner, options) {
 
     // update stats
     var ms = new Date() - stats.start;
-    text(passes, stats.passes);
-    text(failures, stats.failures);
+    text(passesCount, stats.passes);
+    text(failuresCount, stats.failures);
     text(duration, (ms / 1000).toFixed(2));
   }
 }

mocha.css

@@ -3,11 +3,11 @@
 :root {
   --mocha-color: #000;
   --mocha-bg-color: #fff;
-  --mocha-pass-icon-color: #00d6b2;
-  --mocha-pass-color: #fff;
-  --mocha-pass-shadow-color: rgba(0,0,0,.2);
-  --mocha-pass-mediump-color: #c09853;
-  --mocha-pass-slow-color: #b94a48;
+  --mocha-test-pass-color: #007f6a;
+  --mocha-test-pass-duration-color: #fff;
+  --mocha-test-pass-shadow-color: rgba(0,0,0, 0.2);
+  --mocha-test-pass-mediump-color: #c09853;
+  --mocha-test-pass-slow-color: #b94a48;
   --mocha-test-pending-color: #0b97c4;
   --mocha-test-pending-icon-color: #0b97c4;
   --mocha-test-fail-color: #c00;
@@ -38,11 +38,11 @@
   :root {
      --mocha-color: #fff;
      --mocha-bg-color: #222;
-     --mocha-pass-icon-color: #00d6b2;
-     --mocha-pass-color: #222;
-     --mocha-pass-shadow-color: rgba(255,255,255,.2);
-     --mocha-pass-mediump-color: #f1be67;
-     --mocha-pass-slow-color: #f49896;
+     --mocha-test-pass-color: #00d6b2;
+     --mocha-test-pass-duration-color: #222;
+     --mocha-test-pass-shadow-color: rgba(255, 255, 255, 0.2);
+     --mocha-test-pass-mediump-color: #f1be67;
+     --mocha-test-pass-slow-color: #f49896;
      --mocha-test-pending-color: #0b97c4;
      --mocha-test-pending-icon-color: #0b97c4;
      --mocha-test-fail-color: #f44;
@@ -141,11 +141,11 @@ body {
 }
 
 #mocha .test.pass.medium .duration {
-  background: var(--mocha-pass-mediump-color);
+  background: var(--mocha-test-pass-mediump-color);
 }
 
 #mocha .test.pass.slow .duration {
-  background: var(--mocha-pass-slow-color);
+  background: var(--mocha-test-pass-slow-color);
 }
 
 #mocha .test.pass::before {
@@ -154,17 +154,17 @@ body {
   display: block;
   float: left;
   margin-right: 5px;
-  color: var(--mocha-pass-icon-color);
+  color: var(--mocha-test-pass-color);
 }
 
 #mocha .test.pass .duration {
   font-size: 9px;
   margin-left: 5px;
   padding: 2px 5px;
-  color: var(--mocha-pass-color);
-  -webkit-box-shadow: inset 0 1px 1px var(--mocha-pass-shadow-color);
-  -moz-box-shadow: inset 0 1px 1px var(--mocha-pass-shadow-color);
-  box-shadow: inset 0 1px 1px var(--mocha-pass-shadow-color);
+  color: var(--mocha-test-pass-duration-color);
+  -webkit-box-shadow: inset 0 1px 1px var(--mocha-test-pass-shadow-color);
+  -moz-box-shadow: inset 0 1px 1px var(--mocha-test-pass-shadow-color);
+  box-shadow: inset 0 1px 1px var(--mocha-test-pass-shadow-color);
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -ms-border-radius: 5px;
@@ -344,6 +344,30 @@ body {
   z-index: 1;
 }
 
+#mocha-stats.fail li.result {
+  color: var(--mocha-test-fail-color);
+}
+
+#mocha-stats.fail li.failures {
+  color: var(--mocha-test-fail-color);
+}
+
+#mocha-stats.fail li.failures em {
+  color: var(--mocha-test-fail-color);
+}
+
+#mocha-stats.pass li.result {
+  color: var(--mocha-test-pass-color);
+}
+
+#mocha-stats.pass li.passes {
+  color: var(--mocha-test-pass-color);
+}
+
+#mocha-stats.pass li.passes em {
+  color: var(--mocha-test-pass-color);
+}
+
 #mocha-stats .progress-contain {
   float: right;
   padding: 0;