feat: add uncovered block navigation (#136)

istanbuljs · Feb 21, 2018 · c798930 · c798930
1 parent 24104a7
commit c798930
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 3 deletions.
diff --git a/packages/istanbul-reports/lib/html/assets/base.css b/packages/istanbul-reports/lib/html/assets/base.css
@@ -152,9 +152,15 @@ table.coverage td span.cline-any {
     background-position: 0 -10px;
 }
 .status-line {  height: 10px; }
+/* yellow */
+.cbranch-no { background: yellow !important; color: #111; }
 /* dark red */
 .red.solid, .status-line.low, .low .cover-fill { background:#C21F39 }
 .low .chart { border:1px solid #C21F39 }
+.highlighted,
+.highlighted .cstat-no, .highlighted .fstat-no, .highlighted .cbranch-no{
+  background: #C21F39 !important;
+}
 /* medium red */
 .cstat-no, .fstat-no, .cbranch-no, .cbranch-no { background:#F6C6CE }
 /* light red */
@@ -167,12 +173,9 @@ table.coverage td span.cline-any {
 .status-line.high, .high .cover-fill { background:rgb(77,146,33) }
 .high .chart { border:1px solid rgb(77,146,33) }
 
-
 .medium .chart { border:1px solid #666; }
 .medium .cover-fill { background: #666; }
 
-.cbranch-no { background:  yellow !important; color: #111; }
-
 .cstat-skip { background: #ddd; color: #111; }
 .fstat-skip { background: #ddd; color: #111 !important; }
 .cbranch-skip { background: #ddd !important; color: #111; }

diff --git a/packages/istanbul-reports/lib/html/assets/block-navigation.js b/packages/istanbul-reports/lib/html/assets/block-navigation.js
@@ -0,0 +1,63 @@
+var jumpToCode = (function init () {
+  // Classes of code we would like to highlight
+  var missingCoverageClasses = [ '.cbranch-no', '.cstat-no', '.fstat-no' ];
+
+  // We don't want to select elements that are direct descendants of another match
+  var notSelector = ':not(' + missingCoverageClasses.join('):not(') + ') > '; // becomes `:not(a):not(b) > `
+
+  // Selecter that finds elements on the page to which we can jump
+  var selector = notSelector + missingCoverageClasses.join(', ' + notSelector); // becomes `:not(a):not(b) > a, :not(a):not(b) > b`
+
+  // The NodeList of matching elements
+  var missingCoverageElements = document.querySelectorAll(selector);
+
+  var currentIndex;
+
+  function toggleClass(index) {
+    missingCoverageElements.item(currentIndex).classList.remove('highlighted');
+    missingCoverageElements.item(index).classList.add('highlighted');
+  }
+
+  function makeCurrent(index) {
+    toggleClass(index);
+    currentIndex = index;
+    missingCoverageElements.item(index)
+      .scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
+  }
+
+  function goToPrevious() {
+    var nextIndex = 0;
+    if (typeof currentIndex !== 'number' || currentIndex === 0) {
+      nextIndex = missingCoverageElements.length - 1;
+    } else if (missingCoverageElements.length > 1) {
+      nextIndex = currentIndex - 1;
+    }
+
+    makeCurrent(nextIndex);
+  }
+
+  function goToNext() {
+    var nextIndex = 0;
+
+    if (typeof currentIndex === 'number' && currentIndex < (missingCoverageElements.length - 1)) {
+      nextIndex = currentIndex + 1;
+    }
+
+    makeCurrent(nextIndex);
+  }
+
+  return function jump(event) {
+    switch (event.which) {
+      case 78: // n
+      case 74: // j
+        goToNext();
+        break;
+      case 66: // b
+      case 75: // k
+      case 80: // p
+        goToPrevious();
+        break;
+    }
+  };
+}());
+window.addEventListener('keydown', jumpToCode);
diff --git a/packages/istanbul-reports/lib/html/index.js b/packages/istanbul-reports/lib/html/index.js
@@ -125,6 +125,9 @@ function fillTemplate(node, templateData, linkMapper, context) {
         js: linkMapper.assetPath(node, 'sorter.js'),
         image: linkMapper.assetPath(node, 'sort-arrow-sprite.png')
     };
+    templateData.blockNavigation = {
+        js: linkMapper.assetPath(node, 'block-navigation.js'),
+    };
     templateData.prettify = {
         js: linkMapper.assetPath(node, 'prettify.js'),
         css: linkMapper.assetPath(node, 'prettify.css')

diff --git a/packages/istanbul-reports/lib/html/templates/foot.txt b/packages/istanbul-reports/lib/html/templates/foot.txt
@@ -16,5 +16,6 @@ window.onload = function () {
 </script>
 {{/if}}
 <script src="{{sorter.js}}"></script>
+<script src="{{blockNavigation.js}}"></script>
 </body>
 </html>
diff --git a/packages/istanbul-reports/lib/html/templates/head.txt b/packages/istanbul-reports/lib/html/templates/head.txt
@@ -56,5 +56,8 @@
       </div>
       {{/if_has_ignores}}
     </div>
+    <p class="quiet">
+      Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
+    </p>
   </div>
   <div class='status-line {{reportClass}}'></div>