TS_Proto/e2e/reporters/render-html.ts

/**
 * Renders the run report as a single self-contained page.
 *
 * Written for someone who did not run the tests: a verdict first, then a
 * summary by capability, then the detail. Numbered sections so it can be cited
 * ("2.3.1 failed"), and a print stylesheet so it can be saved as a PDF.
 */
import {
  Area,
  RunMeta,
  Scenario,
  Step,
  Summary,
  areaFor,
  escapeHtml,
  formatValue,
  friendly,
  group,
  label,
  sentenceCase,
  statusClass,
  statusWord,
} from './report-model';

interface AreaBlock {
  index: number;
  area: Area;
  items: Scenario[];
  passed: number;
  failed: number;
}

export function renderHtml(summary: Summary, scenarios: Scenario[], meta: RunMeta): string {
  const areas: AreaBlock[] = group(scenarios).map((entry, index) => ({
    index: index + 1,
    area: areaFor(entry.name),
    items: entry.items,
    passed: entry.items.filter((s) => s.status === 'passed').length,
    failed: entry.items.filter((s) => s.status === 'failed' || s.status === 'timedOut').length,
  }));

  const allPassed = summary.failed === 0 && summary.passed > 0;
  const stamp = new Date(summary.generatedAt).toLocaleString('en-GB', {
    dateStyle: 'full',
    timeStyle: 'short',
  });

  const contents = areas
    .map(
      (a) =>
        `<li><a href="#area-${a.index}"><span class="num">2.${a.index}</span>${escapeHtml(
          a.area.title,
        )}</a><span class="dots"></span><span class="count">${a.items.length} tests</span></li>`,
    )
    .join('');

  const summaryRows = areas
    .map((a) => {
      const rate = Math.round((a.passed / Math.max(a.items.length, 1)) * 100);
      return `
      <tr>
        <td class="num-cell">2.${a.index}</td>
        <td><a href="#area-${a.index}">${escapeHtml(a.area.title)}</a></td>
        <td class="figure">${a.items.length}</td>
        <td class="figure">${a.passed}</td>
        <td class="figure">${a.failed || '—'}</td>
        <td>
          <div class="bar" title="${rate}% passed"><span style="width:${rate}%"></span></div>
        </td>
        <td><span class="tag ${a.failed ? 'fail' : 'pass'}">${a.failed ? 'Failed' : 'Passed'}</span></td>
      </tr>`;
    })
    .join('');

  return `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>TravelHub — Test Execution Report</title>
<style>
${STYLES}
</style>
</head>
<body>
<div class="sheet">

  <div class="cover">
    <div class="eyebrow">Test execution report</div>
    <h1>TravelHub</h1>
    <p class="when">Multi-tenant flight booking &middot; end-to-end suite<br />${escapeHtml(stamp)}</p>

    <div class="verdict ${allPassed ? 'ok' : 'bad'}">
      <span class="mark">${allPassed ? '&#10003;' : '!'}</span>
      <span>
        <span class="headline">${
          allPassed ? 'All tests passed' : `${summary.failed} of ${summary.total} tests failed`
        }</span><br />
        <span class="sub">${summary.passed} of ${summary.total} scenarios verified in ${friendly(
          summary.durationMs,
        )}</span>
      </span>
    </div>

    <dl class="facts-grid">
      <div><dt>Application under test</dt><dd>${escapeHtml(meta.baseURL)}</dd></div>
      <div><dt>Browsers</dt><dd>${escapeHtml(meta.projects.join(', ') || 'chromium')}</dd></div>
      <div><dt>Scenarios executed</dt><dd>${summary.total}</dd></div>
      <div><dt>Duration</dt><dd>${friendly(summary.durationMs)}</dd></div>
      <div><dt>Screenshots captured</dt><dd>${summary.screenshots}</dd></div>
      <div><dt>Scenarios with recorded data</dt><dd>${summary.narrated}</dd></div>
    </dl>
  </div>

  <section>
    <div class="section-title"><span class="num">1</span><h2>Summary</h2></div>
    <p class="lede">
      Each area below is a capability of the product rather than a source file. Every
      scenario was executed against the running application and a real database, except
      where an area states that the backend was simulated.
    </p>

    <table class="summary">
      <thead>
        <tr>
          <th></th><th>Area tested</th><th class="figure">Tests</th>
          <th class="figure">Passed</th><th class="figure">Failed</th>
          <th>Pass rate</th><th>Result</th>
        </tr>
      </thead>
      <tbody>${summaryRows}</tbody>
      <tfoot>
        <tr>
          <td></td><td>Total</td>
          <td class="figure">${summary.total}</td>
          <td class="figure">${summary.passed}</td>
          <td class="figure">${summary.failed || '—'}</td>
          <td></td>
          <td><span class="tag ${allPassed ? 'pass' : 'fail'}">${allPassed ? 'Passed' : 'Failed'}</span></td>
        </tr>
      </tfoot>
    </table>

    <h3 class="sub-head">Contents</h3>
    <ol class="toc">${contents}</ol>
  </section>

  <section>
    <div class="section-title"><span class="num">2</span><h2>Detailed results</h2></div>
    <p class="lede">
      Scenarios shown with a data table carry the figures the test actually observed —
      fares, booking references, seat counts — next to a screenshot of the screen at that
      moment. The rest carry a screenshot of their final state.
    </p>

    <div class="toolbar">
      <button id="all" aria-pressed="true">All scenarios</button>
      <button id="documented" aria-pressed="false">With recorded data only</button>
      <button id="expand">Expand all</button>
      <button id="collapse">Collapse all</button>
      <button id="pdf" title="Opens your browser's print dialog; choose &quot;Save as PDF&quot;">Save as PDF</button>
      <span class="legend">
        <span><i class="swatch pass"></i>Passed</span>
        <span><i class="swatch fail"></i>Failed</span>
        <span><i class="swatch skip"></i>Not run</span>
      </span>
    </div>

    ${areas.map(renderArea).join('')}
  </section>

  <footer>
    Generated automatically by the TravelHub end-to-end suite
    (<code>npm run test:e2e</code>) and reopened with <code>npm run report</code>.
    Screenshots are taken at the moment each step completed; click one to enlarge.
    Use your browser&rsquo;s print function to save this report as a PDF.
  </footer>
</div>

<dialog id="lightbox"><img alt="" /></dialog>

<script>
${SCRIPT}
</script>
</body>
</html>`;
}

