From f1284c3eb1ff8bc3ea26fa7d14822d53adc25ba6 Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Fri, 28 Aug 2026 11:01:54 +0100
Subject: [PATCH] web/components: nicer stories for vouch components

Signed-off-by: oppiliappan <me@oppi.li>
---
 .../profile/VouchButton.stories.svelte        | 58 ++++++++++++++++++-
 web/src/routes/login/+page.svelte             |  2 +-
 2 files changed, 58 insertions(+), 2 deletions(-)

diff --git a/web/src/lib/components/profile/VouchButton.stories.svelte b/web/src/lib/components/profile/VouchButton.stories.svelte
index 00ab522a9..44812e45b 100644
--- a/web/src/lib/components/profile/VouchButton.stories.svelte
+++ b/web/src/lib/components/profile/VouchButton.stories.svelte
@@ -1,7 +1,49 @@
 <script module lang="ts">
-	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { defineMeta, type StoryContext } from "@storybook/addon-svelte-csf";
+	import { expect, screen, userEvent, waitFor } from "storybook/test";
 	import VouchButton from "./VouchButton.svelte";
 
+	type PlayContext = Pick<StoryContext<Record<string, unknown>>, "canvas">;
+
+	// a never-settling respond keeps the save in its loading state so the
+	// spinner swap can be asserted
+	const hang = () => new Promise<Response>(() => {});
+
+	// opens the popover, selects the "Vouch" choice (so save hits putVouch rather
+	// than the instant no-op of clearing an absent vouch), and clicks Save; returns
+	// the save button for further asserts
+	const openAndSave = async (canvas: PlayContext["canvas"]) => {
+		const trigger = await canvas.findByRole("button", { name: "Vouch" });
+		await userEvent.click(trigger);
+		const choices = canvas.getAllByRole("button", { name: "Vouch" });
+		const vouchChoice = choices.find((button) => button.closest("[popover]"));
+		if (!vouchChoice) throw new Error("vouch choice not found in popover");
+		await userEvent.click(vouchChoice);
+		const save = await canvas.findByRole("button", { name: "Save" });
+		await userEvent.click(save);
+		return save;
+	};
+
+	// saving: the Save button swaps its check icon for a spinner while the write
+	// is in flight
+	const saving = async ({ canvas }: PlayContext) => {
+		const save = await openAndSave(canvas);
+		await waitFor(() => expect(save).toHaveAttribute("aria-busy", "true"));
+		await expect(save).toBeDisabled();
+	};
+
+	// the save failed: the modal shows the error via the Error component
+	const saveError = async ({ canvas }: PlayContext) => {
+		await openAndSave(canvas);
+		await waitFor(() =>
+			expect(screen.getByRole("alert")).toHaveTextContent("network request failed")
+		);
+		await expect(screen.getByRole("button", { name: "Save" })).toHaveAttribute(
+			"data-variant",
+			"primary"
+		);
+	};
+
 	// distinct dids per story keep the derived popover ids unique on the autodocs
 	// page (several triggers render there at once). none match the mock user's did
 	// (did:plc:alice), so the button always shows — except the "Self" story.
@@ -128,6 +170,20 @@
 	{/snippet}
 </Story>
 
+<!-- a hung write: the Save button's icon swaps to a spinner while the save is in flight -->
+<Story name="Saving" asChild play={saving} parameters={{ auth: { respond: hang } }}>
+	<div class="w-64">
+		<VouchButton profileDid="did:plc:saving000000000000000" initialVouch={null} />
+	</div>
+</Story>
+
+<!-- the save failed: the modal shows the error through the Error component -->
+<Story name="Save error" asChild play={saveError} parameters={{ auth: true }}>
+	<div class="w-64">
+		<VouchButton profileDid="did:plc:savefail0000000000000" initialVouch={null} />
+	</div>
+</Story>
+
 <!-- signed out: falls back to a login call-to-action -->
 <Story name="Signed out" parameters={{ auth: false }}>
 	{#snippet template(args)}
diff --git a/web/src/routes/login/+page.svelte b/web/src/routes/login/+page.svelte
index 0d83210e0..986d4d2fc 100644
--- a/web/src/routes/login/+page.svelte
+++ b/web/src/routes/login/+page.svelte
@@ -63,7 +63,7 @@
 				bind:value={identifier}
 				disabled={login.loading}
 				type="text"
-				autocomplete="username"
+				autocomplete="off"
 				autocapitalize="none"
 				spellcheck="false"
 				inputmode="url"
-- 
2.51.2