refactor: add progress bar

Author: yourWaifu

lib/reporters/html.js

@@ -37,7 +37,7 @@ exports = module.exports = HTML;
 
 var statsTemplate =
   '<ul id="mocha-stats">' +
-  '<li class="progress"></li>' +
+  '<li class="progress-contain"><em>0</em>% <progress class="progress-element" id="progress-element" max="100" value="0" /></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>' +
   '<li class="duration">duration: <em>0</em>s</li>' +
@@ -69,17 +69,10 @@ function HTML(runner, options) {
   var duration = items[3].getElementsByTagName('em')[0];
   var report = fragment('<ul id="mocha-report"></ul>');
   var stack = [report];
-  var progressText;
+  var progressText = items[0].getElementsByTagName('em')[0];
+  var progressBar = items[0].getElementsByTagName('progress')[0];
   var root = document.getElementById('mocha');
 
-  {
-    // On some broswers, canvas might be unavailable for whatever reason.
-    // As such, we need text and progress
-    var progressTextFallback = fragment('<li class="progress-text">progress: <em>0</em>%</li>');
-    progressText = progressTextFallback.getElementsByTagName('em')[0];
-    items[0].replaceWith(progressTextFallback);
-  }
-
   if (!root) {
     return error('#mocha div missing, add it to your document');
   }
@@ -224,12 +217,16 @@ function HTML(runner, options) {
   function updateStats() {
     // TODO: add to stats
     var percent = ((stats.tests / runner.total) * 100) | 0;
+    progressBar.value = percent;
     if (progressText) {
       // setting a toFixed that is too low, makes small changes to progress not shown
       // setting it too high, makes the progress text longer then it needs to
       // to address this, calculate the toFixed based on the magnitude of total
-      var decmalPlaces = Math.ceil(Math.log10(runner.total/100));
-      text(progressText, percent.toFixed(Math.min(Math.max(decmalPlaces, 0), 100)));
+      var decmalPlaces = Math.ceil(Math.log10(runner.total / 100));
+      text(
+        progressText,
+        percent.toFixed(Math.min(Math.max(decmalPlaces, 0), 100))
+      );
     }
 
     // update stats