slik-report 1.0.3 → 1.0.4

package/dist/index.js

@@ -51,13 +51,12 @@ class AggregatorReporter {
                 console.warn('AggregatorReporter: JSON report not found at', this.input);
                 return;
             }
-            console.log('AggregatorReporter: JSON file found. Reading file...');
+            console.log('AggregatorReporter: JSON data file found. Reading file and Processing...');
             const report = JSON.parse(fs.readFileSync(this.input, 'utf8'));
             // Check if external HTML exists
             const hasExternalHtml = fs.existsSync(this.anotherHTML);
             // Ensure we use a relative path for the HTML src attribute
             const externalHtmlPath = this.anotherHTML;
-            console.log('AggregatorReporter: JSON data read. Processing...');
             const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
             const historyFile = path.join(this.historyDir, `run-${timestamp}.json`);
             writeFile(historyFile, safeJson(report));
@@ -70,7 +69,7 @@ class AggregatorReporter {
             };
             const htmlContent = this.generateReportHtml(processedReport);
             writeFile(this.outputHtml, htmlContent);
-            console.log('AggregatorReporter: Report generation successful!');
+            console.log('Reporter: Report generation successful!', this.outputHtml);
         }
         catch (e) {
             console.error('AggregatorReporter failed:', e);
@@ -458,6 +457,7 @@ iframe { width: 100%; height: 80vh; border: none; border-radius: 8px; box-shadow
       <li class="sidebar-menu-item"><a href="#" class="active" data-tab="overview">Overview</a></li>
       <li class="sidebar-menu-item"><a href="#" data-tab="categories">Categories</a></li>
       <li class="sidebar-menu-item"><a href="#" data-tab="suites">Suites</a></li>
+      <li class="sidebar-menu-item"><a href="#" data-tab="execution-view">Execution View</a></li>
       <li class="sidebar-menu-item"><a href="#" data-tab="graphs">Graphs</a></li>
       <li class="sidebar-menu-item"><a href="#" data-tab="timeline">Timeline</a></li>
       <li class="sidebar-menu-item"><a href="#" data-tab="history">Historical Runs</a></li>
@@ -509,6 +509,13 @@ iframe { width: 100%; height: 80vh; border: none; border-radius: 8px; box-shadow
       </div>
     </div>
 
+    <div id="execution-view" class="tab-content">
+      <div class="card">
+        <h2>Execution Flow</h2>
+        <div id="cy" style="width: 100%; height: 650px; background-color: var(--table-header-bg); border-radius: 8px; border: 1px solid var(--table-border);"></div>
+      </div>
+    </div>
+
     <div id="graphs" class="tab-content">
       <div class="card">
         <h2>Test Graphs & Trends</h2>
@@ -600,6 +607,7 @@ iframe { width: 100%; height: 80vh; border: none; border-radius: 8px; box-shadow
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.26.0/cytoscape.min.js"></script>
 
 <script>
 const reportData = ${safeReportJson};
@@ -663,6 +671,7 @@ let allTests = [];
           return;
       }
 
+      if (targetId === 'execution-view') { renderExecutionView(); }
       if (targetId === 'graphs') { renderCharts(); }
       if (targetId === 'timeline') { renderTimeline(); }
       if (targetId === 'history') { renderHistoryGraph(); }
@@ -945,6 +954,131 @@ let allTests = [];
     }
   }
 
+  function renderExecutionView() {
+    const cyContainer = document.getElementById('cy');
+    if (!cyContainer || cyContainer.initialized) return;
+
+    const elements = [];
+    elements.push({ data: { id: 'start', label: 'START', type: 'root' } });
+
+    reportData.suites.forEach((suite, sIdx) => {
+      const suiteId = 'suite_' + sIdx;
+      elements.push({ 
+        data: { 
+          id: suiteId, 
+          label: suite.title, 
+          type: 'suite' 
+        } 
+      });
+      elements.push({ data: { source: 'start', target: suiteId } });
+
+      suite.specs.forEach((spec, spIdx) => {
+        const test = spec.tests[0];
+        const testId = suiteId + '_test_' + spIdx;
+        const startTimeStr = test.results?.[0]?.startTime ? new Date(test.results[0].startTime).toLocaleTimeString() : 'N/A';
+        const endTimeStr = (test.results?.[0]?.startTime && test.duration) 
+            ? new Date(new Date(test.results[0].startTime).getTime() + test.duration).toLocaleTimeString() 
+            : 'N/A';
+
+        elements.push({
+          data: {
+            id: testId,
+            label: spec.title,
+            type: 'test',
+            status: test.status,
+            duration: (test.duration / 1000).toFixed(2) + 's',
+            start: startTimeStr,
+            end: endTimeStr
+          }
+        });
+        elements.push({ data: { source: suiteId, target: testId } });
+      });
+    });
+
+    const cy = cytoscape({
+      container: cyContainer,
+      elements: elements,
+      style: [
+        {
+          selector: 'node',
+          style: {
+            'label': 'data(label)',
+            'background-color': '#2563EB',
+            'color': '#fff',
+            'text-valign': 'center',
+            'text-halign': 'center',
+            'font-size': '10px',
+            'width': '100px',
+            'height': '40px',
+            'shape': 'round-rectangle',
+            'text-wrap': 'wrap',
+            'text-max-width': '90px'
+          }
+        },
+        {
+          selector: 'node[type="root"]',
+          style: { 'background-color': '#172B4D', 'width': '60px', 'height': '60px', 'shape': 'ellipse', 'font-weight': 'bold' }
+        },
+        {
+          selector: 'node[type="suite"]',
+          style: { 'background-color': '#6B7280', 'width': '140px', 'font-style': 'italic' }
+        },
+        {
+          selector: 'node[status="passed"]',
+          style: { 'background-color': '#4CAF50' }
+        },
+        {
+          selector: 'node[status="failed"]',
+          style: { 'background-color': '#F44336' }
+        },
+        {
+          selector: 'node[status="skipped"]',
+          style: { 'background-color': '#9E9E9E' }
+        },
+        {
+          selector: 'edge',
+          style: {
+            'width': 2,
+            'line-color': '#cbd5e1',
+            'target-arrow-color': '#cbd5e1',
+            'target-arrow-shape': 'triangle',
+            'curve-style': 'bezier'
+          }
+        }
+      ],
+      layout: {
+        name: 'breadthfirst',
+        directed: true,
+        padding: 30,
+        spacingFactor: 1.2
+      }
+    });
+
+    cy.on('tap', 'node', function(evt){
+      const node = evt.target;
+      const data = node.data();
+      if (data.id === 'start') return;
+
+      document.getElementById('modalTitle').textContent = (data.type === 'suite' ? 'Suite/File: ' : 'Test Case: ') + data.label;
+      modalHeader.innerHTML = '<tr><th>Property</th><th>Value</th></tr>';
+      
+      let detailsHtml = '<tr><td>Name</td><td>' + data.label + '</td></tr>';
+      if (data.type === 'test') {
+          detailsHtml += '<tr><td>Status</td><td><span class="status-badge status-' + data.status + '">' + data.status + '</span></td></tr>' +
+                         '<tr><td>Duration</td><td>' + data.duration + '</td></tr>' +
+                         '<tr><td>Start Time</td><td>' + data.start + '</td></tr>' +
+                         '<tr><td>End Time</td><td>' + data.end + '</td></tr>';
+      } else {
+          detailsHtml += '<tr><td>Type</td><td>TestSuite / Source File</td></tr>';
+      }
+      
+      modalBody.innerHTML = detailsHtml;
+      modal.style.display = 'block';
+    });
+
+    cyContainer.initialized = true;
+  }
+
   function renderTags() {
     const stats = reportData.tagStats;
     if (!stats || stats.length === 0) return;
@@ -1122,42 +1256,139 @@ let allTests = [];
   }
 
   function renderHistoryGraph() {
-      const history = reportData.history;
-      document.getElementById('historyRunsTitle').textContent = 'Historical Runs (Count: ' + history.length + ')';
-      const historyCtx = document.getElementById('historicalRunsChart');
-      if (history.length > 0) {
-          historicalRunsChart = new Chart(historyCtx, {
-              type: 'bar',
-              data: {
-                  labels: history.map(h => h.date),
-                  datasets: [
-                      {
-                          type: 'line', label: 'Pass Rate', data: history.map(h => h.passRate),
-                          borderColor: 'rgb(255, 159, 64)', yAxisID: 'y1', tension: 0.1, pointRadius: 5, pointBackgroundColor: 'rgb(255, 159, 64)', order: 0, 
-                      },
-                      { type: 'bar', label: 'Passed', data: history.map(h => h.passed), backgroundColor: '#4CAF50', order: 1 },
-                      { type: 'bar', label: 'Failed', data: history.map(h => h.failed), backgroundColor: 'rgba(255, 99, 132, 0.8)', order: 1 },
-                      { type: 'bar', label: 'Skipped', data: history.map(h => h.skipped), backgroundColor: 'rgba(158, 158, 158, 0.8)', order: 1 }
-                  ]
-              },
-              options: {
-                  responsive: true, maintainAspectRatio: false,
-                  animation: {
-                    duration: 1200, 
-                    easing: 'easeOutQuart'
-                  },
-                  scales: {
-                      x: { stacked: true, },
-                      y: { stacked: true, beginAtZero: true, title: { display: true, text: 'Test Count' } },
-                      y1: { position: 'right', beginAtZero: true, max: 100, title: { display: true, text: 'Pass Rate (%)' }, grid: { drawOnChartArea: false } }
-                  }
-              }
-          });
-      } else {
-          historyCtx.parentElement.innerHTML = '<div>No historical runs data available.</div>';
-      }
+  const history = reportData.history;
+  document.getElementById('historyRunsTitle').textContent =
+    'Historical Runs (Count: ' + history.length + ')';
+
+  const historyCtx = document.getElementById('historicalRunsChart');
+
+  if (!history || history.length === 0) {
+    historyCtx.parentElement.innerHTML =
+      '<div>No historical runs data available.</div>';
+    return;
+  }
+
+  // Destroy previous chart to avoid leaks / overlays
+  if (historicalRunsChart) {
+    historicalRunsChart.destroy();
   }
 
+  historicalRunsChart = new Chart(historyCtx, {
+    type: 'bar',
+    data: {
+      labels: history.map(h => h.date),
+      datasets: [
+        {
+          type: 'line',
+          label: 'Pass Rate',
+          data: history.map(h => h.passRate), // assume 0–100
+          yAxisID: 'y1',
+          borderColor: 'rgb(255, 159, 64)',
+          pointBackgroundColor: 'rgb(255, 159, 64)',
+          pointRadius: 5,
+          tension: 0.1,
+          order: 0,
+          stack: 'passrate',
+          animations: {
+            opacity: {
+              from: 0,
+              to: 1,
+              duration: 800,
+              easing: 'linear'
+            },
+            tension: {
+              duration: 1200,
+              easing: 'easeOutCubic',
+              from: 0.4,
+              to: 0.1
+            }
+          }
+        },
+        {
+          label: 'Passed',
+          data: history.map(h => h.passed),
+          backgroundColor: '#4CAF50',
+          order: 1
+        },
+        {
+          label: 'Failed',
+          data: history.map(h => h.failed),
+          backgroundColor: 'rgba(255, 99, 132, 0.8)',
+          order: 1
+        },
+        {
+          label: 'Skipped',
+          data: history.map(h => h.skipped),
+          backgroundColor: 'rgba(158, 158, 158, 0.8)',
+          order: 1
+        }
+      ]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: {
+        duration: 1800,
+        easing: 'easeOutQuart',
+        delay: (ctx) => {
+          if (ctx.type === 'data') {
+            return ctx.dataIndex * 120;
+          }
+          return 0;
+        }
+      },
+      animations: {
+        y: {
+          from: 0,
+          duration: 1400,
+          easing: 'easeOutCubic'
+        },
+        opacity: {
+          duration: 800,
+          easing: 'linear',
+          from: 0,
+          to: 1
+        }
+      },
+      plugins: {
+        legend: {
+          position: 'top'
+        },
+        tooltip: {
+          mode: 'index',
+          intersect: false
+        }
+      },
+      scales: {
+        x: {
+          stacked: true
+        },
+        y: {
+          stacked: true,
+          beginAtZero: true,
+          title: {
+            display: true,
+            text: 'Test Count'
+          }
+        },
+        y1: {
+          type: 'linear',
+          position: 'right',
+          beginAtZero: true,
+          max: 100,
+          title: {
+            display: true,
+            text: 'Pass Rate (%)'
+          },
+          grid: {
+            drawOnChartArea: false
+          }
+        }
+      }
+    }
+  });
+}
+
   const filterPassed = document.getElementById('filterPassed');
   const filterFailed = document.getElementById('filterFailed');
   const filterSkipped = document.getElementById('filterSkipped');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slik-report",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "A powerful Playwright reporter for aggregating test results, flakiness analysis, and historical trend tracking.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",