function renderArea(entry: AreaBlock): string {
  const scenarios = entry.items
    .map((scenario, i) => renderScenario(scenario, `2.${entry.index}.${i + 1}`))
    .join('');

  return `
    <div class="area" id="area-${entry.index}">
      <div class="area-head">
        <div class="section-title">
          <span class="num">2.${entry.index}</span>
          <h2 class="area-title">${escapeHtml(entry.area.title)}</h2>
          <span class="tag ${entry.failed ? 'fail' : 'pass'}">${entry.passed}/${entry.items.length} passed</span>
        </div>
        <p class="lede area-blurb">${escapeHtml(entry.area.blurb)}</p>
      </div>
      ${scenarios}
    </div>`;
}

function renderScenario(scenario: Scenario, ref: string): string {
  const hasFacts = scenario.steps.some((s) => s.facts);
  const steps =
    scenario.steps.length === 0
      ? '<p class="no-evidence">No screenshot was captured for this scenario.</p>'
      : scenario.steps.map(renderStep).join('');

  return `
  <details class="scenario" data-facts="${hasFacts ? '1' : '0'}"${hasFacts ? ' open' : ''}>
    <summary>
      <span class="ref">${ref}</span>
      <span class="headline">
        ${scenario.suite ? `<span class="group">${escapeHtml(scenario.suite)}</span>` : ''}
        <span class="what">${escapeHtml(sentenceCase(scenario.title))}</span>
      </span>
      <span class="right">
        <span class="hide-narrow">${escapeHtml(scenario.project)}</span>
        <span>${friendly(scenario.durationMs)}</span>
        <span class="tag ${statusClass(scenario.status)}">${statusWord(scenario.status)}</span>
      </span>
    </summary>
    <div class="body">
      ${scenario.error ? `<pre class="error">${escapeHtml(scenario.error)}</pre>` : ''}
      ${steps}
    </div>
  </details>`;
}

