@remit/web-client 0.0.179 → 0.0.181

package/src/components/mail/conversation-reply-identity.render.test.ts

@@ -0,0 +1,304 @@
+/**
+ * Which identity answers a message, on an instance holding more than one.
+ *
+ * The account a message reached is the mailbox it was delivered to, so the
+ * reply leaves from that identity, the Reply All keeps that identity out of
+ * its own Cc, and reading the message refreshes that account's folder list.
+ * All three read the first configured account before (#819), which answered
+ * every account's mail as the first one.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import type {
+	RemitImapDescribeMessageResponse,
+	RemitImapThreadMessageResponse,
+} from "@remit/api-http-client/types.gen.ts";
+import {
+	type AnyRouter,
+	createMemoryHistory,
+	createRootRoute,
+	createRoute,
+	createRouter,
+	Outlet,
+	RouterProvider,
+} from "@tanstack/react-router";
+import { createElement } from "react";
+import { ComposeProvider } from "@/components/compose/ComposeProvider";
+import { createDomHarness, type DomHarness } from "@/test-support/dom";
+import {
+	makeAccount,
+	makeMailbox,
+	makeThreadMessage,
+} from "@/test-support/fixtures";
+import { type HttpMock, mockFetch } from "@/test-support/http";
+import { MARK_READ_DELAY_MS } from "../../hooks/useMarkAsRead";
+import { ConversationView } from "./ConversationView";
+
+const FIRST_ACCOUNT_ID = "acc-first";
+const REACHED_ACCOUNT_ID = "acc-reached";
+const FIRST_MAILBOX_ID = "mbx-first-inbox";
+const REACHED_MAILBOX_ID = "mbx-reached-inbox";
+const THREAD_ID = "thread-1";
+const MESSAGE_ID = "msg-1";
+
+const REACHED_EMAIL = "bob@example.com";
+
+// Two identities, in the order the config hands them over. The message below
+// reached the second one, so nothing about it can be answered off the head of
+// this list.
+const firstAccount = makeAccount({
+	accountId: FIRST_ACCOUNT_ID,
+	email: "alice@example.com",
+	username: "alice@example.com",
+	smtpUsername: "alice@example.com",
+});
+
+const reachedAccount = makeAccount({
+	accountId: REACHED_ACCOUNT_ID,
+	email: REACHED_EMAIL,
+	username: REACHED_EMAIL,
+	smtpUsername: REACHED_EMAIL,
+});
+
+const firstMailbox = makeMailbox({
+	mailboxId: FIRST_MAILBOX_ID,
+	accountId: FIRST_ACCOUNT_ID,
+	fullPath: "INBOX",
+});
+
+const reachedMailbox = makeMailbox({
+	mailboxId: REACHED_MAILBOX_ID,
+	accountId: REACHED_ACCOUNT_ID,
+	fullPath: "INBOX",
+});
+
+const threadMessage = (isRead: boolean): RemitImapThreadMessageResponse =>
+	makeThreadMessage({
+		messageId: MESSAGE_ID,
+		threadId: THREAD_ID,
+		mailboxId: REACHED_MAILBOX_ID,
+		accountId: REACHED_ACCOUNT_ID,
+		subject: "Lunch Thursday?",
+		fromName: "Ada Lovelace",
+		fromEmail: "ada@example.com",
+		isRead,
+	});
+
+// Sent to the second identity, with a third party alongside it. A Reply All
+// answers Ada and keeps Carol; the reader's own address is the one address that
+// must not come back in the Cc.
+const describeMessage: RemitImapDescribeMessageResponse = {
+	message: {
+		messageId: MESSAGE_ID,
+		mailboxId: REACHED_MAILBOX_ID,
+		uid: 1,
+		rfc822Size: 512,
+		internalDate: 1_767_225_600_000,
+	},
+	envelope: {
+		messageId: MESSAGE_ID,
+		date: 1_767_225_600_000,
+		subject: "Lunch Thursday?",
+		messageIdValue: "<ada-1@example.com>",
+		from: [
+			{
+				addressId: "addr-ada",
+				displayName: "Ada Lovelace",
+				normalizedEmail: "ada@example.com",
+				addressRole: "from",
+				addressOrder: 0,
+			},
+		],
+		to: [
+			{
+				addressId: "addr-reached",
+				normalizedEmail: REACHED_EMAIL,
+				addressRole: "to",
+				addressOrder: 0,
+			},
+		],
+		cc: [
+			{
+				addressId: "addr-carol",
+				normalizedEmail: "carol@example.com",
+				addressRole: "cc",
+				addressOrder: 0,
+			},
+		],
+		bcc: [],
+		replyTo: [],
+		category: "uncategorized",
+		senderTrust: "unknown",
+	},
+	flags: ["\\Seen"],
+	bodyParts: [],
+	references: [],
+};
+
+let harness: DomHarness | undefined;
+let http: HttpMock | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http?.restore();
+	http = undefined;
+});
+
+// The router reads `self` at construction; the shared jsdom globals stop at
+// `window`.
+(globalThis as { self?: typeof globalThis }).self ??= globalThis;
+
+const MESSAGE_PATH = `/mail/${REACHED_MAILBOX_ID}/${THREAD_ID}/${MESSAGE_ID}`;
+
+const testRouter = (href: string): AnyRouter => {
+	const rootRoute = createRootRoute({
+		component: () =>
+			createElement(ComposeProvider, null, createElement(Outlet)),
+	});
+	const mailboxRoute = createRoute({
+		getParentRoute: () => rootRoute,
+		path: "/mail/$mailboxId",
+		validateSearch: (search: Record<string, unknown>) => search,
+	});
+	const threadRoute = createRoute({
+		getParentRoute: () => mailboxRoute,
+		path: "$threadId",
+	});
+	const messageRoute = createRoute({
+		getParentRoute: () => threadRoute,
+		path: "$messageId",
+		component: () =>
+			createElement(ConversationView, {
+				threadId: THREAD_ID,
+				mailboxId: REACHED_MAILBOX_ID,
+				subject: "Lunch Thursday?",
+				selectedMessageId: MESSAGE_ID,
+			}),
+	});
+	const replyRoute = createRoute({
+		getParentRoute: () => messageRoute,
+		path: "$mode/{-$outboxMessageId}",
+	});
+	const routeTree = rootRoute.addChildren([
+		mailboxRoute.addChildren([
+			threadRoute.addChildren([messageRoute.addChildren([replyRoute])]),
+		]),
+	]);
+	return createRouter({
+		routeTree,
+		history: createMemoryHistory({ initialEntries: [href] }),
+	}) as unknown as AnyRouter;
+};
+
+const mountAt = async (
+	href: string,
+	{ isRead = true }: { isRead?: boolean } = {},
+): Promise<DomHarness> => {
+	const messages = [threadMessage(isRead)];
+	http = mockFetch((call) => {
+		if (call.path.endsWith("/config")) {
+			return { accounts: [firstAccount, reachedAccount] };
+		}
+		if (call.path.endsWith(`/accounts/${FIRST_ACCOUNT_ID}/mailboxes`)) {
+			return { items: [firstMailbox] };
+		}
+		if (call.path.endsWith(`/accounts/${REACHED_ACCOUNT_ID}/mailboxes`)) {
+			return { items: [reachedMailbox] };
+		}
+		if (call.path.endsWith(`/threads/${THREAD_ID}/messages`)) {
+			return { items: messages };
+		}
+		if (call.path.endsWith(`/messages/${MESSAGE_ID}`)) return describeMessage;
+		return { items: [] };
+	});
+
+	const router = testRouter(href);
+	await router.load();
+	harness = createDomHarness();
+	harness.renderApp(createElement(RouterProvider, { router }));
+	await harness.flush();
+	await harness.wait(20);
+	await harness.flush();
+	return harness;
+};
+
+/** The identity the From row is standing on. */
+const chosenIdentity = (mounted: DomHarness): string => {
+	const selector = mounted.query<HTMLSelectElement>("#from-account-selector");
+	assert.ok(selector, "the From row offers the configured identities");
+	return selector.value;
+};
+
+/** The addresses held as chips in one of the composer's recipient fields. */
+const recipients = (mounted: DomHarness, label: string): string[] => {
+	const input = mounted.query(`#address-field-${label}`);
+	assert.ok(input, `the ${label} field is on screen`);
+	const field = input.parentElement;
+	assert.ok(field, `the ${label} field holds its chips`);
+	return [...field.querySelectorAll("[aria-label^='Remove ']")].map((button) =>
+		(button.getAttribute("aria-label") ?? "").replace("Remove ", ""),
+	);
+};
+
+const mailboxListReads = (accountId: string): number =>
+	(http?.calls ?? []).filter(
+		(call) =>
+			call.method === "GET" &&
+			call.path.endsWith(`/accounts/${accountId}/mailboxes`),
+	).length;
+
+describe("answering from the identity the message reached", () => {
+	it("opens the reply on the account the message was delivered to", async () => {
+		const mounted = await mountAt(`${MESSAGE_PATH}/reply`);
+
+		assert.equal(
+			chosenIdentity(mounted),
+			REACHED_ACCOUNT_ID,
+			"the reply leaves from the identity the message reached, not the first one configured",
+		);
+	});
+
+	it("keeps the reached identity out of its own Reply All", async () => {
+		const mounted = await mountAt(`${MESSAGE_PATH}/reply-all`);
+
+		assert.deepEqual(
+			recipients(mounted, "To"),
+			["ada@example.com"],
+			"the answer goes back to the sender",
+		);
+		assert.deepEqual(
+			recipients(mounted, "Cc"),
+			["carol@example.com"],
+			"everyone else on the message is kept, and the reader's own address is not copied back to itself",
+		);
+	});
+
+	it("refreshes the folder list of the account the message was read in", async () => {
+		const mounted = await mountAt(MESSAGE_PATH, { isRead: false });
+
+		const readsBefore = {
+			first: mailboxListReads(FIRST_ACCOUNT_ID),
+			reached: mailboxListReads(REACHED_ACCOUNT_ID),
+		};
+
+		await mounted.wait(MARK_READ_DELAY_MS + 100);
+		await mounted.flush();
+
+		assert.equal(
+			(http?.to("/messages/flags") ?? []).length,
+			1,
+			"the message the reader dwelled on was marked read",
+		);
+		assert.ok(
+			mailboxListReads(REACHED_ACCOUNT_ID) > readsBefore.reached,
+			"the unread badge of the account the message was read in is refreshed",
+		);
+		assert.equal(
+			mailboxListReads(FIRST_ACCOUNT_ID),
+			readsBefore.first,
+			"no other account's folder list is disturbed",
+		);
+	});
+});

