From 2b834f0233f8c8f03b4b5349d4758d975d6669f8 Mon Sep 17 00:00:00 2001
From: Lars Jung <lrsjng@gmail.com>
Date: Mon, 27 Apr 2015 12:51:25 +0200
Subject: [PATCH] Refactor test runner.

---
 test/index.html.jade |   5 +-
 test/styles.less     | 173 +++++++++++++++++++++----------------------
 test/util/mocha.js   |  18 ++---
 3 files changed, 97 insertions(+), 99 deletions(-)

diff --git a/test/index.html.jade b/test/index.html.jade
index 9de406bf..76e96fc0 100644
--- a/test/index.html.jade
+++ b/test/index.html.jade
@@ -11,9 +11,8 @@ html
         script( src="scripts.js" )
 
     body
-        div#report
+        div#mocha-custom
             a( href="index.html" ) h5ai #{pkg.version}
             div.stats
             div.progress
-        div#mocha-overlay
-            div#mocha
+        div#mocha
diff --git a/test/styles.less b/test/styles.less
index ccb3e55f..4d202d52 100644
--- a/test/styles.less
+++ b/test/styles.less
@@ -3,14 +3,15 @@
 @col-white: #ffffff;
 @col-red-500: #f44336;
 @col-red-800: #c62828;
+@col-amber-800: #ff8f00;
 @col-green-500: #4caf50;
 @col-grey-200: #eeeeee;
 @col-grey-800: #424242;
 
-@col-medium: #c09853;
-@col-slow: #b94a48;
+@col-medium: @col-amber-800;
+@col-slow: @col-red-800;
 
-#report {
+#mocha-custom {
     font-family: Roboto, Helvetica, Arial, sans-serif;
     position: fixed;
     left: 0;
@@ -47,13 +48,13 @@
         display: block;
         position: absolute;
         right: 0;
-        bottom: 0;
+        top: 0;
         height: 100%;
         background: rgba(255,255,255,0.2);
     }
 }
 
-#mocha-overlay {
+#mocha {
     font-family: Roboto, Helvetica, Arial, sans-serif;
     position: fixed;
     left: 0;
@@ -64,11 +65,20 @@
     z-index: 10000;
     overflow-x: auto;
     overflow-y: scroll;
-}
 
-#mocha {
-    max-width: 900px;
-    margin: 0 auto;
+    #mocha-stats {
+        display: none;
+    }
+
+    #mocha-report {
+        max-width: 900px;
+        margin: 0 auto;
+        padding: 32px;
+
+        > .suite {
+            margin: 0;
+        }
+    }
 
     ul, li, h1, h2 {
         margin: 0;
@@ -85,81 +95,6 @@
         cursor: pointer;
     }
 
-    .hidden {
-        display: none;
-    }
-
-    .replay {
-        display: none;
-    }
-
-    .test {
-        margin-left: 15px;
-        padding: 2px 4px;
-        overflow: hidden;
-
-        &:hover {
-            background: @col-grey-200;
-        }
-
-        &.fail {
-            color: @col-red-800;
-        }
-
-        &::before {
-            content: ' ';
-            display: block;
-            width: 10px;
-            height: 10px;
-            float: left;
-            margin-right: 8px;
-            background: @col-grey-800;
-            border-radius: 20px;
-            position: relative;
-            top: 3px;
-        }
-        &.pass::before {
-            background: @col-green-500;
-        }
-        &.fail::before {
-            background: @col-red-500;
-        }
-        &.pending::before {
-            background: @col-grey-800;
-        }
-
-        .duration {
-            display: inline-block;
-            color: @col-grey-800;
-            border: none;
-            box-shadow: none;
-            font-size: 9px;
-            margin-left: 12px;
-        }
-        &.medium .duration {
-            background: @col-medium;
-        }
-        &.slow .duration {
-            background: @col-slow;
-        }
-
-        pre {
-            display: block;
-            float: left;
-            clear: left;
-            font: 12px monospace;
-            margin: 4px 0 16px 18px;
-            padding: 0 8px;
-            max-width: 80%;
-            word-wrap: break-word;
-            border-left: 2px solid @col-grey-800;
-
-            &.error {
-                color: @col-red-800;
-            }
-        }
-    }
-
     .suite {
         margin: 16px 0 8px 24px;
 
@@ -200,11 +135,75 @@
         }
     }
 
-    #mocha-report > .suite {
-        margin: 32px;
+    .test {
+        margin-left: 15px;
+        padding: 2px 4px;
+        overflow: hidden;
+
+        &:hover {
+            background: @col-grey-200;
+        }
+
+        &.fail {
+            color: @col-red-800;
+        }
+
+        &::before {
+            content: ' ';
+            display: block;
+            width: 10px;
+            height: 10px;
+            float: left;
+            margin-right: 8px;
+            background: @col-grey-800;
+            border-radius: 20px;
+            position: relative;
+            top: 3px;
+        }
+        &.pass::before {
+            background: @col-green-500;
+        }
+        &.fail::before {
+            background: @col-red-500;
+        }
+        &.pending::before {
+            background: @col-grey-800;
+        }
+
+        .duration {
+            display: inline-block;
+            color: @col-grey-800;
+            border: none;
+            box-shadow: none;
+            font-size: 10px;
+            margin-left: 12px;
+            float: right;
+        }
+        &.medium .duration {
+            color: @col-medium;
+        }
+        &.slow .duration {
+            color: @col-slow;
+        }
+
+        pre {
+            display: block;
+            float: left;
+            clear: left;
+            font: 12px monospace;
+            margin: 4px 0 16px 18px;
+            padding: 0 8px;
+            max-width: 80%;
+            word-wrap: break-word;
+            border-left: 2px solid @col-grey-800;
+
+            &.error {
+                color: @col-red-800;
+            }
+        }
     }
 
-    #mocha-stats {
+    .hidden, .replay {
         display: none;
     }
 }
diff --git a/test/util/mocha.js b/test/util/mocha.js
index c9f8da92..38b1e8e2 100644
--- a/test/util/mocha.js
+++ b/test/util/mocha.js
@@ -52,14 +52,14 @@ function onEnd() {
     var stats = (runner.stats.duration / 1000.0).toFixed(3) + 's';
 
     if (failed) {
-        $('#report .stats').on('click', toggleFailureFilter);
+        $('#mocha-custom .stats').on('click', toggleFailureFilter);
     }
 
-    $('#report').addClass(failed ? 'fail' : 'pass');
-    $('#report .progress').hide();
-    $('#report .stats').text(stats);
-    $('#mocha-overlay .suite').each(addSuiteStats);
-    $('#mocha-overlay code').each(fixCodeFormatting);
+    $('#mocha-custom').addClass(failed ? 'fail' : 'pass');
+    $('#mocha-custom .progress').hide();
+    $('#mocha-custom .stats').text(stats);
+    $('#mocha-report .suite').each(addSuiteStats);
+    $('#mocha-report code').each(fixCodeFormatting);
 }
 
 function onTest() {
@@ -70,10 +70,10 @@ function onTest() {
     var stats = ((new Date().getTime() - runner.stats.start) / 1000.0).toFixed(3) + 's';
 
     if (runner.stats.failures) {
-        $('#report').addClass('fail');
+        $('#mocha-custom').addClass('fail');
     }
-    $('#report .progress').css('width', (100 - percent) + '%');
-    $('#report .stats').text(stats);
+    $('#mocha-custom .progress').css('width', (100 - percent) + '%');
+    $('#mocha-custom .stats').text(stats);
 }
 
 function setupMocha() {