feat: highlight browser failures

lib/cli/init.js

@@ -24,12 +24,12 @@ exports.handler = argv => {
   const destdir = argv.path;
   const srcdir = path.join(__dirname, '..', '..');
   fs.mkdirSync(destdir, {recursive: true});
-  const css = fs.readFileSync(path.join(srcdir, 'mocha.css'));
+  const css = fs.readFileSync(path.join(srcdir, 'mocha.sass'));
   const js = fs.readFileSync(path.join(srcdir, 'mocha.js'));
   const tmpl = fs.readFileSync(
     path.join(srcdir, 'lib', 'browser', 'template.html')
   );
-  fs.writeFileSync(path.join(destdir, 'mocha.css'), css);
+  fs.writeFileSync(path.join(destdir, 'mocha.sass'), css);
   fs.writeFileSync(path.join(destdir, 'mocha.js'), js);
   fs.writeFileSync(path.join(destdir, 'tests.spec.js'), '');
   fs.writeFileSync(path.join(destdir, 'index.html'), tmpl);

lib/reporters/html.js

@@ -102,7 +102,6 @@ function HTML(runner, options) {
       hideSuitesWithout('test fail');
     }
   });
-
   root.appendChild(stat);
   root.appendChild(report);
 
@@ -197,6 +196,7 @@ function HTML(runner, options) {
       );
     }
 
+    stat.className += ' fail';
     self.addCodeToggle(el, test.body);
     appendToStack(el);
     updateStats();

mocha.css → mocha.sass

@@ -342,6 +342,16 @@ body {
   margin: 0;
   color: var(--mocha-stats-color);
   z-index: 1;
+  background-color: #00e600;
+  border: solid  #00e600;
+  border-radius: 10px;
+}
+
+#mocha-stats.fail {
+ @extend #mocha-stats;
+  border: solid  #c00;
+  background-color: #c00;
+  border-radius: 10px;
 }
 
 #mocha-stats .progress-contain {

package.json

@@ -174,7 +174,7 @@
     "bin/*mocha*",
     "lib/**/*.{js,html,json}",
     "index.js",
-    "mocha.css",
+    "mocha.sass",
     "mocha.js",
     "mocha.js.map",
     "browser-entry.js"

test/integration/init.spec.js

@@ -66,7 +66,7 @@ describe('init command', function () {
           return done(err);
         }
         expect(result, 'to have succeeded');
-        expect(fs.existsSync(path.join(tmpdir, 'mocha.css')), 'to be true');
+        expect(fs.existsSync(path.join(tmpdir, 'mocha.sass')), 'to be true');
         expect(fs.existsSync(path.join(tmpdir, 'mocha.js')), 'to be true');
         expect(fs.existsSync(path.join(tmpdir, 'tests.spec.js')), 'to be true');
         expect(fs.existsSync(path.join(tmpdir, 'index.html')), 'to be true');