From e64dd02114ef4b6f7685077216925a01dd913b2d Mon Sep 17 00:00:00 2001
From: dawn <dawn@tangled.org>
Date: Sun, 11 Oct 2026 23:19:39 +0300
Subject: [PATCH] web: let ui primitives take a test id

Signed-off-by: dawn <dawn@tangled.org>
---
 web/src/lib/components/ui/ActorInput.svelte   |  2 ++
 web/src/lib/components/ui/ButtonGroup.svelte  |  3 ++-
 web/src/lib/components/ui/Combobox.svelte     |  8 +++++++-
 web/src/lib/components/ui/ConfirmModal.svelte |  6 ++++--
 web/src/lib/components/ui/Dropdown.svelte     |  4 +++-
 web/src/lib/components/ui/EmptyState.svelte   |  2 ++
 web/src/lib/components/ui/Error.svelte        |  2 +-
 .../lib/components/ui/MarkdownEditor.svelte   |  5 ++++-
 web/src/lib/components/ui/Modal.svelte        |  3 +++
 web/src/lib/components/ui/Pagination.svelte   |  4 ++++
 web/src/lib/components/ui/Segment.svelte      |  1 +
 web/src/lib/components/ui/Select.svelte       |  6 +++++-
 web/src/lib/components/ui/SplitButton.svelte  | 19 ++++++++++++++++---
 web/src/lib/components/ui/Tabs.svelte         |  2 ++
 web/src/lib/components/ui/TagInput.svelte     |  2 ++
 15 files changed, 58 insertions(+), 11 deletions(-)

