fixes #56 SimpleGen: Deep filter leaf nodes by status

anshooarora · Jan 26, 2025 · 1fd4086 · 1fd4086
1 parent 3fde6b5
commit 1fd4086
Show file tree

Hide file tree

Showing 5 changed files with 291 additions and 33 deletions.
diff --git a/cdn/simple/version/chaintest-pkg.css b/cdn/simple/version/chaintest-pkg.css
diff --git a/cdn/simple/version/chaintest-pkg.js b/cdn/simple/version/chaintest-pkg.js
diff --git a/...haintest-core-java/src/main/resources/com/aventstack/chaintest/generator/simple/index.ftl b/...haintest-core-java/src/main/resources/com/aventstack/chaintest/generator/simple/index.ftl
@@ -1,28 +1,28 @@
 <#if build.isBDD()>
   <#assign
-    title1 = 'Features', title2 = 'Scenarios', title3 = 'Steps', tagStatsLevel = 1
+    title1 = 'Features', title2 = 'Scenarios', title3 = 'Steps', statLevel = 1
   >
 <#elseif build.testRunner == 'testng'>
   <#if build.runStats?size gte 3>
     <#assign
-      title1 = 'Suites', title2 = 'Classes', title3 = 'Methods', tagStatsLevel = 2
+      title1 = 'Suites', title2 = 'Classes', title3 = 'Methods', statLevel = 2
     >
     <#else>
       <#assign
-        title1 = 'Classes', title2 = 'Methods', tagStatsLevel = 1
+        title1 = 'Classes', title2 = 'Methods', statLevel = 1
       >
   </#if>
 <#elseif build.testRunner == 'junit' || build.testRunner == 'junit-jupiter'>
   <#assign
-    title1 = 'Classes', title2 = 'Methods', tagStatsLevel = 1
+    title1 = 'Classes', title2 = 'Methods', statLevel = 1
   >
 <#else>
     <#assign
-        title1 = 'Tests', title2 = 'Methods', title3 = 'Events', tagStatsLevel = 1
+        title1 = 'Tests', title2 = 'Methods', title3 = 'Events', statLevel = 1
     >
 </#if>
-<#if build.runStats?? && build.runStats?has_content && (tagStatsLevel gte build.runStats?size) && build.runStats?size gte 1>
-    <#assign tagStatsLevel = build.runStats?size - 1>
+<#if build.runStats?? && build.runStats?has_content && (statLevel gte build.runStats?size) && build.runStats?size gte 1>
+    <#assign statLevel = build.runStats?size - 1>
 </#if>
 
 <!DOCTYPE html>
@@ -191,7 +191,7 @@
               </thead>
               <tbody>
                 <#list build.tagStats as tag>
-                  <#if tag.depth == tagStatsLevel>
+                  <#if tag.depth == statLevel>
                   <tr>
                     <td><a href="#" class="secondary tag">${tag.name}</a></td>
                     <td>${tag.total}</td>
@@ -212,17 +212,15 @@
   </div>
 
   <div class="container-fluid">
-    <div class="border-bottom py-3 mb-5">
+    <div class="py-3 mb-5">
       <div class="container d-flex justify-content-between">
-        <div id="status-filter" aria-label="Filter tests with status">
-          <button type="button" id="passed" class="btn btn-outline-success btn-sm">Passed</button>
-          <button type="button" id="skipped" class="btn btn-outline-warning btn-sm">Skipped</button>
-          <button type="button" id="failed" class="btn btn-outline-danger btn-sm">Failed</button>
-          <button id="clear-filters" class="btn btn-outline-secondary btn-sm">
-            <i class="bi bi-x-lg me-1"></i>Clear all filters</button>
-        </div>
-        <div>
-          <button type="button" id="summary-toggle" class="btn btn-outline-primary btn-sm">Toggle Summary Section</button>
+        <div class="input-group">
+          <input type="text" id="q" class="form-control border" placeholder="Search..." aria-label="Search...">
+          <button class="btn border btn-sm text-success status-filter" id="passed" type="button">Passed</button>
+          <button class="btn border btn-sm text-warning status-filter" id="skipped" type="button">Skipped</button>
+          <button class="btn border btn-sm text-danger status-filter" id="failed" type="button">Failed</button>
+          <button id="clear-filters" class="btn border btn-sm"><i class="bi bi-x-lg me-1"></i>Clear all filters</button>
+          <button type="button" id="summary-toggle" class="btn border btn-sm"><i class="bi bi-toggle-on me-1"></i> Toggle Summary Section</button>
         </div>
       </div>
     </div>
@@ -231,7 +229,7 @@
         <div class="container">
           <div class="row">
             <div class="col-4">
-              <h6 class="mb-3 testname ${test.result?lower_case}">${test.name}</h6>
+              <h6 class="mb-3 testname fs-6 ${test.result?lower_case}">${test.name}</h6>
               <div class="small">
                 <span class="badge badge-outline"><i class="bi bi-hourglass me-1"></i> ${test.durationPretty}</span>
                 <span class="badge text-bg-info"><i class="bi bi-clock me-1"></i>
@@ -250,7 +248,7 @@
             </div>
             <div class="col-8">
               <#list test.children as child>
-                <div class="card mb-1 result ${child.result?lower_case}">
+                <div class="card mb-2 result ${child.result?lower_case}">
                   <div class="card-body">
                     <div class="d-flex justify-content-between">
                       <div>
