@remit/web-client 0.0.52 → 0.0.54

package/src/components/onboarding/OnboardingWizard.flow.test.ts

@@ -0,0 +1,292 @@
+/**
+ * Walking the onboarding wizard end to end. The flow is the product here: a
+ * first-run user gets from "welcome" to a syncing account without ever seeing
+ * a server setting they have to know, and when the connection test fails the
+ * wizard sends them back to the step that can fix it — credentials for a
+ * rejected password, servers for an unreachable host.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, beforeEach, describe, it } from "node:test";
+import { createElement } from "react";
+import { createDomHarness, type DomHarness } from "../../test-support/dom";
+import { type HttpMock, mockFetch } from "../../test-support/http";
+import { OnboardingWizard } from "./OnboardingWizard";
+
+let harness: DomHarness | undefined;
+let http: HttpMock;
+
+interface TestConnectionResult {
+	imapSuccess: boolean;
+	smtpSuccess: boolean;
+	imapError?: string;
+	smtpError?: string;
+}
+
+const OK: TestConnectionResult = { imapSuccess: true, smtpSuccess: true };
+
+interface Backend {
+	test?: TestConnectionResult;
+	syncPhase?: string;
+	lastError?: string;
+	mailboxCountTotal?: number;
+	mailboxCountSynced?: number;
+}
+
+const completed: string[] = [];
+const cancelled: string[] = [];
+
+const start = (backend: Backend = {}, skipWelcome = false): DomHarness => {
+	http = mockFetch((call) => {
+		if (call.path === "/accounts/test-connection") return backend.test ?? OK;
+		if (call.path === "/accounts") return { accountId: "acc-new" };
+		if (call.path === "/config") {
+			return {
+				accounts: [{ accountId: "acc-new", lastError: backend.lastError }],
+				mailboxes: [],
+			};
+		}
+		if (call.path.endsWith("/sync/status")) {
+			return {
+				accountId: "acc-new",
+				syncPhase: backend.syncPhase ?? "complete",
+				mailboxCountTotal: backend.mailboxCountTotal ?? 4,
+				mailboxCountSynced: backend.mailboxCountSynced ?? 4,
+				mailboxes: [
+					{
+						mailboxId: "mbx-inbox",
+						fullPath: "INBOX",
+						messagesTotal: 120,
+						messagesSynced: 120,
+					},
+				],
+			};
+		}
+		return {};
+	});
+	harness = createDomHarness();
+	harness.renderApp(
+		createElement(OnboardingWizard, {
+			skipWelcome,
+			onComplete: (accountId: string) => completed.push(accountId),
+			onCancel: () => cancelled.push("cancelled"),
+		}),
+	);
+	return harness;
+};
+
+beforeEach(() => {
+	completed.length = 0;
+	cancelled.length = 0;
+});
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http.restore();
+});
+
+/** The wizard's server fields carry generated ids; the placeholder is stable. */
+const imapHostField = (dom: DomHarness): HTMLInputElement => {
+	const input = dom.query<HTMLInputElement>(
+		'input[placeholder="imap.example.com"]',
+	);
+	assert.ok(input, "expected the IMAP host field");
+	return input;
+};
+
+const clickText = (dom: DomHarness, text: string): void => {
+	dom.click(dom.byText("button", text));
+};
+
+/** Welcome → Connector → Address, with an address the provider table knows. */
+const walkToServers = async (
+	dom: DomHarness,
+	email = "alice@fastmail.com",
+): Promise<void> => {
+	clickText(dom, "Add your first account");
+	clickText(dom, "Continue");
+	const emailField = dom.query<HTMLInputElement>("#onboarding-email");
+	assert.ok(emailField);
+	dom.type(emailField, email);
+	clickText(dom, "Continue");
+	await dom.flush();
+};
+
+const walkToTest = async (dom: DomHarness): Promise<void> => {
+	await walkToServers(dom);
+	clickText(dom, "Continue");
+	const password = dom.query<HTMLInputElement>("#credentials-password");
+	assert.ok(password);
+	dom.type(password, "app-password");
+	clickText(dom, "Test connection");
+	await dom.flush();
+	// The test step stages IMAP then SMTP on a short delay before it settles.
+	await dom.wait(500);
+};
+
+/** A verified connection carries on to the sync step on its own, after a beat. */
+const walkToSync = async (dom: DomHarness): Promise<void> => {
+	await walkToTest(dom);
+	await dom.wait(900);
+	// Creation resolves, then the sync-status poll behind it.
+	for (let round = 0; round < 4; round += 1) {
+		await dom.flush();
+		await dom.wait(20);
+	}
+};
+
+describe("OnboardingWizard — the first-run path", () => {
+	it("opens on the welcome step with no server settings in sight", () => {
+		const dom = start();
+		assert.match(dom.text(), /Welcome to Remit/);
+		assert.equal(dom.query("#onboarding-email"), null);
+	});
+
+	it("starts at the connector picker when it is opened from Settings", () => {
+		const dom = start({}, true);
+		assert.match(dom.text(), /How does this account connect/);
+	});
+
+	it("fills the server settings from the address alone", async () => {
+		const dom = start();
+		await walkToServers(dom);
+
+		assert.match(dom.text(), /Confirm server settings/);
+		assert.equal(imapHostField(dom).value, "imap.fastmail.com");
+	});
+
+	it("falls back to a guess for a domain nobody has heard of", async () => {
+		const dom = start();
+		await walkToServers(dom, "alice@unheard-of.example");
+
+		assert.equal(imapHostField(dom).value, "imap.unheard-of.example");
+	});
+
+	it("refuses an address that is not one, without leaving the step", async () => {
+		const dom = start();
+		clickText(dom, "Add your first account");
+		clickText(dom, "Continue");
+		const emailField = dom.query<HTMLInputElement>("#onboarding-email");
+		assert.ok(emailField);
+		dom.type(emailField, "not-an-address");
+		clickText(dom, "Continue");
+		await dom.flush();
+
+		assert.match(dom.text(), /Enter a valid email address/);
+		assert.ok(dom.query("#onboarding-email"));
+	});
+
+	it("tests the connection with what the user entered", async () => {
+		const dom = start();
+		await walkToTest(dom);
+
+		const [tested] = http.to("/accounts/test-connection");
+		assert.ok(tested);
+		assert.equal(tested.body?.imapHost, "imap.fastmail.com");
+		assert.equal(tested.body?.password, "app-password");
+		assert.equal(tested.body?.username, "alice@fastmail.com");
+		assert.match(dom.text(), /Connection verified/);
+	});
+
+	it("creates the account from what the wizard collected", async () => {
+		const dom = start();
+		await walkToSync(dom);
+
+		const [created] = http.calls.filter(
+			(call) => call.path === "/accounts" && call.method === "POST",
+		);
+		assert.ok(created, "a verified connection carries on to creation");
+		assert.equal(created.body?.email, "alice@fastmail.com");
+		assert.equal(created.body?.imapHost, "imap.fastmail.com");
+		assert.equal(created.body?.password, "app-password");
+	});
+
+	it("reports sync progress and hands the new account to the caller", async () => {
+		const dom = start();
+		await walkToSync(dom);
+
+		assert.match(dom.text(), /INBOX/);
+		assert.match(dom.text(), /4 mailboxes found/);
+		clickText(dom, "Go to inbox");
+		assert.deepEqual(completed, ["acc-new"]);
+	});
+});
+
+describe("OnboardingWizard — a connection that does not work", () => {
+	it("sends a rejected password back to credentials, not to servers", async () => {
+		const dom = start({
+			test: {
+				imapSuccess: false,
+				smtpSuccess: false,
+				imapError: "Authentication failed",
+			},
+		});
+		await walkToTest(dom);
+
+		assert.match(dom.text(), /Authentication failed/);
+		assert.match(dom.text(), /app password/i);
+		clickText(dom, "Back to credentials");
+		assert.ok(dom.query("#credentials-password"));
+	});
+
+	it("sends an unreachable host back to servers", async () => {
+		const dom = start({
+			test: {
+				imapSuccess: false,
+				smtpSuccess: false,
+				imapError: "ECONNREFUSED",
+			},
+		});
+		await walkToTest(dom);
+
+		assert.match(dom.text(), /ECONNREFUSED/);
+		clickText(dom, "Back to servers");
+		assert.equal(imapHostField(dom).value, "imap.fastmail.com");
+	});
+
+	it("offers a retry that runs the test again rather than a dead end", async () => {
+		const dom = start({
+			test: {
+				imapSuccess: false,
+				smtpSuccess: false,
+				imapError: "ECONNREFUSED",
+			},
+		});
+		await walkToTest(dom);
+
+		const before = http.to("/accounts/test-connection").length;
+		clickText(dom, "Retry");
+		await dom.flush();
+		assert.equal(http.to("/accounts/test-connection").length, before + 1);
+	});
+
+	it("never reaches account creation while the connection is broken", async () => {
+		const dom = start({
+			test: { imapSuccess: false, smtpSuccess: false, imapError: "no route" },
+		});
+		await walkToTest(dom);
+		await dom.wait(50);
+
+		assert.deepEqual(
+			http.calls.filter(
+				(call) => call.path === "/accounts" && call.method === "POST",
+			),
+			[],
+		);
+	});
+});
+
+describe("OnboardingWizard — a sync that stalls", () => {
+	it("says the account is still there and offers a retry", async () => {
+		const dom = start({
+			syncPhase: "error",
+			lastError: "IMAP LOGIN failed",
+		});
+		await walkToSync(dom);
+
+		assert.match(dom.text(), /Sync stalled/);
+		assert.match(dom.text(), /still active/);
+		assert.match(dom.text(), /IMAP LOGIN failed/);
+	});
+});

