@remit/web-client 0.0.324 → 0.0.326

package/src/routes/settings/-accounts.test.ts

@@ -1,340 +0,0 @@
-// biome-ignore lint/style/useFilenamingConvention: TanStack Router convention
-import assert from "node:assert";
-import { afterEach, describe, mock, test } from "node:test";
-import {
-	type AnyRoute,
-	type AnyRouter,
-	createMemoryHistory,
-	createRootRoute,
-	createRouter,
-	Outlet,
-	RouterProvider,
-} from "@tanstack/react-router";
-import { act, createElement } from "react";
-import {
-	REDIRECT_STALL_MESSAGE,
-	REDIRECT_STALL_MS,
-} from "@/hooks/useRedirectEnded";
-import { createDomHarness, type DomHarness } from "@/test-support/dom";
-import { type HttpMock, mockFetch } from "@/test-support/http";
-import { mapOauthError, Route } from "./accounts.tsx";
-
-describe("mapOauthError", () => {
-	test("access_denied returns cancellation message", () => {
-		assert.strictEqual(
-			mapOauthError("access_denied"),
-			"You cancelled the sign-in.",
-		);
-	});
-
-	test("ACCESS_DENIED is case-insensitive", () => {
-		assert.strictEqual(
-			mapOauthError("ACCESS_DENIED"),
-			"You cancelled the sign-in.",
-		);
-	});
-
-	test("scope_not_granted sends the person back through the consent", () => {
-		assert.match(
-			mapOauthError("scope_not_granted"),
-			/did not grant access to every service you picked/,
-		);
-	});
-
-	test("consent_required returns admin consent message", () => {
-		const result = mapOauthError("consent_required");
-		assert.ok(
-			result.toLowerCase().includes("admin"),
-			`Expected admin hint, got: ${result}`,
-		);
-	});
-
-	test("admin_consent_required returns admin consent message", () => {
-		const result = mapOauthError("admin_consent_required");
-		assert.ok(
-			result.toLowerCase().includes("admin"),
-			`Expected admin hint, got: ${result}`,
-		);
-	});
-
-	test("interaction_required returns admin consent message", () => {
-		const result = mapOauthError("interaction_required");
-		assert.ok(
-			result.toLowerCase().includes("admin"),
-			`Expected admin hint, got: ${result}`,
-		);
-	});
-
-	test("imap_disabled returns IMAP hint", () => {
-		const result = mapOauthError("imap_disabled");
-		assert.ok(
-			result.toLowerCase().includes("imap"),
-			`Expected IMAP hint, got: ${result}`,
-		);
-	});
-
-	test("unknown code returns generic fallback with the code", () => {
-		const result = mapOauthError("some_random_error");
-		assert.ok(
-			result.includes("some_random_error"),
-			`Expected code in message, got: ${result}`,
-		);
-	});
-});
-
-/**
- * The Reconnect button and the redirect it starts (#646, PR #955).
- *
- * The busy state rides a latch, not the mutation settling, because
- * `window.location.assign` returns with the page still here. The latch needs an
- * end as well as a start: Back out of Microsoft's consent screen restores this
- * page with the account still asking to be re-authenticated, so nothing else
- * clears it and the button reads "Redirecting…" for good.
- */
-
-/** Same-origin and hash-only, so jsdom performs it rather than logging it. */
-const CONSENT_URL = "http://localhost/#microsoft-consent";
-
-const REAUTH_ACCOUNT = {
-	accountId: "acc-1",
-	email: "matthijs@ischen.nl",
-	displayName: "Matthijs",
-	authType: "oauthMicrosoft",
-	connectionState: "reauth_required",
-	syncedServices: ["Mail", "Calendar"],
-	grantedScopes: [],
-};
-
-// The router reads `self` at construction; the shared jsdom globals stop at
-// `window`.
-(globalThis as { self?: typeof globalThis }).self ??= globalThis;
-
-let harness: DomHarness | undefined;
-let http: HttpMock | undefined;
-
-const settle = async (dom: DomHarness): Promise<void> => {
-	for (let round = 0; round < 4; round += 1) {
-		await dom.flush();
-		await dom.wait(20);
-	}
-};
-
-/**
- * jsdom reports "prerender" unless it is pretending to be visual, and the
- * shared environment deliberately does not — so a spec that means "the window
- * is being looked at" has to say so.
- */
-const setVisibility = (state: "hidden" | "visible"): void => {
-	Object.defineProperty(document, "visibilityState", {
-		configurable: true,
-		get: () => state,
-	});
-};
-
-/** jsdom has no `PageTransitionEvent`; `persisted` is what the hook reads. */
-const pageShow = (persisted: boolean): Event => {
-	const event = new Event("pageshow");
-	Object.defineProperty(event, "persisted", { value: persisted });
-	return event;
-};
-
-/** The real route, mounted the way the generated tree mounts it. */
-const mountAccounts = async (
-	entry = "/settings/accounts",
-): Promise<DomHarness> => {
-	http = mockFetch((call) => {
-		if (call.path.endsWith("/oauth/microsoft/start")) {
-			return { authorizationUrl: CONSENT_URL };
-		}
-		if (call.path.endsWith("/config")) {
-			return { accounts: [REAUTH_ACCOUNT], mailboxes: [] };
-		}
-		return {};
-	});
-
-	const rootRoute = createRootRoute({ component: Outlet });
-	const accountsRoute = (
-		Route as unknown as { update: (options: unknown) => AnyRoute }
-	).update({
-		id: "/settings/accounts",
-		path: "/settings/accounts",
-		getParentRoute: () => rootRoute,
-	});
-	const routeTree = rootRoute.addChildren([
-		accountsRoute,
-	]) as unknown as AnyRoute;
-	const router = createRouter({
-		routeTree,
-		history: createMemoryHistory({ initialEntries: [entry] }),
-	}) as unknown as AnyRouter;
-	await router.load();
-
-	const mounted = createDomHarness();
-	harness = mounted;
-	mounted.renderApp(createElement(RouterProvider, { router }));
-	await settle(mounted);
-	return mounted;
-};
-
-/** `settle`, for a spec that has taken the clock over: tick instead of wait. */
-const settleOnMockedClock = async (dom: DomHarness): Promise<void> => {
-	for (let round = 0; round < 4; round += 1) {
-		await dom.flush();
-		await act(async () => {
-			mock.timers.tick(20);
-		});
-	}
-};
-
-const startReconnect = async (dom: DomHarness): Promise<void> => {
-	dom.click(dom.byText("button", "Reconnect"));
-	await settle(dom);
-};
-
-describe("the Reconnect button and the redirect it starts", () => {
-	afterEach(() => {
-		mock.timers.reset();
-		harness?.close();
-		harness = undefined;
-		http?.restore();
-		http = undefined;
-		Reflect.deleteProperty(document, "visibilityState");
-	});
-
-	test("asks Microsoft again for every service the account syncs", async () => {
-		const dom = await mountAccounts();
-		await startReconnect(dom);
-
-		assert.deepEqual(http?.to("/oauth/microsoft/start")[0]?.body, {
-			email: REAUTH_ACCOUNT.email,
-			services: ["Mail", "Calendar"],
-		});
-	});
-
-	test("goes busy and stays busy while the redirect is in flight", async () => {
-		const dom = await mountAccounts();
-		await startReconnect(dom);
-
-		assert.match(dom.text(), /Redirecting…/);
-
-		// A look at a window that never left is not the redirect ending.
-		setVisibility("visible");
-		dom.dispatch(dom.document, new Event("visibilitychange"));
-		dom.dispatch(dom.window, pageShow(false));
-		await settle(dom);
-
-		assert.match(dom.text(), /Redirecting…/);
-	});
-
-	test("states the failure when the redirect never leaves the page", async () => {
-		const dom = await mountAccounts();
-		// The stall timer is armed inside the click, so the clock has to be the
-		// mocked one before the button is pressed.
-		setVisibility("visible");
-		mock.timers.enable({ apis: ["setTimeout"] });
-		dom.click(dom.byText("button", "Reconnect"));
-		await settleOnMockedClock(dom);
-
-		assert.match(dom.text(), /Redirecting…/);
-
-		// No `pagehide` and no restore: the window stays where it is, being
-		// looked at, past the point where a redirect that is going to happen has
-		// happened.
-		await act(async () => {
-			mock.timers.tick(REDIRECT_STALL_MS);
-		});
-		await dom.flush();
-
-		assert.doesNotMatch(
-			dom.text(),
-			/Redirecting…/,
-			"an `assign` that never navigated held the button busy for good",
-		);
-		assert.ok(dom.byText("button", "Reconnect"));
-		assert.ok(
-			dom.text().includes(REDIRECT_STALL_MESSAGE),
-			"the button went live again without saying what failed",
-		);
-	});
-
-	test("re-arms when the restored page still needs re-authenticating", async () => {
-		const dom = await mountAccounts();
-		await startReconnect(dom);
-
-		dom.dispatch(dom.window, pageShow(true));
-		await settle(dom);
-
-		assert.doesNotMatch(
-			dom.text(),
-			/Redirecting…/,
-			"Back out of the consent screen left the button busy for good",
-		);
-		assert.ok(dom.byText("button", "Reconnect"));
-	});
-});
-
-describe("the Microsoft callback landing on the accounts page (#1183)", () => {
-	afterEach(() => {
-		harness?.close();
-		harness = undefined;
-		http?.restore();
-		http = undefined;
-	});
-
-	test("a reconnect that comes back connected ends on the granted screen", async () => {
-		const dom = await mountAccounts("/settings/accounts?connected=acc-1");
-		await dom.waitFor(
-			() => dom.text().includes("Connected matthijs@ischen.nl"),
-			"the granted screen",
-		);
-
-		assert.match(dom.text(), /Access granted/);
-		dom.click(dom.byText("button", "Go to inbox"));
-		await settle(dom);
-		assert.match(dom.text(), /Account connected successfully\./);
-	});
-
-	test("a reconnect Microsoft refused a service reopens that account, address filled", async () => {
-		const dom = await mountAccounts(
-			"/settings/accounts?oauthError=scope_not_granted&oauthEmail=matthijs%40ischen.nl&missingServices=Calendar",
-		);
-		await dom.waitFor(
-			() => dom.text().includes("Reconnect matthijs@ischen.nl"),
-			"the reconnect sign-in",
-		);
-
-		assert.match(dom.text(), /Microsoft did not grant access to Calendar\./);
-		assert.equal(
-			dom.query<HTMLInputElement>("#microsoft-email")?.value,
-			"matthijs@ischen.nl",
-		);
-		const choice = dom
-			.queryAll("fieldset")
-			.find((fieldset) =>
-				fieldset.textContent?.includes("What should Remit sync?"),
-			);
-		assert.ok(choice, "expected the service choice");
-		assert.deepEqual(
-			[
-				...choice.querySelectorAll<HTMLInputElement>("input[type=checkbox]"),
-			].map((box) => box.checked),
-			[true, true],
-		);
-	});
-
-	test("a new sign-in Microsoft refused a service reopens the add wizard", async () => {
-		const dom = await mountAccounts(
-			"/settings/accounts?oauthError=scope_not_granted&oauthEmail=new%40outlook.com&missingServices=Mail%2CCalendar",
-		);
-		await dom.waitFor(
-			() => dom.text().includes("did not grant access to Mail and Calendar"),
-			"the refused sign-in",
-		);
-
-		assert.doesNotMatch(dom.text(), /Reconnect new@outlook\.com/);
-		assert.equal(
-			dom.query<HTMLInputElement>("#microsoft-email")?.value,
-			"new@outlook.com",
-		);
-	});
-});

