@nationaldesignstudio/react 0.3.0 → 0.5.1

package/src/components/atoms/popover/popover.test.tsx

@@ -0,0 +1,486 @@
+import { describe, expect, test, vi } from "vitest";
+import { page, userEvent } from "vitest/browser";
+import { render } from "vitest-browser-react";
+import { Button } from "../button";
+import {
+	Popover,
+	PopoverArrow,
+	PopoverBackdrop,
+	PopoverClose,
+	PopoverDescription,
+	PopoverParts,
+	PopoverPopup,
+	PopoverPortal,
+	PopoverPositioner,
+	PopoverTitle,
+	PopoverTrigger,
+} from "./popover";
+
+describe("Popover", () => {
+	describe("Accessibility", () => {
+		test("trigger element is accessible", async () => {
+			render(
+				<Popover trigger={<Button>Open Popover</Button>} title="Title">
+					Content
+				</Popover>,
+			);
+			await expect
+				.element(page.getByRole("button", { name: "Open Popover" }))
+				.toBeInTheDocument();
+		});
+
+		test("popover has correct role when visible", async () => {
+			render(
+				<Popover
+					trigger={<Button>Open Popover</Button>}
+					title="Popover Title"
+					defaultOpen
+				>
+					Popover content
+				</Popover>,
+			);
+			// Popover uses dialog role
+			await expect.element(page.getByRole("dialog")).toBeInTheDocument();
+		});
+
+		test("trigger element is focusable", async () => {
+			render(
+				<Popover trigger={<Button>Focus me</Button>} title="Title">
+					Content
+				</Popover>,
+			);
+			await userEvent.keyboard("{Tab}");
+			await expect
+				.element(page.getByRole("button", { name: "Focus me" }))
+				.toHaveFocus();
+		});
+	});
+
+	describe("Interactions", () => {
+		test("shows popover on click", async () => {
+			render(
+				<Popover trigger={<Button>Click me</Button>} title="Click Popover">
+					Click content
+				</Popover>,
+			);
+
+			// Popover should not be visible initially
+			await expect.element(page.getByRole("dialog")).not.toBeInTheDocument();
+
+			// Click the trigger
+			await page.getByRole("button", { name: "Click me" }).click();
+
+			// Popover should now be visible
+			await expect.element(page.getByRole("dialog")).toBeInTheDocument();
+		});
+
+		test("closes popover when clicking outside", async () => {
+			render(
+				<div>
+					<Popover trigger={<Button>Click me</Button>} title="Test">
+						Content
+					</Popover>
+					<Button>Outside</Button>
+				</div>,
+			);
+
+			// Open popover
+			await page.getByRole("button", { name: "Click me" }).click();
+			await expect.element(page.getByRole("dialog")).toBeInTheDocument();
+
+			// Click outside
+			await page.getByRole("button", { name: "Outside" }).click();
+
+			// Popover should be closed
+			await expect.element(page.getByRole("dialog")).not.toBeInTheDocument();
+		});
+
+		test("closes popover on escape key", async () => {
+			render(
+				<Popover trigger={<Button>Click me</Button>} title="Test" defaultOpen>
+					Content
+				</Popover>,
+			);
+
+			await expect.element(page.getByRole("dialog")).toBeInTheDocument();
+
+			// Press escape
+			await userEvent.keyboard("{Escape}");
+
+			// Popover should be closed
+			await expect.element(page.getByRole("dialog")).not.toBeInTheDocument();
+		});
+	});
+
+	describe("Controlled State", () => {
+		test("respects controlled open state", async () => {
+			render(
+				<Popover
+					trigger={<Button>Trigger</Button>}
+					title="Controlled"
+					open={true}
+				>
+					Controlled content
+				</Popover>,
+			);
+
+			// Popover should be visible when open=true
+			await expect.element(page.getByRole("dialog")).toBeInTheDocument();
+		});
+
+		test("respects controlled closed state", async () => {
+			render(
+				<Popover
+					trigger={<Button>Trigger</Button>}
+					title="Controlled"
+					open={false}
+				>
+					Controlled content
+				</Popover>,
+			);
+
+			// Popover should not be visible when open=false
+			await expect.element(page.getByRole("dialog")).not.toBeInTheDocument();
+
+			// Should not show on click when controlled
+			await page.getByRole("button", { name: "Trigger" }).click();
+			await expect.element(page.getByRole("dialog")).not.toBeInTheDocument();
+		});
+
+		test("calls onOpenChange callback", async () => {
+			const handleOpenChange = vi.fn();
+			render(
+				<Popover
+					trigger={<Button>Trigger</Button>}
+					title="Callback"
+					onOpenChange={handleOpenChange}
+				>
+					Content
+				</Popover>,
+			);
+
+			// Click to trigger open
+			await page.getByRole("button", { name: "Trigger" }).click();
+
+			// Callback should have been called with true as first argument
+			// (Base UI passes additional context as second argument)
+			expect(handleOpenChange).toHaveBeenCalled();
+			expect(handleOpenChange.mock.calls[0][0]).toBe(true);
+		});
+
+		test("defaultOpen shows popover initially", async () => {
+			render(
+				<Popover
+					trigger={<Button>Trigger</Button>}
+					title="Default Open"
+					defaultOpen
+				>
+					Content
+				</Popover>,
+			);
+
+			// Popover should be visible initially
+			await expect.element(page.getByRole("dialog")).toBeInTheDocument();
+		});
+	});
+
+	describe("Content", () => {
+		test("displays title", async () => {
+			render(
+				<Popover
+					trigger={<Button>Trigger</Button>}
+					title="My Title"
+					defaultOpen
+				>
+					Content
+				</Popover>,
+			);
+
+			await expect.element(page.getByText("My Title")).toBeInTheDocument();
+		});
+
+		test("displays description content", async () => {
+			render(
+				<Popover trigger={<Button>Trigger</Button>} title="Title" defaultOpen>
+					Description content here
+				</Popover>,
+			);
+
+			await expect
+				.element(page.getByText("Description content here"))
+				.toBeInTheDocument();
+		});
+
+		test("displays content without title", async () => {
+			render(
+				<Popover trigger={<Button>Trigger</Button>} defaultOpen>
+					<p data-testid="custom-content">Custom content</p>
+				</Popover>,
+			);
+
+			await expect
+				.element(page.getByTestId("custom-content"))
+				.toBeInTheDocument();
+		});
+	});
+
+	describe("Close Button", () => {
+		test("shows close button when showClose is true", async () => {
+			render(
+				<Popover
+					trigger={<Button>Trigger</Button>}
+					title="With Close"
+					showClose={true}
+					defaultOpen
+				>
+					Content
+				</Popover>,
+			);
+
+			await expect
+				.element(page.getByRole("button", { name: "Close" }))
+				.toBeInTheDocument();
+		});
+
+		test("hides close button by default", async () => {
+			render(
+				<Popover
+					trigger={<Button>Trigger</Button>}
+					title="No Close"
+					defaultOpen
+				>
+					Content
+				</Popover>,
+			);
+
+			await expect
+				.element(page.getByRole("button", { name: "Close" }))
+				.not.toBeInTheDocument();
+		});
+
+		test("closes popover when clicking close button", async () => {
+			render(
+				<Popover
+					trigger={<Button>Trigger</Button>}
+					title="Closeable"
+					showClose={true}
+					defaultOpen
+				>
+					Content
+				</Popover>,
+			);
+
+			await expect.element(page.getByRole("dialog")).toBeInTheDocument();
+
+			// Click the close button
+			await page.getByRole("button", { name: "Close" }).click();
+
+			// Popover should be closed
+			await expect.element(page.getByRole("dialog")).not.toBeInTheDocument();
+		});
+	});
+
+	describe("Arrow", () => {
+		test("shows arrow by default", async () => {
+			render(
+				<Popover
+					trigger={<Button>Trigger</Button>}
+					title="With Arrow"
+					defaultOpen
+				>
+					Content
+				</Popover>,
+			);
+
+			const dialog = page.getByRole("dialog");
+			await expect.element(dialog).toBeInTheDocument();
+		});
+
+		test("hides arrow when showArrow is false", async () => {
+			render(
+				<Popover
+					trigger={<Button>Trigger</Button>}
+					title="Without Arrow"
+					showArrow={false}
+					defaultOpen
+				>
+					Content
+				</Popover>,
+			);
+
+			const dialog = page.getByRole("dialog");
+			await expect.element(dialog).toBeInTheDocument();
+		});
+	});
+
+	describe("Compound Components", () => {
+		test("renders with compound component API", async () => {
+			render(
+				<PopoverParts defaultOpen>
+					<PopoverTrigger>
+						<Button>Compound trigger</Button>
+					</PopoverTrigger>
+					<PopoverPortal>
+						<PopoverPositioner>
+							<PopoverPopup>
+								<PopoverArrow />
+								<PopoverTitle>Compound Title</PopoverTitle>
+								<PopoverDescription>Compound content</PopoverDescription>
+							</PopoverPopup>
+						</PopoverPositioner>
+					</PopoverPortal>
+				</PopoverParts>,
+			);
+
+			await expect
+				.element(page.getByRole("button", { name: "Compound trigger" }))
+				.toBeInTheDocument();
+			await expect
+				.element(page.getByText("Compound Title"))
+				.toBeInTheDocument();
+			await expect
+				.element(page.getByText("Compound content"))
+				.toBeInTheDocument();
+		});
+
+		test("backdrop renders correctly", async () => {
+			render(
+				<PopoverParts defaultOpen>
+					<PopoverTrigger>
+						<Button>With Backdrop</Button>
+					</PopoverTrigger>
+					<PopoverPortal>
+						<PopoverBackdrop data-testid="backdrop" />
+						<PopoverPositioner>
+							<PopoverPopup>Content with backdrop</PopoverPopup>
+						</PopoverPositioner>
+					</PopoverPortal>
+				</PopoverParts>,
+			);
+
+			await expect.element(page.getByTestId("backdrop")).toBeInTheDocument();
+			await expect
+				.element(page.getByText("Content with backdrop"))
+				.toBeInTheDocument();
+		});
+
+		test("close button works with compound API", async () => {
+			render(
+				<PopoverParts defaultOpen>
+					<PopoverTrigger>
+						<Button>Trigger</Button>
+					</PopoverTrigger>
+					<PopoverPortal>
+						<PopoverPositioner>
+							<PopoverPopup>
+								<PopoverClose>
+									<span>X</span>
+								</PopoverClose>
+								Content
+							</PopoverPopup>
+						</PopoverPositioner>
+					</PopoverPortal>
+				</PopoverParts>,
+			);
+
+			await expect.element(page.getByRole("dialog")).toBeInTheDocument();
+
+			// Click the close button
+			await page.getByText("X").click();
+
+			// Popover should be closed
+			await expect.element(page.getByRole("dialog")).not.toBeInTheDocument();
+		});
+	});
+
+	describe("Styles", () => {
+		test("popover popup has light background", async () => {
+			render(
+				<Popover trigger={<Button>Trigger</Button>} title="Styled" defaultOpen>
+					Content
+				</Popover>,
+			);
+
+			const dialog = page.getByRole("dialog");
+			await expect.element(dialog).toBeInTheDocument();
+
+			const element = dialog.element();
+			const styles = window.getComputedStyle(element);
+
+			// Popover should have a non-transparent background
+			expect(styles.backgroundColor).not.toBe("rgba(0, 0, 0, 0)");
+			expect(styles.backgroundColor).not.toBe("transparent");
+		});
+
+		test("popover has border radius", async () => {
+			render(
+				<Popover trigger={<Button>Trigger</Button>} title="Styled" defaultOpen>
+					Content
+				</Popover>,
+			);
+
+			const dialog = page.getByRole("dialog");
+			await expect.element(dialog).toBeInTheDocument();
+
+			const element = dialog.element();
+			const styles = window.getComputedStyle(element);
+
+			// Should have border radius
+			const borderRadius = parseFloat(styles.borderRadius);
+			expect(borderRadius).toBeGreaterThan(0);
+		});
+
+		test("popover has shadow", async () => {
+			render(
+				<Popover trigger={<Button>Trigger</Button>} title="Styled" defaultOpen>
+					Content
+				</Popover>,
+			);
+
+			const dialog = page.getByRole("dialog");
+			await expect.element(dialog).toBeInTheDocument();
+
+			const element = dialog.element();
+			const styles = window.getComputedStyle(element);
+
+			// Should have a box shadow
+			expect(styles.boxShadow).not.toBe("none");
+		});
+
+		test("popover has high z-index", async () => {
+			render(
+				<Popover trigger={<Button>Trigger</Button>} title="Styled" defaultOpen>
+					Content
+				</Popover>,
+			);
+
+			const dialog = page.getByRole("dialog");
+			await expect.element(dialog).toBeInTheDocument();
+
+			const element = dialog.element();
+			const styles = window.getComputedStyle(element);
+
+			// Should have z-index of 50 or higher
+			const zIndex = parseInt(styles.zIndex, 10);
+			expect(zIndex).toBeGreaterThanOrEqual(50);
+		});
+
+		test("popover has border", async () => {
+			render(
+				<Popover trigger={<Button>Trigger</Button>} title="Styled" defaultOpen>
+					Content
+				</Popover>,
+			);
+
+			const dialog = page.getByRole("dialog");
+			await expect.element(dialog).toBeInTheDocument();
+
+			const element = dialog.element();
+			const styles = window.getComputedStyle(element);
+
+			// Should have a border
+			const borderWidth = parseFloat(styles.borderWidth);
+			expect(borderWidth).toBeGreaterThan(0);
+		});
+	});
+});