1b209b5eb7
open from the Bedside tab
The #img-lightbox overlay markup was sitting at the bottom of
calculators.html. Before the reorg it was fine — the calculators tab
was always the only home for bedside, so by the time a user clicked
the seizure or NRP pathway button the lightbox HTML was guaranteed to
be in the DOM. After promoting Bedside to its own tab, a user can
open Bedside -> Seizures without having visited Calculators first;
the lightbox JS's getElementById('img-lightbox') then returns null
and the click silently no-ops.
Moved the overlay markup to the bottom of index.html so it exists
from page load regardless of which tab has been lazy-loaded. The e2e
harness gets a duplicate copy so the existing lightbox smoke test
keeps working.
Added a regression test for NRP (bedside-smoke.spec.js:141) to catch
any future breakage — the prior seizure-only test didn't exercise the
second pathway button and so the neonatal/NRP path had never been
clicked in CI.
Suite: 252 passed / 0 failed.
40 lines
2.3 KiB
HTML
40 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<!-- E2E test harness — loads the calculators component + JS in isolation
|
|
(no auth wall). Playwright points here instead of the full SPA.
|
|
All scripts are external because the app's CSP blocks inline scripts. -->
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>E2E harness — calculators</title>
|
|
<link rel="stylesheet" href="/css/styles.css">
|
|
<style>
|
|
body { margin: 0; padding: 16px; background: #f9fafb; }
|
|
#calculators-tab { max-width: 1100px; margin: 0 auto; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<section id="calculators-tab" class="tab-content active" data-component="calculators"></section>
|
|
<!-- Bedside used to live inside calculators; since the promotion to a top-level
|
|
tab, the harness now renders both components side-by-side so the bedside
|
|
smoke tests can find #bedside-age without having to click the old
|
|
calc-nav-pill (which no longer exists). -->
|
|
<section id="bedside-tab" class="tab-content active" data-component="bedside"></section>
|
|
|
|
<script defer src="/js/calc-math.js"></script>
|
|
<script defer src="/js/drugs-loader.js"></script>
|
|
<script defer src="/js/calculators.js"></script>
|
|
<script type="module" src="/js/bedside/index.js"></script>
|
|
<script defer src="/js/e2e-bootstrap.js"></script>
|
|
|
|
<!-- Lightbox overlay — global in the real app, mirrored here so the
|
|
bedside lightbox smoke test can open/close it. -->
|
|
<div id="img-lightbox" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:9999;align-items:center;justify-content:center;padding:20px;flex-direction:column;">
|
|
<div style="display:flex;align-items:center;gap:12px;margin-bottom:10px;color:white;max-width:95%;">
|
|
<div id="img-lightbox-title" style="flex:1;font-weight:600;font-size:14px;"></div>
|
|
<a id="img-lightbox-open" href="#" target="_blank" rel="noopener" style="color:#93c5fd;font-size:13px;"><i class="fas fa-up-right-from-square"></i> Open in new tab</a>
|
|
<button id="img-lightbox-close" type="button" style="background:rgba(255,255,255,0.15);color:white;border:none;border-radius:6px;padding:6px 10px;cursor:pointer;font-size:14px;">Close</button>
|
|
</div>
|
|
<img id="img-lightbox-img" src="" alt="" style="max-width:95%;max-height:85vh;object-fit:contain;border-radius:6px;background:white;">
|
|
</div>
|
|
</body>
|
|
</html>
|