@reportforge/playwright-pdf 0.4.0 → 0.5.0

package/dist/index.mjs

@@ -11216,16 +11216,31 @@ function runFailureAnalysis(reportData, options, cwd) {
 // src/collector/DataCollector.ts
 init_esm_shims();
 
+// src/utils/strip-ansi.ts
+init_esm_shims();
+var ANSI_PATTERN = new RegExp(
+  [
+    "[\\u001B\\u009B][[\\]()#;?]*(?:(?:(?:(?:;[-a-zA-Z\\d\\/#&.:=?%@~_]+)*|[a-zA-Z\\d]+(?:;[-a-zA-Z\\d\\/#&.:=?%@~_]*)*)?\\u0007)",
+    "(?:(?:\\d{1,4}(?:;\\d{0,4})*)?[\\dA-PR-TZcf-ntqry=><~]))"
+  ].join("|"),
+  "g"
+);
+function stripAnsi(input) {
+  return input.replace(ANSI_PATTERN, "");
+}
+
 // src/collector/SuiteWalker.ts
 init_esm_shims();
 
 // src/collector/stats-utils.ts
 init_esm_shims();
+var TOP_SUITES_FOR_CHART = 10;
 function statsFromTests(tests) {
   return {
     total: tests.length,
     passed: tests.filter((t) => t.status === "passed").length,
-    failed: tests.filter((t) => t.status === "failed" || t.status === "timedOut").length,
+    failed: tests.filter((t) => t.status === "failed").length,
+    timedOut: tests.filter((t) => t.status === "timedOut").length,
     skipped: tests.filter((t) => t.status === "skipped").length,
     flaky: tests.filter((t) => t.status === "flaky").length
   };
@@ -11236,12 +11251,32 @@ function aggregateStats(parts) {
       total: acc.total + s.total,
       passed: acc.passed + s.passed,
       failed: acc.failed + s.failed,
+      timedOut: acc.timedOut + s.timedOut,
       skipped: acc.skipped + s.skipped,
       flaky: acc.flaky + s.flaky
     }),
-    { total: 0, passed: 0, failed: 0, skipped: 0, flaky: 0 }
+    { total: 0, passed: 0, failed: 0, timedOut: 0, skipped: 0, flaky: 0 }
   );
 }
+function toRow(s) {
+  return {
+    label: s.title,
+    passed: s.stats.passed,
+    failed: s.stats.failed,
+    timedOut: s.stats.timedOut,
+    skipped: s.stats.skipped
+  };
+}
+function buildSuiteResults(projects, limit) {
+  const top = projects.flatMap((p) => p.suites);
+  if (top.length <= 1 && top[0] && top[0].suites.length > 0) {
+    const file = top[0];
+    const fs14 = statsFromTests(file.tests);
+    const rootRow = file.tests.length > 0 ? [{ label: file.title, passed: fs14.passed, failed: fs14.failed, timedOut: fs14.timedOut, skipped: fs14.skipped }] : [];
+    return [...rootRow, ...file.suites.map(toRow)].slice(0, limit);
+  }
+  return top.map(toRow).slice(0, limit);
+}
 
 // src/collector/SuiteWalker.ts
 var SuiteWalker = class {
@@ -11301,6 +11336,18 @@ var SuiteWalker = class {
   }
 };
 
+// src/collector/severity.ts
+init_esm_shims();
+var SEVERITY_RANK = {
+  critical: 0,
+  high: 1,
+  medium: 2,
+  low: 3
+};
+function sortBySeverity(failures) {
+  return [...failures].sort((a, b) => SEVERITY_RANK[a.severity] - SEVERITY_RANK[b.severity]);
+}
+
 // src/utils/env.ts
 init_esm_shims();
 import { execSync } from "child_process";
@@ -11390,7 +11437,6 @@ function gitCommit() {
 }
 
 // src/collector/DataCollector.ts
