@remit/web-client 0.0.300 → 0.0.302

package/src/components/onboarding/onboarding.stories.tsx

@@ -0,0 +1,460 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, waitFor, within } from "storybook/test";
+import {
+	REDIRECT_STALL_MESSAGE,
+	REDIRECT_STALL_MS,
+} from "@/hooks/useRedirectEnded";
+import { AppStory } from "@/mocks/story-frame/AppStory";
+import { mailHandlers } from "@/mocks/story-frame/mail-handlers";
+import { mailWorld } from "@/mocks/story-frame/mail-world";
+import {
+	NEW_ACCOUNT_ID,
+	type OnboardingHandlerOptions,
+	onboardingHandlers,
+} from "@/mocks/story-frame/onboarding-handlers";
+import { makeAccount } from "@/test-support/fixtures";
+
+const EMAIL = "alice@northwind.example";
+
+const firstRun = mailWorld({ accounts: [], threads: [], outbox: [] });
+
+const handlers = (
+	options: OnboardingHandlerOptions = {},
+	world = firstRun,
+) => ({
+	msw: { handlers: [...onboardingHandlers(options), ...mailHandlers(world)] },
+});
+
+const meta = {
+	title: "Playground/Shipped/Onboarding/Wizard",
+	component: AppStory,
+	args: { url: "/onboarding" },
+	parameters: { layout: "fullscreen", ...handlers() },
+} satisfies Meta<typeof AppStory>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+type Canvas = ReturnType<typeof within>;
+
+const phone = { viewport: { value: "mobile", isRotated: false } };
+
+const press = async (canvas: Canvas, name: string | RegExp) =>
+	userEvent.click(await canvas.findByRole("button", { name }));
+
+const toConnector = (canvas: Canvas) => press(canvas, "Add your first account");
+
+const toAddress = async (canvas: Canvas) => {
+	await toConnector(canvas);
+	await press(canvas, "Continue with IMAP");
+};
+
+const toServers = async (canvas: Canvas, email = EMAIL) => {
+	await toAddress(canvas);
+	await userEvent.type(await canvas.findByLabelText("Email address"), email);
+	await press(canvas, "Continue");
+	await canvas.findByText("Confirm server settings");
+};
+
+const toCredentials = async (canvas: Canvas) => {
+	await toServers(canvas);
+	await press(canvas, "Continue");
+	await canvas.findByText("Sign in to northwind.example");
+};
+
+const toTest = async (canvas: Canvas) => {
+	await toCredentials(canvas);
+	await userEvent.type(canvas.getByLabelText(/Password/), "app-password");
+	await press(canvas, "Test connection");
+};
+
+const toMicrosoft = async (canvas: Canvas) => {
+	await toConnector(canvas);
+	await userEvent.click(await canvas.findByText("Outlook / Microsoft 365"));
+	await press(canvas, "Continue with Microsoft");
+	return canvas.findByRole("button", { name: "Sign in with Microsoft" });
+};
+
+export const Welcome: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(await canvas.findByText("Welcome to Remit")).toBeVisible();
+		await expect(
+			canvas.getByRole("button", { name: "Import a config file" }),
+		).toBeVisible();
+	},
+};
+
+export const Walkthrough: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await toTest(canvas);
+		await expect(
+			await canvas.findByText(`Syncing ${EMAIL}`, undefined, {
+				timeout: 4000,
+			}),
+		).toBeVisible();
+		await expect(
+			await canvas.findByRole("button", { name: "Go to inbox" }),
+		).toBeEnabled();
+	},
+};
+
+export const ConnectorPicker: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await toConnector(canvas);
+		await expect(
+			await canvas.findByText("How does this account connect?"),
+		).toBeVisible();
+		await expect(
+			canvas.getByRole("button", { name: "Continue with IMAP" }),
+		).toBeVisible();
+		await expect(canvas.queryByText(/Google/)).toBeNull();
+	},
+};
+
+export const ConnectorPickerMicrosoft: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await toConnector(canvas);
+		await userEvent.click(await canvas.findByText("Outlook / Microsoft 365"));
+		await expect(
+			canvas.getByRole("button", { name: "Continue with Microsoft" }),
+		).toBeVisible();
+	},
+};
+
+export const ConnectorPickerInSettings: Story = {
+	args: { url: "/settings/accounts" },
+	parameters: handlers({}, mailWorld()),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await press(canvas, "Add account");
+		await expect(
+			await canvas.findByText("How does this account connect?"),
+		).toBeVisible();
+		await expect(canvas.queryByRole("button", { name: "Back" })).toBeNull();
+	},
+};
+
+export const ConnectorPickerPhone: Story = {
+	globals: phone,
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await toConnector(canvas);
+		await expect(
+			await canvas.findByRole("button", { name: "Continue with IMAP" }),
+		).toBeVisible();
+	},
+};
+
+export const ConnectorPickerMicrosoftPhone: Story = {
+	globals: phone,
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await toConnector(canvas);
+		await userEvent.click(await canvas.findByText("Outlook / Microsoft 365"));
+		await expect(
+			canvas.getByRole("button", { name: "Continue with Microsoft" }),
+		).toBeVisible();
+	},
+};
+
+export const MicrosoftEmail: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(await toMicrosoft(canvas)).toBeEnabled();
+		await expect(
+			canvas.getByLabelText("Email address (optional)"),
+		).toBeVisible();
+		await expect(canvas.getByRole("button", { name: "Back" })).toBeVisible();
+	},
+};
+
+export const MicrosoftEmailInSettings: Story = {
+	args: { url: "/settings/accounts" },
+	parameters: handlers({}, mailWorld()),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await press(canvas, "Add account");
+		await userEvent.click(await canvas.findByText("Outlook / Microsoft 365"));
+		await press(canvas, "Continue with Microsoft");
+		await expect(
+			await canvas.findByRole("button", { name: "Sign in with Microsoft" }),
+		).toBeVisible();
+		await expect(canvas.getByRole("button", { name: "Back" })).toBeVisible();
+	},
+};
+
+const realSetTimeout = window.setTimeout;
+
+const stallAtOnce: Window["setTimeout"] = (handler, delay, ...rest) =>
+	realSetTimeout(handler, delay === REDIRECT_STALL_MS ? 0 : delay, ...rest);
+
+export const MicrosoftRedirectStalled: Story = {
+	beforeEach: () => () => {
+		Reflect.set(window, "setTimeout", realSetTimeout);
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const signIn = await toMicrosoft(canvas);
+		Reflect.set(window, "setTimeout", stallAtOnce);
+		await userEvent.click(signIn);
+		await expect(await canvas.findByText(REDIRECT_STALL_MESSAGE)).toBeVisible();
+		await expect(
+			canvas.getByRole("button", { name: "Sign in with Microsoft" }),
+		).toBeEnabled();
+	},
+};
+
+export const AddressAutodiscovery: Story = {
+	parameters: handlers({ autoconfig: "slow" }),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await toAddress(canvas);
+		await userEvent.type(await canvas.findByLabelText("Email address"), EMAIL);
+		await press(canvas, "Continue");
+		await expect(
+			await canvas.findByText("Looking up settings for northwind.example…"),
+		).toBeVisible();
+	},
+};
+
+export const AddressInvalid: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await toAddress(canvas);
+		await userEvent.type(
+			await canvas.findByLabelText("Email address"),
+			"alice",
+		);
+		await press(canvas, "Continue");
+		await expect(
+			await canvas.findByText("Enter a valid email address."),
+		).toBeVisible();
+	},
+};
+
+export const ServerConfirm: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await toServers(canvas);
+		await expect(canvas.getByText(/Found via autodiscovery/)).toBeVisible();
+		await expect(canvas.getAllByText("detected")).toHaveLength(2);
+		await expect(
+			canvas.getAllByDisplayValue("mail.northwind.example"),
+		).toHaveLength(2);
+	},
+};
+
+export const ServerConfirmPhone: Story = {
+	globals: phone,
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await toServers(canvas);
+		for (const security of canvas.getAllByLabelText("Security")) {
+			await expect(security).toBeEnabled();
+		}
+	},
+};
+
+export const ServerManualFallback: Story = {
+	parameters: handlers({ autoconfig: "missing" }),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await toServers(canvas);
+		await expect(
+			canvas.getByText(/couldn't detect settings for northwind.example/),
+		).toBeVisible();
+		await expect(
+			canvas.getByDisplayValue("imap.northwind.example"),
+		).toBeVisible();
+		await expect(canvas.queryByText("detected")).toBeNull();
+	},
+};
+
+export const ServerMissingHost: Story = {
+	parameters: handlers({ autoconfig: "missing" }),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await toServers(canvas);
+		await userEvent.clear(canvas.getByDisplayValue("imap.northwind.example"));
+		await press(canvas, "Continue");
+		await expect(await canvas.findByText("Enter the IMAP host.")).toBeVisible();
+	},
+};
+
+export const ServerProviderPreset: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await toServers(canvas, "alice@icloud.com");
+		await expect(canvas.getByLabelText("Provider")).toHaveValue("icloud");
+		await expect(
+			canvas.getByText(/pre-filled for iCloud and locked/),
+		).toBeVisible();
+		await expect(
+			canvas.getByRole("link", { name: "Get an app password" }),
+		).toBeVisible();
+	},
+};
+
+export const Credentials: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await toCredentials(canvas);
+		await expect(canvas.getByLabelText("Username")).toHaveValue(EMAIL);
+		await press(canvas, "Test connection");
+		await expect(
+			await canvas.findByText("Enter your username and password."),
+		).toBeVisible();
+	},
+};
+
+export const TestConnectionSuccess: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await toTest(canvas);
+		await expect(await canvas.findByText("Connection verified")).toBeVisible();
+	},
+};
+
+export const TestConnectionFailure: Story = {
+	parameters: handlers({
+		connection: {
+			imapSuccess: true,
+			smtpSuccess: false,
+			smtpError: "535 5.7.8 Authentication credentials invalid",
+		},
+	}),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await toTest(canvas);
+		await expect(
+			await canvas.findByText(/many providers require an app password/),
+		).toBeVisible();
+		await expect(
+			canvas.getByRole("button", { name: "Back to credentials" }),
+		).toBeVisible();
+	},
+};
+
+export const TestConnectionNetworkFailure: Story = {
+	parameters: handlers({
+		connection: {
+			imapSuccess: false,
+			imapError: "connect ECONNREFUSED 203.0.113.7:993",
+		},
+	}),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await toTest(canvas);
+		await expect(
+			await canvas.findByRole("button", { name: "Back to servers" }),
+		).toBeVisible();
+		await expect(canvas.getAllByText(/ECONNREFUSED/).length).toBeGreaterThan(0);
+		await expect(
+			canvas.queryByText(/many providers require an app password/),
+		).toBeNull();
+	},
+};
+
+export const SyncProgress: Story = {
+	parameters: handlers({
+		sync: {
+			syncPhase: "syncing_inbox",
+			mailboxCountTotal: 6,
+			mailboxCountSynced: 0,
+			mailboxes: [
+				{
+					mailboxId: "mbx-new-inbox",
+					fullPath: "INBOX",
+					phase: "syncing",
+					messagesTotal: 800,
+					messagesSynced: 120,
+					highWaterMarkUid: 0,
+				},
+			],
+		},
+	}),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await toTest(canvas);
+		await expect(
+			await canvas.findByText("120 / 800 messages", undefined, {
+				timeout: 4000,
+			}),
+		).toBeVisible();
+		await expect(
+			canvas.getByRole("button", { name: "Go to inbox" }),
+		).toBeEnabled();
+	},
+};
+
+const waitingForMail = handlers({
+	sync: { syncPhase: "discovering_mailboxes", mailboxes: [] },
+});
+
+export const SyncWaitingForFirstMail: Story = {
+	parameters: waitingForMail,
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await toTest(canvas);
+		await expect(
+			await canvas.findByRole(
+				"button",
+				{ name: "Getting your mail…" },
+				{ timeout: 4000 },
+			),
+		).toBeDisabled();
+	},
+};
+
+export const SyncWaitingForFirstMailPhone: Story = {
+	globals: phone,
+	parameters: waitingForMail,
+	play: SyncWaitingForFirstMail.play,
+};
+
+export const SyncCreateError: Story = {
+	parameters: handlers({ createFails: true }),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await toTest(canvas);
+		await expect(
+			await canvas.findByText("Couldn't create account", undefined, {
+				timeout: 4000,
+			}),
+		).toBeVisible();
+		await expect(canvas.getByRole("button", { name: "Retry" })).toBeVisible();
+	},
+};
+
+export const SyncStalled: Story = {
+	parameters: handlers(
+		{ sync: { syncPhase: "error", mailboxes: [] } },
+		mailWorld({
+			accounts: [
+				makeAccount({
+					accountId: NEW_ACCOUNT_ID,
+					email: EMAIL,
+					lastError: "IMAP IDLE dropped: connection reset by peer",
+				}),
+			],
+			threads: [],
+			outbox: [],
+		}),
+	),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await toTest(canvas);
+		await expect(
+			await canvas.findByText(/Sync stalled/, undefined, { timeout: 4000 }),
+		).toBeVisible();
+		await waitFor(() =>
+			expect(
+				canvas.getByText("IMAP IDLE dropped: connection reset by peer"),
+			).toBeVisible(),
+		);
+	},
+};

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

