1import { renderToStaticMarkup } from "react-dom/server";
2import { describe, expect, it } from "vite-plus/test";
3
4import {
5 AlertDialog,
6 AlertDialogDescription,
7 AlertDialogFooter,
8 AlertDialogHeader,
9 AlertDialogTitle,
10} from "./alert-dialog";
11
12describe("alert dialog description", () => {
13 it("keeps a long payload in a bounded scroll region so the actions stay put", () => {
14 const payload = `{elements:[${"x".repeat(4_000)}]}`;
15 const markup = renderToStaticMarkup(
16 <AlertDialog>
17 <AlertDialogHeader>
18 <AlertDialogTitle>Allow excalidraw to run export_to_excalidraw?</AlertDialogTitle>
19 <AlertDialogDescription>{payload}</AlertDialogDescription>
20 </AlertDialogHeader>
21 <AlertDialogFooter>Cancel</AlertDialogFooter>
22 </AlertDialog>,
23 );
24 const header = /<div[^>]*data-slot="alert-dialog-header"[^>]*>/.exec(markup)?.[0] ?? "";
25 const description = /<p[^>]*data-slot="alert-dialog-description"[^>]*>/.exec(markup)?.[0] ?? "";
26
27 // The whole payload stays available to inspect, untruncated…
28 expect(markup).toContain(payload);
29 // …but bounded: the header may shrink inside the height-capped popup and
30 // the description scrolls instead of pushing the footer off screen.
31 expect(header).toContain("min-h-0");
32 expect(description).toContain("max-h-[min(24rem,60dvh)]");
33 expect(description).toContain("overflow-y-auto");
34 expect(description).toContain("overscroll-contain");
35 expect(description).toContain("wrap-anywhere");
36 expect(markup.indexOf("</p>")).toBeLessThan(markup.indexOf("Cancel"));
37 });
38});