diff --git a/web/src/lib/components/ui/ActorInput.svelte b/web/src/lib/components/ui/ActorInput.svelte
index 69eaedf0f..fd564feb4 100644
--- a/web/src/lib/components/ui/ActorInput.svelte
+++ b/web/src/lib/components/ui/ActorInput.svelte
@@ -206,6 +206,8 @@
 			{#if actors.length > 0}
 				{#each actors as actor, index (actor.did)}
 					<button
+						data-handle={actor.handle}
+						data-did={actor.did}
 						id={`${resultListId}-${index}`}
 						type="button"
 						role="option"
diff --git a/web/src/lib/components/ui/ButtonGroup.svelte b/web/src/lib/components/ui/ButtonGroup.svelte
index 8caf0e7a1..c4bd65d8f 100644
--- a/web/src/lib/components/ui/ButtonGroup.svelte
+++ b/web/src/lib/components/ui/ButtonGroup.svelte
@@ -37,8 +37,9 @@
 
 <script lang="ts">
 	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
 
-	interface Props {
+	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "class" | "children"> {
 		spaced?: ButtonGroupVariants["spaced"];
 		direction?: ButtonGroupVariants["direction"];
 		class?: string;
diff --git a/web/src/lib/components/ui/Combobox.svelte b/web/src/lib/components/ui/Combobox.svelte
index d0f47e50b..b2fe85a03 100644
--- a/web/src/lib/components/ui/Combobox.svelte
+++ b/web/src/lib/components/ui/Combobox.svelte
@@ -64,6 +64,7 @@
 		align?: SelectAlign;
 		id?: string;
 		class?: string;
+		testid?: string;
 		panelClass?: string;
 		listClass?: string;
 		footer?: Snippet;
@@ -93,6 +94,7 @@
 		align = "left",
 		id,
 		class: className,
+		testid,
 		panelClass,
 		listClass,
 		footer,
@@ -325,11 +327,12 @@
 	});
 </script>
 
-<div class={classes.root({ class: className })}>
+<div class={classes.root({ class: className })} data-testid={testid}>
 	{#if trigger}
 		{@render trigger({ props: triggerProps })}
 	{:else}
 		<button
+			data-testid="trigger"
 			type="button"
 			class={field.box({ class: classes.trigger() })}
 			aria-label={label}
@@ -364,6 +367,7 @@
 		{#if filter}
 			<div class={classes.search()}>
 				<Input
+					data-testid="search"
 					bind:element={searchEl}
 					type="text"
 					value={search}
@@ -399,6 +403,8 @@
 					<Separator class="my-2xs" />
 				{/if}
 				<button
+					data-testid="option"
+					data-value={item.value}
 					id={optionId(index)}
 					type="button"
 					role="option"
diff --git a/web/src/lib/components/ui/ConfirmModal.svelte b/web/src/lib/components/ui/ConfirmModal.svelte
index eaf50604c..366fb8831 100644
--- a/web/src/lib/components/ui/ConfirmModal.svelte
+++ b/web/src/lib/components/ui/ConfirmModal.svelte
@@ -11,6 +11,7 @@
 		cancelLabel?: string;
 		loading?: boolean;
 		onconfirm: () => void;
+		testid?: string;
 	}
 
 	let {
@@ -21,7 +22,8 @@
 		variant = "destructive",
 		cancelLabel = "Cancel",
 		loading = false,
-		onconfirm
+		onconfirm,
+		testid
 	}: Props = $props();
 </script>
 
@@ -34,4 +36,4 @@
 	</Button>
 {/snippet}
 
-<Modal bind:open {title} {description} {footer}></Modal>
+<Modal bind:open {title} {description} {footer} {testid}></Modal>
diff --git a/web/src/lib/components/ui/Dropdown.svelte b/web/src/lib/components/ui/Dropdown.svelte
index 9aa92c253..fe1ba1f32 100644
--- a/web/src/lib/components/ui/Dropdown.svelte
+++ b/web/src/lib/components/ui/Dropdown.svelte
@@ -39,6 +39,7 @@
 		triggerClass?: string;
 		matchTriggerWidth?: boolean;
 		class?: string;
+		testid?: string;
 		trigger: Snippet;
 		children: Snippet;
 		xOffset?: number;
@@ -91,6 +92,7 @@
 		triggerClass,
 		matchTriggerWidth = false,
 		class: className,
+		testid,
 		trigger,
 		children,
 		xOffset,
@@ -246,7 +248,7 @@
 	});
 </script>
 
-<div class={classes.root({ class: className })} {title}>
+<div class={classes.root({ class: className })} {title} data-testid={testid}>
 	<Button
 		bind:ref={triggerElement}
 		variant={variant === "button" ? buttonVariant : "ghost"}
diff --git a/web/src/lib/components/ui/EmptyState.svelte b/web/src/lib/components/ui/EmptyState.svelte
index 198be2799..52065d14e 100644
--- a/web/src/lib/components/ui/EmptyState.svelte
+++ b/web/src/lib/components/ui/EmptyState.svelte
@@ -30,6 +30,7 @@
 
 {#if size === "inline"}
 	<p
+		data-testid="emptyState"
 		class={[
 			"flex items-center gap-xs typography-paragraph-regular text-foreground-muted",
 			className
@@ -39,6 +40,7 @@
 	</p>
 {:else}
 	<Card
+		data-testid="emptyState"
 		{border}
 		{background}
 		padding="none"
diff --git a/web/src/lib/components/ui/Error.svelte b/web/src/lib/components/ui/Error.svelte
index 0bc7b39f5..cf7621e20 100644
--- a/web/src/lib/components/ui/Error.svelte
+++ b/web/src/lib/components/ui/Error.svelte
@@ -63,7 +63,7 @@
 </script>
 
 {#if label}
-	<div class={classes.root({ class: className })} role="alert" {...rest}>
+	<div class={classes.root({ class: className })} role="alert" data-testid="errorAlert" {...rest}>
 		<div class={classes.header()}>
 			<OctagonAlert class={classes.icon()} aria-hidden="true" />
 			<span class={classes.label()}>{label}</span>
diff --git a/web/src/lib/components/ui/MarkdownEditor.svelte b/web/src/lib/components/ui/MarkdownEditor.svelte
index 493252a04..a2d0efc48 100644
--- a/web/src/lib/components/ui/MarkdownEditor.svelte
+++ b/web/src/lib/components/ui/MarkdownEditor.svelte
@@ -190,6 +190,7 @@
 		compact?: boolean;
 		layered?: boolean;
 		trailing?: Snippet;
+		testid?: string;
 	}
 
 	let {
@@ -205,7 +206,8 @@
 		transparent = false,
 		compact = false,
 		layered = false,
-		trailing
+		trailing,
+		testid
 	}: Props = $props();
 
 	const uid = $props.id();
@@ -496,6 +498,7 @@
 	<div class={classes.body()}>
 		<Textarea
 			id={textareaId}
+			data-testid={testid}
 			{name}
 			rows={compact ? 1 : rows}
 			size={compact ? "unsized" : "regular"}
diff --git a/web/src/lib/components/ui/Modal.svelte b/web/src/lib/components/ui/Modal.svelte
index d12a8a6d4..8cfb43b85 100644
--- a/web/src/lib/components/ui/Modal.svelte
+++ b/web/src/lib/components/ui/Modal.svelte
@@ -47,6 +47,7 @@
 		size?: ModalVariants["size"];
 		drawer?: boolean;
 		class?: string;
+		testid?: string;
 		children?: Snippet;
 		footer?: Snippet;
 	}
@@ -58,6 +59,7 @@
 		size = "regular",
 		drawer,
 		class: className,
+		testid,
 		children,
 		footer,
 		titleIcon
@@ -162,6 +164,7 @@
 
 <dialog
 	bind:this={panel}
+	data-testid={testid}
 	closedby="any"
 	onclose={() => (open = false)}
 	onclick={onClick}
diff --git a/web/src/lib/components/ui/Pagination.svelte b/web/src/lib/components/ui/Pagination.svelte
index e6079ea50..726250947 100644
--- a/web/src/lib/components/ui/Pagination.svelte
+++ b/web/src/lib/components/ui/Pagination.svelte
@@ -119,6 +119,7 @@
 		square={!labels}
 		icon={ChevronLeft}
 		aria-disabled={spent(current > 1)}
+		data-testid="previousPage"
 		aria-label="Previous page"
 		onclick={() => goTo(current - 1)}
 	>
@@ -139,6 +140,8 @@
 					{#if typeof item === "number"}
 						{@const isSelected = item === current}
 						<Button
+							data-testid="page"
+							data-page={item}
 							variant="ghost"
 							class={style.page({ selected: isSelected })}
 							aria-current={isSelected ? "page" : undefined}
@@ -167,6 +170,7 @@
 		icon={ChevronRight}
 		iconSide="right"
 		aria-disabled={spent(current < count)}
+		data-testid="nextPage"
 		aria-label="Next page"
 		onclick={() => goTo(current + 1)}
 	>
diff --git a/web/src/lib/components/ui/Segment.svelte b/web/src/lib/components/ui/Segment.svelte
index c649bd82f..263c744ee 100644
--- a/web/src/lib/components/ui/Segment.svelte
+++ b/web/src/lib/components/ui/Segment.svelte
@@ -56,6 +56,7 @@
 </script>
 
 <Button
+	data-testid="segment"
 	{...rest}
 	variant="ghost"
 	{href}
diff --git a/web/src/lib/components/ui/Select.svelte b/web/src/lib/components/ui/Select.svelte
index 696713e06..ea81a6c50 100644
--- a/web/src/lib/components/ui/Select.svelte
+++ b/web/src/lib/components/ui/Select.svelte
@@ -29,6 +29,7 @@
 		align?: SelectAlign;
 		panelClass?: string;
 		footer?: Snippet;
+		testid?: string;
 	}
 
 	let {
@@ -49,7 +50,8 @@
 		loading,
 		align,
 		panelClass,
-		footer
+		footer,
+		testid
 	}: Props = $props();
 
 	const groups = $derived(
@@ -99,6 +101,7 @@
 		{align}
 		{panelClass}
 		{footer}
+		{testid}
 		class={className}
 	/>
 {:else}
@@ -111,6 +114,7 @@
 		{/if}
 		<select
 			bind:value
+			data-testid={testid}
 			{id}
 			{disabled}
 			{onchange}
diff --git a/web/src/lib/components/ui/SplitButton.svelte b/web/src/lib/components/ui/SplitButton.svelte
index 797a83fd3..6ed395c79 100644
--- a/web/src/lib/components/ui/SplitButton.svelte
+++ b/web/src/lib/components/ui/SplitButton.svelte
@@ -31,6 +31,7 @@
 		disabled?: boolean;
 		loading?: boolean;
 		class?: string;
+		testid?: string;
 	}
 
 	let {
@@ -42,7 +43,8 @@
 		menuLabel = "More options",
 		disabled = false,
 		loading = false,
-		class: className
+		class: className,
+		testid
 	}: Props = $props();
 
 	// options can be built from a filtered list, so neither an empty array nor a
@@ -51,8 +53,9 @@
 </script>
 
 {#if current}
-	<ButtonGroup class={className}>
+	<ButtonGroup class={className} data-testid={testid}>
 		<Button
+			data-testid="primaryAction"
 			class="flex-1"
 			{variant}
 			{size}
@@ -65,12 +68,22 @@
 		</Button>
 		<!-- the menu stays open even when the armed option is disabled, so a caller
 		     can gate one option (a conflicting merge, say) without trapping the user -->
-		<Dropdown variant="button" square buttonVariant={variant} {size} {align} label={menuLabel}>
+		<Dropdown
+			variant="button"
+			square
+			buttonVariant={variant}
+			{size}
+			{align}
+			label={menuLabel}
+			testid="options"
+		>
 			{#snippet trigger()}
 				<ChevronDown class={buttonIcon({ size })} />
 			{/snippet}
 			{#each options as option, index (option.label)}
 				<DropdownItem
+					data-testid="option"
+					data-index={index}
 					icon={option.icon}
 					danger={option.danger}
 					{size}
diff --git a/web/src/lib/components/ui/Tabs.svelte b/web/src/lib/components/ui/Tabs.svelte
index 4b315b623..3014f03f8 100644
--- a/web/src/lib/components/ui/Tabs.svelte
+++ b/web/src/lib/components/ui/Tabs.svelte
@@ -242,6 +242,8 @@
 		{@const isSelected = selected === tab.id}
 		{@const Glyph = tab.icon}
 		<a
+			data-testid="tab"
+			data-tab={tab.id}
 			bind:this={nodes[i]}
 			href={tab.url}
 			aria-current={selected === tab.id ? "page" : undefined}
diff --git a/web/src/lib/components/ui/TagInput.svelte b/web/src/lib/components/ui/TagInput.svelte
index 5ef1a5cdf..4abe811a9 100644
--- a/web/src/lib/components/ui/TagInput.svelte
+++ b/web/src/lib/components/ui/TagInput.svelte
@@ -500,6 +500,8 @@
 			{#each rows as { tag, index, key } (key)}
 				<li class={slots.item()} animate:flip={reflow} out:chipExit>
 					<Tag
+						data-testid="tag"
+						data-value={tag.value}
 						{size}
 						color={armed === index ? "gray" : tag.color}
 						icon={tag.icon}
-- 
2.51.2