From 8ff48453a8b12d9cacf56b0c0c544c8256af64c7 Mon Sep 17 00:00:00 2001
From: Mark Wiemer <7833360+mark-wiemer@users.noreply.github.com>
Date: Tue, 29 Oct 2024 11:00:24 -0700
Subject: [PATCH] feat: highlight browser failures (#5222)

* Format html.js

* Remove newlines between JSDoc comments and their symbols

* (temp) update template.html to run tests

* Color the stat result icon and text based on root suite result

* (temp) add template fail and template pass

* On first test fail, add fail indicator to stats

* Remove extra newline

* Format mocha.css with Prettier

* Make pass icon color accessible

* Cleanup mocha.css var names

* Restore template to main

* Remove thirteen-year-old comment

https://github.com/mochajs/mocha/commit/440e38cec946826db9e2089c21f570ad3abae852

* Revert "Format html.js"

This reverts commit 8552a91de1508d59b44e2b80cf7809030ac8bef5.

* Revert "Restore template to main"

This reverts commit 854ab12182fb738903cb1383a416d06169a21304.

* Color passes and failures count as well

* Cleanup stats variables to consts

* Fix stats not updating on root suite end

* Revert "Remove extra newline"

This reverts commit 27a79585eee5a60a5dec67a8f27f9c62543921bb.

* Restore newlines :(

* Restore newlines for real

* Reapply "Remove extra newline"

This reverts commit c43bffeae50663f69b2b35e8a84bf3af2dfba9b0.

* Revert "Format mocha.css with Prettier"

This reverts commit 0898ed586c3a39e6ea73a902275c440b8e04461f.

* indent to 5, not 6 chars in mocha.css

* Re-add newline in mocha.css

* Reapply "Restore template to main"

This reverts commit 714ee1538b6089b4c00fe5daaf523c5985d87e25.
---
 lib/reporters/html.js | 51 +++++++++++++++++++++++++++----------
 mocha.css             | 58 ++++++++++++++++++++++++++++++-------------
 2 files changed, 79 insertions(+), 30 deletions(-)

diff --git a/lib/reporters/html.js b/lib/reporters/html.js
index ae4a4546f8..c970fc05e9 100644
--- a/lib/reporters/html.js
+++ b/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));
   }
 }
diff --git a/mocha.css b/mocha.css
index 1c548546ca..c9839f805f 100644
--- a/mocha.css
+++ b/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;