package/src/routes/settings/-filters.test.ts

@@ -1,209 +0,0 @@
-// biome-ignore lint/style/useFilenamingConvention: TanStack Router convention
-import assert from "node:assert/strict";
-import { afterEach, describe, it } from "node:test";
-import type { RemitImapFilterResponse } from "@remit/api-http-client/types.gen.ts";
-import { MailboxSyncStatus } from "@remit/domain-enums";
-import { createElement } from "react";
-import { createDomHarness, type DomHarness } from "../../test-support/dom";
-import { makeAccount, makeMailbox } from "../../test-support/fixtures";
-import { type HttpMock, mockFetch } from "../../test-support/http";
-import { AccountFilters } from "./filters.tsx";
-
-let harness: DomHarness | undefined;
-let http: HttpMock | undefined;
-
-afterEach(() => {
-	harness?.close();
-	harness = undefined;
-	http?.restore();
-	http = undefined;
-});
-
-const ACCOUNT_ID = "acc-1";
-
-const account = makeAccount({
-	accountId: ACCOUNT_ID,
-	folderAppointments: [
-		{ role: "Inbox", source: "Appointed", mailboxId: "mbx-inbox" },
-		{ role: "Drafts", source: "Appointed", mailboxId: "mbx-concepten" },
-		{ role: "Sent", source: "Appointed", mailboxId: "mbx-verzonden" },
-		{ role: "Archive", source: "Appointed", mailboxId: "mbx-archief" },
-	],
-});
-
-// Dutch leaf names for the appointed Drafts and Sent: only the appointment can
-// exclude them, so a name-based filter would not pass this. `Receipts` renamed
-// to `Bonnetjes`, and a second `Receipts` inside Travel, are what the
-// destination has to read and nest correctly.
-const mailboxes = [
-	makeMailbox({
-		mailboxId: "mbx-receipts",
-		fullPath: "INBOX/Receipts",
-		displayNameOverride: "Bonnetjes",
-	}),
-	makeMailbox({ mailboxId: "mbx-concepten", fullPath: "INBOX/Concepten" }),
-	makeMailbox({ mailboxId: "mbx-verzonden", fullPath: "INBOX/Verzonden" }),
-	makeMailbox({ mailboxId: "mbx-archief", fullPath: "INBOX/Archief" }),
-	makeMailbox({ mailboxId: "mbx-inbox", fullPath: "INBOX" }),
-	makeMailbox({ mailboxId: "mbx-travel", fullPath: "INBOX/Travel" }),
-	makeMailbox({
-		mailboxId: "mbx-travel-receipts",
-		fullPath: "INBOX/Travel/Receipts",
-	}),
-];
-
-const createdFolder = makeMailbox({
-	mailboxId: "mbx-created",
-	fullPath: "INBOX/Travel/Hotels",
-	syncStatus: MailboxSyncStatus.synced,
-});
-
-const filter: RemitImapFilterResponse = {
-	filterId: "f-1",
-	accountConfigId: ACCOUNT_ID,
-	name: "Receipts",
-	scope: "Standing",
-	state: "Active",
-	disabledReason: "None",
-	ruleChangedAt: 0,
-	actionChangedAt: 0,
-	matchOperator: "And",
-	literalClauses: [{ field: "From", value: "receipts@stripe.com" }],
-	actionLabelId: "None",
-	actionMailboxId: "mbx-receipts",
-	createdAt: 0,
-	updatedAt: 0,
-};
-
-/**
- * Wait on the DOM answering rather than on a turn count: how much React work
- * lands per turn varies with the machine, so a fixed flush is a flake and a
- * ceiling is what keeps a surface that never renders a failure, not a hang.
- */
-const settleUntil = async (
-	dom: DomHarness,
-	done: () => boolean,
-): Promise<void> => {
-	const deadline = Date.now() + 5000;
-	for (;;) {
-		await dom.flush();
-		if (done() || Date.now() >= deadline) return;
-		await dom.wait(10);
-	}
-};
-
-const rowLabels = (dom: DomHarness): string[] =>
-	dom
-		.queryAll("[role=treeitem]")
-		.map((row) => row.getAttribute("aria-label") ?? "");
-
-const buttonWithText = (
-	dom: DomHarness,
-	text: string,
-): HTMLElement | undefined =>
-	dom
-		.queryAll<HTMLButtonElement>("button")
-		.find((button) => button.textContent?.trim() === text);
-
-/** The create form's name field, found by the label the kit gives it. */
-const folderNameField = (dom: DomHarness): HTMLInputElement | undefined => {
-	const label = dom
-		.queryAll<HTMLLabelElement>("label")
-		.find((node) => node.textContent?.trim() === "Folder name");
-	const id = label?.getAttribute("for");
-	return id
-		? ((dom.query(`input[id="${id}"]`) as HTMLInputElement | null) ?? undefined)
-		: undefined;
-};
-
-/**
- * Opens the filter for editing and asks its destination field for the tree. The
- * filter already moves matches into `INBOX/Receipts`, so the tree opens on the
- * branch holding it.
- */
-const openDestinationTree = async (
-	posted?: Record<string, unknown>[],
-): Promise<DomHarness> => {
-	const live = [...mailboxes];
-	http = mockFetch((call) => {
-		if (call.path.endsWith("/mailboxes") && call.method === "POST") {
-			posted?.push(call.body ?? {});
-			live.push(createdFolder);
-			return createdFolder;
-		}
-		if (call.path.endsWith("/mailboxes")) return { items: live };
-		if (call.path.endsWith("/filters")) return { items: [filter] };
-		if (call.path.endsWith("/labels")) return { items: [] };
-		if (call.path.endsWith("/organize/preview"))
-			return { matchedCount: 0, messageIds: [] };
-		return {};
-	});
-	const dom = createDomHarness();
-	harness = dom;
-	dom.renderApp(createElement(AccountFilters, { account }));
-	await settleUntil(
-		dom,
-		() => !!dom.query('[aria-label="Edit filter Receipts"]'),
-	);
-	dom.click(dom.byLabel("Edit filter Receipts"));
-	await settleUntil(dom, () => !!buttonWithText(dom, "Choose a folder"));
-	const choose = buttonWithText(dom, "Choose a folder");
-	assert.ok(choose, "the destination field offers the folder tree");
-	dom.click(choose);
-	await settleUntil(dom, () => rowLabels(dom).length > 0);
-	return dom;
-};
-
-const openFolder = async (dom: DomHarness, label: string): Promise<void> => {
-	dom.click(dom.byLabel(`Move to ${label}`));
-	await dom.flush();
-};
-
-describe("Settings › Filters — move destination (#236, #540, #549)", () => {
-	it("offers every folder but the appointed Drafts and Sent", async () => {
-		const dom = await openDestinationTree();
-		assert.deepEqual(rowLabels(dom), [
-			"Move to INBOX",
-			"Move to Archief",
-			"Move to Bonnetjes",
-			"Move to Travel",
-		]);
-	});
-
-	it("reads a renamed folder as the name the account gave it", async () => {
-		const dom = await openDestinationTree();
-		assert.ok(rowLabels(dom).includes("Move to Bonnetjes"));
-		assert.ok(
-			!rowLabels(dom).some((label) => label.includes("Receipts")),
-			"the provider leaf is never what the row reads as",
-		);
-	});
-
-	it("nests a folder under the one holding it", async () => {
-		const dom = await openDestinationTree();
-		await openFolder(dom, "Travel");
-		const nested = dom
-			.queryAll("[role=treeitem]")
-			.filter((row) => row.getAttribute("aria-label") === "Move to Receipts");
-		assert.equal(nested.length, 1);
-		assert.equal(nested[0].getAttribute("aria-level"), "3");
-	});
-
-	it("creates a folder inside the one the tree is looking at", async () => {
-		const posted: Record<string, unknown>[] = [];
-		const dom = await openDestinationTree(posted);
-		await openFolder(dom, "Travel");
-		dom.click(dom.byLabel("New folder inside Travel"));
-		await dom.flush();
-		const name = folderNameField(dom);
-		assert.ok(name, "the folder name field is on screen");
-		dom.type(name, "Hotels");
-		const create = buttonWithText(dom, "Create folder");
-		assert.ok(create, "the create button is on screen");
-		dom.click(create);
-		await settleUntil(dom, () => posted.length > 0);
-		assert.deepEqual(posted, [
-			{ fullPath: "INBOX/Travel/Hotels", namespaceType: "personal" },
-		]);
-	});
-});

