@remit/web-client 0.0.232 → 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/hooks/calendar/agenda-window.test.ts

@@ -0,0 +1,235 @@
+/**
+ * The rolling range, and the busy time it is measured against.
+ *
+ * The strip never paginates, so the claims here are about continuity: reaching
+ * an end grows the run rather than replacing it, a day already held keeps the
+ * days either side of it, and a jump opens a window where it landed. The
+ * free-time half asserts that busy spans the strip did not draw still take the
+ * hours they cover — the rule itself is `@remit/ui`'s, and this only decides
+ * which spans a day gets.
+ */
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { freeStretchesFromSpans } from "@remit/ui";
+import {
+	busySpansByDate,
+	datesInRange,
+	extendRangeEnd,
+	extendRangeStart,
+	freeStretchesByDate,
+	LEAD_IN,
+	LEAD_OUT,
+	PAGE,
+	rangeAround,
+	rangeCovering,
+	weekKeyOf,
+	weekWindowsOver,
+} from "./agenda-window.js";
+import { calendarWindow, startOfDay } from "./window.js";
+
+const DATE = "2026-06-10";
+
+/** The offset this machine is on, so a fixture reads the same in any zone. */
+const offsetOn = (date: string): string => startOfDay(date).slice(19);
+
+const at = (date: string, time: string): string =>
+	`${date}T${time}:00${offsetOn(date)}`;
+
+const clocks = (
+	stretches: readonly { startMinute: number; endMinute: number }[],
+): string[] =>
+	stretches.map(
+		(stretch) =>
+			`${Math.floor(stretch.startMinute / 60)}–${Math.floor(stretch.endMinute / 60)}`,
+	);
+
+describe("the days the strip holds", () => {
+	it("opens further ahead than behind, because a diary is read forwards", () => {
+		const range = rangeAround(DATE);
+		assert.equal(range.from, "2026-05-31");
+		assert.equal(range.to, "2026-07-04");
+		assert.equal(datesInRange(range).length, LEAD_IN + LEAD_OUT + 1);
+	});
+
+	it("grows the run at whichever end was reached, keeping the other", () => {
+		const range = rangeAround(DATE);
+		assert.deepEqual(extendRangeStart(range), {
+			from: "2026-05-17",
+			to: range.to,
+		});
+		assert.deepEqual(extendRangeEnd(range), {
+			from: range.from,
+			to: "2026-07-18",
+		});
+		assert.equal(
+			datesInRange(extendRangeEnd(range)).length,
+			datesInRange(range).length + PAGE,
+		);
+	});
+
+	it("keeps the run a day is already in, so a scroll refetches nothing", () => {
+		const range = rangeAround(DATE);
+		for (const day of ["2026-05-31", DATE, "2026-06-28", "2026-07-04"]) {
+			assert.equal(rangeCovering(range, day), range, `${day} moved the run`);
+		}
+	});
+
+	it("opens a window where a jump landed rather than stretching to it", () => {
+		const range = rangeAround(DATE);
+		assert.deepEqual(
+			rangeCovering(range, "2026-11-02"),
+			rangeAround("2026-11-02"),
+		);
+		assert.deepEqual(
+			rangeCovering(range, "2026-01-05"),
+			rangeAround("2026-01-05"),
+		);
+	});
+});
+
+/**
+ * The range is not a window. A read may not cover more than a year
+ * (`CALENDAR_MAX_WINDOW_DAYS`), and the strip's range grows every time the
+ * reader reaches an end, so the range names weeks to fetch rather than being
+ * one request that eventually gets refused.
+ */
+describe("the weeks a range is fetched as", () => {
+	it("is the grid's own window for each week, once each", () => {
+		const windows = weekWindowsOver(datesInRange(rangeAround(DATE)));
+		for (const window of windows) {
+			assert.deepEqual(
+				window,
+				calendarWindow("week", window.from.slice(0, 10)),
+			);
+		}
+		assert.equal(new Set(windows.map((w) => w.from)).size, windows.length);
+	});
+
+	it("covers every day the strip holds and nothing before or after", () => {
+		const dates = datesInRange(rangeAround(DATE));
+		const held = new Set(weekWindowsOver(dates).map((window) => window.from));
+		for (const date of dates) assert.ok(held.has(weekKeyOf(date)));
+	});
+
+	it("names the week a day belongs to, Monday to Monday", () => {
+		// 2026-06-10 is a Wednesday; its week opens on the 8th.
+		assert.equal(weekKeyOf("2026-06-10"), startOfDay("2026-06-08"));
+		assert.equal(weekKeyOf("2026-06-08"), startOfDay("2026-06-08"));
+		assert.equal(weekKeyOf("2026-06-14"), startOfDay("2026-06-08"));
+		assert.equal(weekKeyOf("2026-06-15"), startOfDay("2026-06-15"));
+	});
+
+	it("asks for one week however far the reader scrolls", () => {
+		// Past the server's 366-day ceiling in both directions.
+		let range = rangeAround(DATE);
+		for (let reach = 0; reach < 30; reach += 1) {
+			range = extendRangeEnd(extendRangeStart(range));
+		}
+		const dates = datesInRange(range);
+		assert.ok(dates.length > 366, "the range never grew past the ceiling");
+
+		for (const window of weekWindowsOver(dates)) {
+			const days =
+				(Date.parse(window.to) - Date.parse(window.from)) / 86_400_000;
+			assert.equal(days, 7, `a window covered ${days} days`);
+		}
+	});
+
+	it("grows by adding weeks rather than by widening one", () => {
+		const opening = weekWindowsOver(datesInRange(rangeAround(DATE)));
+		const wider = weekWindowsOver(
+			datesInRange(extendRangeStart(rangeAround(DATE))),
+		);
+		const kept = new Set(wider.map((window) => window.from));
+		for (const window of opening) {
+			assert.ok(kept.has(window.from), `${window.from} was given up`);
+		}
+		assert.ok(wider.length > opening.length);
+	});
+});
+
+describe("busy time, split into the days it covers", () => {
+	const dates = ["2026-06-10", "2026-06-11", "2026-06-12"];
+
+	it("reads a span as minutes of the day it falls on", () => {
+		const byDate = busySpansByDate(dates, [
+			{ start: at("2026-06-10", "09:00"), end: at("2026-06-10", "10:30") },
+		]);
+		assert.deepEqual(byDate.get("2026-06-10"), [{ from: 540, to: 630 }]);
+		assert.equal(byDate.get("2026-06-11"), undefined);
+	});
+
+	it("gives a span crossing midnight one entry per day it touches", () => {
+		const byDate = busySpansByDate(dates, [
+			{ start: at("2026-06-10", "22:00"), end: at("2026-06-11", "02:00") },
+		]);
+		assert.deepEqual(byDate.get("2026-06-10"), [{ from: 1320, to: 1440 }]);
+		assert.deepEqual(byDate.get("2026-06-11"), [{ from: 0, to: 120 }]);
+	});
+
+	it("leaves no entry on the day a span merely ends at midnight of", () => {
+		const byDate = busySpansByDate(dates, [
+			{ start: at("2026-06-10", "22:00"), end: at("2026-06-11", "00:00") },
+		]);
+		assert.deepEqual(byDate.get("2026-06-10"), [{ from: 1320, to: 1440 }]);
+		assert.equal(byDate.get("2026-06-11"), undefined);
+	});
+
+	it("merges spans that run into each other into the hours they cover", () => {
+		const byDate = busySpansByDate(dates, [
+			{ start: at("2026-06-10", "11:00"), end: at("2026-06-10", "12:00") },
+			{ start: at("2026-06-10", "09:00"), end: at("2026-06-10", "11:30") },
+		]);
+		assert.deepEqual(byDate.get("2026-06-10"), [{ from: 540, to: 720 }]);
+	});
+
+	it("drops a span that is not a stretch of time at all", () => {
+		const byDate = busySpansByDate(dates, [
+			{ start: at("2026-06-10", "11:00"), end: at("2026-06-10", "11:00") },
+			{ start: "not a date", end: at("2026-06-10", "12:00") },
+		]);
+		assert.equal(byDate.size, 0);
+	});
+
+	it("ignores busy time outside the days on screen", () => {
+		const byDate = busySpansByDate(dates, [
+			{ start: at("2026-07-01", "09:00"), end: at("2026-07-01", "10:00") },
+		]);
+		assert.equal(byDate.size, 0);
+	});
+});
+
+describe("free time, off the spans the server merged", () => {
+	const dates = ["2026-06-10", "2026-06-11"];
+
+	it("answers every day the strip holds, including the untouched ones", () => {
+		const free = freeStretchesByDate(dates, []);
+		assert.deepEqual([...free.keys()], dates);
+		assert.equal(free.get("2026-06-11")?.[0].wholeDay, true);
+	});
+
+	/**
+	 * The reader unticked work, so the strip draws nothing on the 10th. They are
+	 * still in meetings all morning, and "Free all day" would be the one thing
+	 * this view must never say.
+	 */
+	it("takes hours out of a day the strip is drawing nothing on", () => {
+		const free = freeStretchesByDate(dates, [
+			{ start: at("2026-06-10", "09:00"), end: at("2026-06-10", "12:00") },
+			{ start: at("2026-06-10", "13:00"), end: at("2026-06-10", "16:00") },
+		]);
+		assert.deepEqual(clocks(free.get("2026-06-10") ?? []), ["16–22"]);
+		assert.equal(free.get("2026-06-10")?.[0].wholeDay, false);
+	});
+
+	it("is the rule `@remit/ui` states, applied to those spans", () => {
+		const spans = [{ from: 9 * 60, to: 12 * 60 }];
+		const free = freeStretchesByDate(dates, [
+			{ start: at("2026-06-10", "09:00"), end: at("2026-06-10", "12:00") },
+		]);
+		assert.deepEqual(
+			free.get("2026-06-10"),
+			freeStretchesFromSpans("2026-06-10", spans),
+		);
+	});
+});