-var TOP_SUITES_FOR_CHART = 10;
 var DataCollector = class {
   constructor() {
     this.resultMap = /* @__PURE__ */ new Map();
@@ -11427,13 +11473,13 @@ var DataCollector = class {
   finalize(fullResult) {
     const walker = new SuiteWalker();
     const projects = walker.build(this.rootSuite, this.resultMap);
-    const stats = this.computeStats(projects, fullResult);
+    const stats = this.computeStats(fullResult);
     const environment = this.buildEnvironment();
     const charts = this.buildChartData(stats, projects);
     return {
       projects,
       stats,
-      failures: [...this.failureRecords],
+      failures: sortBySeverity(this.failureRecords),
       environment,
       charts
     };
@@ -11450,8 +11496,8 @@ var DataCollector = class {
       testTitle: test.title,
       suitePath,
       error: {
-        message: error.message ?? String(error),
-        stack: error.stack
+        message: stripAnsi(error.message ?? String(error)),
+        stack: error.stack ? stripAnsi(error.stack) : void 0
       },
       screenshotPath: screenshotAttachment?.path,
       screenshotBuffer: screenshotAttachment?.body,
@@ -11477,13 +11523,16 @@ var DataCollector = class {
     if (allLabels.some((l) => l.includes("low") || l.includes("minor"))) return "low";
     return "medium";
   }
-  computeStats(projects, fullResult) {
+  computeStats(fullResult) {
     let total = 0, passed = 0, failed = 0, skipped = 0, flaky = 0, timedOut = 0;
     for (const [, result] of this.resultMap) {
       total++;
       switch (result.status) {
+        // A test that passes on a retry (retry > 0) is flaky, NOT a clean pass.
+        // Counting it in `passed` too would double-count it against `flaky` and
+        // push passRate over 100%.
         case "passed":
-          passed++;
+          result.retry > 0 ? flaky++ : passed++;
           break;
         case "failed":
           failed++;
@@ -11500,13 +11549,6 @@ var DataCollector = class {
           break;
       }
     }
-    for (const project of projects) {
-      for (const suite of this.flattenSuites(project.suites)) {
-        for (const test of suite.tests) {
-          if (test.status === "flaky") flaky++;
-        }
-      }
-    }
     const duration = fullResult.duration ?? Date.now() - this.startTime;
     const passRate = total > 0 ? Math.round((passed + flaky) / total * 100) : 0;
     return {
@@ -11552,27 +11594,18 @@ var DataCollector = class {
     };
   }
   buildChartData(stats, projects) {
-    const suiteResults = projects.flatMap(
-      (p) => p.suites.map((s) => ({
-        label: s.title,
-        passed: s.stats.passed,
-        failed: s.stats.failed,
-        skipped: s.stats.skipped
-      }))
-    ).slice(0, TOP_SUITES_FOR_CHART);
+    const suiteResults = buildSuiteResults(projects, TOP_SUITES_FOR_CHART);
     return {
       passRate: {
         passed: stats.passed,
         failed: stats.failed,
+        timedOut: stats.timedOut,
         skipped: stats.skipped,
         flaky: stats.flaky
       },
       suiteResults
     };
   }
-  flattenSuites(suites) {
-    return suites.flatMap((s) => [s, ...this.flattenSuites(s.suites)]);
-  }
 };
 
 // src/collector/ShardMerger.ts
@@ -11580,15 +11613,14 @@ init_esm_shims();
 import { readFileSync } from "fs";
 import { globSync } from "glob";
 import { createRequire } from "module";
-var TOP_SUITES_FOR_CHART2 = 10;
 var ShardMerger = class {
   merge(filePaths) {
     if (filePaths.length === 0) throw new Error("shardResults: no valid JSON shard files found");
     const resolved = this.resolveShardPaths(filePaths);
     const reports = this.loadReports(resolved);
     const projects = this.mergeProjects(reports);
-    const stats = this.mergeStats(reports);
-    const failures = this.extractFailures(reports);
+    const stats = this.mergeStats(reports, projects);
+    const failures = sortBySeverity(this.extractFailures(reports));
     const environment = this.buildEnvironment(reports[0]);
     const charts = this.buildCharts(stats, projects);
     return { projects, stats, failures, environment, charts };
@@ -11695,7 +11727,7 @@ var ShardMerger = class {
       id: spec.id,
       title: spec.title,
       fullTitle: [...suitePath, spec.title].join(" > "),
-      status: this.resolveStatus(test),
+      status: this.resolveStatus(test, lastResult),
       duration: lastResult?.duration ?? 0,
       retryCount: test ? test.results.length - 1 : 0,
       tags: spec.tags ?? [],
@@ -11703,8 +11735,9 @@ var ShardMerger = class {
       location: `${spec.file}:${spec.line}`
     };
   }
-  resolveStatus(test) {
+  resolveStatus(test, lastResult) {
     if (!test) return "skipped";
+    if (lastResult?.status === "timedOut") return "timedOut";
     switch (test.status) {
       case "expected":
         return "passed";
@@ -11718,7 +11751,7 @@ var ShardMerger = class {
         return "failed";
     }
   }
-  mergeStats(reports) {
+  mergeStats(reports, projects) {
     let expected = 0, unexpected = 0, flaky = 0, skipped = 0, maxDuration = 0;
     for (const r of reports) {
       expected += r.stats.expected;
@@ -11729,13 +11762,14 @@ var ShardMerger = class {
     }
     const total = expected + unexpected + flaky + skipped;
     const passRate = total > 0 ? Math.round((expected + flaky) / total * 100) : 0;
+    const timedOut = projects.reduce((n, p) => n + p.stats.timedOut, 0);
     return {
       total,
       passed: expected,
-      failed: unexpected,
+      failed: Math.max(0, unexpected - timedOut),
       skipped,
       flaky,
-      timedOut: 0,
+      timedOut,
       duration: maxDuration,
       passRate,
       verdict: unexpected > 0 ? "failed" : "passed"
@@ -11773,8 +11807,8 @@ var ShardMerger = class {
       testTitle: spec.title,
       suitePath,
       error: {
-        message: error?.message ?? "Test failed",
-        stack: error?.stack
+        message: stripAnsi(error?.message ?? "Test failed"),
+        stack: error?.stack ? stripAnsi(error.stack) : void 0
       },
       screenshotPath: lastResult?.attachments.find(
         (a) => a.name.toLowerCase().includes("screenshot") && a.contentType.startsWith("image/")
@@ -11813,18 +11847,13 @@ var ShardMerger = class {
     };
   }
   buildCharts(stats, projects) {
-    const suiteResults = projects.flatMap(
-      (p) => p.suites.map((s) => ({
-        label: s.title,
-        passed: s.stats.passed,
-        failed: s.stats.failed,
-        skipped: s.stats.skipped
-      }))
-    ).slice(0, TOP_SUITES_FOR_CHART2);
+    const suiteResults = buildSuiteResults(projects, TOP_SUITES_FOR_CHART);
     return {
       passRate: {
         passed: stats.passed,
         failed: stats.failed,
+        timedOut: stats.timedOut,
+        // always 0 in shard JSON (no separate timedOut count)
         skipped: stats.skipped,
         flaky: stats.flaky
       },
@@ -12039,6 +12068,19 @@ var TemplateEngine = class {
       "upperCase",
       (s) => typeof s === "string" ? s.toUpperCase() : s
     );
+    this.handlebars.registerHelper("verdictLabel", (v) => {
+      const map = {
+        passed: "PASSED",
+        failed: "FAILED",
+        timedout: "TIMED OUT",
+        interrupted: "INTERRUPTED"
+      };
+      return map[v] ?? (typeof v === "string" ? v.toUpperCase() : v);
+    });
+    this.handlebars.registerHelper("coverageBand", (pct) => {
+      const n = Number(pct);
+      return n >= 80 ? "high" : n >= 50 ? "mid" : "low";
+    });
     this.handlebars.registerHelper("addOne", (n) => (n ?? 0) + 1);
     this.handlebars.registerHelper(
       "join",
@@ -13056,7 +13098,7 @@ var PdfReporter = class {
     this.dataCollector = new DataCollector();
     this.pdfGenerator = new PdfGenerator();
     this.options = parseOptions(rawOptions);
-    const version = true ? "0.4.0" : "0.x";
+    const version = true ? "0.5.0" : "0.x";
     logger.info(`@reportforge/playwright-pdf v${version} initialised`);
     this.licenseClient = new LicenseClient({
       licenseKey: this.options.licenseKey,

package/dist/templates/layouts/detailed.hbs

@@ -12,14 +12,15 @@
   </div>
 </div>
 
+{{> release-gate}}
+
 {{> executive-summary options=(obj showPassRate=true) }}
 
 {{> charts options=(obj showCharts=true showTrend=options.showTrend) }}
 
-<div class="page-group">
-  {{> requirements-matrix }}
-  {{> ci-environment options=(obj showFullEnvironment=true) }}
-</div>
+{{> requirements-matrix }}
+
+{{> ci-environment options=(obj showFullEnvironment=true) }}
 
 {{> suite-breakdown options=(obj showRetries=true) }}
 

package/dist/templates/layouts/minimal.hbs

@@ -12,6 +12,8 @@
   </div>
 </div>
 
+{{> release-gate}}
+
 {{> executive-summary options=(obj showPassRate=true showCharts=false) }}
 
 {{> suite-breakdown options=(obj showRetries=true) }}

package/dist/templates/partials/charts.hbs

@@ -71,12 +71,14 @@
   var remaining = 0;
   function chartDone() { if (--remaining === 0) window.__chartsReady = true; }
 
-  var passed  = {{charts.passRate.passed}};
-  var failed  = {{charts.passRate.failed}};
-  var skipped = {{charts.passRate.skipped}};
-  var flaky   = {{charts.passRate.flaky}};
-  var total   = passed + failed + skipped + flaky;
-  var passRate = total > 0 ? Math.round((passed / total) * 100) : 0;
+  var passed   = {{charts.passRate.passed}};
+  var failed   = {{charts.passRate.failed}};
+  var timedOut = {{charts.passRate.timedOut}};
+  var skipped  = {{charts.passRate.skipped}};
+  var flaky    = {{charts.passRate.flaky}};
+  // Pass rate is the canonical server-side stat (flaky counts as pass, denominator
+  // is every test) so the doughnut centre can never disagree with the KPI strip.
+  var passRate = {{stats.passRate}};
 
   /* ── Centre-text plugin for the doughnut ─────────────────────────────── */
   var centerTextPlugin = {
@@ -107,11 +109,11 @@
   new Chart(document.getElementById('passRateChart'), {
     type: 'doughnut',
     data: {
-      labels: ['Passed', 'Failed', 'Skipped', 'Flaky'],
+      labels: ['Passed', 'Failed', 'Timed Out', 'Skipped', 'Flaky'],
       datasets: [{
-        data: [passed, failed, skipped, flaky],
-        backgroundColor: ['#3F7D58', '#C3553C', '#7A786E', '#D49452'],
-        borderColor:     ['#FAF9F5', '#FAF9F5', '#FAF9F5', '#FAF9F5'],
+        data: [passed, failed, timedOut, skipped, flaky],
+        backgroundColor: ['#3F7D58', '#C3553C', '#B5803A', '#7A786E', '#D49452'],
+        borderColor:     ['#FAF9F5', '#FAF9F5', '#FAF9F5', '#FAF9F5', '#FAF9F5'],
         borderWidth: 2,
         hoverOffset: 4
       }]
@@ -135,8 +137,9 @@
   /* ── Horizontal suite results bar ────────────────────────────────────── */
   var suiteLabels  = [{{{jsonArray charts.suiteResults 'label'}}}];
   var suitePassed  = [{{{jsonArray charts.suiteResults 'passed'}}}];
-  var suiteFailed  = [{{{jsonArray charts.suiteResults 'failed'}}}];
-  var suiteSkipped = [{{{jsonArray charts.suiteResults 'skipped'}}}];
+  var suiteFailed   = [{{{jsonArray charts.suiteResults 'failed'}}}];
+  var suiteTimedOut = [{{{jsonArray charts.suiteResults 'timedOut'}}}];
+  var suiteSkipped  = [{{{jsonArray charts.suiteResults 'skipped'}}}];
 
   remaining += 1;
   new Chart(document.getElementById('suitesBarChart'), {
@@ -144,9 +147,10 @@
     data: {
       labels: suiteLabels,
       datasets: [
-        { label: 'Passed',  data: suitePassed,  backgroundColor: '#3F7D58', borderRadius: 3 },
-        { label: 'Failed',  data: suiteFailed,  backgroundColor: '#C3553C', borderRadius: 3 },
-        { label: 'Skipped', data: suiteSkipped, backgroundColor: '#7A786E', borderRadius: 3 }
+        { label: 'Passed',    data: suitePassed,   backgroundColor: '#3F7D58', borderRadius: 3 },
+        { label: 'Failed',    data: suiteFailed,   backgroundColor: '#C3553C', borderRadius: 3 },
+        { label: 'Timed Out', data: suiteTimedOut, backgroundColor: '#B5803A', borderRadius: 3 },
+        { label: 'Skipped',   data: suiteSkipped,  backgroundColor: '#7A786E', borderRadius: 3 }
       ]
     },
     options: {
@@ -161,7 +165,17 @@
         },
         y: {
           stacked: true,
-          ticks: { font: { size: 9, family: 'Inter, sans-serif' }, color: '#1F1F1C' },
+          // Widen the label gutter so the longest label isn't clipped at the canvas edge.
+          afterFit: function(scale) { if (!scale.$rfPadded) { scale.$rfPadded = true; scale.width += 8; } },
+          ticks: {
+            font: { size: 9, family: 'Inter, sans-serif' }, color: '#1F1F1C', autoSkip: false,
+            // Truncate long suite / describe labels so they fit the axis gutter
+            // instead of clipping at the canvas edge.
+            callback: function(value) {
+              var l = this.getLabelForValue(value);
+              return l.length > 24 ? l.slice(0, 23) + '…' : l;
+            }
+          },
           grid:   { display: false },
           border: { color: '#D6D4C8' }
         }

package/dist/templates/partials/cover-page.hbs

@@ -9,7 +9,7 @@
   <div class="cover-page__divider"></div>
 
   <span class="cover-page__verdict cover-page__verdict--{{stats.verdict}}">
-    {{upperCase stats.verdict}}
+    {{verdictLabel stats.verdict}}
   </span>
 
   <div class="cover-page__stats-strip">

package/dist/templates/partials/executive-summary.hbs

@@ -1,6 +1,6 @@
 <div class="section">
   <span class="verdict verdict--{{stats.verdict}}">
-    {{upperCase stats.verdict}}
+    {{verdictLabel stats.verdict}}
   </span>
 
   <div class="kpi-strip">
@@ -19,6 +19,10 @@
       <div class="kpi-card__value">{{stats.failed}}</div>
       <div class="kpi-card__label">Failed</div>
     </div>
+    <div class="kpi-card kpi-card--timedout">
+      <div class="kpi-card__value">{{stats.timedOut}}</div>
+      <div class="kpi-card__label">Timed Out</div>
+    </div>
     <div class="kpi-card kpi-card--skip">
       <div class="kpi-card__value">{{stats.skipped}}</div>
       <div class="kpi-card__label">Skipped</div>

package/dist/templates/partials/failure-deep-dive.hbs

@@ -1,5 +1,5 @@
 {{#if failures.length}}
-<div class="section page-break">
+<div class="section">
   <h2>Failures ({{failures.length}}{{#if overflowFailureCount}} shown · {{overflowFailureCount}} more in sidecar{{/if}})</h2>
   {{#if overflowFailureCount}}
   <div class="overflow-banner">
@@ -9,7 +9,7 @@
   </div>
   {{/if}}
   {{#each failures}}
-  <div class="failure-item no-break">
+  <div class="failure-item failure-item--{{severity}} no-break">
     {{#if ../options.showFullFailures}}
 
     <div class="failure-item__header">

package/dist/templates/partials/requirements-matrix.hbs

@@ -23,7 +23,7 @@
         <td style="color:{{#if failed}}var(--fail){{else}}var(--pass){{/if}};font-weight:600;">{{failed}}</td>
         <td>
           <div class="coverage-bar">
-            <div class="coverage-bar__fill" style="width:{{coveragePct}}%;"></div>
+            <div class="coverage-bar__fill coverage-bar__fill--{{coverageBand coveragePct}}" style="width:{{coveragePct}}%;"></div>
           </div>
           <span style="font-size:9.5px;color:var(--text-3);">{{coveragePct}}%</span>
         </td>

package/dist/templates/partials/slow-tests.hbs

@@ -16,9 +16,9 @@
       <tr class="no-break">
         <td style="font-weight:500;">{{title}}</td>
         <td style="font-size:9px;color:var(--text-3);font-family:'JetBrains Mono',monospace;">{{suiteTitle}}</td>
-        {{#if ../showProject}}<td style="font-size:9px;color:var(--text-3);">{{project}}</td>{{/if}}
+        {{#if ../showProject}}<td style="font-size:9px;color:var(--text-3);white-space:nowrap;">{{project}}</td>{{/if}}
         <td style="font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--text-2);text-align:right;">{{durationFormatted}}</td>
-        <td><span class="badge badge--{{status}}">{{status}}</span></td>
+        <td>{{statusBadge status}}</td>
       </tr>
       {{/each}}
     </tbody>

package/dist/templates/partials/suite-breakdown.hbs

@@ -15,6 +15,7 @@
     <span class="suite-stats">
       <span class="badge badge--passed">{{stats.passed}}</span>
       {{#if stats.failed}}<span class="badge badge--failed">{{stats.failed}}</span>{{/if}}
+      {{#if stats.timedOut}}<span class="badge badge--timedout">{{stats.timedOut}}</span>{{/if}}
       {{#if stats.skipped}}<span class="badge badge--skipped">{{stats.skipped}}</span>{{/if}}
       {{#if stats.flaky}}<span class="badge badge--flaky">{{stats.flaky}}</span>{{/if}}
     </span>
@@ -41,7 +42,7 @@
           </div>
           {{/if}}
         </td>
-        <td><span class="badge badge--{{status}}">{{status}}</span></td>
+        <td>{{statusBadge status}}</td>
         <td style="color:var(--text-2);font-family:'JetBrains Mono',monospace;font-size:9.5px;">{{formatDuration duration}}</td>
         {{#if ../../options.showRetries}}<td style="color:var(--text-3);text-align:center;">{{retryCount}}</td>{{/if}}
       </tr>