package/src/routes/settings/-senders-remove-flag.render.test.ts

@@ -1,105 +0,0 @@
-// biome-ignore lint/style/useFilenamingConvention: TanStack Router convention
-/**
- * Issue #615: the remove control in Settings > Senders sent `{ flags: {
- * [group]: null } }`. The server's openapi-backend validator doesn't honour
- * `nullable: true` on the `allOf`-wrapped flag schema TypeSpec emits for
- * `TrustedFlag | null`, so it rejects the null form as invalid — the same gap
- * `useToggleTrusted` already works around by sending `{ value: false }`
- * instead of `null`. This mock server enforces that same rejection, so the
- * pre-fix `null` body surfaces as a failed mutation (the row never clears)
- * rather than a silently accepted no-op.
- */
-
-import assert from "node:assert/strict";
-import { afterEach, describe, it } from "node:test";
-import type { RemitImapAddressResponse } from "@remit/api-http-client/types.gen.ts";
-import { createElement } from "react";
-import { createDomHarness, type DomHarness } from "@/test-support/dom";
-import {
-	type HttpCall,
-	type HttpMock,
-	httpError,
-	mockFetch,
-} from "@/test-support/http";
-import { SearchGroupPane } from "./senders";
-
-const ADDRESS_ID = "addr-1";
-
-let harness: DomHarness | undefined;
-let http: HttpMock | undefined;
-let mutedFlag: { value: boolean; setAt: number } | undefined;
-
-afterEach(() => {
-	harness?.close();
-	harness = undefined;
-	http?.restore();
-	http = undefined;
-	mutedFlag = undefined;
-});
-
-const address = (): RemitImapAddressResponse =>
-	({
-		addressId: ADDRESS_ID,
-		displayName: "Alex Rivera",
-		normalizedEmail: "alex@example.com",
-		flags: mutedFlag ? { muted: mutedFlag } : {},
-	}) as RemitImapAddressResponse;
-
-const readFlagsPatch = (call: HttpCall): unknown => {
-	const body = call.body as { flags?: Record<string, unknown> } | undefined;
-	return body?.flags?.muted;
-};
-
-const respond = (call: HttpCall): unknown => {
-	if (call.method === "GET" && call.path === "/addresses/search") {
-		return { items: [address()] };
-	}
-	if (call.method === "PATCH" && call.path === `/addresses/${ADDRESS_ID}`) {
-		const patch = readFlagsPatch(call);
-		if (patch === null) {
-			return httpError(400, "flags.muted: nullable removal is not accepted");
-		}
-		mutedFlag = patch as { value: boolean; setAt: number };
-		return address();
-	}
-	return {};
-};
-
-const mount = async (): Promise<void> => {
-	mutedFlag = { value: true, setAt: 1_700_000_000_000 };
-	http = mockFetch(respond);
-	harness = createDomHarness();
-	harness.renderApp(
-		createElement(SearchGroupPane, { group: "muted", query: "alex" }),
-	);
-	await harness.waitFor(
-		() => harness?.text().includes("alex@example.com") ?? false,
-	);
-};
-
-describe("removing a sender flag (#615)", () => {
-	it("sends a request body the server accepts, and the flag clears from the list", async () => {
-		await mount();
-		if (!harness) throw new Error("nothing mounted");
-
-		harness.click(harness.byLabel("Remove muted flag"));
-
-		await harness.waitFor(
-			() => !(harness?.text().includes("alex@example.com") ?? true),
-			"the unmuted sender to drop out of the muted list",
-		);
-
-		const patches = (http?.calls ?? []).filter(
-			(call) =>
-				call.method === "PATCH" && call.path === `/addresses/${ADDRESS_ID}`,
-		);
-		assert.equal(patches.length, 1);
-		const sentFlag = readFlagsPatch(patches[0]) as
-			| { value: boolean; setAt: number }
-			| null
-			| undefined;
-		assert.notEqual(sentFlag, null, "the server rejects a null flag removal");
-		assert.equal(sentFlag?.value, false);
-		assert.equal(typeof sentFlag?.setAt, "number");
-	});
-});