ortoni-report 1.0.9 → 1.1.0

package/changelog.md

@@ -1,5 +1,33 @@
 # Change Log:
 
+### Version 1.1.0
+
+## New Features
+- **Search Functionality:**
+  - Added a search bar to filter tests by their title.
+  - Display the relevant test name, project, and test file name while hiding others during search.
+  - Reset search form to show all tests when cleared.
+
+## Improvements 
+- **Page Zoom:**
+  - Set the HTML page zoom to 90% for better display on different screen sizes.
+
+## Bug Fixes
+- **Event Listeners:**
+  - Fixed an issue where test details would not display when clicking on filtered search results.
+  - Ensured event listeners are correctly reattached after filtering search results.
+
+## Style Adjustments
+- **CSS Adjustments:**
+  - Adjusted body zoom for better overall display: `body { zoom: 0.9; }`
+
+---
+
+### Instructions for Users
+- Use the search bar to quickly find specific tests by their title.
+- Clear the search input to reset the view and display all tests.
+- Note that the page zoom has been set to 90% for optimal display.
+
 ### Version 1.0.9
 
 **Added:**

package/dist/ortoni-report.js

@@ -145,7 +145,7 @@ var OrtoniReport = class {
       suiteName: this.suiteName,
       results: this.results,
       passCount: this.results.filter((r) => r.status === "passed").length,
-      failCount: this.results.filter((r) => r.status === "failed").length,
+      failCount: this.results.filter((r) => r.status === "failed" || r.status === "timedOut").length,
       skipCount: this.results.filter((r) => r.status === "skipped").length,
       flakyCount: this.results.filter((r) => r.flaky === "flaky").length,
       totalCount: this.results.length,

package/dist/ortoni-report.mjs

@@ -111,7 +111,7 @@ var OrtoniReport = class {
       suiteName: this.suiteName,
       results: this.results,
       passCount: this.results.filter((r) => r.status === "passed").length,
-      failCount: this.results.filter((r) => r.status === "failed").length,
+      failCount: this.results.filter((r) => r.status === "failed" || r.status === "timedOut").length,
       skipCount: this.results.filter((r) => r.status === "skipped").length,
       flakyCount: this.results.filter((r) => r.flaky === "flaky").length,
       totalCount: this.results.length,

package/dist/report-template.hbs

@@ -5,10 +5,13 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Playwright Test Report</title>
-    <link rel="icon" href="node_modules/ortoni-report/dist/icon/32.png" type="image/x-icon">
-    <link rel="stylesheet" href="node_modules/ortoni-report/dist/css/pico.css">
-    {{!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.css"> --}}
+    <link rel="icon" href="node_modules\ortoni-report\src\icon\32.png" type="image/x-icon">
+    <link rel="stylesheet" href="node_modules\ortoni-report\src\css\pico.css">
     <style>
+        body {
+            zoom: 0.9;
+        }
+
         main.container {
             display: grid;
             grid-template-columns: 1fr 2fr;
@@ -26,7 +29,7 @@
         }
 
         .highlight {
-            background-color: var(--pico-primary-background)
+            background-color: var(--pico-primary-background);
         }
 
         .text-success {
@@ -73,10 +76,7 @@
             </div>
             {{!-- Dummy for now --}}
             <div>
-                <form role="search">
-                    <input name="search" type="search" placeholder="Search" />
-                    <input type="submit" value="Search" />
-                </form>
+                <input name="search" type="search" placeholder="Search by test title" />
             </div>
         </div>
     </header>
@@ -84,7 +84,7 @@
         {{!-- Test Scripts --}}
         <aside class="sidebar">
             <h2>Tests</h2>
-            <div class="">
+            <div>
                 {{#each groupedResults}}
                 <details>
                     <summary>{{@key}}</summary>
@@ -195,18 +195,15 @@
         const testDetails = document.getElementById('testDetails');
         const summary = document.getElementById('summary');
         const backButton = document.querySelector('.back-button');
-        const testItems = document.querySelectorAll('[data-test-id]');
-        const searchInput = document.querySelector('input[name="search"]');
-        const searchForm = document.querySelector('form[role="search"]');
+        let highlightedItem = null;
 
         function showSummary() {
             summary.style.display = 'block';
             testDetails.style.display = 'none';
             backButton.style.display = 'none';
-            clearHighlights();
-        }
-        function clearHighlights() {
-            testItems.forEach(item => item.classList.remove('highlight'));
+            if (highlightedItem) {
+                highlightedItem.classList.remove('highlight');
+            }
         }
 
         window.showSummary = showSummary;
@@ -236,53 +233,75 @@
                     <div>
                     ${test.errors.length ? `
                             <h4>Errors</h4>
-                            <pre>${escapeHtml(test.errors.join('\n'))}</pre>
+                            <div class="grid">
+                            <pre>${escapeHtml(test.errors.join('\n'))}</pre></div>
                             ` : ''}
                     </div>
                     <div>
                     ${test.logs ? `
                             <h4>Logs</h4>
-                            <pre>${escapeHtml(test.logs)}</pre>
+                            <div class="grid">
+                            <pre>${escapeHtml(test.logs)}</pre></div>
                             ` : ''}
                     </div>
-        `;
+                `;
         }
-        
-        function searchTests(query) {
-            const lowerCaseQuery = query.toLowerCase();
-            if (lowerCaseQuery === '') {
-                testItems.forEach(item => {
-                    item.style.display = 'block';
-                });
-            } else {
-                testItems.forEach(item => {
-                    const title = item.textContent.toLowerCase();
-                    if (title.includes(lowerCaseQuery)) {
-                        item.style.display = 'block';
-                    } else {
-                        item.style.display = 'none';
+
+        function attachEventListeners() {
+            const testItems = document.querySelectorAll('[data-test-id]');
+            testItems.forEach(item => {
+                item.addEventListener('click', () => {
+                    const testId = item.getAttribute('data-test-id');
+                    const test = testData[testId];
+                    displayTestDetails(test);
+                    if (highlightedItem) {
+                        highlightedItem.classList.remove('highlight');
                     }
+                    item.classList.add('highlight');
+                    highlightedItem = item;
                 });
-            }
+            });
         }
 
-        searchForm.addEventListener('submit', event => {
-            event.preventDefault();
-            searchTests(searchInput.value);
-        });
+        attachEventListeners(); // Attach event listeners initially
+
+        const searchInput = document.querySelector('input[name="search"]');
+        const detailsElements = document.querySelectorAll('details');
+
         searchInput.addEventListener('input', () => {
-            searchTests(searchInput.value);
-        });
+            const searchTerm = searchInput.value.toLowerCase();
+            const testItems = document.querySelectorAll('[data-test-id]');
+
+            if (searchTerm) {
+                detailsElements.forEach(detail => {
+                    detail.open = false; // Collapse all details initially
+                });
 
+                testItems.forEach(item => {
+                    const testTitle = item.textContent.toLowerCase();
+                    if (testTitle.includes(searchTerm)) {
+                        item.style.display = 'block'; // Show matching test item
 
-        testItems.forEach(item => {
-            item.addEventListener('click', () => {
-                const testId = item.getAttribute('data-test-id');
-                const test = testData[testId];
-                displayTestDetails(test);
-                clearHighlights();
-                item.classList.add('highlight');
-            });
+                        let parent = item.parentElement;
+                        while (parent && parent.tagName !== 'ASIDE') {
+                            if (parent.tagName === 'DETAILS') {
+                                parent.open = true; // Expand parent details elements
+                            }
+                            parent = parent.parentElement;
+                        }
+                    } else {
+                        item.style.display = 'none'; // Hide non-matching test item
+                    }
+                });
+            } else {
+                testItems.forEach(item => {
+                    item.style.display = 'block'; // Show all test items
+                });
+                detailsElements.forEach(detail => {
+                    detail.open = false; // Collapse all details elements
+                });
+            }
+            attachEventListeners(); // Reattach event listeners after filtering
         });
 
         const ctx = document.getElementById('testChart').getContext('2d');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ortoni-report",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "description": "Playwright Report By LetCode with Koushik",
   "scripts": {
     "test": "npx playwright test",