mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-08 20:42:43 +00:00
Marc-André Bombeck
ff92ba46c2
The low-supply notice moves onto the adherence meta row beside the streak — a slot every card already reserves in every state — so a card that is low on stock no longer inserts a row that pushes its bars out of line with the card beside it. The gap between the drug class and the first line tightens at the same time. The medications list, compliance summary and supply reads now refetch on every mount. App Router unmounts the page on navigation away and remounts it on return; inside the client staleTime that return served a cache that could be minutes old, hiding a dose logged on another device or surface. A Playwright spec guards the return-navigation refetch.
66 lines
2.5 KiB
TypeScript
66 lines
2.5 KiB
TypeScript
import { expect, test } from "@playwright/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.
|
|
await page.goto("/medications");
|
|
await page.waitForResponse(
|
|
(r) => new URL(r.url()).pathname === "/api/medications",
|
|
);
|
|
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");
|
|
|
|
// Give a returning refetch time to fire.
|
|
await page.waitForTimeout(1500);
|
|
|
|
// Desired: the return mounts a fresh observer that refetches. Pre-fix
|
|
// the 5-min staleTime masks it and this stays at 1 (the bug).
|
|
expect(medsRequests).toBeGreaterThanOrEqual(2);
|
|
});
|