package/src/components/settings/AccountFormPanel.render.test.ts

@@ -0,0 +1,246 @@
+/**
+ * The add/edit account form. The cases here are the ones where the form does
+ * something the user did not type: it refuses a new account without a
+ * password, it derives SMTP from IMAP rather than saving an account that
+ * cannot send (#196), it keeps a stored password when the field was never
+ * touched, and it fills the server fields from a provider preset.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, beforeEach, describe, it } from "node:test";
+import { createElement } from "react";
+import { createDomHarness, type DomHarness } from "../../test-support/dom";
+import { makeAccount } from "../../test-support/fixtures";
+import {
+	type HttpCall,
+	type HttpMock,
+	mockFetch,
+} from "../../test-support/http";
+import { AccountFormPanel } from "./AccountFormPanel";
+
+const account = makeAccount({
+	accountId: "acc-1",
+	email: "alice@example.com",
+	imapHost: "imap.example.com",
+});
+
+let harness: DomHarness | undefined;
+let http: HttpMock;
+
+beforeEach(() => {
+	http = mockFetch((call) =>
+		call.path === "/config"
+			? { accounts: [account], mailboxes: [] }
+			: { accountId: "acc-new" },
+	);
+});
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http.restore();
+});
+
+const mount = (
+	props: Partial<Parameters<typeof AccountFormPanel>[0]> = {},
+): DomHarness => {
+	harness = createDomHarness();
+	harness.renderApp(
+		createElement(AccountFormPanel, {
+			isOpen: true,
+			onClose: () => undefined,
+			...props,
+		}),
+	);
+	return harness;
+};
+
+const field = (dom: DomHarness, id: string): HTMLInputElement => {
+	const input = dom.query<HTMLInputElement>(`#${id}`);
+	if (!input) throw new Error(`no field #${id}`);
+	return input;
+};
+
+const submit = async (dom: DomHarness): Promise<void> => {
+	const form = dom.query<HTMLFormElement>("#account-form");
+	if (!form) throw new Error("no account form");
+	dom.dispatch(form, new dom.window.Event("submit", { bubbles: true }));
+	await dom.flush();
+	await dom.flush();
+};
+
+const saved = (): HttpCall | undefined =>
+	http.calls.find((call) => call.method === "POST" || call.method === "PATCH");
+
+const body = (call: HttpCall | undefined): Record<string, unknown> => {
+	assert.ok(call, "expected the form to reach the API");
+	assert.ok(call.body, "expected a request body");
+	return call.body;
+};
+
+describe("AccountFormPanel — adding an account", () => {
+	it("refuses to save without a password and says so, rather than posting", async () => {
+		const dom = mount();
+		dom.type(field(dom, "account-email"), "alice@example.com");
+		dom.type(field(dom, "imap-host"), "imap.example.com");
+
+		await submit(dom);
+
+		assert.match(dom.text(), /Password is required/);
+		assert.equal(saved(), undefined);
+	});
+
+	it("reports a missing IMAP host in the same pass as the rest", async () => {
+		const dom = mount();
+		dom.type(field(dom, "account-email"), "alice@example.com");
+		dom.type(field(dom, "account-password"), "hunter2");
+
+		await submit(dom);
+
+		assert.match(dom.text(), /IMAP host is required/);
+		assert.equal(saved(), undefined);
+	});
+
+	it("derives SMTP from the IMAP host so the account can send (#196)", async () => {
+		const dom = mount();
+		dom.type(field(dom, "account-email"), "alice@example.com");
+		dom.type(field(dom, "account-password"), "hunter2");
+		dom.type(field(dom, "imap-host"), "imap.example.com");
+
+		await submit(dom);
+
+		const sent = body(saved());
+		assert.equal(sent.smtpHost, "smtp.example.com");
+		assert.equal(sent.smtpPort, 587);
+		assert.equal(sent.smtpStartTls, true);
+		assert.equal(sent.smtpTls, false);
+	});
+
+	it("never overrides an SMTP host the user typed", async () => {
+		const dom = mount();
+		dom.type(field(dom, "account-email"), "alice@example.com");
+		dom.type(field(dom, "account-password"), "hunter2");
+		dom.type(field(dom, "imap-host"), "imap.example.com");
+		dom.type(field(dom, "smtp-host"), "relay.example.net");
+
+		await submit(dom);
+
+		assert.equal(body(saved()).smtpHost, "relay.example.net");
+	});
+
+	it("sends no SMTP credentials unless the user asked for separate ones", async () => {
+		const dom = mount();
+		dom.type(field(dom, "account-email"), "alice@example.com");
+		dom.type(field(dom, "account-password"), "hunter2");
+		dom.type(field(dom, "imap-host"), "imap.example.com");
+
+		await submit(dom);
+
+		const sent = body(saved());
+		assert.equal(sent.smtpUsername, undefined);
+		assert.equal(sent.smtpPassword, undefined);
+	});
+
+	it("closes itself once the account is created", async () => {
+		let closed = 0;
+		const dom = mount({
+			onClose: () => {
+				closed += 1;
+			},
+		});
+		dom.type(field(dom, "account-email"), "alice@example.com");
+		dom.type(field(dom, "account-password"), "hunter2");
+		dom.type(field(dom, "imap-host"), "imap.example.com");
+
+		await submit(dom);
+
+		assert.equal(closed, 1);
+	});
+});
+
+describe("AccountFormPanel — provider presets", () => {
+	const pickFastmail = (dom: DomHarness): void => {
+		const select = dom.query<HTMLSelectElement>("#account-provider");
+		assert.ok(select);
+		dom.select(select, "fastmail");
+	};
+
+	it("fills and locks the server fields the preset owns", () => {
+		const dom = mount();
+		pickFastmail(dom);
+
+		assert.equal(field(dom, "imap-host").value, "imap.fastmail.com");
+		assert.equal(field(dom, "imap-port").value, "993");
+		assert.equal(field(dom, "imap-host").readOnly, true);
+		assert.match(dom.text(), /locked/);
+	});
+
+	it("hands the server fields back on Advanced", () => {
+		const dom = mount();
+		pickFastmail(dom);
+
+		dom.click(dom.byText("button", "Advanced"));
+
+		assert.equal(field(dom, "imap-host").readOnly, false);
+		assert.match(dom.text(), /Use preset settings/);
+	});
+
+	it("adopts the email as the username when the user left it blank", () => {
+		const dom = mount();
+		dom.type(field(dom, "account-email"), "alice@fastmail.com");
+		pickFastmail(dom);
+
+		assert.equal(field(dom, "account-username").value, "alice@fastmail.com");
+	});
+
+	it("points at the provider's app-password help", () => {
+		const dom = mount();
+		pickFastmail(dom);
+		const link = dom.byText("a", "Get an app password");
+		assert.match(link.getAttribute("href") ?? "", /fastmail/);
+	});
+});
+
+describe("AccountFormPanel — editing an account", () => {
+	it("shows a placeholder for the stored password and keeps it on save", async () => {
+		const dom = mount({ account });
+		assert.equal(field(dom, "account-password").value, "••••••••••");
+
+		await submit(dom);
+
+		const call = saved();
+		assert.equal(call?.method, "PATCH");
+		assert.equal(call?.path, "/accounts/acc-1");
+		assert.equal(body(call).password, undefined);
+	});
+
+	it("sends the new password once the field is touched", async () => {
+		const dom = mount({ account });
+		dom.type(field(dom, "account-password"), "new-app-password");
+
+		await submit(dom);
+
+		assert.equal(body(saved()).password, "new-app-password");
+	});
+
+	it("tests the connection against the stored password rather than the placeholder", async () => {
+		const dom = mount({ account });
+		dom.click(dom.byText("button", "Test IMAP Connection"));
+		await dom.flush();
+
+		const [test] = http.to("/accounts/test-connection");
+		const sent = body(test);
+		assert.equal(sent.accountId, "acc-1");
+		assert.equal(sent.password, undefined);
+		assert.equal(sent.imapHost, "imap.example.com");
+	});
+
+	it("shows a read-only summary for a Microsoft OAuth account — no credential fields", () => {
+		const dom = mount({
+			account: makeAccount({ accountId: "acc-ms", authType: "oauthMicrosoft" }),
+		});
+		assert.match(dom.text(), /Microsoft OAuth \(XOAUTH2\)/);
+		assert.equal(dom.query("#account-password"), null);
+		assert.equal(dom.query("#imap-host"), null);
+	});
+});

package/src/components/ui/ErrorBanner.render.test.ts

@@ -0,0 +1,104 @@
+/**
+ * Banner rendering (#55): a banner sits on top of the toolbar and the message
+ * list, so it is opaque, it says which severity it is out loud, and only an
+ * error interrupts a screen reader.
+ */
+
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import React, { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { ErrorBanner } from "./ErrorBanner";
+import { ErrorBannerStack } from "./ErrorBannerStack";
+import type { ErrorBannerEntry, ErrorBannerSeverity } from "./error-banners.js";
+
+(globalThis as { React?: typeof React }).React = React;
+
+const renderBanner = (severity: ErrorBannerSeverity, detail?: string): string =>
+	renderToString(
+		createElement(ErrorBanner, {
+			id: "b1",
+			severity,
+			title: "Couldn't move message",
+			detail,
+			onDismiss: () => undefined,
+		}) as never,
+	);
+
+describe("ErrorBanner", () => {
+	it("interrupts assertively for an error and politely for the rest", () => {
+		assert.match(renderBanner("error"), /role="alert"/);
+		assert.match(renderBanner("error"), /aria-live="assertive"/);
+		for (const severity of ["warning", "info"] as const) {
+			assert.match(renderBanner(severity), /role="status"/);
+			assert.match(renderBanner(severity), /aria-live="polite"/);
+		}
+	});
+
+	it("names the severity in the dismiss label so it is not just an X", () => {
+		assert.match(renderBanner("error"), /aria-label="Dismiss error"/);
+		assert.match(renderBanner("warning"), /aria-label="Dismiss warning"/);
+		assert.match(renderBanner("info"), /aria-label="Dismiss information"/);
+	});
+
+	it("stays opaque — no translucent surface over the message list (#55)", () => {
+		const backgrounds: Record<ErrorBannerSeverity, RegExp> = {
+			error: /bg-danger-soft/,
+			warning: /bg-warning-soft/,
+			info: /bg-accent-2-soft/,
+		};
+		for (const [severity, background] of Object.entries(backgrounds)) {
+			const html = renderBanner(severity as ErrorBannerSeverity);
+			assert.match(html, background);
+			// An alpha-suffixed background (`bg-x/40`) is see-through; text over
+			// the message list behind it stops being readable.
+			assert.doesNotMatch(html, /class="[^"]*\sbg-[\w-]+\/\d/);
+		}
+	});
+
+	it("shows the detail only when there is one", () => {
+		assert.match(renderBanner("error", "Connection reset"), /Connection reset/);
+		assert.doesNotMatch(renderBanner("error"), /Connection reset/);
+	});
+});
+
+const entry = (
+	id: string,
+	severity: ErrorBannerSeverity,
+	title: string,
+): ErrorBannerEntry => ({
+	id,
+	severity,
+	title,
+	createdAt: 0,
+});
+
+const renderStack = (errors: ErrorBannerEntry[]): string =>
+	renderToString(
+		createElement(ErrorBannerStack, {
+			errors,
+			onDismiss: () => undefined,
+		}) as never,
+	);
+
+describe("ErrorBannerStack", () => {
+	it("renders nothing at all when there is nothing to say", () => {
+		assert.equal(renderStack([]), "");
+	});
+
+	it("stacks every banner it is given under one labelled region", () => {
+		const html = renderStack([
+			entry("a", "error", "Couldn't delete"),
+			entry("b", "info", "Sync finished"),
+		]);
+		assert.match(html, /aria-label="Notifications"/);
+		assert.match(html, /Couldn&#x27;t delete/);
+		assert.match(html, /Sync finished/);
+	});
+
+	it("lets clicks through the region so it never blocks the mail behind it", () => {
+		const html = renderStack([entry("a", "error", "Couldn't delete")]);
+		assert.match(html, /pointer-events-none/);
+		assert.match(html, /pointer-events-auto/);
+	});
+});