Task e57facc2: Undo and live SSE updates in the admin PWA
- api/events.ts: fetch-based reader for GET /api/v1/admin/events (admin JWT
in the Authorization header via apiFetch, never in the URL), an incremental
SSE frame parser that buffers frames split across chunks and drops malformed
frames, and bounded-backoff reconnect with a clean abort on stop.
- api/useTransitions.tsx: one stream per signed-in shell (TransitionsProvider
in App) fanned out to screens; no provider means no stream.
- Today: Undo posts /instances/{id}/uncomplete, disables every Undo while in
flight, shows a dismissible message on failure, and refetches the snapshot;
any transition refetches in place. Mark done stays inert.
- History: quest transitions refetch the active filter in place; rows stay
read-only.
- Tests for parsing, stream auth/teardown/reconnect, Undo, and live refetch.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -3,6 +3,8 @@ import { cleanup, fireEvent, render, screen, waitFor, within } from "@testing-li
|
||||
import HistoryTab, { FOOTER_NOTE, computeStats } from "./HistoryTab";
|
||||
import type { HistoryFilter, HistoryRow } from "../api/history";
|
||||
import { storeTokens } from "../auth/oidc";
|
||||
import { TransitionsProvider } from "../api/useTransitions";
|
||||
import { frame, testStream, type TestStream } from "../api/testStream";
|
||||
|
||||
const TODAY = "2026-09-23";
|
||||
|
||||
@@ -423,3 +425,104 @@ describe("HistoryTab", () => {
|
||||
expect(screen.getByTestId("history-scroll").style.paddingBottom).toBe("92px");
|
||||
});
|
||||
});
|
||||
|
||||
describe("HistoryTab live updates", () => {
|
||||
let fetchMock: ReturnType<typeof vi.fn>;
|
||||
let streams: TestStream[];
|
||||
|
||||
function historyRequests(): URL[] {
|
||||
return fetchMock.mock.calls
|
||||
.map(([url]) => new URL(String(url), "http://x"))
|
||||
.filter((url) => url.pathname === "/api/v1/admin/history");
|
||||
}
|
||||
|
||||
const PAYLOAD = {
|
||||
child_id: 2,
|
||||
child_name: "Maeve",
|
||||
instance_id: 2,
|
||||
quest_title: "Make bed",
|
||||
window: "morning",
|
||||
due_date: TODAY,
|
||||
due_time: null,
|
||||
occurred_at: "2026-09-23T15:10:00Z",
|
||||
};
|
||||
|
||||
beforeAll(() => {
|
||||
vi.stubEnv("TZ", "America/Los_Angeles");
|
||||
});
|
||||
|
||||
afterAll(() => {
|
||||
vi.unstubAllEnvs();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
sessionStorage.clear();
|
||||
storeTokens({ access_token: "at-123", expires_in: 600 });
|
||||
streams = [];
|
||||
fetchMock = vi.fn((url: string) => {
|
||||
if (new URL(url, "http://x").pathname.endsWith("/api/v1/admin/events")) {
|
||||
const stream = testStream();
|
||||
streams.push(stream);
|
||||
return Promise.resolve(stream.response);
|
||||
}
|
||||
return Promise.resolve(routeFetch(url));
|
||||
});
|
||||
vi.stubGlobal("fetch", fetchMock);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
vi.unstubAllGlobals();
|
||||
});
|
||||
|
||||
it("a quest transition refetches the active filter; a day-complete does not", async () => {
|
||||
render(
|
||||
<TransitionsProvider>
|
||||
<HistoryTab today={TODAY} />
|
||||
</TransitionsProvider>,
|
||||
);
|
||||
await screen.findByTestId("stat-on-time");
|
||||
fireEvent.click(screen.getByRole("button", { name: "Reversals" }));
|
||||
await waitFor(() =>
|
||||
expect(historyRequests().some((u) => u.searchParams.get("filter") === "reversals")).toBe(true),
|
||||
);
|
||||
await screen.findByTestId("stat-on-time");
|
||||
await waitFor(() => expect(streams).toHaveLength(1));
|
||||
const before = historyRequests().length;
|
||||
|
||||
streams[0].push(
|
||||
frame("nestquest_child_day_complete", {
|
||||
child_id: 2,
|
||||
child_name: "Maeve",
|
||||
quests_due: 4,
|
||||
quests_completed: 4,
|
||||
occurred_at: "2026-09-23T15:00:00Z",
|
||||
}),
|
||||
);
|
||||
await new Promise((resolve) => setTimeout(resolve, 30));
|
||||
expect(historyRequests().length).toBe(before);
|
||||
|
||||
streams[0].push(frame("nestquest_quest_uncompleted", PAYLOAD));
|
||||
|
||||
await waitFor(() => expect(historyRequests().length).toBe(before + 3));
|
||||
const refetched = historyRequests().slice(before);
|
||||
// One refetch (reversals + the two stats queries), same range and filter.
|
||||
expect(refetched.map((u) => u.searchParams.get("filter")).sort()).toEqual([
|
||||
"all",
|
||||
"missed",
|
||||
"reversals",
|
||||
]);
|
||||
for (const url of refetched) {
|
||||
expect(url.searchParams.get("start")).toBe("2026-09-10");
|
||||
expect(url.searchParams.get("end")).toBe(TODAY);
|
||||
}
|
||||
await new Promise((resolve) => setTimeout(resolve, 30));
|
||||
expect(historyRequests().length).toBe(before + 3);
|
||||
expect(screen.queryByTestId("history-loading")).toBeNull();
|
||||
expect(screen.getByRole("button", { name: "Reversals" }).getAttribute("aria-pressed")).toBe("true");
|
||||
// Rows stay read-only (D-005): no row carries a control.
|
||||
for (const row of screen.getAllByTestId("history-row")) {
|
||||
expect(within(row).queryByRole("button")).toBeNull();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user