@remit/web-client 0.0.231 → 0.0.233

package/src/components/calendar/agenda-strip.render.test.ts

@@ -0,0 +1,241 @@
+/**
+ * What the agenda puts on screen.
+ *
+ * Every claim here is one the strip makes to a reader rather than one the
+ * arithmetic makes to itself: that it opened on the day the address named, that
+ * a week with nothing in it is a sentence rather than seven blank screens, that
+ * an afternoon booked on a calendar it is not drawing is not offered as free,
+ * and that a read it was refused says so instead of drawing an empty diary.
+ */
+import "@remit/test-dom";
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import {
+	buildCalendarDay,
+	type CalendarDescriptor,
+	type CalendarEventData,
+	datesBetween,
+	freeStretchesOn,
+} from "@remit/ui";
+import { createElement, type ReactElement } from "react";
+import { renderToString } from "react-dom/server";
+import { freeStretchesByDate, startOfDay } from "@/hooks/calendar";
+import { AgendaStrip, type AgendaStripProps } from "./AgendaStrip.js";
+
+const TODAY = "2026-06-10";
+/**
+ * Events are read off the wall time they print, so their offset is arbitrary.
+ * A busy span is an instant, so it carries this machine's own offset and the
+ * suite answers the same in Los Angeles as in Amsterdam.
+ */
+const OFFSET = "+02:00";
+const busyAt = (date: string, time: string): string =>
+	`${date}T${time}:00${startOfDay(date).slice(19)}`;
+const NOW = `${TODAY}T09:30:00${OFFSET}`;
+const WORK = "cal_work";
+
+const calendars: CalendarDescriptor[] = [
+	{
+		id: WORK,
+		accountId: "acct_work",
+		accountLabel: "Work",
+		name: "Northwind",
+		color: "cal-3",
+	},
+];
+
+const event = (
+	id: string,
+	date: string,
+	from: string,
+	to: string,
+	title = id,
+): CalendarEventData => ({
+	id,
+	calendarId: WORK,
+	title,
+	start: `${date}T${from}:00${OFFSET}`,
+	end: `${date}T${to}:00${OFFSET}`,
+	allDay: false,
+	location: "",
+	notes: "",
+	attendees: [],
+	myRsvp: "accepted",
+	threadId: "",
+	threadSubject: "",
+	timeZone: "Europe/Amsterdam",
+	zoneCertainty: "explicit",
+	recurrenceRule: "",
+	seriesId: "",
+	seriesException: false,
+	status: "confirmed",
+});
+
+const events = [
+	event("evt_roadmap", TODAY, "10:00", "11:30", "Q3 roadmap review"),
+	event("evt_retro", "2026-06-18", "16:00", "17:00", "Retro"),
+];
+
+const dates = datesBetween("2026-06-08", "2026-06-20");
+const days = dates.map((date) => buildCalendarDay(date, events, TODAY));
+
+const noop = () => {};
+
+/** Every day answered for, which is what the cases below are about. */
+const NOTHING_PENDING: ReadonlySet<string> = new Set();
+
+const base: AgendaStripProps = {
+	days,
+	calendars,
+	density: "comfortable",
+	today: TODAY,
+	anchorDate: TODAY,
+	now: NOW,
+	selectedEventId: "",
+	// The gaps between the rows: what the strip reads before the merged busy
+	// spans land, and what every case here but one is measured against.
+	freeOn: freeStretchesOn,
+	loadingDates: NOTHING_PENDING,
+	onSelectEvent: noop,
+	onPickSlot: noop,
+	onZoomDay: noop,
+	onGoToDate: noop,
+	onReachStart: noop,
+	onReachEnd: noop,
+	onVisibleDayChange: noop,
+};
+
+/** React writes a marker between adjacent text nodes; a reader sees one sentence. */
+const words = (html: string) => html.replaceAll("<!-- -->", "");
+
+const render = (props: Partial<AgendaStripProps> = {}): string =>
+	words(
+		renderToString(
+			createElement(AgendaStrip, { ...base, ...props }) as ReactElement,
+		),
+	);
+
+describe("the day the address named", () => {
+	it("names it under the sticky header the strip opens on", () => {
+		assert.match(render(), /Wednesday/);
+		assert.match(render(), />Today</);
+	});
+
+	it("keeps it out of a run, however empty it is", () => {
+		const quiet = dates.map((date) => buildCalendarDay(date, [], TODAY));
+		const html = render({ days: quiet, anchorDate: "2026-06-16" });
+		// The run either side of the 16th, rather than one run over it.
+		assert.match(html, /5 days with nothing booked/);
+		assert.match(html, /4 days with nothing booked/);
+	});
+});
+
+describe("a run of days with nothing on them", () => {
+	it("collapses into one sentence rather than seven empty screens", () => {
+		const html = render();
+		assert.match(html, /Thu 11 – Wed 17 Jun/);
+		assert.match(html, /7 days with nothing booked/);
+	});
+});
+
+describe("free time", () => {
+	/**
+	 * The reader has unticked the calendar those meetings are on, so the strip
+	 * draws nothing on the 11th. They are booked all morning regardless, and
+	 * "Free all day" is the one answer this view must never give.
+	 */
+	it("comes from the merged busy spans, not from the rows on screen", () => {
+		const free = freeStretchesByDate(dates, [
+			{
+				start: busyAt("2026-06-11", "09:00"),
+				end: busyAt("2026-06-11", "16:00"),
+			},
+		]);
+		const html = render({
+			anchorDate: "2026-06-11",
+			freeOn: (day) => free.get(day.date) ?? [],
+		});
+		assert.doesNotMatch(html, /Free all day/);
+		assert.match(html, /16:00 – 22:00/);
+	});
+
+	it("names the stretch a booked day still leaves open", () => {
+		assert.match(render(), /11:30 – 22:00/);
+	});
+});
+
+describe("what is next", () => {
+	it("leads today, so it is the first thing on screen and the first gone", () => {
+		const html = render();
+		assert.match(html, /Q3 roadmap review/);
+		assert.match(html, /Next · in 30m/);
+	});
+
+	it("says so plainly when the diary is empty ahead", () => {
+		const past = [event("evt_done", TODAY, "08:00", "09:00", "Breakfast")];
+		const html = render({
+			days: dates.map((date) => buildCalendarDay(date, past, TODAY)),
+		});
+		assert.match(html, /Nothing else booked/);
+	});
+});
+
+/**
+ * One preference for the whole calendar, which the grid already reads. The
+ * strip's third reading — a month of coloured dots with no titles on it — is
+ * not reachable from Glance on purpose: Glance says how much of a day fits, not
+ * whether to say what is on it.
+ */
+describe("the density the device holds", () => {
+	it("names the calendar an event is on at the detail reading", () => {
+		assert.match(render({ density: "comfortable" }), /Northwind/);
+	});
+
+	it("drops that line at a glance, still naming every event", () => {
+		const html = render({ density: "compact" });
+		assert.match(html, /Q3 roadmap review/);
+		assert.doesNotMatch(html, /Northwind/);
+	});
+});
+
+describe("a read that did not happen", () => {
+	it("states the refusal rather than drawing an empty diary", () => {
+		const html = render({
+			days: [],
+			error: new Error("The window has to be shorter than a year."),
+		});
+		assert.match(html, /load these days/);
+		assert.match(html, /shorter than a year/);
+		assert.doesNotMatch(html, /days with nothing booked/);
+	});
+
+	/**
+	 * The bug this pins: a week still in flight has no events, so every day of
+	 * it built as "nothing booked" and a run of them collapsed into "7 days with
+	 * nothing booked" — a claim about a diary nobody had read yet.
+	 */
+	it("draws an unanswered day as a skeleton, never as a day with nothing on it", () => {
+		const pending = new Set(["2026-06-11", "2026-06-12", "2026-06-13"]);
+		const html = render({ loadingDates: pending });
+		for (const date of pending) {
+			assert.match(html, new RegExp(`agenda-day-pending-${date}`));
+		}
+		assert.match(html, /aria-busy="true"/);
+		// The run that would have swallowed them, had they been read as empty.
+		assert.doesNotMatch(html, /Thu 11 – /);
+	});
+
+	it("keeps the days that have answered while their neighbours arrive", () => {
+		const html = render({ loadingDates: new Set(["2026-06-11"]) });
+		assert.match(html, /Q3 roadmap review/);
+		assert.match(html, /agenda-day-pending-2026-06-11/);
+	});
+
+	it("holds back what is next until today has answered", () => {
+		assert.match(render(), /Next · in 30m/);
+		assert.doesNotMatch(
+			render({ loadingDates: new Set([TODAY]) }),
+			/Nothing else booked/,
+		);
+	});
+});

