@remit/web-client 0.0.325 → 0.0.326

package/src/components/compose/compose-send-stops-autosave.render.test.ts

@@ -1,328 +0,0 @@
-/**
- * Issue #604: two seconds after a reply was sent, the draft editor fired one
- * more autosave PATCH at the outbox entry the send had just moved out of draft,
- * and the fatal-error overlay went up over a message that had gone out fine.
- *
- * `handleSend` already dropped the pending autosave timer, but the autosave
- * effect reschedules whenever the save mutation settles — and the last PATCH of
- * a typing burst settles after the send request has left. So the guarantee
- * asserted here is about the entry, not the timer: once it has been sent,
- * nothing writes to it again.
- *
- * The second case is the same rule met from the other side. Send pressed before
- * the first autosave has run has no draft to send, so compose creates one and
- * then sends it — and creating it as already-queued makes that send a second
- * dispatch, which the server refuses.
- *
- * Issue #674 is the boundary between the two: pressing Send inside the two
- * seconds the debounce is still counting down. The cancelled timer was carrying
- * the last edits, and the entry went out as the server last saw it. So the send
- * writes what is on screen first, and a write that fails takes the send with it
- * rather than transmitting the older copy behind the user's back.
- *
- * The stub holds the outbox rule the API holds: only a draft accepts a send.
- */
-
-import assert from "node:assert/strict";
-import { afterEach, describe, it } from "node:test";
-import type {
-	RemitImapAccountResponse,
-	RemitImapDescribeMessageResponse,
-} from "@remit/api-http-client/types.gen.ts";
-import {
-	type AnyRouter,
-	createMemoryHistory,
-	createRootRoute,
-	createRoute,
-	createRouter,
-	RouterContextProvider,
-} from "@tanstack/react-router";
-import { createElement, useState } from "react";
-import { createDomHarness, type DomHarness } from "../../test-support/dom";
-import { type HttpMock, httpError, mockFetch } from "../../test-support/http";
-import { ComposeForm } from "./ComposeForm";
-import { ComposeProvider } from "./ComposeProvider";
-
-const ACCOUNT_ID = "acc-1";
-const OUTBOX_MESSAGE_ID = "ob-604";
-const AUTOSAVE_DEBOUNCE_MS = 2000;
-
-const account = {
-	accountId: ACCOUNT_ID,
-	email: "me@example.com",
-	smtpEnabled: true,
-} as unknown as RemitImapAccountResponse;
-
-const sourceMessage = {
-	message: { messageId: "msg-1" },
-	envelope: {
-		subject: "Lunch",
-		messageIdValue: "<m1@example.com>",
-		from: [{ normalizedEmail: "them@example.com", displayName: "Them" }],
-		replyTo: [],
-		to: [],
-		cc: [],
-	},
-	references: [],
-	bodyParts: [],
-} as unknown as RemitImapDescribeMessageResponse;
-
-const outboxEntry = (status: string) => ({
-	outboxMessageId: OUTBOX_MESSAGE_ID,
-	accountId: ACCOUNT_ID,
-	fromAddress: account.email,
-	toAddresses: ["them@example.com"],
-	attachments: [],
-	ccAddresses: [],
-	bccAddresses: [],
-	references: [],
-	subject: "Re: Lunch",
-	textBody: "yes",
-	status,
-});
-
-let harness: DomHarness | undefined;
-let http: HttpMock | undefined;
-let closed = 0;
-
-afterEach(() => {
-	harness?.close();
-	harness = undefined;
-	http?.restore();
-	http = undefined;
-	closed = 0;
-});
-
-const callsTo = (suffix: string) =>
-	(http?.calls ?? []).filter((call) => call.path.endsWith(suffix));
-
-const patches = () =>
-	(http?.calls ?? []).filter((call) => call.method === "PATCH");
-
-const patchCount = (): number => patches().length;
-
-const patchesAfterTheSend = (): number => {
-	const calls = http?.calls ?? [];
-	const sendIndex = calls.findIndex((call) => call.path.endsWith("/send"));
-	if (sendIndex === -1) throw new Error("the send never went out");
-	return calls.slice(sendIndex + 1).filter((call) => call.method === "PATCH")
-		.length;
-};
-
-// The draft the composer is on is its owner's to hand it — the address for the
-// compose route, local state for an inline reply. Here it is the test's.
-const Opened = ({ outboxMessageId }: { outboxMessageId?: string }) => {
-	const [draftId, setDraftId] = useState(outboxMessageId);
-
-	return createElement(ComposeForm, {
-		mode: "reply",
-		account,
-		sourceMessage,
-		outboxMessageId: draftId,
-		onDraftCreated: setDraftId,
-		onClose: () => {
-			closed += 1;
-		},
-	});
-};
-
-interface MountOptions {
-	/** The draft compose opens on, when the user is resuming one. */
-	outboxMessageId?: string;
-	/** Hold the PATCH response open so a save is still in flight at send time. */
-	gatePatch?: boolean;
-	/** Refuse every PATCH, so the write compose makes before sending fails. */
-	failPatch?: boolean;
-}
-
-// Opening compose closes whatever the reading pane had open, so the provider
-// navigates (#703) and needs a router under it.
-(globalThis as { self?: typeof globalThis }).self ??= globalThis;
-
-const rootRoute = createRootRoute();
-const mailboxRoute = createRoute({
-	getParentRoute: () => rootRoute,
-	path: "/mail/$mailboxId",
-	validateSearch: (search: Record<string, unknown>) => search,
-});
-
-const testRouter = (): AnyRouter =>
-	createRouter({
-		routeTree: rootRoute.addChildren([mailboxRoute]),
-		history: createMemoryHistory({ initialEntries: ["/mail/mbx-1"] }),
-	}) as unknown as AnyRouter;
-
-const mount = async (
-	options: MountOptions = {},
-): Promise<{ releasePatch: () => void }> => {
-	let release = (): void => {};
-	const patchGate = options.gatePatch
-		? new Promise<void>((resolve) => {
-				release = resolve;
-			})
-		: Promise.resolve();
-
-	let status = options.outboxMessageId ? "draft" : "absent";
-
-	http = mockFetch(async (call) => {
-		if (call.path.endsWith("/config")) return { accounts: [account] };
-
-		if (call.method === "POST" && call.path.endsWith("/outbox")) {
-			status = call.body?.sendImmediately === true ? "queued" : "draft";
-			return outboxEntry(status);
-		}
-
-		if (call.path.endsWith("/send")) {
-			if (status !== "draft") {
-				return httpError(409, `This message is already ${status}.`);
-			}
-			status = "queued";
-			return outboxEntry(status);
-		}
-
-		if (call.method === "PATCH") {
-			await patchGate;
-			if (options.failPatch) return httpError(409, "The draft moved on.");
-			return outboxEntry(status);
-		}
-
-		return outboxEntry(status);
-	});
-
-	harness = createDomHarness();
-	harness.renderApp(
-		createElement(RouterContextProvider, {
-			router: testRouter(),
-			// biome-ignore lint/correctness/noChildrenProp: RouterContextProvider types `children` as a required prop, which createElement's rest-argument form does not satisfy
-			children: createElement(
-				ComposeProvider,
-				null,
-				createElement(Opened, { outboxMessageId: options.outboxMessageId }),
-			),
-		}),
-	);
-	await harness.flush();
-	await harness.wait(50);
-
-	return { releasePatch: release };
-};
-
-const subjectField = (): HTMLElement => {
-	const field = harness?.query("[data-subject-field]");
-	if (!field) throw new Error("the compose subject field is not mounted");
-	return field;
-};
-
-const sendButton = (): HTMLElement => {
-	const button = harness?.byText("button", "Send");
-	if (!button) throw new Error("the compose send button is not mounted");
-	return button;
-};
-
-describe("compose and the outbox entry it is sending (#604, #674)", () => {
-	it("writes no further PATCH to an entry once it has been sent", async () => {
-		const { releasePatch } = await mount({
-			outboxMessageId: OUTBOX_MESSAGE_ID,
-			gatePatch: true,
-		});
-
-		harness?.type(subjectField(), "Re: Lunch tomorrow");
-		await harness?.wait(AUTOSAVE_DEBOUNCE_MS + 100);
-		assert.equal(patchCount(), 1, "the typing burst autosaves once");
-
-		harness?.click(sendButton());
-		await harness?.flush();
-
-		// The autosave that was still in flight settles after the send, which is
-		// what used to re-arm the debounce.
-		releasePatch();
-		await harness?.flush();
-		await harness?.wait(AUTOSAVE_DEBOUNCE_MS + 200);
-
-		assert.equal(callsTo("/send").length, 1, "the send went out");
-		assert.equal(patchesAfterTheSend(), 0, "no write followed the send");
-		// The in-flight autosave and the write before the send are the two, in
-		// that order: a second write issued alongside the first could land behind
-		// it and put the older body back.
-		assert.equal(
-			patchCount(),
-			2,
-			"the two writes went out one after the other",
-		);
-	});
-
-	it("writes the edit made inside the debounce window before it sends", async () => {
-		await mount({ outboxMessageId: OUTBOX_MESSAGE_ID });
-
-		harness?.type(subjectField(), "Re: Lunch tomorrow");
-		await harness?.wait(AUTOSAVE_DEBOUNCE_MS + 100);
-		assert.equal(patchCount(), 1, "the typing burst autosaves once");
-
-		// Inside the two seconds the next autosave would have waited.
-		harness?.type(subjectField(), "Re: Lunch on Thursday");
-		harness?.click(sendButton());
-		await harness?.flush();
-		await harness?.wait(100);
-
-		assert.equal(callsTo("/send").length, 1, "the send went out");
-		const written = patches().at(-1);
-		assert.equal(
-			written?.body?.subject,
-			"Re: Lunch on Thursday",
-			"the entry carries the edit the debounce was still holding",
-		);
-		// Autosave never writes these, so an entry autosaved before Send used to
-		// go out unchained from the message it replies to.
-		assert.equal(written?.body?.inReplyTo, "<m1@example.com>");
-		assert.deepEqual(written?.body?.references, ["<m1@example.com>"]);
-		assert.equal(closed, 1, "compose closed on a successful send");
-	});
-
-	it("sends nothing, and says so, when that write fails", async () => {
-		await mount({ outboxMessageId: OUTBOX_MESSAGE_ID, failPatch: true });
-
-		harness?.type(subjectField(), "Re: Lunch on Thursday");
-		harness?.click(sendButton());
-		await harness?.flush();
-		await harness?.wait(100);
-
-		assert.equal(patchCount(), 1, "the write was attempted");
-		assert.equal(callsTo("/send").length, 0, "the older copy stayed put");
-		assert.equal(closed, 0, "compose stayed open");
-		assert.match(harness?.text() ?? "", /Couldn't send message/);
-	});
-
-	it("dispatches once when Send is pressed twice over the write", async () => {
-		const { releasePatch } = await mount({
-			outboxMessageId: OUTBOX_MESSAGE_ID,
-			gatePatch: true,
-		});
-
-		harness?.type(subjectField(), "Re: Lunch on Thursday");
-		harness?.click(sendButton());
-		harness?.click(sendButton());
-		await harness?.flush();
-
-		releasePatch();
-		await harness?.flush();
-		await harness?.wait(100);
-
-		assert.equal(patchCount(), 1, "the entry was written once");
-		assert.equal(callsTo("/send").length, 1, "the message went out once");
-		assert.equal(closed, 1, "compose closed on a successful send");
-	});
-
-	it("sends a reply pressed before the first autosave, in one dispatch", async () => {
-		await mount();
-
-		harness?.click(sendButton());
-		await harness?.flush();
-		await harness?.wait(100);
-
-		const created = callsTo("/outbox").filter((call) => call.method === "POST");
-		assert.equal(created.length, 1, "the message was created once");
-		assert.equal(created[0]?.body?.sendImmediately, false);
-		assert.equal(callsTo("/send").length, 1, "the send went out");
-		assert.equal(closed, 1, "compose closed on a successful send");
-	});
-});

package/src/components/compose/compose-spellcheck-failure.render.test.ts

@@ -1,114 +0,0 @@
-/**
- * The failure path of #707, end to end: a checker that will not start has to
- * say so on screen. Each link in that chain is covered on its own elsewhere —
- * what is asserted here is that they are actually joined, because every break
- * in it looks identical from the writer's seat. A composer with no squiggles
- * reads as a message with nothing wrong in it, and that is the one thing it
- * must never come to mean by accident.
- */
-
-import assert from "node:assert/strict";
-import { after, before, describe, it } from "node:test";
-import type { ComposeBody as ComposeBodyType } from "@remit/ui/rich-text";
-import { createElement, useMemo } from "react";
-import { createDomHarness, type DomHarness } from "../../test-support/dom";
-import { useErrorBanners } from "../ui/ErrorBannerProvider";
-import { composeSpellcheck } from "./compose-spellcheck.js";
-
-let harness: DomHarness | undefined;
-let ComposeBody: typeof ComposeBodyType;
-
-class Marks {
-	readonly ranges: Range[] = [];
-	add(range: Range): void {
-		this.ranges.push(range);
-	}
-}
-
-const FAILURE = "the worker could not be started";
-
-before(async () => {
-	// The marks are drawn through the CSS Custom Highlight registry, which jsdom
-	// has neither half of. Without both the editor draws nothing and opens no
-	// provider at all, so there would be no failure to observe.
-	Object.defineProperty(globalThis, "CSS", {
-		value: { highlights: new Map<string, Marks>() },
-		configurable: true,
-	});
-	Object.defineProperty(globalThis, "Highlight", {
-		value: Marks,
-		configurable: true,
-	});
-	harness = createDomHarness();
-	// remit-ui's `.tsx` is transpiled here with the classic JSX runtime, which
-	// reads a global `React`. The harness installs it, so the editor is pulled
-	// in after one exists rather than at import time.
-	({ ComposeBody } = await import("@remit/ui/rich-text"));
-});
-
-after(() => {
-	harness?.close();
-	harness = undefined;
-});
-
-/**
- * The composer as `ComposeForm` wires it — the app's own options object, with
- * only the module load behind the provider swapped for one that fails the way
- * a missing chunk does.
- */
-const Composer = () => {
-	const { pushError } = useErrorBanners();
-	const spellcheck = useMemo(
-		() => ({
-			...composeSpellcheck(pushError),
-			provider: () => Promise.reject(new Error(FAILURE)),
-		}),
-		[pushError],
-	);
-	return createElement(ComposeBody, {
-		mode: "rich",
-		onModeChange: () => undefined,
-		initialHtml: "<p>Ths is redy.</p>",
-		initialText: "Ths is redy.",
-		onChange: () => undefined,
-		onConversionError: () => undefined,
-		onLanguageChange: () => undefined,
-		languages: ["en"],
-		spellcheck,
-	});
-};
-
-const mounted = (): DomHarness => {
-	if (!harness) throw new Error("the harness is not mounted");
-	return harness;
-};
-
-describe("a checker the composer cannot start", () => {
-	it("says what stopped, offers the report, and gives the message back", async () => {
-		mounted().renderApp(createElement(Composer));
-		await mounted().flush();
-
-		const banner = mounted().query('[aria-label="Notifications"]');
-		assert.ok(
-			banner,
-			"a checker that failed to start is on screen, not silent",
-		);
-		assert.match(banner.textContent ?? "", /Spellcheck stopped/);
-		assert.match(banner.textContent ?? "", /Spellcheck for en is off/);
-		assert.match(banner.textContent ?? "", /checker stopped running/);
-
-		const report = banner.querySelector<HTMLAnchorElement>("a[href]");
-		assert.ok(report, "the failure carries a way to report it");
-		const href = new URL(report.href);
-		assert.match(href.href, /github\.com\/.+\/issues\/new\?/);
-		assert.match(href.searchParams.get("body") ?? "", new RegExp(FAILURE));
-
-		const editable = mounted().query("[data-testid=compose-body]");
-		assert.ok(editable, "the writing surface is mounted");
-		assert.equal(
-			editable.getAttribute("spellcheck"),
-			"true",
-			"the browser checks the message when ours cannot",
-		);
-	});
-});

package/src/components/compose/compose-spellcheck.test.ts

@@ -1,157 +0,0 @@
-/**
- * What the composer hands the editor (#707): a worker opened for the language
- * the message is being written in, and a failure nobody has to guess at.
- *
- * The two ways checking stops look identical on screen — no squiggles — and
- * mean opposite things. A language with no dictionary is expected, and the
- * browser carries on checking. A checker that was supposed to start and did not
- * is a fault, and it is named on screen with a way to report it.
- */
-
-import assert from "node:assert/strict";
-import { afterEach, describe, it } from "node:test";
-import type { PushErrorInput } from "../ui/error-banners.js";
-import { composeSpellcheck, spellcheckFailure } from "./compose-spellcheck.js";
-
-interface WorkerMessage {
-	readonly type: string;
-	readonly language?: string;
-	readonly base?: string;
-}
-
-const opened: { url: string; messages: WorkerMessage[] }[] = [];
-
-/**
- * What `REMIT_SPELLCHECK_LANGUAGES` writes into the bundle. Nothing defines it
- * outside a Vite build, so a test that wants a build carrying English says so.
- */
-const built = (...tags: string[]): void => {
-	Object.defineProperty(globalThis, "__REMIT_SPELLCHECK_LANGUAGES__", {
-		value: tags,
-		configurable: true,
-	});
-};
-
-class FakeWorker {
-	readonly messages: WorkerMessage[] = [];
-	constructor(url: URL) {
-		opened.push({ url: url.href, messages: this.messages });
-	}
-	postMessage(message: WorkerMessage): void {
-		this.messages.push(message);
-	}
-	addEventListener(): void {}
-	terminate(): void {}
-}
-
-const withWorker = <T>(run: () => Promise<T>): Promise<T> => {
-	Object.defineProperty(globalThis, "Worker", {
-		value: FakeWorker,
-		configurable: true,
-	});
-	return run();
-};
-
-afterEach(() => {
-	opened.length = 0;
-	built();
-});
-
-describe("the checker the composer opens", () => {
-	it("asks the worker for the language the message is in", async () => {
-		built("en", "en-GB", "nl");
-		const provider = await withWorker(() =>
-			composeSpellcheck(() => undefined).provider("en"),
-		);
-
-		assert.equal(
-			provider?.language,
-			"en",
-			"plain English is checked against English, not a region's",
-		);
-		assert.equal(opened.length, 1);
-		assert.match(opened[0].url, /rich-text-spellcheck-worker/);
-		assert.deepEqual(
-			opened[0].messages,
-			[
-				{
-					type: "open",
-					language: "en",
-					base: "http://localhost/spellcheck/",
-					bytesExpected: 0,
-				},
-			],
-			"the worker is told an absolute place to fetch from, resolved against the page",
-		);
-		provider?.close();
-	});
-
-	it("starts no worker for a language the build carries no words for", async () => {
-		built("en", "en-GB", "nl");
-		const provider = await withWorker(() =>
-			composeSpellcheck(() => undefined).provider("de"),
-		);
-
-		assert.equal(provider, null);
-		assert.deepEqual(opened, []);
-	});
-
-	it("reports nothing while the checker is coming up or running", () => {
-		const reported: PushErrorInput[] = [];
-		const { onStatus } = composeSpellcheck((input) => reported.push(input));
-
-		onStatus?.({
-			state: "opening",
-			language: "en",
-			bytesLoaded: 65_536,
-			bytesTotal: 167_936,
-		});
-		onStatus?.({ state: "ready", language: "en" });
-		onStatus?.({ state: "unavailable", language: "de" });
-
-		assert.deepEqual(reported, []);
-	});
-
-	it("says what stopped, and offers the report prefilled", () => {
-		const reported: PushErrorInput[] = [];
-		const { onStatus } = composeSpellcheck((input) => reported.push(input));
-
-		onStatus?.({
-			state: "failed",
-			language: "en",
-			reason: "worker",
-			detail: "Worker is not defined",
-		});
-
-		assert.equal(reported.length, 1);
-		const banner = reported[0];
-		assert.match(banner.detail ?? "", /Spellcheck for en is off/);
-		assert.match(banner.detail ?? "", /browser is checking this message/);
-		assert.match(banner.detail ?? "", /Worker is not defined/);
-		const report = new URL(banner.action?.href ?? "https://example.invalid");
-		assert.match(report.href, /github\.com\/.+\/issues\/new\?/);
-		assert.match(
-			report.searchParams.get("body") ?? "",
-			/Worker is not defined/,
-		);
-		assert.match(report.searchParams.get("title") ?? "", /Spellcheck stopped/);
-	});
-
-	it("names the download and the engine apart from the worker", () => {
-		const download = spellcheckFailure({
-			state: "failed",
-			language: "en",
-			reason: "download",
-			detail: "404",
-		});
-		const engine = spellcheckFailure({
-			state: "failed",
-			language: "en",
-			reason: "engine",
-			detail: "bad wasm",
-		});
-
-		assert.match(download.detail ?? "", /dictionary could not be downloaded/);
-		assert.match(engine.detail ?? "", /checker could not start/);
-	});
-});

package/src/components/compose/compose-spellcheck.ts

@@ -1,56 +0,0 @@
-/**
- * The checker the composer writes against. The engine runs in a worker, opened
- * once per language and taken down with the surface, and the module holding it
- * is loaded on demand so the worker chunk stays out of every other screen.
- *
- * A language with no dictionary is not a failure: the provider answers null,
- * the editor leaves the browser's own checking switched on, and the writer
- * still gets underlines. A checker that was supposed to come up and did not is
- * a failure, and it says so — an editor that has quietly stopped marking
- * anything reads exactly like text with nothing wrong in it.
- */
-
-import type { ProviderStatus, SpellcheckOptions } from "@remit/ui/rich-text";
-import { buildBugReportContext, buildGitHubIssueUrl } from "@/lib/bug-report";
-import type { PushErrorInput } from "../ui/error-banners.js";
-
-const WHAT_FAILED: Record<"download" | "engine" | "worker", string> = {
-	download: "its dictionary could not be downloaded",
-	engine: "the checker could not start",
-	worker: "the checker stopped running",
-};
-
-export const spellcheckFailure = (
-	status: Extract<ProviderStatus, { state: "failed" }>,
-): PushErrorInput => {
-	const summary = `Spellcheck for ${status.language} is off: ${WHAT_FAILED[status.reason]}.`;
-	return {
-		severity: "warning",
-		title: "Spellcheck stopped",
-		detail: `${summary} Your browser is checking this message instead. ${status.detail}`,
-		action: {
-			label: "Report this",
-			href: buildGitHubIssueUrl(
-				buildBugReportContext({
-					title: `Spellcheck stopped: ${status.reason} (${status.language})`,
-					errorMessage: `${summary} ${status.detail}`,
-				}),
-			),
-		},
-	};
-};
-
-export const composeSpellcheck = (
-	report: (input: PushErrorInput) => void,
-): SpellcheckOptions => ({
-	provider: async (language) => {
-		const { openSpellcheckWorker } = await import(
-			"@remit/ui/spellcheck-worker"
-		);
-		return openSpellcheckWorker(language);
-	},
-	onStatus: (status) => {
-		if (status.state !== "failed") return;
-		report(spellcheckFailure(status));
-	},
-});