feat: add filter to HTML report (#650)

istanbuljs · Nov 30, 2021 · eab47f7 · eab47f7
1 parent fba8cba
commit eab47f7
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 0 deletions.
diff --git a/packages/istanbul-reports/lib/html/assets/block-navigation.js b/packages/istanbul-reports/lib/html/assets/block-navigation.js
@@ -62,6 +62,14 @@ var jumpToCode = (function init() {
     }
 
     return function jump(event) {
+        if (
+            document.getElementById('fileSearch') === document.activeElement &&
+            document.activeElement != null
+        ) {
+            // if we're currently focused on the search input, we don't want to navigate
+            return;
+        }
+
         switch (event.which) {
             case 78: // n
             case 74: // j

diff --git a/packages/istanbul-reports/lib/html/assets/sorter.js b/packages/istanbul-reports/lib/html/assets/sorter.js
@@ -23,6 +23,31 @@ var addSorting = (function() {
         return getTableHeader().querySelectorAll('th')[n];
     }
 
+    function onFilterInput() {
+        const searchValue = document.getElementById('fileSearch').value;
+        const rows = document.getElementsByTagName('tbody')[0].children;
+        for (let i = 0; i < rows.length; i++) {
+            const row = rows[i];
+            if (
+                row.textContent
+                    .toLowerCase()
+                    .includes(searchValue.toLowerCase())
+            ) {
+                row.style.display = '';
+            } else {
+                row.style.display = 'none';
+            }
+        }
+    }
+
+    // loads the search box
+    function addSearchBox() {
+        var template = document.getElementById('filterTemplate');
+        var templateClone = template.content.cloneNode(true);
+        templateClone.getElementById('fileSearch').oninput = onFilterInput;
+        template.parentElement.appendChild(templateClone);
+    }
+
     // loads all columns
     function loadColumns() {
         var colNodes = getTableHeader().querySelectorAll('th'),
@@ -161,6 +186,7 @@ var addSorting = (function() {
         }
         cols = loadColumns();
         loadData();
+        addSearchBox();
         addSortIndicators();
         enableUI();
     };

diff --git a/packages/istanbul-reports/lib/html/index.js b/packages/istanbul-reports/lib/html/index.js
@@ -83,6 +83,12 @@ ${htmlHead(details)}
         <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>
+        <template id="filterTemplate">
+            <div class="quiet">
+                Filter:
+                <input oninput="onInput()" type="search" id="fileSearch">
+            </div>
+        </template>
     </div>
     <div class='status-line ${details.reportClass}'></div>
     `;