@@ -0,0 +1,254 @@
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import { configOperationsGetConfigOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
+import { MICROSOFT_SERVICE_SCOPES } from "@remit/mail-oauth-service";
+import { useQuery } from "@tanstack/react-query";
+import { createElement } from "react";
+import { createDomHarness, type DomHarness } from "../../test-support/dom";
+import { makeAccount } from "../../test-support/fixtures";
+import {
+	type HttpCall,
+	type HttpMock,
+	httpError,
+	mockFetch,
+} from "../../test-support/http";
+import { AccountServices } from "./AccountServices";
+
+const CONSENT_URL = "http://localhost/#microsoft-consent";
+const MAIL_SCOPES = [...MICROSOFT_SERVICE_SCOPES.Mail];
+const BOTH_SCOPES = [...MAIL_SCOPES, ...MICROSOFT_SERVICE_SCOPES.Calendar];
+const REFUSAL = "The mail server refused the change. Try again later.";
+
+let harness: DomHarness | undefined;
+let http: HttpMock | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http?.restore();
+	http = undefined;
+	window.location.hash = "";
+});
+
+const outlook = (
+	overrides: Partial<RemitImapAccountResponse> = {},
+): RemitImapAccountResponse =>
+	makeAccount({
+		accountId: "acc-1",
+		authType: "oauthMicrosoft",
+		syncedServices: ["Mail"],
+		grantedScopes: BOTH_SCOPES,
+		...overrides,
+	});
+
+type Patch = (call: HttpCall) => unknown;
+
+const hang: Patch = () => new Promise(() => {});
+
+const Screen = ({ onRemoveAccount }: { onRemoveAccount: () => void }) => {
+	const { data } = useQuery(configOperationsGetConfigOptions());
+	const account = data?.accounts[0];
+	if (!account) return null;
+	return createElement(AccountServices, { account, onRemoveAccount });
+};
+
+const mount = async (
+	initial: RemitImapAccountResponse,
+	patch: Patch = hang,
+	onRemoveAccount: () => void = () => {},
+): Promise<DomHarness> => {
+	let stored = initial;
+	http = mockFetch((call) => {
+		if (call.path.endsWith("/config")) return { accounts: [stored] };
+		if (call.path.endsWith("/oauth/microsoft/start")) {
+			return { authorizationUrl: CONSENT_URL };
+		}
+		if (call.method === "PATCH") {
+			const answer = patch(call);
+			if (answer !== undefined) return answer;
+			stored = { ...stored, ...call.body };
+			return stored;
+		}
+		return {};
+	});
+	const mounted = createDomHarness();
+	harness = mounted;
+	mounted.renderApp(createElement(Screen, { onRemoveAccount }));
+	await mounted.waitFor(
+		() => (http?.to("/config").length ?? 0) > 0,
+		"the account to load",
+	);
+	await mounted.wait(10);
+	return mounted;
+};
+
+const switchFor = (mounted: DomHarness, name: string): HTMLButtonElement =>
+	mounted.byLabel(`Sync ${name}`) as HTMLButtonElement;
+
+const checked = (mounted: DomHarness, name: string): string | null =>
+	switchFor(mounted, name).getAttribute("aria-checked");
+
+const press = (mounted: DomHarness, text: string): void =>
+	mounted.click(mounted.byText("button", text));
+
+const patches = (): HttpCall[] =>
+	(http?.calls ?? []).filter((call) => call.method === "PATCH");
+
+describe("AccountServices", () => {
+	it("renders no switches for an IMAP account", async () => {
+		const mounted = await mount(
+			outlook({ authType: "password", grantedScopes: [] }),
+		);
+		assert.equal(mounted.queryAll('[role="switch"]').length, 0);
+	});
+
+	it("shows each switch in the state the server holds", async () => {
+		const mounted = await mount(outlook());
+		assert.equal(checked(mounted, "mail"), "true");
+		assert.equal(checked(mounted, "calendar"), "false");
+	});
+
+	it("saves calendar on and settles on the value the server returns", async () => {
+		const mounted = await mount(outlook(), () => undefined);
+
+		mounted.click(switchFor(mounted, "calendar"));
+		await mounted.waitFor(
+			() => (http?.to("/config").length ?? 0) >= 2,
+			"the refetch after the save",
+		);
+		await mounted.flush();
+
+		assert.deepEqual(patches()[0]?.body, {
+			syncedServices: ["Mail", "Calendar"],
+		});
+		assert.equal(checked(mounted, "calendar"), "true");
+		assert.equal(switchFor(mounted, "calendar").disabled, false);
+	});
+
+	it("holds both switches still while a save is in flight", async () => {
+		const mounted = await mount(outlook());
+
+		mounted.click(switchFor(mounted, "calendar"));
+		await mounted.waitFor(() => patches().length > 0, "the save to start");
+
+		assert.equal(checked(mounted, "calendar"), "true");
+		assert.equal(switchFor(mounted, "mail").disabled, true);
+		assert.equal(switchFor(mounted, "calendar").disabled, true);
+		mounted.click(switchFor(mounted, "mail"));
+		assert.equal(patches().length, 1);
+		assert.doesNotMatch(mounted.text(), /Stop syncing mail/);
+	});
+
+	it("states a refused calendar-on in the server's words, offers a report, and turns the switch back", async () => {
+		const mounted = await mount(outlook(), () => httpError(400, REFUSAL));
+
+		mounted.click(switchFor(mounted, "calendar"));
+		await mounted.waitFor(
+			() => mounted.text().includes(REFUSAL),
+			"the refusal to show",
+		);
+
+		assert.match(mounted.text(), /Couldn't turn calendar on/);
+		const report = mounted.byText("a", "Report an issue");
+		assert.match(
+			report.getAttribute("href") ?? "",
+			/github\.com\/.+\/issues\/new/,
+		);
+		assert.equal(checked(mounted, "calendar"), "false");
+		assert.equal(switchFor(mounted, "calendar").disabled, false);
+	});
+
+	it("asks before mail goes off and keeps mail on when the server refuses", async () => {
+		const mounted = await mount(
+			outlook({ syncedServices: ["Mail", "Calendar"] }),
+			() => httpError(400, REFUSAL),
+		);
+
+		mounted.click(switchFor(mounted, "mail"));
+		assert.match(mounted.text(), /Mail already in Remit stays/);
+		assert.equal(patches().length, 0);
+
+		press(mounted, "Stop syncing mail");
+		await mounted.waitFor(
+			() => mounted.text().includes(REFUSAL),
+			"the refusal to show",
+		);
+
+		assert.deepEqual(patches()[0]?.body, { syncedServices: ["Calendar"] });
+		assert.match(mounted.text(), /Couldn't turn mail off/);
+		assert.equal(checked(mounted, "mail"), "true");
+	});
+
+	it("clears the refusal on the next try", async () => {
+		let answer: Patch = () => httpError(400, REFUSAL);
+		const mounted = await mount(outlook(), (call) => answer(call));
+
+		mounted.click(switchFor(mounted, "calendar"));
+		await mounted.waitFor(
+			() => mounted.text().includes(REFUSAL),
+			"the refusal to show",
+		);
+
+		answer = hang;
+		mounted.click(switchFor(mounted, "calendar"));
+		await mounted.waitFor(() => patches().length === 2, "the second save");
+
+		assert.doesNotMatch(mounted.text(), /Couldn't turn calendar on/);
+	});
+
+	it("sends an ungranted calendar through the Microsoft sign-in, saying so first", async () => {
+		const mounted = await mount(outlook({ grantedScopes: MAIL_SCOPES }));
+
+		assert.match(mounted.text(), /signing in with Microsoft again/);
+		mounted.click(switchFor(mounted, "calendar"));
+		assert.match(mounted.text(), /Sign in with Microsoft to add calendar\?/);
+
+		press(mounted, "Continue to Microsoft");
+		await mounted.waitFor(
+			() => window.location.hash === "#microsoft-consent",
+			"the redirect to Microsoft",
+		);
+
+		const [start] = http?.to("/oauth/microsoft/start") ?? [];
+		assert.deepEqual(start?.body, {
+			email: "alice@example.com",
+			services: ["Mail", "Calendar"],
+		});
+		assert.equal(patches().length, 0);
+		assert.equal(switchFor(mounted, "calendar").disabled, true);
+	});
+
+	it("reflects the granted scopes once the sign-in returns", async () => {
+		const mounted = await mount(
+			outlook({ syncedServices: ["Mail", "Calendar"] }),
+		);
+		assert.equal(checked(mounted, "calendar"), "true");
+		assert.doesNotMatch(mounted.text(), /signing in with Microsoft again/);
+	});
+
+	it("leaves mail on when the question is cancelled", async () => {
+		const mounted = await mount(
+			outlook({ syncedServices: ["Mail", "Calendar"] }),
+		);
+
+		mounted.click(switchFor(mounted, "mail"));
+		press(mounted, "Cancel");
+
+		assert.equal(patches().length, 0);
+		assert.equal(checked(mounted, "mail"), "true");
+	});
+
+	it("routes switching off the last service to removing the account", async () => {
+		let removals = 0;
+		const mounted = await mount(outlook(), hang, () => {
+			removals += 1;
+		});
+
+		mounted.click(switchFor(mounted, "mail"));
+		press(mounted, "Remove account");
+
+		assert.equal(removals, 1);
+		assert.equal(patches().length, 0);
+	});
+});