@remit/web-client 0.0.230 → 0.0.232

package/src/hooks/calendar/calendar-reads.render.test.ts

@@ -0,0 +1,265 @@
+/**
+ * What the calendar asks the server, and how often.
+ *
+ * Three things are pinned here, and all three are about the request rather than
+ * about the pixels: the window is the screenful the address names, the same
+ * week asked for twice is one request, and a step lands on a window that was
+ * already warmed. A grid that refetches on every navigation looks identical in
+ * a screenshot and is a different product to use.
+ *
+ * The tick list is the fourth: ticking nothing is every calendar, and an
+ * address naming a calendar that is gone shows the rest rather than a week that
+ * reads as empty.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import type {
+	RemitImapCalendarEventInstance,
+	RemitImapCalendarResponse,
+} from "@remit/api-http-client/types.gen.ts";
+import { createElement } from "react";
+import { type CalendarData, useCalendarData } from "@/hooks/useCalendarData";
+import { createDomHarness, type DomHarness } from "../../test-support/dom";
+import { type HttpMock, mockFetch } from "../../test-support/http";
+
+const WORK = "11111111-1111-4111-8111-111111111111";
+const HOME = "22222222-2222-4222-8222-222222222222";
+
+let harness: DomHarness | undefined;
+let http: HttpMock | undefined;
+let data: CalendarData | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http?.restore();
+	http = undefined;
+	data = undefined;
+});
+
+const calendar = (
+	calendarId: string,
+	displayName: string,
+): RemitImapCalendarResponse =>
+	({
+		calendarId,
+		accountConfigId: "cfg-1",
+		urlSegment: displayName.toLowerCase(),
+		displayName,
+		color: "Cal1",
+		componentSet: "VeventOnly",
+		source: "UserCreated",
+		timezone: "Europe/Amsterdam",
+		syncSequence: 1,
+		createdAt: 0,
+		updatedAt: 0,
+	}) as RemitImapCalendarResponse;
+
+const instance = (
+	over: Partial<RemitImapCalendarEventInstance>,
+): RemitImapCalendarEventInstance =>
+	({
+		calendarId: WORK,
+		calendarObjectId: "obj-1",
+		recurrenceId: "",
+		icalUid: "uid-1",
+		summary: "Roadmap review",
+		start: "2026-06-10T10:00:00+02:00",
+		end: "2026-06-10T11:30:00+02:00",
+		allDay: false,
+		status: "Confirmed",
+		transparency: "Opaque",
+		zoneCertainty: "Explicit",
+		etag: "etag-1",
+		hasRecurrence: false,
+		...over,
+	}) as RemitImapCalendarEventInstance;
+
+function Probe({
+	date,
+	calendarIds,
+}: {
+	date: string;
+	calendarIds: readonly string[];
+}) {
+	data = useCalendarData({ view: "week", date, calendarIds });
+	return null;
+}
+
+const mount = async (
+	date: string,
+	calendarIds: readonly string[],
+	instances: RemitImapCalendarEventInstance[] = [],
+	calendars: RemitImapCalendarResponse[] = [
+		calendar(WORK, "Work"),
+		calendar(HOME, "Home"),
+	],
+) => {
+	http = mockFetch((call) =>
+		call.path.endsWith("/calendars")
+			? { items: calendars }
+			: { items: instances },
+	);
+	harness = createDomHarness();
+	harness.renderApp(createElement(Probe, { date, calendarIds }));
+	await harness.flush();
+	await harness.wait(20);
+	await harness.flush();
+};
+
+const rerender = async (date: string, calendarIds: readonly string[]) => {
+	harness?.renderApp(createElement(Probe, { date, calendarIds }));
+	await harness?.flush();
+	await harness?.wait(20);
+	await harness?.flush();
+};
+
+/** Event listings whose window starts on a given day. */
+const windowsFrom = (day: string): string[] =>
+	(http?.to("/calendar-events") ?? [])
+		.map((call) => call.url)
+		.filter((url) => url.includes(`from=${encodeURIComponent(day)}`));
+
+describe("the window the grid asks for", () => {
+	it("is the week the address names, not the day", async () => {
+		await mount("2026-06-10", []);
+		const asked = windowsFrom("2026-06-08");
+		assert.equal(asked.length, 1, "the visible week was asked for once");
+		assert.ok(
+			asked[0].includes(`to=${encodeURIComponent("2026-06-15")}`),
+			`the window ends on the next Monday: ${asked[0]}`,
+		);
+	});
+
+	it("warms the week either side, so a step is not a wait", async () => {
+		await mount("2026-06-10", []);
+		assert.equal(windowsFrom("2026-06-01").length, 1);
+		assert.equal(windowsFrom("2026-06-15").length, 1);
+	});
+});
+
+describe("moving around inside a week already read", () => {
+	it("asks nothing again", async () => {
+		await mount("2026-06-08", []);
+		await rerender("2026-06-11", []);
+		assert.equal(
+			windowsFrom("2026-06-08").length,
+			1,
+			"every day of one week shares the window that was already fetched",
+		);
+	});
+
+	it("steps onto a week the prefetch already holds", async () => {
+		await mount("2026-06-10", []);
+		const before = windowsFrom("2026-06-15").length;
+		await rerender("2026-06-17", []);
+		assert.equal(
+			windowsFrom("2026-06-15").length,
+			before,
+			"the next week was warmed, so stepping onto it fetches nothing",
+		);
+	});
+});
+
+describe("the calendars the address ticked", () => {
+	it("names none when the reader has ticked none", async () => {
+		await mount("2026-06-10", []);
+		assert.ok(
+			windowsFrom("2026-06-08").every((url) => !url.includes("calendarId=")),
+			"ticking nothing off is every calendar, which the API takes as no filter",
+		);
+	});
+
+	it("names the one the address ticked", async () => {
+		await mount("2026-06-10", [WORK]);
+		const asked = windowsFrom("2026-06-08");
+		assert.equal(asked.length, 1);
+		assert.ok(asked[0].includes(`calendarId=${WORK}`));
+		assert.ok(!asked[0].includes(`calendarId=${HOME}`));
+	});
+
+	it("shows the rest when the address names a calendar that is gone", async () => {
+		await mount("2026-06-10", ["33333333-3333-4333-8333-333333333333"]);
+		assert.ok(
+			windowsFrom("2026-06-08").every((url) => !url.includes("calendarId=")),
+			"an address pointing at nothing shows the calendar, not an empty week",
+		);
+	});
+});
+
+/**
+ * The zone every write is built in, so it has to be one the server will take.
+ *
+ * The server checks a TZID against `Intl.supportedValuesOf("timeZone")` — the
+ * canonical IANA list, which holds no spelling of UTC at all — and refuses
+ * anything absent from it. A collection naming no zone therefore cannot be
+ * answered with a substitute, and above all not with the reader's own: a
+ * browser on a UTC machine resolves that to "UTC", and every event written
+ * from one was refused for a zone nobody had chosen.
+ */
+describe("the zone a collection is read on", () => {
+	const RESOLVABLE = new Set(Intl.supportedValuesOf("timeZone"));
+
+	it("is one the server will take, or none at all", async () => {
+		await mount(
+			"2026-06-10",
+			[],
+			[],
+			[
+				{
+					...calendar(WORK, "Work"),
+					timezone: "",
+				} as RemitImapCalendarResponse,
+			],
+		);
+		const zone = data?.timeZoneByCalendarId[WORK];
+		assert.ok(
+			zone === "" || RESOLVABLE.has(zone ?? ""),
+			`"${zone}" is neither absent nor a zone the server accepts as a TZID`,
+		);
+	});
+
+	it("is the collection's own where it has one", async () => {
+		await mount("2026-06-10", []);
+		assert.equal(data?.timeZoneByCalendarId[WORK], "Europe/Amsterdam");
+	});
+});
+
+describe("what the grid is handed", () => {
+	it("draws the occurrences the server expanded", async () => {
+		await mount(
+			"2026-06-10",
+			[],
+			[
+				instance({ calendarObjectId: "obj-1" }),
+				instance({
+					calendarObjectId: "obj-2",
+					recurrenceId: "2026-06-11T07:15:00Z",
+					summary: "Standup",
+					hasRecurrence: true,
+				}),
+			],
+		);
+		assert.deepEqual(
+			data?.events.map((event) => event.id),
+			["obj-1", "obj-2#2026-06-11T07:15:00Z"],
+		);
+		assert.equal(data?.events[1].title, "Standup");
+	});
+
+	it("leaves a cancelled occurrence off rather than drawing it as confirmed", async () => {
+		await mount(
+			"2026-06-10",
+			[],
+			[
+				instance({ calendarObjectId: "obj-1" }),
+				instance({ calendarObjectId: "obj-3", status: "Cancelled" }),
+			],
+		);
+		assert.deepEqual(
+			data?.events.map((event) => event.id),
+			["obj-1"],
+		);
+	});
+});