function renderStep(step: Step): string {
  const facts = step.facts
    ? `<table class="facts">${Object.entries(step.facts)
        .map(
          ([key, value]) =>
            `<tr><td>${escapeHtml(label(key))}</td><td>${escapeHtml(formatValue(value))}</td></tr>`,
        )
        .join('')}</table>`
    : '';

  const shot = step.shot
    ? `<figure>
         <img class="shot" loading="lazy" src="${escapeHtml(step.shot)}" alt="${escapeHtml(step.name)}" />
         <figcaption>Screen at this point<span class="hint"> &middot; click to enlarge</span></figcaption>
       </figure>`
    : '';

  return `
    <div class="step">
      <h4><span class="n">${escapeHtml(step.seq)}</span>${escapeHtml(step.name)}</h4>
      ${facts}
      ${shot}
    </div>`;
}

const STYLES = `
  :root {
    --ink:#111827; --body:#374151; --muted:#6b7280; --faint:#9ca3af;
    --line:#e5e7eb; --rule:#d1d5db; --bg:#f3f4f6; --card:#fff;
    --pass:#067a6e; --pass-bg:#e6f4f1; --fail:#b3243f; --fail-bg:#fdeaee;
    --skip:#6b7280; --skip-bg:#f3f4f6; --accent:#0b5cd6;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--body);
       font:15px/1.6 'Inter',-apple-system,'Segoe UI',Roboto,sans-serif}
  .sheet{max-width:1080px;margin:0 auto;background:var(--card);
         box-shadow:0 1px 3px rgba(0,0,0,.08)}
  h1,h2,h3,h4{color:var(--ink);margin:0;line-height:1.3}
  a{color:var(--accent)}

  .cover{padding:44px 56px 36px;border-bottom:3px solid var(--ink)}
  .eyebrow{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
           color:var(--faint);font-weight:650;margin-bottom:10px}
  .cover h1{font-size:2.05rem;letter-spacing:-.025em;margin-bottom:6px}
  .cover .when{color:var(--muted);font-size:.92rem;margin:0}

  .verdict{display:flex;align-items:center;gap:18px;margin-top:28px;padding:20px 24px;
           border-radius:10px;border:1px solid}
  .verdict.ok{background:var(--pass-bg);border-color:#b9e0d8}
  .verdict.bad{background:var(--fail-bg);border-color:#f3c2cc}
  .verdict .mark{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
                 font-size:1.3rem;color:#fff;flex-shrink:0}
  .verdict.ok .mark{background:var(--pass)}
  .verdict.bad .mark{background:var(--fail)}
  .verdict .headline{font-size:1.16rem;font-weight:650;color:var(--ink)}
  .verdict .sub{font-size:.9rem;color:var(--muted)}

  .facts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
              border-top:1px solid var(--line);margin:28px 0 0}
  .facts-grid div{padding:14px 24px 14px 0;border-bottom:1px solid var(--line)}
  .facts-grid dt{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
                 color:var(--faint);font-weight:650;margin-bottom:3px}
  .facts-grid dd{margin:0;font-size:.92rem;color:var(--ink)}

  section{padding:36px 56px}
  section + section{border-top:1px solid var(--line)}
  .section-title{display:flex;align-items:baseline;gap:12px;margin-bottom:6px;flex-wrap:wrap}
  .section-title .num{color:var(--faint);font-variant-numeric:tabular-nums;
                      font-weight:650;font-size:1.05rem}
  .section-title h2{font-size:1.3rem;letter-spacing:-.015em}
  .area-title{font-size:1.12rem}
  .lede{color:var(--muted);font-size:.93rem;margin:0 0 22px;max-width:74ch}
  .area-blurb{margin:8px 0 0}
  .sub-head{margin-top:30px;font-size:.95rem}

  .toc{list-style:none;padding:0;margin:10px 0 0;max-width:640px}
  .toc li{display:flex;align-items:baseline;gap:8px;padding:7px 0;
          border-bottom:1px dotted var(--rule)}
  .toc a{text-decoration:none;color:var(--ink)}
  .toc a:hover{color:var(--accent)}
  .toc .num{color:var(--faint);font-variant-numeric:tabular-nums;margin-right:10px}
  .toc .dots{flex:1}
  .toc .count{color:var(--faint);font-size:.85rem;font-variant-numeric:tabular-nums}

  table.summary{width:100%;border-collapse:collapse;font-size:.92rem}
  table.summary th{text-align:left;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
                   color:var(--faint);font-weight:650;padding:0 12px 8px 0;
                   border-bottom:2px solid var(--rule)}
  table.summary td{padding:11px 12px 11px 0;border-bottom:1px solid var(--line);
                   vertical-align:middle}
  table.summary td a{text-decoration:none;font-weight:550}
  .num-cell{color:var(--faint);font-variant-numeric:tabular-nums;width:48px}
  .figure{font-variant-numeric:tabular-nums;text-align:right;width:70px}
  .bar{width:110px;height:7px;background:var(--line);border-radius:99px;overflow:hidden}
  .bar span{display:block;height:100%;background:var(--pass);border-radius:99px}
  .tag{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.06em;
       text-transform:uppercase;padding:3px 9px;border-radius:4px;white-space:nowrap}
  .tag.pass{background:var(--pass-bg);color:var(--pass)}
  .tag.fail{background:var(--fail-bg);color:var(--fail)}
  .tag.skip{background:var(--skip-bg);color:var(--skip)}
  tfoot td{font-weight:650;color:var(--ink);border-bottom:none;padding-top:14px}

  .area{padding-top:34px}
  .area:first-of-type{padding-top:0}
  .area-head{border-left:3px solid var(--accent);padding-left:16px;margin-bottom:20px}

  .scenario{border:1px solid var(--line);border-radius:8px;margin-bottom:14px;
            overflow:hidden;background:var(--card)}
  .scenario > summary{list-style:none;cursor:pointer;padding:13px 16px;display:flex;
                      gap:14px;align-items:flex-start}
  .scenario > summary::-webkit-details-marker{display:none}
  .scenario > summary:hover{background:#fafafa}
  .ref{color:var(--faint);font-variant-numeric:tabular-nums;font-size:.85rem;
       min-width:52px;flex-shrink:0;padding-top:2px}
  .headline{flex:1;min-width:0}
  .headline .what{font-weight:600;color:var(--ink)}
  .headline .group{display:block;font-size:.78rem;color:var(--muted);margin-bottom:1px}
  .right{display:flex;align-items:center;gap:10px;flex-shrink:0;
         font-size:.78rem;color:var(--faint)}

  .body{border-top:1px solid var(--line);padding:0 16px 8px;background:#fcfcfd}
  .step{padding:18px 0;border-bottom:1px dashed var(--line)}
  .step:last-child{border-bottom:none}
  .step h4{font-size:.95rem;margin-bottom:10px;display:flex;gap:9px;align-items:baseline}
  .step h4 .n{color:var(--faint);font-variant-numeric:tabular-nums;font-weight:650;font-size:.8rem}
  table.facts{border-collapse:collapse;font-size:.86rem;margin:0 0 12px;min-width:340px}
  table.facts td{border:1px solid var(--line);padding:6px 11px}
  table.facts td:first-child{background:#f8fafc;color:var(--muted);white-space:nowrap;
                             font-size:.8rem}
  table.facts td:last-child{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:500}
  figure{margin:0}
  .shot{display:block;max-width:100%;border:1px solid var(--rule);border-radius:6px;
        cursor:zoom-in}
  figcaption{font-size:.75rem;color:var(--faint);margin-top:5px}
  .no-evidence{color:var(--faint);font-size:.86rem;padding:14px 0}
  .error{background:var(--fail-bg);color:#8c1030;padding:11px 14px;margin:12px 0;
         border-radius:6px;font-size:.83rem;white-space:pre-wrap;
         font-family:ui-monospace,monospace}

  .toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:20px}
  .toolbar button{border:1px solid var(--rule);background:#fff;border-radius:6px;
                  padding:6px 13px;font:inherit;font-size:.85rem;cursor:pointer;color:var(--body)}
  .toolbar button:hover{border-color:var(--accent);color:var(--accent)}
  .toolbar button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
  .legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.8rem;color:var(--muted);margin-left:auto}
  .legend span{display:inline-flex;align-items:center;gap:6px}
  .swatch{width:10px;height:10px;border-radius:2px;display:inline-block}
  .swatch.pass{background:var(--pass)}
  .swatch.fail{background:var(--fail)}
  .swatch.skip{background:var(--skip)}

  footer{padding:26px 56px 44px;color:var(--faint);font-size:.82rem;
         border-top:1px solid var(--line)}
  footer code{background:var(--bg);padding:1px 5px;border-radius:3px}

  dialog{border:none;border-radius:10px;padding:0;max-width:96vw;max-height:96vh}
  dialog::backdrop{background:rgba(17,24,39,.8)}
  dialog img{display:block;max-width:96vw;max-height:96vh}

  @media (max-width:720px){
    .cover{padding:28px 20px 24px}
    section{padding:26px 20px}
    footer{padding:22px 20px 34px}
    .hide-narrow{display:none}
    .scenario > summary{flex-wrap:wrap}
    table.summary{font-size:.85rem}
    .bar{width:60px}
  }

  @media print{
    body{background:#fff;font-size:11pt}
    .sheet{box-shadow:none;max-width:none}
    .toolbar,dialog{display:none !important}

    /* The page margins come from the printer, so drop the screen gutters. */
    .cover{padding:0 0 22px}
    section{padding:22px 0}
    footer{padding:16px 0 0}

    .area{break-before:page}
    .area:first-of-type{break-before:auto}
    .area-head{break-after:avoid}
    .scenario{break-inside:avoid;border-color:var(--rule)}
    .scenario > summary{background:#fff}
    .step{break-inside:avoid}
    h2,h3,h4{break-after:avoid}
    table.summary{break-inside:avoid}

    /* A closed <details> prints nothing, which would silently drop most of the
       report. The beforeprint handler opens them; this is the belt and braces. */
    .scenario:not([open]) > .body{display:block}

    .shot{max-height:150mm;object-fit:contain;object-position:left top}
    a,a:visited,table.summary td a,.toc a{color:var(--ink);text-decoration:none}
    .toc .count,.right{color:var(--muted)}
    .hint{display:none}  /* nothing to click on paper */
  }`;

