@remit/web-client 0.0.95 → 0.0.96

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.95",
+  "version": "0.0.96",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

package/src/hooks/useInitialSyncProgress.render.test.ts

@@ -26,12 +26,15 @@ import {
 
 let harness: DomHarness | undefined;
 let http: HttpMock | undefined;
+let restoreFetch: (() => void) | undefined;
 
 afterEach(() => {
 	harness?.close();
 	harness = undefined;
 	http?.restore();
 	http = undefined;
+	restoreFetch?.();
+	restoreFetch = undefined;
 });
 
 interface MailboxProgress {
@@ -72,22 +75,83 @@ const accountOf = (path: string): string => path.split("/")[2] ?? "";
 const progress = (dom: DomHarness): InitialSyncProgress =>
 	JSON.parse(dom.text());
 
-const mount = async (
+const UNKNOWN: InitialSyncProgress = {
+	syncing: false,
+	resolved: false,
+	synced: 0,
+	total: 0,
+};
+
+/** How long the hook gets to answer a request that is already in hand. */
+const RESOLVE_CEILING_MS = 2000;
+/** How long the hook is watched for an answer, or a request, it must not give. */
+const QUIET_WINDOW_MS = 500;
+const STEP_MS = 10;
+
+/**
+ * Let real time pass until the hook itself says `done`, or the ceiling runs out.
+ *
+ * Every wait in this file is a question put to the hook rather than a count of
+ * turns or a sleep the answer is assumed to fit inside: the poll and the answer
+ * deadline run on real timers, so a loaded machine changes how much work lands
+ * per turn, and the ceiling is what keeps a hook that never answers a failure
+ * instead of a hang.
+ */
+const settleUntil = async (
+	dom: DomHarness,
+	done: () => boolean,
+	ceilingMs: number,
+): Promise<void> => {
+	const deadline = Date.now() + ceilingMs;
+	for (;;) {
+		await dom.flush();
+		if (done() || Date.now() >= deadline) return;
+		await dom.wait(STEP_MS);
+	}
+};
+
+const mount = (
 	accountIds: string[],
 	answer: (accountId: string) => unknown,
 	enabled = true,
-): Promise<DomHarness> => {
+): DomHarness => {
 	http = mockFetch((call) => answer(accountOf(call.path)));
 	harness = createDomHarness();
 	harness.renderApp(createElement(Probe, { accountIds, enabled }));
-	// Settle on the hook's own answer rather than on a fixed number of turns:
-	// a query that lands on a timer instead of a microtask needs real time to
-	// pass, and a loaded machine is where that difference shows up.
-	for (let turn = 0; turn < 20; turn += 1) {
-		await harness.flush();
-		if (progress(harness).resolved) break;
-		await harness.wait(1);
-	}
+	return harness;
+};
+
+const mountResolved = async (
+	accountIds: string[],
+	answer: (accountId: string) => unknown,
+): Promise<DomHarness> => {
+	const dom = mount(accountIds, answer);
+	await settleUntil(dom, () => progress(dom).resolved, RESOLVE_CEILING_MS);
+	return dom;
+};
+
+/** `acc-2` never answers at all: its request is left hanging for good. */
+const mountSilentAccount = (
+	answerOfAccountOne: RemitImapAccountSyncStatusResponse,
+): DomHarness => {
+	const original = globalThis.fetch;
+	restoreFetch = () => {
+		globalThis.fetch = original;
+	};
+	globalThis.fetch = ((input: RequestInfo | URL) => {
+		const url = input instanceof Request ? input.url : String(input);
+		if (url.includes("acc-2")) return new Promise<Response>(() => {});
+		return Promise.resolve(
+			new Response(JSON.stringify(answerOfAccountOne), {
+				status: 200,
+				headers: { "content-type": "application/json" },
+			}),
+		);
+	}) as typeof globalThis.fetch;
+	harness = createDomHarness();
+	harness.renderApp(
+		createElement(Probe, { accountIds: ["acc-1", "acc-2"], enabled: true }),
+	);
 	return harness;
 };
 
@@ -112,7 +176,7 @@ describe("isSyncingPhase", () => {
 
 describe("useInitialSyncProgress", () => {
 	it("reports syncing with the counts of the accounts still syncing", async () => {
-		const dom = await mount(["acc-1"], (accountId) =>
+		const dom = await mountResolved(["acc-1"], (accountId) =>
 			status(accountId, "syncing_inbox", [
 				{ synced: 40, total: 100 },
 				{ synced: 10, total: 60 },
@@ -127,7 +191,7 @@ describe("useInitialSyncProgress", () => {
 	});
 
 	it("leaves out the counts of an account that has finished", async () => {
-		const dom = await mount(["acc-1", "acc-2"], (accountId) =>
+		const dom = await mountResolved(["acc-1", "acc-2"], (accountId) =>
 			accountId === "acc-1"
 				? status(accountId, "syncing_inbox", [{ synced: 40, total: 100 }])
 				: status(accountId, "complete", [{ synced: 900, total: 900 }]),
@@ -141,7 +205,7 @@ describe("useInitialSyncProgress", () => {
 	});
 
 	it("resolves to not-syncing once every account is done", async () => {
-		const dom = await mount(["acc-1", "acc-2"], (accountId) =>
+		const dom = await mountResolved(["acc-1", "acc-2"], (accountId) =>
 			status(accountId, "complete", [{ synced: 900, total: 900 }]),
 		);
 		assert.deepEqual(progress(dom), {
@@ -153,7 +217,7 @@ describe("useInitialSyncProgress", () => {
 	});
 
 	it("counts an unreachable account as answered rather than holding the list in limbo", async () => {
-		const dom = await mount(["acc-1", "acc-2"], (accountId) =>
+		const dom = await mountResolved(["acc-1", "acc-2"], (accountId) =>
 			accountId === "acc-1"
 				? status(accountId, "syncing_inbox", [{ synced: 5, total: 50 }])
 				: httpError(503),
@@ -167,39 +231,17 @@ describe("useInitialSyncProgress", () => {
 	it("knows nothing until every account has answered", async () => {
 		// One account answers, the other never does — the hook must not report on
 		// the half it has.
-		const original = globalThis.fetch;
-		try {
-			globalThis.fetch = ((input: RequestInfo | URL) => {
-				const url = input instanceof Request ? input.url : String(input);
-				if (url.includes("acc-2")) return new Promise<Response>(() => {});
-				return Promise.resolve(
-					new Response(
-						JSON.stringify(
-							status("acc-1", "syncing_inbox", [{ synced: 5, total: 50 }]),
-						),
-						{ status: 200, headers: { "content-type": "application/json" } },
-					),
-				);
-			}) as typeof globalThis.fetch;
-			harness = createDomHarness();
-			harness.renderApp(
-				createElement(Probe, { accountIds: ["acc-1", "acc-2"], enabled: true }),
-			);
-			await harness.flush();
-			await harness.flush();
-			assert.deepEqual(progress(harness), {
-				syncing: false,
-				resolved: false,
-				synced: 0,
-				total: 0,
-			});
-		} finally {
-			globalThis.fetch = original;
-		}
+		const dom = mountSilentAccount(
+			status("acc-1", "syncing_inbox", [{ synced: 5, total: 50 }]),
+		);
+
+		await settleUntil(dom, () => progress(dom).resolved, QUIET_WINDOW_MS);
+
+		assert.deepEqual(progress(dom), UNKNOWN);
 	});
 
 	it("answers immediately, and never syncing, for no accounts at all", async () => {
-		const dom = await mount([], () => ({}));
+		const dom = await mountResolved([], () => ({}));
 		assert.deepEqual(progress(dom), {
 			syncing: false,
 			resolved: true,
@@ -211,24 +253,28 @@ describe("useInitialSyncProgress", () => {
 
 	it("stops asking once every account has answered and none is syncing", async () => {
 		// The caught-up user's answer cannot change by being asked again.
-		const dom = await mount(["acc-1", "acc-2"], (accountId) =>
+		const dom = await mountResolved(["acc-1", "acc-2"], (accountId) =>
 			status(accountId, "complete"),
 		);
 		const asked = http?.calls.length ?? 0;
 		assert.equal(asked, 2);
 
-		await dom.wait(POLL_MS + 500);
+		await settleUntil(
+			dom,
+			() => (http?.calls.length ?? 0) > asked,
+			POLL_MS + QUIET_WINDOW_MS,
+		);
 
 		assert.equal(http?.calls.length, asked);
 		assert.equal(progress(dom).resolved, true);
 	});
 
 	it("keeps asking while an account is still syncing", async () => {
-		const dom = await mount(["acc-1"], (accountId) =>
+		const dom = await mountResolved(["acc-1"], (accountId) =>
 			status(accountId, "syncing_inbox", [{ synced: 5, total: 50 }]),
 		);
 
-		await dom.wait(POLL_MS + 500);
+		await settleUntil(dom, () => (http?.calls.length ?? 0) > 1, POLL_MS * 3);
 
 		assert.ok(
 			(http?.calls.length ?? 0) > 1,
@@ -237,50 +283,31 @@ describe("useInitialSyncProgress", () => {
 	});
 
 	it("answers without an account that never responds", async () => {
-		const original = globalThis.fetch;
-		try {
-			globalThis.fetch = ((input: RequestInfo | URL) => {
-				const url = input instanceof Request ? input.url : String(input);
-				if (url.includes("acc-2")) return new Promise<Response>(() => {});
-				return Promise.resolve(
-					new Response(JSON.stringify(status("acc-1", "complete")), {
-						status: 200,
-						headers: { "content-type": "application/json" },
-					}),
-				);
-			}) as typeof globalThis.fetch;
-			harness = createDomHarness();
-			harness.renderApp(
-				createElement(Probe, { accountIds: ["acc-1", "acc-2"], enabled: true }),
-			);
-			await harness.flush();
-			assert.equal(progress(harness).resolved, false);
-
-			await harness.wait(ANSWER_DEADLINE_MS + 500);
-
-			assert.deepEqual(progress(harness), {
-				syncing: false,
-				resolved: true,
-				synced: 0,
-				total: 0,
-			});
-		} finally {
-			globalThis.fetch = original;
-		}
-	});
+		const dom = mountSilentAccount(status("acc-1", "complete"));
 
-	it("asks nothing and claims nothing while disabled", async () => {
-		const dom = await mount(
-			["acc-1"],
-			() => status("acc-1", "syncing_inbox"),
-			false,
+		await settleUntil(dom, () => progress(dom).resolved, QUIET_WINDOW_MS);
+		assert.equal(progress(dom).resolved, false);
+
+		await settleUntil(
+			dom,
+			() => progress(dom).resolved,
+			ANSWER_DEADLINE_MS * 2,
 		);
+
 		assert.deepEqual(progress(dom), {
 			syncing: false,
-			resolved: false,
+			resolved: true,
 			synced: 0,
 			total: 0,
 		});
+	});
+
+	it("asks nothing and claims nothing while disabled", async () => {
+		const dom = mount(["acc-1"], () => status("acc-1", "syncing_inbox"), false);
+
+		await settleUntil(dom, () => progress(dom).resolved, QUIET_WINDOW_MS);
+
+		assert.deepEqual(progress(dom), UNKNOWN);
 		assert.deepEqual(http?.calls ?? [], []);
 	});
 });