Fixup styles, add result emoji

mochajs · Sep 30, 2024 · 0de3d19 · 0de3d19
1 parent c61dcbf
commit 0de3d19
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 16 deletions.
diff --git a/lib/browser/template.html b/lib/browser/template.html
@@ -1,18 +1,33 @@
+<!-- todo revert to main, just easier to test this way -->
+<!-- run `npm run build` then open this page in the browser -->
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <title>Mocha</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="mocha.css" />
+    <link rel="stylesheet" href="../../mocha.css" />
   </head>
   <body>
     <div id="mocha"></div>
-    <script src="mocha.js"></script>
+    <script src="../../mocha.js"></script>
     <script>
       mocha.setup('bdd');
     </script>
-    <script src="tests.spec.js"></script>
+    <script>
+      // todo `expect is not defined` error, reverting anyway
+      describe('example', function () {
+        it('should pass', function (done) {
+          expect(1).to.equal(1);
+          done();
+        });
+
+        it('should fail', function (done) {
+          expect(1).to.equal(2);
+          done();
+        });
+      });
+    </script>
     <script>
       mocha.run();
     </script>

diff --git a/lib/reporters/html.js b/lib/reporters/html.js
@@ -37,6 +37,7 @@ exports = module.exports = HTML;
 
 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,26 @@ 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,
+    progressIndex,
+    passesIndex,
+    failuresIndex,
+    durationIndex
+  ] = [0, 1, 2, 3, 4];
+  var results = items[resultIndex];
+  var passes = items[passesIndex].getElementsByTagName('em')[0];
+  var passesLink = items[passesIndex].getElementsByTagName('a')[0];
+  var failures = items[failuresIndex].getElementsByTagName('em')[0];
+  var failuresLink = items[failuresIndex].getElementsByTagName('a')[0];
+  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');
@@ -255,6 +264,7 @@ function HTML(runner, options) {
     var ms = new Date() - stats.start;
     text(passes, stats.passes);
     text(failures, stats.failures);
+    text(results, stats.failures ? '❌' : '✅');
     text(duration, (ms / 1000).toFixed(2));
   }
 }

diff --git a/mocha.css b/mocha.css
@@ -342,14 +342,14 @@ body {
   margin: 0;
   color: var(--mocha-stats-color);
   z-index: 1;
-  background-color: #00e600;
-  border: solid  #00e600;
+  border-color: #00e600;
+  border: solid;
   border-radius: 10px;
 }
 
 #mocha-stats.fail {
-  border: solid  #c00;
-  background-color: #c00;
+  border: solid;
+  border-color: #c00;
   border-radius: 10px;
 }