package/src/hooks/calendar/calendar-writes.render.test.ts

@@ -0,0 +1,305 @@
+/**
+ * Writing an event, and what the calendar does with the answer.
+ *
+ * Three outcomes have to be distinguishable at the call site, which is why they
+ * are returned rather than thrown: the write landed, somebody else had already
+ * written it, or the server refused it. The one that must never be silent is
+ * the middle one — a 412 says the version on screen is stale, and applying the
+ * edit anyway would discard a change nobody would ever see go.
+ *
+ * A lapsed session is not one of the three. It escalates to the page that signs
+ * the reader back in, so the caches here are the real ones from
+ * `lib/query-error-handler.ts` rather than the harness's quiet default.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import type { RemitImapCalendarResponse } from "@remit/api-http-client/types.gen.ts";
+import { MutationCache, QueryCache, QueryClient } from "@tanstack/react-query";
+import { act, createElement, Fragment } from "react";
+import { FatalErrorOverlay } from "@/components/ui/FatalErrorOverlay";
+import { useCalendarData } from "@/hooks/useCalendarData";
+import { __resetFatalError } from "@/lib/fatal-error";
+import {
+	handleMutationCacheError,
+	handleQueryCacheError,
+} from "@/lib/query-error-handler";
+import { createDomHarness, type DomHarness } from "../../test-support/dom";
+import {
+	type HttpCall,
+	type HttpMock,
+	httpError,
+	mockFetch,
+} from "../../test-support/http";
+import {
+	type CalendarWriteOutcome,
+	type CalendarWrites,
+	useCalendarWrites,
+} from "./useCalendarWrites";
+
+const WORK = "11111111-1111-4111-8111-111111111111";
+const OBJECT = "aaaaaaaa-aaaa-4aaa-8aaa-aaaaaaaaaaaa";
+
+let harness: DomHarness | undefined;
+let http: HttpMock | undefined;
+let writes: CalendarWrites | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http?.restore();
+	http = undefined;
+	writes = undefined;
+	__resetFatalError();
+});
+
+const calendars: RemitImapCalendarResponse[] = [
+	{
+		calendarId: WORK,
+		accountConfigId: "cfg-1",
+		urlSegment: "work",
+		displayName: "Work",
+		color: "Cal1",
+		componentSet: "VeventOnly",
+		source: "UserCreated",
+		timezone: "Europe/Amsterdam",
+		syncSequence: 1,
+		createdAt: 0,
+		updatedAt: 0,
+	} as RemitImapCalendarResponse,
+];
+
+const escalatingClient = (): QueryClient =>
+	new QueryClient({
+		queryCache: new QueryCache({ onError: handleQueryCacheError }),
+		mutationCache: new MutationCache({ onError: handleMutationCacheError }),
+		defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+	});
+
+/** Reads the visible week and holds the writes, the way the routes do. */
+function Probe() {
+	useCalendarData({ view: "week", date: "2026-06-10", calendarIds: [] });
+	writes = useCalendarWrites();
+	return null;
+}
+
+const mount = async (
+	respond: (call: HttpCall) => unknown,
+	options: { escalating?: boolean; calendarsRespond?: boolean } = {},
+) => {
+	const serveCalendars = options.calendarsRespond ?? true;
+	http = mockFetch((call) =>
+		serveCalendars && call.path.endsWith("/calendars") && call.method === "GET"
+			? { items: calendars }
+			: respond(call),
+	);
+	harness = createDomHarness(
+		options.escalating ? { queryClient: escalatingClient() } : {},
+	);
+	harness.renderApp(
+		createElement(
+			Fragment,
+			null,
+			createElement(FatalErrorOverlay),
+			createElement(Probe),
+		),
+	);
+	await settle();
+};
+
+const settle = async () => {
+	await harness?.flush();
+	await harness?.wait(20);
+	await harness?.flush();
+};
+
+/** The writes the probe is holding, driven inside `act` the way a click is. */
+const write = async (
+	run: (writes: CalendarWrites) => Promise<CalendarWriteOutcome>,
+): Promise<CalendarWriteOutcome> => {
+	const held = writes;
+	if (!held) throw new Error("the writes are not mounted");
+	let outcome: CalendarWriteOutcome | undefined;
+	await act(async () => {
+		outcome = await run(held);
+	});
+	await settle();
+	if (!outcome) throw new Error("the write returned nothing");
+	return outcome;
+};
+
+const listings = (): number =>
+	(http?.to("/calendar-events") ?? []).filter(
+		(call) =>
+			call.method === "GET" &&
+			call.url.includes(`from=${encodeURIComponent("2026-06-08")}`),
+	).length;
+
+const scopedWrite = {
+	calendarObjectId: OBJECT,
+	calendarId: WORK,
+	recurrenceId: "2026-06-11T07:15:00Z",
+	scope: "this" as const,
+	etag: "etag-1",
+};
+
+describe("creating an event", () => {
+	it("posts it and reads the week back, so the grid shows it", async () => {
+		await mount(() => ({ items: [] }));
+		const before = listings();
+
+		const outcome = await write((writes) =>
+			writes.createEvent({
+				calendarId: WORK,
+				summary: "Roadmap review",
+				start: "2026-06-10T10:00:00+02:00",
+				end: "2026-06-10T11:30:00+02:00",
+			}),
+		);
+
+		assert.deepEqual(outcome, { kind: "written" });
+		const posted = (http?.to("/calendar-events") ?? []).filter(
+			(call) => call.method === "POST",
+		);
+		assert.equal(posted.length, 1);
+		assert.equal(posted[0].body?.summary, "Roadmap review");
+		assert.ok(
+			listings() > before,
+			"the window a write changed has to be read again",
+		);
+	});
+});
+
+describe("editing one occurrence of a series", () => {
+	it("names the occurrence, the scope, and the version it was built on", async () => {
+		await mount(() => ({ items: [] }));
+		await write((writes) =>
+			writes.updateEvent(scopedWrite, { summary: "Standup" }),
+		);
+
+		const patched = (http?.calls ?? []).find((call) => call.method === "PATCH");
+		assert.ok(patched, "the edit was sent");
+		assert.equal(
+			patched.headers["if-match"],
+			"etag-1",
+			"an unconditional write is one that can discard somebody else's edit",
+		);
+		assert.ok(patched.url.includes("scope=This"), patched.url);
+		assert.ok(
+			patched.url.includes(encodeURIComponent("2026-06-11T07:15:00Z")),
+			patched.url,
+		);
+	});
+
+	it("makes the delete conditional on the same version", async () => {
+		await mount(() => ({ items: [] }));
+		await write((writes) => writes.deleteEvent(scopedWrite));
+		const deleted = (http?.calls ?? []).find(
+			(call) => call.method === "DELETE",
+		);
+		assert.equal(
+			deleted?.headers["if-match"],
+			"etag-1",
+			"an unconditional delete removes whatever is there now, not what was read",
+		);
+	});
+});
+
+describe("a version somebody else has already replaced", () => {
+	it("comes back as a conflict rather than as a write that won", async () => {
+		await mount((call) =>
+			call.method === "PATCH" ? httpError(412, "etag mismatch") : { items: [] },
+		);
+		const outcome = await write((writes) =>
+			writes.updateEvent(scopedWrite, { summary: "Standup" }),
+		);
+		assert.deepEqual(outcome, { kind: "conflict" });
+	});
+
+	it("refuses the delete the same way", async () => {
+		await mount((call) =>
+			call.method === "DELETE"
+				? httpError(412, "etag mismatch")
+				: { items: [] },
+		);
+		const outcome = await write((writes) => writes.deleteEvent(scopedWrite));
+		assert.deepEqual(outcome, { kind: "conflict" });
+	});
+});
+
+describe("a refusal the server states", () => {
+	it("comes back with what it said, for the form to show", async () => {
+		await mount((call) =>
+			call.method === "POST"
+				? httpError(400, "start must be before end")
+				: { items: [] },
+		);
+		const outcome = await write((writes) =>
+			writes.createEvent({
+				calendarId: WORK,
+				summary: "Backwards",
+				start: "2026-06-10T11:00:00+02:00",
+				end: "2026-06-10T10:00:00+02:00",
+			}),
+		);
+		assert.deepEqual(outcome, {
+			kind: "refused",
+			message: "start must be before end",
+		});
+	});
+});
+
+describe("a session that has lapsed", () => {
+	/**
+	 * The read is the dangerous one. A calendar that answers a 401 with no
+	 * events draws a clear week, and a clear week is what a reader plans around
+	 * — they never learn their session ended, and neither does the app.
+	 */
+	it("never lets the event listing come back as an empty week", async () => {
+		await mount(
+			(call) =>
+				call.method === "GET"
+					? httpError(401, "session expired")
+					: { items: [] },
+			{ escalating: true, calendarsRespond: false },
+		);
+		assert.ok(
+			harness?.query('[data-testid="fatal-error-overlay"]'),
+			"a refused read must not be drawn as a week with nothing in it",
+		);
+	});
+
+	it("escalates a refused calendar list rather than showing no calendars", async () => {
+		await mount(
+			(call) =>
+				call.path.endsWith("/calendars")
+					? httpError(401, "session expired")
+					: { items: [] },
+			{ escalating: true, calendarsRespond: false },
+		);
+		assert.ok(harness?.query('[data-testid="fatal-error-overlay"]'));
+	});
+
+	it("takes the reader to the page that signs them back in", async () => {
+		await mount(
+			(call) =>
+				call.method === "POST"
+					? httpError(401, "session expired")
+					: { items: [] },
+			{ escalating: true },
+		);
+		await write((writes) =>
+			writes.createEvent({
+				calendarId: WORK,
+				summary: "Roadmap review",
+				start: "2026-06-10T10:00:00+02:00",
+				end: "2026-06-10T11:30:00+02:00",
+			}),
+		);
+
+		assert.ok(
+			harness?.query('[data-testid="fatal-error-overlay"]'),
+			"no banner on a calendar signs anybody back in",
+		);
+	});
+});