Add sorting feature to the coverage index;

Colorize index items depending on the coverage level
gemini-testing · Oct 22, 2014 · 1c1742e · 1c1742e
1 parent f1557e5
commit 1c1742e
Show file tree

Hide file tree

Showing 10 changed files with 349 additions and 89 deletions.
diff --git a/.gitignore b/.gitignore
@@ -16,4 +16,4 @@ build
 .grunt
 
 node_modules
-coverage
+/coverage
diff --git a/.jscsrc b/.jscsrc
@@ -1,7 +1,8 @@
 {
     "excludeFiles": [
         "node_modules",
-        "coverage"
+        "/coverage",
+        "lib/coverage/tinytable.sorter.js"
     ],
     "requireCurlyBraces": [
         "if",

diff --git a/.jshintignore b/.jshintignore
@@ -1,2 +1,3 @@
 node_modules
-coverage
+/coverage
+lib/coverage/tinytable.sorter.js
diff --git a/lib/coverage-index.hbs b/lib/coverage-index.hbs
diff --git a/lib/coverage.css b/lib/coverage.css
diff --git a/lib/coverage/coverage-index.hbs b/lib/coverage/coverage-index.hbs
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <link rel="stylesheet" href="coverage.css"/>
+    <script type="text/javascript" src="tinytable.sorter.js"></script>
+    <meta charset="utf-8"/> 
+</head>
+<body>
+<div class="report">
+    <h3>Gemini tests CSS coverage report</h3>
+    <h4>Summary: <b
+                    title="Total percentage of the covered rules">{{percent}}%</b> (<b
+                    title="Total number of the covered rules">{{covered}}</b>/<b
+                    title="Total number of the rules in all files">{{total}}</b>)</h4>
+
+    <table id="report-list" class="report-list">
+        <thead class="report-list__header">
+            <th>File</th>
+            <th>Coverage, %</th>
+            <th>Rules Covered</th>
+            <th>Rules Total</th>
+        </thead>
+        <tbody>
+            {{#each reports}}
+                <tr class="report-list__row_level_{{stat.level}}">
+                    <td><a class="report-link" href="{{report}}">{{source}}</a></td>
+                    <td><div class="gauge"><span class="gauge__text">{{stat.percent}}</span><div
+                            class="gauge__fill" style="width: {{stat.percent}}%;">&nbsp;</div></div></td>
+                    <td>{{stat.covered}}</td>
+                    <td>{{stat.total}}</td>
+                </tr>
+            {{/each}}
+        </tbody>
+    </table>
+</div>
+<script type="text/javascript">
+    var sorter = new TINY.table.sorter("sorter");
+    sorter.head = "head";
+    sorter.asc = "report-list__header__cell_asc";
+    sorter.desc = "report-list__header__cell_desc";
+    sorter.init("report-list", 0);
+</script>
+</body>
+</html>
diff --git a/lib/coverage/coverage.css b/lib/coverage/coverage.css
@@ -0,0 +1,143 @@
+body {
+    background-color: #eee;
+    margin: 0px;
+    padding: 0px;
+}
+
+body, pre {
+    font: 13px arial;
+}
+
+pre {
+    margin: 0px;
+    padding-left: 10px;
+}
+
+.covered {
+    background-color: #abf7ad;
+}
+
+.none {
+    background-color: #ffb3b3;
+}
+
+.partial {
+    background-color: #fffcb3;
+}
+
+.report {
+    margin: 10px;
+}
+
+.report-list {
+    width: 100%;
+    margin: 0px;
+    padding: 0px;
+    border: solid 1px #999;
+    border-right: none;
+    border-bottom: none;
+    border-spacing: 0px;
+}
+
+.report-list td, .report-list th {
+    border: solid 1px #999;
+    border-left: none;
+    border-top: none;
+    padding: 3px;
+}
+
+.report-list td:nth-child(3), .report-list td:nth-child(4) {
+    text-align: right;
+}
+
+.report-list th {
+    cursor: pointer;
+}
+.report-list th:nth-child(2), .report-list th:nth-child(3), .report-list th:nth-child(4) {
+    width: 9em;
+}
+
+.report-list__item {
+    background-color: #eee;
+    padding: 3px;
+}
+
+.report-list__header {
+    background-color: #ccc;
+    padding: 3px;
+
+    -user-select:           none;
+    -moz-user-select:       none;
+    -webkit-user-select:    none;
+}
+
+.report-list__row {
+    background-color: #bbb;
+}
+
+.report-list__row_odd {
+    background-color: white;
+}
+
+.report-list__item:nth-child(odd) {
+    background-color: #fff;
+}
+
+.link-index {
+    display: block;
+    background-color: #ddd;
+    padding: 6px;
+}
+
+.report-link, .report-link:visited {
+    color: #333;
+    text-decoration: none;
+}
+
+.content {
+    padding-top: 10px;
+}
+
+.report-list__row_level_bad {
+    background: #ffb3b3;
+}
+
+.report-list__row_level_good {
+    background: #fffcb3;
+}
+
+.report-list__row_level_perfect {
+    background: #abf7ad;
+}
+
+.report-list__header__cell_asc:before, .report-list__header__cell_desc:before {
+    display: inline-block;
+    margin-left: -1em;
+    vertical-align: top;
+    content: '\25bc';
+    color: black;
+}
+
+.report-list__header__cell_desc:before {
+    content: '\25b2';
+}
+
+.gauge {
+    position: relative;
+    background: #999999;
+    width: 100%;
+}
+
+.gauge__text {
+    position: absolute;
+    color: #eee;
+    width: 100%;
+    text-align: center;
+    z-index: 1;
+}
+
+.gauge__fill {
+    background: #000;
+    opacity: 0.3;
+    position: relative;
+}
diff --git a/lib/coverage.hbs → lib/coverage/coverage.hbs b/lib/coverage.hbs → lib/coverage/coverage.hbs
diff --git a/lib/coverage.js → lib/coverage/index.js b/lib/coverage.js → lib/coverage/index.js
@@ -285,12 +285,20 @@ module.exports = inherit({
                     }
                 }
 
+                var percent = Math.round(coveredCount / data.length * 100);
                 stat = {
                     total: data.length,
                     covered: coveredCount,
-                    percent: Math.round(coveredCount / data.length * 100)
+                    percent: percent,
+                    level: 'bad'
                 };
 
+                if (percent === 100) {
+                    stat.level = 'perfect';
+                } else if (percent >= 50) {
+                    stat.level = 'good';
+                }
+
                 return hb.compile(opts.tmpl)({
                     content: lines.join('\n'),
                     source: path.relative(path.dirname(dest), file),
@@ -387,7 +395,8 @@ function writeStatsJson(stats, covDir) {
 
 function copyResources(covDir) {
     var res = [
-        'coverage.css'
+        'coverage.css',
+        'tinytable.sorter.js'
     ];
 
     return q.all(res.map(function(r) {