package/src/components/mail/intelligence-surface-reach.render.test.ts

@@ -0,0 +1,243 @@
+/**
+ * Every list pane reaches intelligence at every width its reading pane mounts
+ * (#817).
+ *
+ * The shell mounts the reading pane from 1024px and the intelligence rail only
+ * from 1280px. The brief and Flagged read the rail's gate as the answer for
+ * both, so between the two the toolbar's control rendered greyed out with no
+ * drawer behind it, and the authenticity banner's "Why?" was never wired at
+ * all — the DKIM explanation was unreachable on the brief at every desktop
+ * width. Only the mailbox was ever fixed (#744), which is what left three
+ * copies of one rule to drift apart.
+ *
+ * Mounted in the real `AppShellSlotted`, seeded at 1100px: which panes this
+ * width has is the shell's own answer here, not a stub's.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import { AppShellSlotted } from "@remit/ui";
+import {
+	type AnyRouter,
+	createMemoryHistory,
+	createRootRoute,
+	createRoute,
+	createRouter,
+	Outlet,
+	RouterProvider,
+} from "@tanstack/react-router";
+import { type ComponentType, createElement, type ReactNode } from "react";
+import { ComposeProvider } from "@/components/compose/ComposeProvider";
+import { type OpenThreadPath, useOpenThreadPath } from "@/routing";
+import { createDomHarness, type DomHarness } from "@/test-support/dom";
+import { makeThreadMessage } from "@/test-support/fixtures";
+import { type HttpMock, mockFetch } from "@/test-support/http";
+import { BriefPane } from "./BriefPane";
+import { FlaggedPane } from "./FlaggedPane";
+
+/** Below the rail's 1280px gate, above the reading pane's 1024px one. */
+const TWO_PANE_WIDTH = 1100;
+
+const THREAD_ID = "thread-1";
+const MESSAGE_ID = "msg-1";
+
+const SHOW_INTELLIGENCE = "Show intelligence sidebar";
+const HIDE_INTELLIGENCE = "Hide intelligence sidebar";
+
+/** The one row shape that carries a warning: DKIM signed by another domain. */
+const row = makeThreadMessage({
+	messageId: MESSAGE_ID,
+	threadId: THREAD_ID,
+	subject: "Your parcel could not be delivered",
+	fromName: "Mondial Relay",
+	fromEmail: "delivery.notice@gmail.example",
+	hasStars: true,
+	star: "yellow",
+	authenticity: {
+		dkimMismatch: true,
+		fromDomain: "mondialrelay.fr",
+		dkimDomain: "gmail.example",
+	},
+});
+
+/** What the reading pane reads each message's own headers and body from. */
+const describedMessage = {
+	messageId: MESSAGE_ID,
+	envelope: {
+		from: [
+			{
+				addressId: "addr-1",
+				name: "Mondial Relay",
+				email: "delivery.notice@gmail.example",
+			},
+		],
+		to: [],
+		cc: [],
+		bcc: [],
+	},
+	bodyParts: [],
+};
+
+let harness: DomHarness | undefined;
+let http: HttpMock | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http?.restore();
+	http = undefined;
+});
+
+// The router reads `self` at construction; the shared jsdom globals stop at
+// `window`.
+(globalThis as { self?: typeof globalThis }).self ??= globalThis;
+
+interface PaneUnderTest {
+	name: string;
+	/** The list's own segment under `/mail`, which is its whole route. */
+	segment: string;
+	Provider: ComponentType<{
+		thread: OpenThreadPath | undefined;
+		children: ReactNode;
+	}>;
+	Reading: ComponentType;
+}
+
+const panes: PaneUnderTest[] = [
+	{
+		name: "the brief",
+		segment: "brief",
+		Provider: BriefPane,
+		Reading: BriefPane.Reading,
+	},
+	{
+		name: "Flagged",
+		segment: "flagged",
+		Provider: FlaggedPane,
+		Reading: FlaggedPane.Reading,
+	},
+];
+
+const testRouter = (pane: PaneUnderTest): AnyRouter => {
+	const rootRoute = createRootRoute({
+		component: () =>
+			createElement(ComposeProvider, null, createElement(Outlet)),
+	});
+	const mailRoute = createRoute({
+		getParentRoute: () => rootRoute,
+		path: "/mail",
+		validateSearch: (search: Record<string, unknown>) => search,
+		component: Outlet,
+	});
+	// Present so `useBrowsedList` has the route its `from` names, the way the
+	// generated tree does.
+	const mailboxRoute = createRoute({
+		getParentRoute: () => mailRoute,
+		path: "/$mailboxId",
+		component: Outlet,
+	});
+	const listRoute = createRoute({
+		getParentRoute: () => mailRoute,
+		path: `/${pane.segment}`,
+		component: () =>
+			createElement(pane.Provider, {
+				thread: useOpenThreadPath(),
+				// biome-ignore lint/correctness/noChildrenProp: no JSX in a `.ts` test, and createElement's variadic children do not satisfy a required prop
+				children: createElement(Outlet),
+			}),
+	});
+	const threadRoute = createRoute({
+		getParentRoute: () => listRoute,
+		path: "$threadId",
+		component: Outlet,
+	});
+	// The shell the route mounts, seeded at a width with no room for the rail.
+	const messageRoute = createRoute({
+		getParentRoute: () => threadRoute,
+		path: "$messageId",
+		component: () =>
+			createElement(AppShellSlotted, {
+				initialWidth: TWO_PANE_WIDTH,
+				nav: null,
+				list: null,
+				reading: createElement(pane.Reading),
+			}),
+	});
+	const routeTree = rootRoute.addChildren([
+		mailRoute.addChildren([
+			mailboxRoute,
+			listRoute.addChildren([threadRoute.addChildren([messageRoute])]),
+		]),
+	]);
+	return createRouter({
+		routeTree,
+		history: createMemoryHistory({
+			initialEntries: [`/mail/${pane.segment}/${THREAD_ID}/${MESSAGE_ID}`],
+		}),
+	}) as unknown as AnyRouter;
+};
+
+const mount = async (pane: PaneUnderTest): Promise<DomHarness> => {
+	http = mockFetch((call) => {
+		if (call.path.endsWith("/config")) return { accounts: [] };
+		if (call.path.endsWith(`/threads/${THREAD_ID}/messages`)) {
+			return { items: [row] };
+		}
+		if (call.path.includes("/messages/")) return describedMessage;
+		if (call.path.includes("/threads")) return { items: [row] };
+		return { items: [] };
+	});
+
+	const router = testRouter(pane);
+	await router.load();
+	const mounted = createDomHarness({ viewportWidth: TWO_PANE_WIDTH });
+	harness = mounted;
+	mounted.renderApp(createElement(RouterProvider, { router }));
+	await settle(mounted);
+	return mounted;
+};
+
+const settle = async (mounted: DomHarness): Promise<void> => {
+	await mounted.flush();
+	await mounted.wait(20);
+	await mounted.flush();
+};
+
+const drawer = (mounted: DomHarness): HTMLElement | null =>
+	mounted.query('[role="dialog"][aria-label="Message details"]');
+
+describe("intelligence is reachable wherever the reading pane mounts (#817)", () => {
+	for (const pane of panes) {
+		it(`${pane.name} offers a live toolbar control below the rail's width`, async () => {
+			const mounted = await mount(pane);
+
+			const toggle = mounted.byLabel(SHOW_INTELLIGENCE) as HTMLButtonElement;
+			assert.equal(
+				toggle.disabled,
+				false,
+				"the control was greyed out at a width where the drawer is the surface",
+			);
+
+			mounted.click(toggle);
+			await settle(mounted);
+
+			assert.ok(drawer(mounted), "pressing it opened nothing");
+			assert.ok(
+				mounted.query(`[aria-label="${HIDE_INTELLIGENCE}"]`),
+				"the toolbar still reports the surface as closed",
+			);
+		});
+
+		it(`${pane.name} reaches the DKIM explanation from the banner`, async () => {
+			const mounted = await mount(pane);
+
+			mounted.click(mounted.byText("button", "Why?"));
+			await settle(mounted);
+
+			assert.ok(
+				drawer(mounted),
+				"the banner's Why? reached no intelligence surface",
+			);
+		});
+	}
+});