From e817fb52cf2e90bf8d49548e00d7c31e8f767288 Mon Sep 17 00:00:00 2001
From: Dmytro Stanchiev <git@dmytros.dev>
Date: Wed, 22 Apr 2026 17:48:15 -0400
Subject: [PATCH] test(ai-toolbar): verify masonry prompt wrapping contract

---
 tests/ai-toolbar.test.ts | 29 +++++++++++++++++++++++++----
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/tests/ai-toolbar.test.ts b/tests/ai-toolbar.test.ts
index f7bc726..fb1b2bc 100644
--- a/tests/ai-toolbar.test.ts
+++ b/tests/ai-toolbar.test.ts
@@ -1,5 +1,6 @@
 import { describe, expect, test } from "bun:test";
 import { readFileSync } from "node:fs";
+import { buttonVariants } from "@/components/ui/button";
 import { getAiDisabledMessage } from "@/lib/ai-feature-flags";
 import { cn } from "@/lib/utils";
 
@@ -53,6 +54,17 @@ const BADGE_POSITION_CLASS = "ml-auto";
 
 const readToolbarSource = () => readFileSync("src/components/ai-toolbar.tsx", "utf8");
 
+const getExamplePromptButtonClassName = () => {
+	const source = readToolbarSource();
+	const match = source.match(
+		/<Button\s+type="button"\s+variant="secondary"\s+size="sm"\s+className="([^"]*\bwhitespace-normal\b[^"]*)"/,
+	);
+
+	expect(match).not.toBeNull();
+
+	return match![1];
+};
+
 // ─── Cycle 1: AI zone visual accent ─────────────────────────────────────────
 
 describe("AI zone – primary accent ring contract", () => {
@@ -168,14 +180,23 @@ describe("AI capture redesign", () => {
 
 	test("example prompts use a masonry-style cluster inside the composer footer", () => {
 		const source = readToolbarSource();
+		const promptButtonClassName = getExamplePromptButtonClassName();
+		const mergedPromptButtonClassName = cn(
+			buttonVariants({
+				variant: "secondary",
+				size: "sm",
+				className: promptButtonClassName,
+			}),
+		);
 
 		expect(source).toContain("Try:");
 		expect(source).toContain("columns-2");
 		expect(source).toContain("break-inside-avoid");
-		expect(source).toContain("whitespace-normal");
-		expect(source).toMatch(
-			/className="[^"]*\bw-full\b[^"]*\btext-left\b[^"]*\bwhitespace-normal\b[^"]*"/,
-		);
+		expect(promptButtonClassName).toContain("whitespace-normal");
+		expect(promptButtonClassName).toContain("w-full");
+		expect(promptButtonClassName).toContain("text-left");
+		expect(mergedPromptButtonClassName).toContain("whitespace-normal");
+		expect(mergedPromptButtonClassName).not.toContain("whitespace-nowrap");
 	});
 
 	test("desktop composer uses a two-column row when the page gives it full-width space", () => {