@remit/web-client 0.0.324 → 0.0.326

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

@@ -1,221 +0,0 @@
-/**
- * What each zoom puts on screen.
- *
- * The route is one route for all five views, so "the view mounts its own
- * component" is a decision this pane makes and the place to assert it. A zoom
- * that is not drawn yet says so out loud: an empty surface would be
- * indistinguishable from a week with nothing in it, which is the dead route
- * this stage exists to avoid.
- */
-import "@remit/test-dom";
-import assert from "node:assert/strict";
-import { describe, it } from "node:test";
-import type { CalendarColorId, CalendarEventData } from "@remit/ui";
-import { AppShellSlotted } from "@remit/ui";
-import { createElement, type ReactElement } from "react";
-import { renderToString } from "react-dom/server";
-import {
-	CalendarWorkspace,
-	type CalendarWorkspaceProps,
-} from "./CalendarWorkspace.js";
-
-const TIME_ZONE = "Europe/Amsterdam";
-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",
-};
-
-const roadmap: CalendarEventData = {
-	id: "roadmap",
-	calendarId: CALENDAR,
-	title: "Roadmap review",
-	start: `${DATE}T10:00:00+02:00`,
-	end: `${DATE}T11:00:00+02:00`,
-	allDay: false,
-	location: "",
-	notes: "",
-	attendees: [],
-	myRsvp: "accepted",
-	threadId: "",
-	threadSubject: "",
-	timeZone: TIME_ZONE,
-	zoneCertainty: "explicit",
-	recurrenceRule: "",
-	seriesId: "",
-	seriesException: false,
-	status: "confirmed",
-};
-
-const noop = () => {};
-
-const workspaceProps = (
-	view: "year" | "month" | "week" | "day" | "agenda",
-	events: CalendarEventData[] = [roadmap],
-): CalendarWorkspaceProps => ({
-	view,
-	date: DATE,
-	events,
-	colorByCalendarId,
-	agenda: createElement("p", null, AGENDA_SLOT),
-	density: "comfortable",
-	selectedEventId: "",
-	timeZone: TIME_ZONE,
-	now: NOW,
-	onChangeView: noop,
-	onToday: noop,
-	onStep: noop,
-	dayHref: (day) => `/calendar/day/${day}`,
-	onZoomDay: noop,
-	onChangeDensity: noop,
-	onSelectEvent: noop,
-	onPickSlot: noop,
-});
-
-/**
- * The calendar engine schedules browser timers while it renders. Nothing mounts
- * here, so nothing ever clears them and the suite would sit on a live event
- * loop after its last assertion. Take them back.
- */
-function renderQuietly(element: ReactElement): string {
-	const scheduled: ReturnType<typeof setTimeout>[] = [];
-	const native = globalThis.setTimeout;
-	globalThis.setTimeout = ((...args: Parameters<typeof setTimeout>) => {
-		const handle = native(...args);
-		scheduled.push(handle);
-		return handle;
-	}) as typeof globalThis.setTimeout;
-	try {
-		return renderToString(element);
-	} finally {
-		globalThis.setTimeout = native;
-		for (const handle of scheduled) clearTimeout(handle);
-	}
-}
-
-const render = (
-	view: "year" | "month" | "week" | "day" | "agenda",
-	events: CalendarEventData[] = [roadmap],
-): string =>
-	renderQuietly(createElement(CalendarWorkspace, workspaceProps(view, events)));
-
-describe("the zoom the address names", () => {
-	it("draws the grid for the month, the week and the day", () => {
-		for (const view of ["month", "week", "day"] as const) {
-			const html = render(view);
-			assert.ok(
-				html.includes("Roadmap review"),
-				`${view} did not draw the events it was given`,
-			);
-			assert.equal(html.includes("Not built yet"), false);
-		}
-	});
-
-	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", () => {
-		const html = render("year");
-		assert.ok(html.includes("calendar-placeholder-year"));
-		assert.ok(html.includes("Not built yet"));
-		assert.ok(html.includes("Month, Week, Day and Agenda work now."));
-	});
-});
-
-describe("the toolbar", () => {
-	it("offers every zoom, whichever one is on", () => {
-		const html = render("year");
-		for (const label of ["Year", "Month", "Week", "Day", "Agenda"]) {
-			assert.ok(html.includes(`>${label}<`), `no way to reach ${label}`);
-		}
-	});
-
-	it("offers back, forward and today at a zoom that draws no grid", () => {
-		const html = render("year");
-		assert.ok(html.includes('aria-label="Previous"'));
-		assert.ok(html.includes('aria-label="Next"'));
-		assert.ok(html.includes(">Today<"));
-	});
-
-	it("names the range before the grid has measured one", () => {
-		// The words are the device's locale's; the year is the part that is this
-		// component's answer rather than `Intl`'s.
-		assert.ok(render("month").includes("2026"));
-		assert.ok(render("year").includes("2026"));
-	});
-
-	it("names a week that runs over a year end by both of its years", () => {
-		const html = renderQuietly(
-			createElement(CalendarWorkspace, {
-				...workspaceProps("week", []),
-				date: "2025-12-31",
-			}),
-		);
-		const title = /<h2[^>]*>([^<]*)<\/h2>/.exec(html)?.[1] ?? "";
-		assert.match(title, /2025/, `"${title}" lost the year the week starts in`);
-		assert.match(title, /2026/, `"${title}" lost the year the week ends in`);
-	});
-
-	it("leaves the year off the ladder on a phone", () => {
-		const html = renderQuietly(
-			createElement(CalendarWorkspace, {
-				...workspaceProps("week"),
-				touch: true,
-			}),
-		);
-		assert.equal(html.includes(">Year<"), false);
-		assert.equal(html.includes(">Y<"), false);
-		assert.ok(html.includes(">W<"), "the phone ladder did not render");
-	});
-
-	it("carries the density control, which the address never names", () => {
-		const html = render("week");
-		assert.ok(html.includes("Calendar density"));
-		assert.ok(html.includes(">Detail<"));
-		assert.ok(html.includes(">Glance<"));
-	});
-});
-
-describe("a week with nothing in it", () => {
-	it("draws the grid rather than an empty surface", () => {
-		const html = render("week", []);
-		assert.equal(html.includes("Not built yet"), false);
-		assert.ok(html.includes('aria-label="Previous"'));
-	});
-});
-
-/**
- * The way back to the mail, at a width where the nav is not a pane.
- *
- * The shell renders the sidebar as a slide-over below 1024px and nothing opens
- * a slide-over on its own, so a surface that is the whole width of the app has
- * to carry the control itself — mail's own list headers do, and the calendar is
- * reached from the same sidebar it would otherwise strand a reader away from.
- */
-describe("the folders control", () => {
-	const shell = (width: number): string =>
-		renderQuietly(
-			createElement(AppShellSlotted, {
-				initialWidth: width,
-				nav: createElement("nav", null, "Folders"),
-				list: createElement(CalendarWorkspace, workspaceProps("week")),
-			}),
-		);
-
-	it("is in the calendar's header where the nav is a slide-over", () => {
-		assert.match(shell(900), /aria-label="Open folders"/);
-	});
-
-	it("is absent where the nav is a pane of its own", () => {
-		assert.doesNotMatch(shell(1440), /aria-label="Open folders"/);
-	});
-});

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

@@ -1,373 +0,0 @@
-/**
- * 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);
-	});
-});
-
-const askedOnDevice = async (clock: string): Promise<void> => {
-	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,
-		new RegExp(`Every weekday, ${clock}`),
-		"the rule is read back in words, not as an RRULE",
-	);
-};
-
-describe("editing one morning of a repeating event", () => {
-	for (const [zone, clock] of [
-		["UTC", "07:15"],
-		["Europe/Amsterdam", "09:15"],
-		["America/New_York", "03:15"],
-	]) {
-		it(`asks what the change applies to before opening the form, on ${zone}`, async () => {
-			const runner = process.env.TZ;
-			process.env.TZ = zone;
-			try {
-				await askedOnDevice(clock);
-			} finally {
-				if (runner === undefined) Reflect.deleteProperty(process.env, "TZ");
-				else process.env.TZ = runner;
-			}
-		});
-	}
-
-	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,
-		);
-	});
-});