@remit/web-client 0.0.324 → 0.0.326

package/src/components/mail/filtered-empty-state.render.test.ts

@@ -1,240 +0,0 @@
-/**
- * A list narrowed by anything at all says so when it comes back empty (#1126).
- *
- * Both list panes built the empty state's filter from the category chip alone,
- * and `MessageListEmpty` reads that object's presence as "a filter is active".
- * So the Unread chip on its own — or `is:unread` typed in the field — fell
- * through to the unfiltered copy: "No messages in Starred" over a collection
- * holding thousands of starred messages, with no way out offered.
- *
- * Driven through the chips the reader actually presses, in the real panes, so
- * the assertion is about what the screen says rather than what a helper returns.
- */
-
-import assert from "node:assert/strict";
-import { afterEach, describe, it } from "node:test";
-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 { MailContext, type MailContextValue } from "@/lib/mail-context";
-import { MailFreshnessProvider } from "@/lib/mail-freshness";
-import { EMPTY_RESULT_FOLDER_INDEX } from "@/lib/result-folder";
-import { useOpenThreadPath } from "@/routing";
-import { createDomHarness, type DomHarness } from "@/test-support/dom";
-import { type HttpMock, mockFetch } from "@/test-support/http";
-import { FlaggedPane } from "./FlaggedPane";
-import { MailboxPane } from "./MailboxPane";
-
-const MAILBOX_ID = "11111111-1111-4111-8111-111111111111";
-const DESKTOP_WIDTH = 1440;
-
-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;
-	/** What the empty state calls the collection. */
-	scopeLabel: string;
-	List: ComponentType;
-	mount: (children: ReactNode) => ReactNode;
-}
-
-const panes: PaneUnderTest[] = [
-	{
-		name: "Starred",
-		segment: "flagged",
-		scopeLabel: "Starred",
-		List: FlaggedPane.List,
-		mount: (children) =>
-			createElement(FlaggedPane, {
-				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,
-			}),
-	},
-	{
-		name: "the mailbox",
-		segment: MAILBOX_ID,
-		scopeLabel: "Inbox",
-		List: MailboxPane.List,
-		mount: (children) =>
-			createElement(MailboxPane, {
-				mailboxId: MAILBOX_ID,
-				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,
-			}),
-	},
-];
-
-/** The layout context the panes read the search field out of. */
-const mailContext = (query: string): MailContextValue => ({
-	accounts: [],
-	mailboxNameIndex: new Map(),
-	accountNameIndex: new Map(),
-	resultFolderIndex: EMPTY_RESULT_FOLDER_INDEX,
-	searchQuery: query,
-	searchInput: query,
-	searchViewKey: "list",
-	onSearchChange: () => undefined,
-	onSearchClear: () => undefined,
-	onSearchClearQuery: () => undefined,
-	intelligenceOpen: false,
-	onToggleIntelligence: () => undefined,
-	onRaiseIntelligence: () => undefined,
-});
-
-const testRouter = (pane: PaneUnderTest, query: string): AnyRouter => {
-	const rootRoute = createRootRoute({
-		component: () =>
-			createElement(MailFreshnessProvider, {
-				accountIds: [],
-				// biome-ignore lint/correctness/noChildrenProp: no JSX in a `.ts` test, and createElement's variadic children do not satisfy a required prop
-				children: createElement(
-					MailContext.Provider,
-					{ value: mailContext(query) },
-					createElement(ComposeProvider, null, createElement(Outlet)),
-				),
-			}),
-	});
-	const mailRoute = createRoute({
-		getParentRoute: () => rootRoute,
-		path: "/mail",
-		validateSearch: (search: Record<string, unknown>) => search,
-		component: Outlet,
-	});
-	const mailboxRoute = createRoute({
-		getParentRoute: () => mailRoute,
-		path: "/$mailboxId",
-		component: () => pane.mount(createElement(pane.List)),
-	});
-	const flaggedRoute = createRoute({
-		getParentRoute: () => mailRoute,
-		path: "/flagged",
-		component: () => pane.mount(createElement(pane.List)),
-	});
-	const routeTree = rootRoute.addChildren([
-		mailRoute.addChildren([mailboxRoute, flaggedRoute]),
-	]);
-	return createRouter({
-		routeTree,
-		history: createMemoryHistory({
-			initialEntries: [`/mail/${pane.segment}`],
-		}),
-	}) as unknown as AnyRouter;
-};
-
-const mount = async (pane: PaneUnderTest, query = ""): Promise<DomHarness> => {
-	http = mockFetch((call) => {
-		if (call.path.endsWith("/config")) return { accounts: [] };
-		if (call.path.endsWith("/mailboxes")) {
-			return {
-				items: [{ mailboxId: MAILBOX_ID, name: "Inbox", fullPath: "INBOX" }],
-			};
-		}
-		return { items: [] };
-	});
-
-	const router = testRouter(pane, query);
-	await router.load();
-	const mounted = createDomHarness({ viewportWidth: DESKTOP_WIDTH });
-	harness = mounted;
-	mounted.renderApp(createElement(RouterProvider, { router }));
-	await mounted.waitFor(
-		() => mounted.text().includes("No "),
-		"the empty list to settle",
-	);
-	return mounted;
-};
-
-/** Press the Unread chip, which is the whole narrowing this test is about. */
-const pressUnread = async (mounted: DomHarness): Promise<void> => {
-	mounted.click(mounted.byLabel("Expand filters"));
-	await mounted.flush();
-	const attributes = mounted.query('fieldset[aria-label="Attributes"]');
-	assert.ok(attributes, "the attribute chips are not on screen");
-	const unread = [...attributes.querySelectorAll("button")].find(
-		(button) => button.textContent === "Unread",
-	);
-	assert.ok(unread, "there is no Unread chip to press");
-	mounted.click(unread);
-	await mounted.waitFor(
-		() => mounted.text().includes("No "),
-		"the narrowed list to answer",
-	);
-};
-
-describe("an empty list narrowed by a chip or a token (#1126)", () => {
-	for (const pane of panes) {
-		it(`${pane.name} names the narrowing instead of the collection`, async () => {
-			const mounted = await mount(pane);
-			assert.match(
-				mounted.text(),
-				new RegExp(`No messages in ${pane.scopeLabel}`),
-				"the unfiltered copy is the state this test starts from",
-			);
-
-			await pressUnread(mounted);
-
-			const shown = mounted.text();
-			assert.match(shown, new RegExp(`No unread mail in ${pane.scopeLabel}`));
-			assert.doesNotMatch(
-				shown,
-				new RegExp(`No messages in ${pane.scopeLabel}`),
-				"a filtered list told the reader the collection itself was empty",
-			);
-		});
-
-		it(`${pane.name} answers a token-only search the same way`, async () => {
-			const mounted = await mount(pane, "is:unread");
-
-			const shown = mounted.text();
-			assert.match(shown, new RegExp(`No unread mail in ${pane.scopeLabel}`));
-			assert.doesNotMatch(
-				shown,
-				new RegExp(`No messages in ${pane.scopeLabel}`),
-				"a search of tokens alone read as an empty collection",
-			);
-			assert.doesNotMatch(
-				shown,
-				/No messages match your search/,
-				"the narrowing is named, so the generic search line is wrong here",
-			);
-		});
-
-		it(`${pane.name} says how much was checked and offers the way out`, async () => {
-			const mounted = await mount(pane);
-			await pressUnread(mounted);
-
-			const shown = mounted.text();
-			assert.match(shown, /Every message in this folder was checked\./);
-			assert.ok(
-				[...mounted.queryAll("button")].some(
-					(button) => button.textContent === "Clear filter",
-				),
-				"a narrowed empty list offered no way back out of the narrowing",
-			);
-		});
-	}
-});

