Provide some very rudimentary CSS & JS to collapse the 'covered' source by default and use colours to draw your eye to the areas that need tackling

ciaranj · ciaranj · commit 63a15e7ad93c · 2011-07-25T21:02:56.000+01:00
diff --git a/lib/vows/coverage/fragments/coverage-head.html b/lib/vows/coverage/fragments/coverage-head.html
@@ -12,11 +12,24 @@
     font-size: 0.8em;
     color: #333;
   }
+  .coverage.fullCoverage {
+    background-color:#0f0;
+    color: #111;
+  }
+  .coverage.okCoverage {
+    background-color: orange;
+  }
+  .coverage.poorCoverage {
+    background-color: red;
+  }
   .code {
     font-family: "Consolas", "Courier New", Courier, mono;
     white-space: pre;
     line-height: 16px;
   }
+  .collapsed {
+    display: none;
+  }
   body {
     margin-left: 20px;
     margin-top: 8px;
@@ -34,5 +47,15 @@
     box-shadow: 10px 10px 5px #888;
   }
   </style>
+  <script type="text/javascript">
+    function expando(elem) {
+      // We're skipping the '/n' text element sibling.
+      var olElement= elem.nextSibling.nextSibling;
+      var currentState= olElement.className;
+      if( currentState == "collapsed" ) currentState= "";
+      else currentState= "collapsed";
+      olElement.className= currentState;
+    }
+  </script>
 </head>
 <body>
diff --git a/lib/vows/coverage/report-html.js b/lib/vows/coverage/report-html.js
@@ -4,6 +4,15 @@ var sys  = require('sys'),
 
 this.name = 'coverage-report-html';
 
+function getCoverageClass( data ) {
+  var fullCoverage= (data.coverage == 100);
+  var okCoverage= (!fullCoverage && data.coverage >=60);
+  var coverageClass= '';
+  if( fullCoverage ) coverageClass= 'fullCoverage';
+  else if( okCoverage) coverageClass= 'okCoverage';
+  else coverageClass= 'poorCoverage';
+  return coverageClass;
+}
 this.report = function (coverageMap) {
     var out, head, foot;
     
@@ -21,12 +30,12 @@ this.report = function (coverageMap) {
     for (var filename in coverageMap) {
         if (coverageMap.hasOwnProperty(filename)) {
             var data = file.coverage(filename, coverageMap[filename]);
-            
+            var coverageClass= getCoverageClass( data );
             fs.writeSync(out, "<h2>" + filename + "</h2>\n");
-            fs.writeSync(out, '<span class="coverage">' + "[ hits: " + data.hits);
+            fs.writeSync(out, '<span class="coverage '+ coverageClass+'">' + "[ hits: " + data.hits);
             fs.writeSync(out, ", misses: " + data.misses + ", sloc: " + data.sloc);
-            fs.writeSync(out, ", coverage: " + data.coverage.toFixed(2) + "% ]" + "</span>\n");
-            fs.writeSync(out, "<ol>\n");
+            fs.writeSync(out, ", coverage: " + data.coverage.toFixed(2) + "% ]" + "</span> <a href='#' onclick='expando(this)'>[+]</a>\n");
+            fs.writeSync(out, "<ol class='collapsed'>\n");
 
             for (var i = 0; i < data.source.length; i++) {
                 fs.writeSync(out, '  <li class="code ');
@@ -36,6 +45,7 @@ this.report = function (coverageMap) {
             }
             
             fs.writeSync(out, "</ol>\n");
+            fs.writeSync(out, "<hr/>\n");
         }
     }
     