package/src/components/calendar/calendar-workspace.render.test.ts

@@ -24,6 +24,9 @@ const DATE = "2026-06-10";
 const NOW = `${DATE}T09:30:00+02:00`;
 const CALENDAR = "cal_work";
 
+/** Stands in for the strip, which loads its own days and is tested on its own. */
+const AGENDA_SLOT = "the strip";
+
 const colorByCalendarId: Record<string, CalendarColorId> = {
 	[CALENDAR]: "cal-1",
 };
@@ -59,6 +62,7 @@ const workspaceProps = (
 	date: DATE,
 	events,
 	colorByCalendarId,
+	agenda: createElement("p", null, AGENDA_SLOT),
 	density: "comfortable",
 	selectedEventId: "",
 	timeZone: TIME_ZONE,
@@ -110,21 +114,24 @@ describe("the zoom the address names", () => {
 		}
 	});
 
+	it("mounts the strip for the agenda, and not the grid", () => {
+		const html = render("agenda");
+		assert.ok(html.includes(AGENDA_SLOT), "the agenda slot was not mounted");
+		assert.equal(html.includes("Not built yet"), false);
+		assert.equal(html.includes("Roadmap review"), false);
+	});
+
 	it("says so for a zoom that is not drawn yet", () => {
-		for (const view of ["year", "month", "agenda"] as const) {
+		for (const view of ["year", "month"] as const) {
 			const html = render(view);
 			assert.ok(
 				html.includes(`calendar-placeholder-${view}`),
 				`${view} rendered no placeholder`,
 			);
 			assert.ok(html.includes("Not built yet"));
-			assert.ok(html.includes("Week and Day work now."));
+			assert.ok(html.includes("Week, Day and Agenda work now."));
 		}
 	});
-
-	it("names the agenda's own stage rather than a generic one", () => {
-		assert.ok(render("agenda").includes("scrolling day strip"));
-	});
 });
 
 describe("the toolbar", () => {

package/src/components/calendar/calendar-write-flow.render.test.ts

@@ -0,0 +1,356 @@
+/**
+ * Writing an event and deleting one, through the addresses that carry them.
+ *
+ * The addresses are the real ones — `/calendar/{view}/{date}/new` and the event
+ * segment under the view — and so are the components each mounts. What is
+ * asserted is the request that left and the address the reader ends up at,
+ * because a form that posts and then leaves the composer up looks exactly like
+ * one that posted nothing.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import type {
+	RemitImapCalendarEventInstance,
+	RemitImapCalendarEventResponse,
+	RemitImapCalendarResponse,
+} from "@remit/api-http-client/types.gen.ts";
+import {
+	type AnyRouter,
+	createMemoryHistory,
+	createRootRoute,
+	createRoute,
+	createRouter,
+	Outlet,
+	type RouteComponent,
+	RouterProvider,
+} from "@tanstack/react-router";
+import { createElement } from "react";
+import { CalendarComposeSeedProvider } from "@/components/calendar/CalendarComposeSeed";
+import { calendarSearchSchema } from "@/lib/calendar-route";
+import { stringifySearch } from "@/lib/search-params";
+import { Route as OccurrenceRoute } from "../../routes/calendar/$view.$date/$calendarObjectId/$recurrenceId.js";
+import { Route as EventIndexRoute } from "../../routes/calendar/$view.$date/$calendarObjectId/index.js";
+import { Route as EventRoute } from "../../routes/calendar/$view.$date/$calendarObjectId.js";
+import { Route as ComposeRoute } from "../../routes/calendar/$view.$date/new.js";
+import { createDomHarness, type DomHarness } from "../../test-support/dom";
+import {
+	type HttpCall,
+	type HttpMock,
+	mockFetch,
+} from "../../test-support/http";
+
+// The router reads `self` at construction; the shared globals stop at `window`.
+(globalThis as { self?: typeof globalThis }).self ??= globalThis;
+
+const WORK = "11111111-1111-4111-8111-111111111111";
+const OBJECT = "aaaaaaaa-aaaa-4aaa-8aaa-aaaaaaaaaaaa";
+const WEEK = "/calendar/week/2026-06-10";
+
+let harness: DomHarness | undefined;
+let http: HttpMock | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http?.restore();
+	http = undefined;
+});
+
+/**
+ * The component a file route mounts, lifted off the route itself.
+ *
+ * The route objects are module singletons and re-parenting one mutates it for
+ * every other test in the process, so the tree below is built fresh per case
+ * out of the real components rather than out of the real routes. Which routes
+ * an address mounts is `routes/calendar/-calendar-tree.test.ts`'s subject; this
+ * one is about what those components then do.
+ */
+const componentOf = (route: unknown): RouteComponent => {
+	const { component } = (route as { options: { component?: RouteComponent } })
+		.options;
+	if (!component) throw new Error("the route mounts no component");
+	return component;
+};
+
+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 instance: RemitImapCalendarEventInstance = {
+	calendarId: WORK,
+	calendarObjectId: OBJECT,
+	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,
+} as RemitImapCalendarEventInstance;
+
+const resource = {
+	calendarObjectId: OBJECT,
+	calendarId: WORK,
+	resourceName: "roadmap.ics",
+	icalUid: "uid-1",
+	icalData: [
+		"BEGIN:VCALENDAR",
+		"BEGIN:VEVENT",
+		"SUMMARY:Roadmap review",
+		"LOCATION:Room Zuid",
+		"END:VEVENT",
+		"END:VCALENDAR",
+	].join("\r\n"),
+	etag: "etag-1",
+} as RemitImapCalendarEventResponse;
+
+/**
+ * The calendar's addresses, at the shape the generated tree gives them: the
+ * view, the composer beside the open event, and one occurrence under the series.
+ * The grid is left off — nothing here is about how a week is drawn, and the
+ * pane routes do not need one mounted beside them to be reached.
+ */
+const testRouter = (entry: string): AnyRouter => {
+	const rootRoute = createRootRoute({ component: Outlet });
+	const viewRoute = createRoute({
+		getParentRoute: () => rootRoute,
+		path: "/calendar/$view/$date",
+		validateSearch: calendarSearchSchema,
+		component: () =>
+			createElement(
+				CalendarComposeSeedProvider,
+				{ pick: undefined },
+				createElement(Outlet),
+			),
+	});
+	const eventRoute = createRoute({
+		getParentRoute: () => viewRoute,
+		path: "$calendarObjectId",
+		component: componentOf(EventRoute),
+	});
+	const routeTree = rootRoute.addChildren([
+		viewRoute.addChildren([
+			createRoute({
+				getParentRoute: () => viewRoute,
+				path: "new",
+				component: componentOf(ComposeRoute),
+			}),
+			eventRoute.addChildren([
+				createRoute({
+					getParentRoute: () => eventRoute,
+					path: "/",
+					component: componentOf(EventIndexRoute),
+				}),
+				createRoute({
+					getParentRoute: () => eventRoute,
+					path: "$recurrenceId",
+					component: componentOf(OccurrenceRoute),
+				}),
+			]),
+		]),
+	]);
+	return createRouter({
+		routeTree,
+		stringifySearch,
+		history: createMemoryHistory({ initialEntries: [entry] }),
+	}) as unknown as AnyRouter;
+};
+
+const mount = async (entry: string, respond: (call: HttpCall) => unknown) => {
+	http = mockFetch(respond);
+	const router = testRouter(entry);
+	await router.load();
+	harness = createDomHarness();
+	harness.renderApp(createElement(RouterProvider, { router }));
+	await settle();
+	return router;
+};
+
+const settle = async () => {
+	await harness?.flush();
+	await harness?.wait(30);
+	await harness?.flush();
+};
+
+const answering =
+	(
+		respond: (call: HttpCall) => unknown,
+		items: RemitImapCalendarEventInstance[] = [instance],
+		stored: RemitImapCalendarEventResponse = resource,
+	) =>
+	(call: HttpCall) => {
+		if (call.path.endsWith("/calendars") && call.method === "GET")
+			return { items: calendars };
+		if (call.path.endsWith("/calendar-events") && call.method === "GET")
+			return { items };
+		if (call.path.includes("/calendar-events/") && call.method === "GET")
+			return stored;
+		return respond(call);
+	};
+
+const RECURRENCE = "2026-06-10T07:15:00Z";
+
+const occurrence = {
+	...instance,
+	recurrenceId: RECURRENCE,
+	summary: "Standup",
+	start: "2026-06-10T09:15:00+02:00",
+	end: "2026-06-10T09:30:00+02:00",
+	hasRecurrence: true,
+} as RemitImapCalendarEventInstance;
+
+const series = {
+	...resource,
+	icalData: [
+		"BEGIN:VCALENDAR",
+		"BEGIN:VEVENT",
+		"SUMMARY:Standup",
+		"RRULE:FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR",
+		"END:VEVENT",
+		"END:VCALENDAR",
+	].join("\r\n"),
+} as RemitImapCalendarEventResponse;
+
+describe("writing an event from the composer route", () => {
+	it("posts what was typed and puts the reader back on the calendar", async () => {
+		const router = await mount(
+			`${WEEK}/new`,
+			answering(() => resource),
+		);
+
+		harness?.type(harness.byLabel("Title"), "Supplier call");
+		await settle();
+		harness?.click(harness.byText("button", "Add"));
+		await settle();
+
+		const posted = (http?.calls ?? []).filter(
+			(call) =>
+				call.method === "POST" && call.path.endsWith("/calendar-events"),
+		);
+		assert.equal(posted.length, 1, "the event was written once");
+		assert.equal(posted[0].body?.summary, "Supplier call");
+		assert.equal(posted[0].body?.calendarId, WORK);
+		assert.equal(
+			router.state.location.pathname,
+			WEEK,
+			"a saved event closes the composer rather than leaving it up",
+		);
+	});
+
+	it("says what is missing rather than posting a nameless event", async () => {
+		await mount(
+			`${WEEK}/new`,
+			answering(() => resource),
+		);
+
+		harness?.click(harness.byText("button", "Add"));
+		await settle();
+
+		assert.equal(
+			(http?.calls ?? []).filter((call) => call.method === "POST").length,
+			0,
+		);
+		assert.match(harness?.text() ?? "", /title/i);
+	});
+});
+
+describe("deleting an event from the event route", () => {
+	it("sends the delete with the version on screen and closes the pane", async () => {
+		const router = await mount(
+			`${WEEK}/${OBJECT}`,
+			answering(() => ({})),
+		);
+
+		assert.match(harness?.text() ?? "", /Roadmap review/);
+		harness?.click(harness.byText("button", "Delete"));
+		await settle();
+
+		const deleted = (http?.calls ?? []).filter(
+			(call) => call.method === "DELETE",
+		);
+		assert.equal(deleted.length, 1);
+		assert.ok(deleted[0].url.includes(`calendarId=${WORK}`), deleted[0].url);
+		assert.equal(
+			deleted[0].headers["if-match"],
+			"etag-1",
+			"a delete built on a version nobody stated can remove somebody else's event",
+		);
+		assert.equal(router.state.location.pathname, WEEK);
+	});
+});
+
+describe("editing one morning of a repeating event", () => {
+	it("asks what the change applies to before opening the form", async () => {
+		await mount(
+			`${WEEK}/${OBJECT}/${RECURRENCE}`,
+			answering(() => ({}), [occurrence], series),
+		);
+
+		assert.doesNotMatch(
+			harness?.text() ?? "",
+			/What should the change apply to/,
+			"the question is asked when Edit is pressed, not before",
+		);
+		harness?.click(harness.byText("button", "Edit"));
+		await settle();
+
+		const asked = harness?.text() ?? "";
+		assert.match(asked, /Standup repeats/);
+		assert.match(asked, /What should the change apply to/);
+		assert.match(
+			asked,
+			/Every weekday, 09:15/,
+			"the rule is read back in words, not as an RRULE",
+		);
+	});
+
+	it("sends the answer with the edit, naming the occurrence it meant", async () => {
+		await mount(
+			`${WEEK}/${OBJECT}/${RECURRENCE}`,
+			answering(() => ({}), [occurrence], series),
+		);
+
+		harness?.click(harness.byText("button", "Edit"));
+		await settle();
+		harness?.click(harness.byText("button", "This event"));
+		await settle();
+
+		harness?.type(harness.byLabel("Title"), "Standup, short");
+		await settle();
+		harness?.click(harness.byText("button", "Save"));
+		await settle();
+
+		const patched = (http?.calls ?? []).filter(
+			(call) => call.method === "PATCH",
+		);
+		assert.equal(patched.length, 1);
+		assert.equal(patched[0].body?.summary, "Standup, short");
+		assert.equal(
+			patched[0].headers["if-match"],
+			"etag-1",
+			"the write is conditional on the version the form was opened from",
+		);
+		assert.ok(patched[0].url.includes("scope=This"), patched[0].url);
+		assert.ok(
+			patched[0].url.includes(encodeURIComponent(RECURRENCE)),
+			patched[0].url,
+		);
+	});
+});