mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-07 04:12:04 +00:00
Marc-André Bombeck
a23ee61184
A spec that arms `page.route(...)` in a `beforeEach` and never drops the handler races its own teardown. The context closes, an async handler is still awaiting, its next call rejects with "Test ended.", and Playwright attributes that to the test that had just passed. With `retries: 2` plus `failOnFlakyTests`, which spec bites is a matter of timing. `e2e/setup/test.ts` re-exports Playwright's `test` extended with an auto fixture that unroutes every page and the context after each test, and clears the page event listeners a spec subscribes to; `expect` rides along so a spec needs one import. Auto means a spec author cannot forget it and does not have to know it exists. Every spec now takes `test` from there, and `e2e-route-cleanup-guard.test.ts` keeps the import boundary closed with an allowlist that carries its reason. The per-file `afterEach` on the cycle spec goes away — leaving both would read as not trusting the fixture. Not covered: a page inside a context a spec builds itself. Only `share-documents.spec.ts` does that, and it owns those contexts.
71 lines
2.9 KiB
TypeScript
71 lines
2.9 KiB
TypeScript
import { expect, test } from "./setup/test";
|
|
|
|
import { STORAGE_STATE_PATH } from "./setup/global-setup";
|
|
|
|
/**
|
|
* #316 follow-up — does the medications list refetch when you navigate
|
|
* back to the page?
|
|
*
|
|
* Reporter: "TanStack Query is not fetching data on the medications page
|
|
* or other areas when the data is stale, even when I navigate between
|
|
* pages." In Next.js App Router a route-level page UNMOUNTS on navigation
|
|
* away and remounts on return, so the query observer is recreated — but
|
|
* the global `staleTime: 5min` makes `refetchOnMount: true` skip the
|
|
* fetch while the cached data is still "fresh", so the page shows a
|
|
* potentially stale list with no network round-trip.
|
|
*
|
|
* This spec counts `/api/medications` requests across a client-side
|
|
* round-trip (medications → dashboard → medications). The DESIRED
|
|
* (post-fix) behaviour is a fresh fetch on return; pre-fix the count
|
|
* stays at 1, which is the reproduction.
|
|
*
|
|
* Desktop-only: the assertion is about query behaviour, and the sidebar
|
|
* nav links it clicks live behind a drawer on the mobile project.
|
|
*/
|
|
test.use({ storageState: STORAGE_STATE_PATH });
|
|
|
|
test("medications list refetches on client-side navigation back to the page", async ({
|
|
page,
|
|
}, testInfo) => {
|
|
test.skip(
|
|
testInfo.project.name.includes("mobile"),
|
|
"sidebar nav links are drawer-gated on mobile; query behaviour is project-independent",
|
|
);
|
|
let medsRequests = 0;
|
|
page.on("request", (req) => {
|
|
try {
|
|
const u = new URL(req.url());
|
|
if (u.pathname === "/api/medications") medsRequests += 1;
|
|
} catch {
|
|
/* non-URL request — ignore */
|
|
}
|
|
});
|
|
|
|
// Initial load — the list query mounts and fetches once. Arm the waiter
|
|
// BEFORE navigating: `goto` resolves on load, so a response that already
|
|
// arrived would never be seen by a listener attached afterwards, and the
|
|
// wait would time out on an event that had long since happened.
|
|
const firstListFetch = page.waitForResponse(
|
|
(r) => new URL(r.url()).pathname === "/api/medications",
|
|
);
|
|
await page.goto("/medications");
|
|
await firstListFetch;
|
|
expect(medsRequests).toBe(1);
|
|
|
|
// Client-side nav AWAY (dashboard) then BACK — App Router unmounts and
|
|
// remounts the medications page. A full page.goto() would reset the
|
|
// client cache and always refetch, so we click the sidebar links.
|
|
await page.locator('a[href="/"]').first().click();
|
|
await page.waitForURL("**/");
|
|
await page.locator('a[href="/medications"]').first().click();
|
|
await page.waitForURL("**/medications");
|
|
|
|
// Desired: the return mounts a fresh observer that refetches. Pre-fix
|
|
// the 5-min staleTime masks it and this stays at 1 (the bug). Poll rather
|
|
// than sleeping a fixed span: it returns the moment the refetch lands, and
|
|
// it does not turn a slow CI machine into a false failure.
|
|
await expect
|
|
.poll(() => medsRequests, { timeout: 10_000 })
|
|
.toBeGreaterThanOrEqual(2);
|
|
});
|