package/src/components/mail/flagged-search-reach.render.test.ts

@@ -1,272 +0,0 @@
-/**
- * A search of the Starred collection is the listing narrowed, not a second
- * query beside it.
- *
- * It used to be a second query: one uncontinuable page, with no error state and
- * no loading state of its own. Three things followed, and none of them is
- * visible from a unit test of the criteria — only from the screen.
- *
- * A failed search rendered as "no matches". The generated client throws on a
- * 401, the hook swallowed it (`data?.items ?? []`), and an expired session was
- * indistinguishable from a collection holding nothing — the reading the
- * no-silent-auth-failure rule exists to forbid.
- *
- * "Load more" was dead under a query: the button read `hasNextPage` off the
- * listing query while the rows came from the search one, so it either did not
- * appear or fetched a page nothing rendered.
- *
- * And the empty state flashed: `listState` read the listing's loading flag, so
- * a cached listing beside an in-flight search said "no matches" before the
- * search had answered.
- */
-
-import assert from "node:assert/strict";
-import { afterEach, describe, it } from "node:test";
-import type { 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 { MailContext, type MailContextValue } from "@/lib/mail-context";
-import { MailFreshnessProvider } from "@/lib/mail-freshness";
-import { EMPTY_RESULT_FOLDER_INDEX } from "@/lib/result-folder";
-import { useOpenThreadPath } from "@/routing";
-import { createDomHarness, type DomHarness } from "@/test-support/dom";
-import { makeThreadMessage } from "@/test-support/fixtures";
-import {
-	type HttpCall,
-	type HttpMock,
-	httpError,
-	mockFetch,
-} from "@/test-support/http";
-import { FlaggedPane } from "./FlaggedPane";
-
-const QUERY = "concierge";
-const DESKTOP_WIDTH = 1440;
-
-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 match = (index: number): RemitImapThreadMessageResponse =>
-	makeThreadMessage({
-		messageId: `match-${index}`,
-		threadId: `thread-match-${index}`,
-		subject: `Parcel ${index}`,
-		snippet: "Your parcel was left with the concierge",
-		hasStars: true,
-		sentDate: 1_767_225_600_000 - index * 1_000,
-	});
-
-/** A full page, so the server hands back a continuation token with it. */
-const FIRST_PAGE = Array.from({ length: 50 }, (_, index) => match(index));
-const SECOND_PAGE = [match(50)];
-
-const mailContext = (query: string): MailContextValue => ({
-	accounts: [],
-	mailboxNameIndex: new Map(),
-	accountNameIndex: new Map(),
-	resultFolderIndex: EMPTY_RESULT_FOLDER_INDEX,
-	searchQuery: query,
-	searchInput: query,
-	searchViewKey: "list",
-	onSearchChange: () => undefined,
-	onSearchClear: () => undefined,
-	onSearchClearQuery: () => undefined,
-	intelligenceOpen: false,
-	onToggleIntelligence: () => undefined,
-	onRaiseIntelligence: () => undefined,
-});
-
-const testRouter = (query: string): AnyRouter => {
-	const rootRoute = createRootRoute({
-		component: () =>
-			createElement(MailFreshnessProvider, {
-				accountIds: [],
-				// biome-ignore lint/correctness/noChildrenProp: no JSX in a `.ts` test, and createElement's variadic children do not satisfy a required prop
-				children: createElement(
-					MailContext.Provider,
-					{ value: mailContext(query) },
-					createElement(ComposeProvider, null, createElement(Outlet)),
-				),
-			}),
-	});
-	const mailRoute = createRoute({
-		getParentRoute: () => rootRoute,
-		path: "/mail",
-		validateSearch: (search: Record<string, unknown>) => search,
-		component: Outlet,
-	});
-	const flaggedRoute = createRoute({
-		getParentRoute: () => mailRoute,
-		path: "/flagged",
-		component: () =>
-			createElement(FlaggedPane, {
-				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(FlaggedPane.List),
-			}),
-	});
-	const routeTree = rootRoute.addChildren([
-		mailRoute.addChildren([flaggedRoute]),
-	]);
-	return createRouter({
-		routeTree,
-		history: createMemoryHistory({ initialEntries: ["/mail/flagged"] }),
-	}) as unknown as AnyRouter;
-};
-
-const threadCalls = (): HttpCall[] =>
-	(http?.calls ?? []).filter(
-		(call) => new URL(call.url, "http://localhost").pathname === "/threads",
-	);
-
-const paramsOf = (call: HttpCall): URLSearchParams =>
-	new URL(call.url, "http://localhost").searchParams;
-
-const mount = async (
-	answer: (call: HttpCall) => unknown,
-	query = QUERY,
-): Promise<DomHarness> => {
-	http = mockFetch((call) => {
-		if (call.path.endsWith("/config")) return { accounts: [] };
-		if (call.path !== "/threads") return { items: [] };
-		return answer(call);
-	});
-
-	const router = testRouter(query);
-	await router.load();
-	const mounted = createDomHarness({ viewportWidth: DESKTOP_WIDTH });
-	harness = mounted;
-	mounted.renderApp(createElement(RouterProvider, { router }));
-	await mounted.flush();
-	await mounted.wait(20);
-	await mounted.flush();
-	return mounted;
-};
-
-/** The rows request: the count reads `results=false` and carries no rows. */
-const isRowRequest = (call: HttpCall): boolean =>
-	paramsOf(call).get("results") !== "false";
-
-describe("a Starred search reaches the whole collection (#1128, #1135)", () => {
-	// The failure the no-silent-auth-failure rule names: a 401 that renders as
-	// an empty result is indistinguishable from a collection holding nothing, so
-	// the reader concludes their mail is gone rather than their session.
-	it("says a failed search failed, never that nothing matched", async () => {
-		// Only the search fails. The pane's own unnarrowed listing answers, which
-		// is what let the failure hide: the view read its error state off that
-		// healthy query while rendering rows from the failed one.
-		const mounted = await mount((call) =>
-			isRowRequest(call) && paramsOf(call).get("query")
-				? httpError(401, "Session expired")
-				: { items: [] },
-		);
-
-		await mounted.waitFor(
-			() => mounted.text().includes("Couldn't load messages"),
-			"the failed search to state itself",
-		);
-
-		const shown = mounted.text();
-		assert.ok(
-			!/No .*matching/i.test(shown) && !/No messages in Starred/.test(shown),
-			`a failed search rendered as an empty collection: ${shown.slice(0, 300)}`,
-		);
-		assert.ok(
-			[...mounted.queryAll("button")].some(
-				(button) => (button.textContent ?? "").trim() === "Retry",
-			),
-			"the failure offered no way to retry",
-		);
-	});
-
-	// The dead button: the rows came from a query with no continuation, so the
-	// control that asks for more of them had nothing to ask.
-	it("pages a search past its first page", async () => {
-		const mounted = await mount((call) => {
-			if (!isRowRequest(call)) return { count: FIRST_PAGE.length + 1 };
-			return paramsOf(call).get("continuationToken")
-				? { items: SECOND_PAGE }
-				: { items: FIRST_PAGE, continuationToken: "page-2" };
-		});
-
-		await mounted.waitFor(
-			() => mounted.text().includes("Parcel 0"),
-			"the first page of matches",
-		);
-
-		const loadMore = [...mounted.queryAll("button")].find((button) =>
-			(button.textContent ?? "").includes("Load more"),
-		);
-		assert.ok(loadMore, "a search with more matches offered no way to them");
-
-		mounted.click(loadMore);
-		await mounted.waitFor(
-			() => mounted.text().includes("Parcel 50"),
-			"the second page of matches",
-		);
-
-		const paged = threadCalls().filter(
-			(call) => isRowRequest(call) && paramsOf(call).get("continuationToken"),
-		);
-		assert.equal(paged.length, 1, "the second page was never requested");
-		assert.equal(
-			paramsOf(paged[0]).get("query"),
-			QUERY,
-			"the next page dropped the search text",
-		);
-	});
-
-	// One request answers the rows under a query, so the free text travels with
-	// every other criterion rather than in a second query beside them. (The pane
-	// keeps its own unnarrowed listing for selection resolution; that one carries
-	// no text and is not this.)
-	it("asks for the matches once, on the listing request", async () => {
-		const mounted = await mount(() => ({ items: FIRST_PAGE.slice(0, 2) }));
-		await mounted.waitFor(
-			() => mounted.text().includes("Parcel 0"),
-			"the matches to render",
-		);
-
-		const searched = threadCalls().filter(
-			(call) => isRowRequest(call) && paramsOf(call).get("query") === QUERY,
-		);
-		assert.equal(searched.length, 1, "the search fanned out into two requests");
-		assert.equal(paramsOf(searched[0]).get("starred"), "true");
-	});
-
-	// The reach sentence is read off the request. A narrowing token beside the
-	// free text is what puts the sentence on screen, and both are parameters
-	// now, so the honest claim is the whole collection — which is only true
-	// because the search pages to its end rather than stopping at one window.
-	it("claims the whole collection was checked when nothing matched", async () => {
-		const mounted = await mount(
-			(call) => (isRowRequest(call) ? { items: [] } : { count: 0 }),
-			`is:unread ${QUERY}`,
-		);
-
-		await mounted.waitFor(
-			() => mounted.text().includes("No "),
-			"the empty search to settle",
-		);
-		assert.match(mounted.text(), /Every message in this folder was checked\./);
-	});
-});

package/src/components/mail/flagged.stories.tsx

@@ -1,159 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { expect, userEvent, waitFor, within } from "storybook/test";
-import { AppStory } from "@/mocks/story-frame/AppStory";
-import { mailHandlers } from "@/mocks/story-frame/mail-handlers";
-import { mailWorld } from "@/mocks/story-frame/mail-world";
-
-const world = mailWorld();
-
-const meta = {
-	title: "Playground/Shipped/Mail/Flagged",
-	component: AppStory,
-	args: { url: "/mail/flagged" },
-	parameters: {
-		layout: "fullscreen",
-		msw: { handlers: mailHandlers(world) },
-	},
-} satisfies Meta<typeof AppStory>;
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-const filterToCategory = async (canvasElement: HTMLElement, name: string) => {
-	const canvas = within(canvasElement);
-	await userEvent.click(await canvas.findByLabelText("Expand filters"));
-	const categories = await canvas.findByLabelText("Categories");
-	await userEvent.click(within(categories).getByRole("button", { name }));
-};
-
-const listHeader = (canvasElement: HTMLElement): HTMLElement => {
-	const title = within(canvasElement)
-		.getAllByText("Starred")
-		.find((element) => element.closest("header"));
-	const header = title?.closest("header");
-	if (!header) throw new Error("The Starred list header is not on screen");
-	return header;
-};
-
-export const Default: Story = {
-	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		await expect(await canvas.findByText("Q3 planning")).toBeVisible();
-		await expect(canvas.getByText("Conference talk outline")).toBeVisible();
-		await expect(canvas.getByText("Invoice #1042")).toBeVisible();
-		await expect(canvas.queryByText("Dinner on Saturday?")).toBeNull();
-	},
-};
-
-export const Phone: Story = {
-	globals: { viewport: { value: "mobile", isRotated: false } },
-	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		await expect(await canvas.findByText("Q3 planning")).toBeVisible();
-	},
-};
-
-export const CountUnavailable: Story = {
-	parameters: {
-		msw: { handlers: mailHandlers(world, { withholdCounts: true }) },
-	},
-	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		await canvas.findByText("Q3 planning");
-		await expect(listHeader(canvasElement).textContent).not.toMatch(/\d/);
-	},
-};
-
-export const FilteredWithResults: Story = {
-	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		await canvas.findByText("Invoice #1042");
-		await filterToCategory(canvasElement, "Personal");
-		await waitFor(() =>
-			expect(canvas.queryByText("Invoice #1042")).not.toBeInTheDocument(),
-		);
-		await expect(await canvas.findByText("Q3 planning")).toBeVisible();
-		await expect(canvas.getByText("Conference talk outline")).toBeVisible();
-	},
-};
-
-export const FilteredEmpty: Story = {
-	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		await canvas.findByText("Q3 planning");
-		await filterToCategory(canvasElement, "Newsletter");
-		await expect(
-			await canvas.findByText("Every message in this folder was checked."),
-		).toBeVisible();
-		await expect(canvas.queryByText("No messages in Starred")).toBeNull();
-	},
-};
-
-export const FilteredSearchEmpty: Story = {
-	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		await canvas.findByText("Q3 planning");
-		await filterToCategory(canvasElement, "Newsletter");
-		await canvas.findByText("Every message in this folder was checked.");
-		await userEvent.type(
-			canvas.getByLabelText("Search mail"),
-			"planning{Enter}",
-		);
-		await expect(
-			await canvas.findByText("No results for “planning” in Newsletter mail"),
-		).toBeVisible();
-		await expect(
-			canvas.getByText("Every message in this folder was checked."),
-		).toBeVisible();
-	},
-};
-
-export const FilteredWithMorePages: Story = {
-	parameters: {
-		msw: { handlers: mailHandlers(world, { pageSize: 2 }) },
-	},
-	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		await canvas.findByText("Q3 planning");
-		await filterToCategory(canvasElement, "Personal");
-		await expect(
-			await canvas.findByRole("button", { name: "Load more" }),
-		).toBeEnabled();
-	},
-};
-
-export const FilteredFetchingMore: Story = {
-	parameters: {
-		msw: {
-			handlers: mailHandlers(world, { pageSize: 2, holdLaterPages: true }),
-		},
-	},
-	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		await canvas.findByText("Q3 planning");
-		await filterToCategory(canvasElement, "Personal");
-		await userEvent.click(
-			await canvas.findByRole("button", { name: "Load more" }),
-		);
-		await expect(
-			await canvas.findByRole("button", { name: "Loading…" }),
-		).toBeDisabled();
-	},
-};
-
-export const Empty: Story = {
-	parameters: {
-		msw: {
-			handlers: mailHandlers({
-				...world,
-				threads: world.threads.filter((row) => !row.hasStars),
-			}),
-		},
-	},
-	play: async ({ canvasElement }) => {
-		const canvas = within(canvasElement);
-		await expect(
-			await canvas.findByText("No messages in Starred"),
-		).toBeVisible();
-	},
-};