const SCRIPT = `
  const box = document.getElementById('lightbox');
  const img = box.querySelector('img');
  document.addEventListener('click', (e) => {
    if (e.target instanceof HTMLImageElement && e.target.classList.contains('shot')) {
      img.src = e.target.src;
      box.showModal();
    } else if (e.target === box) {
      box.close();
    }
  });

  const all = document.getElementById('all');
  const documented = document.getElementById('documented');
  function filter(onlyDocumented) {
    all.setAttribute('aria-pressed', String(!onlyDocumented));
    documented.setAttribute('aria-pressed', String(onlyDocumented));
    for (const el of document.querySelectorAll('.scenario')) {
      el.hidden = onlyDocumented && el.dataset.facts === '0';
    }
    for (const area of document.querySelectorAll('.area')) {
      area.hidden = ![...area.querySelectorAll('.scenario')].some((s) => !s.hidden);
    }
  }
  all.addEventListener('click', () => filter(false));
  documented.addEventListener('click', () => filter(true));
  document.getElementById('expand').addEventListener('click', () =>
    document.querySelectorAll('.scenario').forEach((d) => (d.open = true)));
  document.getElementById('collapse').addEventListener('click', () =>
    document.querySelectorAll('.scenario').forEach((d) => (d.open = false)));

  document.getElementById('pdf').addEventListener('click', () => window.print());

  // Printing a collapsed <details> prints only its summary, so open everything
  // first and put it back the way the reader had it afterwards.
  let restore = [];
  window.addEventListener('beforeprint', () => {
    restore = [...document.querySelectorAll('.scenario')].map((d) => [d, d.open]);
    for (const [d] of restore) {
      d.open = true;
    }
    for (const img of document.querySelectorAll('img.shot')) {
      img.loading = 'eager';
    }
  });
  window.addEventListener('afterprint', () => {
    for (const [d, was] of restore) {
      d.open = was;
    }
  });`;