Merge branch 'release/1.11.0' into add-chart-for-report

Author: OlehBabenkoo

CHANGELOG.md

@@ -7,19 +7,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 ### Added
-- Based on [Add `only` as an annotation for the `describe/test`](https://github.com/scripterio-js/scripterio/issues/14):
-  - Retry functionality for tests:
-    - `describe.only()`  Declares an exclusive `describe` that will be executed. If used, all other describes are skipped.
-    - `test.only()`  Declares an exclusive `test` that will be executed. If used, all other tests are skipped.
-- Based on [Add `todo` as an annotation for the `describe/test`](https://github.com/scripterio-js/scripterio/issues/46)
-  - The test(s) is/are marked as pending and will not be executed. Helpful for planning and organizing future tests.
-    - `describe.todo()`  Declares a test group as "to-do." 
-    - `test.todo()`  Declares a test as "to-do." 
-- Added test time execution to the `HTML` report:
-- Based on [Review&Add additional `unit-tests`](https://github.com/scripterio-js/scripterio/issues/58)
+- Based on [Add `only` as an annotation for `describe`/`test`](https://github.com/scripterio-js/scripterio/issues/14):
+  - Exclusive execution for tests:
+    - `describe.only()` — Runs only this `describe` block; all others are skipped.
+    - `test.only()` — Runs only this test; all others are skipped.
+- Based on [Add `todo` as an annotation for `describe`/`test`](https://github.com/scripterio-js/scripterio/issues/46):
+  - Mark tests as pending to help plan and organize future work. Pending tests are not executed.
+    - `describe.todo()` — Marks a test group as "to-do."
+    - `test.todo()` — Marks a test as "to-do."
+- Added test execution time to the HTML report.
+- Added a filter to the HTML report for quick navigation.
+- Based on [Review & Add additional unit tests](https://github.com/scripterio-js/scripterio/issues/58):
   - Added unit tests for:
-    -`config.mjs`
-    -`setup.mjs`
+    - `config.mjs`
+    - `setup.mjs`
 
 - Contributors:
   - [Vadym Nastoiashchyi](https://github.com/VadimNastoyashchy)

src/reporters/html-template.mjs

@@ -246,7 +246,70 @@ export const template = ({
       details.classList.toggle('show');
       element.textContent = isShowing ? 'Show API details' : 'Hide API details';
     }
+
+    function setFilter(filter) {
+      document.querySelectorAll('.stat').forEach(stat => {
+        stat.classList.remove('active-filter');
+      });
+      if (filter) {
+        document.querySelector('.stat.' + filter).classList.add('active-filter');
+      } else {
+        document.querySelector('.stat.total').classList.add('active-filter');
+      }
+
+      document.querySelectorAll('.test-case').forEach(tc => {
+        const nameDiv = tc.querySelector('.test-name');
+        if (!filter || nameDiv.classList.contains(filter)) {
+          tc.style.display = '';
+        } else {
+          tc.style.display = 'none';
+        }
+      });
+
+      function updateDescribeVisibility(describe) {
+        let hasVisible = false;
+        const content = describe.querySelector(':scope > .describe-content');
+        if (content) {
+          content.childNodes.forEach(child => {
+            if (child.nodeType !== 1) return; // skip non-elements
+            if (child.classList.contains('describe-group')) {
+              if (updateDescribeVisibility(child)) {
+                child.style.display = '';
+                hasVisible = true;
+              } else {
+                child.style.display = 'none';
+              }
+            } else if (child.classList.contains('test-case')) {
+              if (child.style.display !== 'none') {
+                hasVisible = true;
+              }
+            }
+          });
+        }
+        describe.style.display = hasVisible ? '' : 'none';
+        return hasVisible;
+      }
+      document.querySelectorAll('.describe-group').forEach(group => {
+        updateDescribeVisibility(group);
+      });
+    }
+
+    document.addEventListener('DOMContentLoaded', () => {
+      document.querySelector('.stat.total').addEventListener('click', () => setFilter(null));
+      document.querySelector('.stat.passed').addEventListener('click', () => setFilter('passed'));
+      document.querySelector('.stat.failed').addEventListener('click', () => setFilter('failed'));
+      document.querySelector('.stat.todo').addEventListener('click', () => setFilter('todo'));
+      document.querySelector('.stat.total').classList.add('active-filter');
+    });
   </script>
+  <style>
+    .stat.active-filter {
+      outline: 2px solid #1976d2;
+      box-shadow: 0 0 0 2px #1976d233;
+      cursor: pointer;
+    }
+    .stat { cursor: pointer; }
+  </style>
 </body>
 </html>
 `