created bar ontop of page that turns red when tests fail

recreated pr

feat: removed tests

setup scaffolding for testing error

restored back to previous config

set back to original package-lock.json

set test back to original state

wrote basic tests

added timeout for driver cleanup

set timeout to time for first driver to close

lib/reporters/html.js

@@ -35,7 +35,7 @@ exports = module.exports = HTML;
 /**
  * Stats template.
  */
-
+var statsBar = '<div id="progress-bar"></div>';
 var statsTemplate =
   '<ul id="mocha-stats">' +
   '<li class="progress"><canvas width="40" height="40"></canvas></li>' +
@@ -61,6 +61,7 @@ function HTML(runner, options) {
 
   var self = this;
   var stats = this.stats;
+  var results = fragment(statsBar);
   var stat = fragment(statsTemplate);
   var items = stat.getElementsByTagName('li');
   var passes = items[1].getElementsByTagName('em')[0];
@@ -111,7 +112,7 @@ function HTML(runner, options) {
       hideSuitesWithout('test fail');
     }
   });
-
+  root.appendChild(results);
   root.appendChild(stat);
   root.appendChild(report);
 
@@ -209,7 +210,7 @@ function HTML(runner, options) {
         fragment('<pre class="error">%e%e</pre>', message, stackString)
       );
     }
-
+    results.className += ' error';
     self.addCodeToggle(el, test.body);
     appendToStack(el);
     updateStats();

mocha.css

@@ -257,6 +257,22 @@ body {
   letter-spacing: 1px;
 }
 
+#progress-bar{
+  height: 15px;
+  border-radius: 5px;
+  border: solid  #00e600;
+  padding: 5px 5px 5px 5px;
+  background-color: #00e600;
+}
+
+#progress-bar.error {
+  height: 15px;
+  border-radius: 5px;
+  border: solid  #c00;
+  padding: 5px 5px 5px 5px;
+  background-color: #c00;
+}
+
 #mocha-stats {
   position: fixed;
   top: 15px;