@@ -259,7 +257,7 @@
                           <#else>
                             <i class="bi bi-exclamation-octagon-fill text-danger"></i>
                         </#if>
-                        <span class="ms-2">${child.name}</span>
+                        <span class="fs-6 ms-2">${child.name}</span>
                       </div>
                       <div>
                         <#if child.tags?has_content>

diff --git a/...ntest-core-java/src/main/resources/com/aventstack/chaintest/generator/simple/template.css b/...ntest-core-java/src/main/resources/com/aventstack/chaintest/generator/simple/template.css
@@ -22,9 +22,16 @@ pre {
   background-color: #f8f9fa;
   white-space: pre-wrap;
   margin-bottom: 0;
-  max-height: 15rem;
+  height: 15rem;
   word-break: break-all;
   padding: 1rem;
+  resize: vertical;
+}
+.form-control {
+  font-size: inherit;
+}
+input.form-control {
+  -webkit-text-fill-color: #696969 !important;
 }
 
 /* container */
@@ -53,6 +60,9 @@ th {
 .smaller {
   font-size: 10px;
 }
+.fs-6 {
+  font-size: 0.95rem;
+}
 
 /* navbar */
 .navbar-brand {
@@ -140,14 +150,24 @@ th {
 .embed img {
   max-width: 100%;
 }
+p.desc {
+  margin-top: .15rem;
+  margin-left: 1.5rem;
+  color: var(--bs-secondary);
+}
 
 /* dark theme */
+body[data-bs-theme="dark"] {
+  --failed-border-color: rgba(210, 130, 130, .5);
+}
 body[data-bs-theme="dark"],
 body[data-bs-theme="dark"] .card,
+body[data-bs-theme="dark"] .form-control,
 body[data-bs-theme="dark"] .table>:not(caption)>*>* {
   background-color: rgb(19, 25, 34);
 }
-body[data-bs-theme="dark"] .card,
+body[data-bs-theme="dark"] .card:not(.failed),
+body[data-bs-theme="dark"] .border,
 body[data-bs-theme="dark"] .border-bottom,
 body[data-bs-theme="dark"] .badge.badge-outline:not(.badge-outline-primary),
 body[data-bs-theme="dark"] .rounded-pill,

diff --git a/...intest-core-java/src/main/resources/com/aventstack/chaintest/generator/simple/template.js b/...intest-core-java/src/main/resources/com/aventstack/chaintest/generator/simple/template.js
@@ -109,7 +109,7 @@ depth3Chart();
 
 // init::statusFilters
 const statusFilters = [];
-document.querySelectorAll('#status-filter > button').forEach((e) => {
+document.querySelectorAll('.status-filter').forEach((e) => {
   statusFilters.push(e);
 });
 
@@ -152,8 +152,21 @@ const filterTests = (_status) => {
     results.forEach(x => x != status && document.querySelector('#' + status).classList.remove('active'));
     document.querySelector(`#${status}`).classList.toggle('active');
   }
+  leafs.forEach((leaf) => {
+    leaf.className.indexOf(status) == -1 ? leaf.classList.add('d-none') : leaf.classList.remove('d-none');
+  });
   tests.forEach((card) => {
-    card.className.indexOf(status) == -1 ? card.classList.add('d-none') : card.classList.remove('d-none');
+    const leafNodes = Array.from(card.querySelectorAll('.leaf'));
+    if (leafNodes.length > 0) {
+      const hasVisibleChildren = leafNodes.some(leaf => !leaf.classList.contains('d-none'));
+      if (hasVisibleChildren) {
+        card.classList.remove('d-none');
+      } else {
+        card.classList.add('d-none');
+      }
+    } else {
+      card.className.indexOf(status) == -1 ? card.classList.add('d-none') : card.classList.remove('d-none');
+    }
   });
   testContainers.forEach((container) => {
     container.querySelectorAll('.result').length == container.querySelectorAll('.result.d-none').length
@@ -162,12 +175,11 @@ const filterTests = (_status) => {
 }
 
 // filter all tests based on their status
-document.querySelectorAll('#status-filter > button').forEach((e) => {
+document.querySelectorAll('.status-filter').forEach((e) => {
   e.addEventListener('click', el => {
     // remove any other buttons with .active class
     statusFilters.forEach(x => el.target.id != x.id && x.classList.remove('active'));
     // gets the toggle result: true if toggled
-    const toggleResult = el.target.classList.toggle('active');
     const status = el.target.innerText.toLowerCase();
     if (status.indexOf('clear') > -1) {
       filterTests('');
@@ -248,6 +260,9 @@ const resetState = () => {
 
 // on key down events (shortcuts)
 window.onkeydown = evt => {
+  if (evt.target.tagName.toLowerCase() === 'input') {
+    return;
+  }
   if (evt.metaKey) {
     return;
   }
@@ -324,7 +339,8 @@ document.querySelector('body').addEventListener('click', el => {
 
 // toggle summary section
 document.querySelector('#summary-toggle').addEventListener('click', el => {
-  el.target.classList.toggle('active');
+  el.target.children[0].classList.toggle('bi-toggle-on');
+  el.target.children[0].classList.toggle('bi-toggle-off');
   const summary = document.querySelector('#summary');
   summary.classList.toggle('d-none');
 })