@bug-on/md3-react 2.0.3 → 3.0.0

package/src/ui/menu/menu.test.tsx

@@ -0,0 +1,624 @@
+// ─── MD3 Expressive Menu — Tests (TASK-09) ───────────────────────────────────
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it } from "vitest";
+import {
+	Menu,
+	MenuContent,
+	MenuDivider,
+	MenuGroup,
+	MenuItem,
+	MenuTrigger,
+} from "./index";
+
+afterEach(cleanup);
+
+// ─── Helper ──────────────────────────────────────────────────────────────────
+
+function renderMenu({
+	colorVariant = "standard" as const,
+	menuVariant = "expressive" as const,
+	items = ["Cut", "Copy", "Paste"],
+	selectedIndex = -1,
+	defaultOpen = true,
+}: {
+	colorVariant?: "standard" | "vibrant";
+	menuVariant?: "baseline" | "expressive";
+	items?: string[];
+	selectedIndex?: number;
+	defaultOpen?: boolean;
+} = {}) {
+	return render(
+		<Menu
+			colorVariant={colorVariant}
+			menuVariant={menuVariant}
+			defaultOpen={defaultOpen}
+		>
+			<MenuTrigger>
+				<button type="button">Open menu</button>
+			</MenuTrigger>
+			<MenuContent>
+				{items.map((item, i) => (
+					<MenuItem
+						key={item}
+						selected={i === selectedIndex}
+						data-testid={`menu-item-${i}`}
+					>
+						{item}
+					</MenuItem>
+				))}
+			</MenuContent>
+		</Menu>,
+	);
+}
+
+// ─── Test Suite ───────────────────────────────────────────────────────────────
+
+describe("Menu", () => {
+	// 1. Menu renders children when open
+	it("renders children when open", () => {
+		renderMenu({ defaultOpen: true });
+		expect(screen.getByText("Cut")).toBeInTheDocument();
+		expect(screen.getByText("Copy")).toBeInTheDocument();
+		expect(screen.getByText("Paste")).toBeInTheDocument();
+	});
+
+	// 2. MenuItem applies correct shape class for each itemPosition
+	it("MenuItem applies correct shape class for each itemPosition", () => {
+		render(
+			<Menu menuVariant="expressive" defaultOpen>
+				<MenuTrigger>
+					<button type="button">Open</button>
+				</MenuTrigger>
+				<MenuContent>
+					<MenuItem itemPosition="leading" data-testid="item-leading">
+						A
+					</MenuItem>
+					<MenuItem itemPosition="middle" data-testid="item-middle">
+						B
+					</MenuItem>
+					<MenuItem itemPosition="trailing" data-testid="item-trailing">
+						C
+					</MenuItem>
+					<MenuItem itemPosition="standalone" data-testid="item-standalone">
+						D
+					</MenuItem>
+				</MenuContent>
+			</Menu>,
+		);
+
+		const leading = screen.getByTestId("item-leading");
+		const middle = screen.getByTestId("item-middle");
+		const trailing = screen.getByTestId("item-trailing");
+		const standalone = screen.getByTestId("item-standalone");
+
+		// Shape classes based on ITEM_SHAPE_CLASSES token
+		expect(leading.className).toContain("rounded-t-[12px]");
+		expect(leading.className).toContain("rounded-b-[4px]");
+		expect(middle.className).toContain("rounded-[4px]");
+		expect(trailing.className).toContain("rounded-t-[4px]");
+		expect(trailing.className).toContain("rounded-b-[12px]");
+		expect(standalone.className).toContain("rounded-[4px]");
+	});
+
+	// 3. MenuItem shows check icon when selected=true
+	it("MenuItem shows check icon when selected", () => {
+		renderMenu({ selectedIndex: 0 });
+		// The check icon uses the text "check" from Material Symbols
+		const checkIcon = screen.getByText("check");
+		expect(checkIcon).toBeInTheDocument();
+	});
+
+	// 4. MenuItem applies disabled state correctly
+	it("MenuItem applies disabled state — opacity class and aria-disabled", () => {
+		render(
+			<Menu defaultOpen>
+				<MenuTrigger>
+					<button type="button">Open</button>
+				</MenuTrigger>
+				<MenuContent>
+					<MenuItem disabled data-testid="disabled-item">
+						Disabled
+					</MenuItem>
+				</MenuContent>
+			</Menu>,
+		);
+		const item = screen.getByTestId("disabled-item");
+		expect(item.className).toContain("opacity-[0.38]");
+		expect(item.getAttribute("aria-disabled")).toBe("true");
+	});
+
+	// 5. MenuGroup auto-injects itemPosition into children
+	it("MenuGroup auto-injects correct itemPosition based on child index", () => {
+		render(
+			<Menu menuVariant="expressive" defaultOpen>
+				<MenuTrigger>
+					<button type="button">Open</button>
+				</MenuTrigger>
+				<MenuContent>
+					<MenuGroup index={0} count={1}>
+						<MenuItem data-testid="g-item-0">A</MenuItem>
+						<MenuItem data-testid="g-item-1">B</MenuItem>
+						<MenuItem data-testid="g-item-2">C</MenuItem>
+					</MenuGroup>
+				</MenuContent>
+			</Menu>,
+		);
+
+		const first = screen.getByTestId("g-item-0");
+		const last = screen.getByTestId("g-item-2");
+
+		// First item should be "leading" shape: rounded-t-[12px] rounded-b-[4px]
+		expect(first.className).toContain("rounded-t-[12px]");
+		// Last item should be "trailing" shape: rounded-t-[4px] rounded-b-[12px]
+		expect(last.className).toContain("rounded-b-[12px]");
+	});
+
+	// 6. MenuDivider renders with role="separator"
+	it("MenuDivider renders with correct role and classes", () => {
+		render(
+			<Menu menuVariant="expressive" defaultOpen>
+				<MenuTrigger>
+					<button type="button">Open</button>
+				</MenuTrigger>
+				<MenuContent>
+					<MenuItem>A</MenuItem>
+					<MenuDivider data-testid="divider" />
+					<MenuItem>B</MenuItem>
+				</MenuContent>
+			</Menu>,
+		);
+		const divider = screen.getByTestId("divider");
+		expect(divider.getAttribute("role")).toBe("separator");
+		// Divider has mx-3 only in expressive/vertical variants
+		expect(divider.className).toContain("mx-3");
+		expect(divider.className).toContain("bg-m3-outline-variant");
+	});
+
+	// 7. Standard colorVariant applies surface-container-low on group container
+	it("Standard variant applies surface-container-low on MenuGroup", () => {
+		render(
+			<Menu colorVariant="standard" menuVariant="expressive" defaultOpen>
+				<MenuTrigger>
+					<button type="button">Open</button>
+				</MenuTrigger>
+				<MenuContent>
+					<MenuGroup index={0} count={1} data-testid="group-standard">
+						<MenuItem>A</MenuItem>
+					</MenuGroup>
+				</MenuContent>
+			</Menu>,
+		);
+		const group = screen.getByTestId("group-standard");
+		expect(group.className).toContain("bg-m3-surface-container-low");
+	});
+
+	// 8. Vibrant colorVariant applies tertiary-container on group container
+	it("Vibrant variant applies tertiary-container on MenuGroup", () => {
+		render(
+			<Menu colorVariant="vibrant" menuVariant="expressive" defaultOpen>
+				<MenuTrigger>
+					<button type="button">Open</button>
+				</MenuTrigger>
+				<MenuContent>
+					<MenuGroup index={0} count={1} data-testid="group-vibrant">
+						<MenuItem>A</MenuItem>
+					</MenuGroup>
+				</MenuContent>
+			</Menu>,
+		);
+		const group = screen.getByTestId("group-vibrant");
+		expect(group.className).toContain("bg-m3-tertiary-container");
+	});
+
+	// 9. Keyboard: ArrowDown moves focus to next item
+	// Note: JSDOM has known limitations with Radix focus management in popup menus.
+	// Radix uses tabindex="-1" and manages focus via its own logic, which
+	// doesn't fully run in JSDOM. This test verifies the menu opens correctly.
+	it("Keyboard ArrowDown: menu opens via click", async () => {
+		const user = userEvent.setup();
+		render(
+			<Menu>
+				<MenuTrigger asChild>
+					<button type="button" data-testid="trigger">
+						Open
+					</button>
+				</MenuTrigger>
+				<MenuContent>
+					<MenuItem data-testid="item-a">A</MenuItem>
+					<MenuItem data-testid="item-b">B</MenuItem>
+				</MenuContent>
+			</Menu>,
+		);
+
+		const trigger = screen.getByTestId("trigger");
+		await user.click(trigger);
+		// Items are in the DOM after opening
+		expect(screen.getByTestId("item-a")).toBeInTheDocument();
+		expect(screen.getByTestId("item-b")).toBeInTheDocument();
+	});
+
+	// 10. Keyboard: Escape closes menu
+	// Note: JSDOM has known limitations with Radix focus-return behavior.
+	// This test verifies that Escape hides the menu items.
+	it("Keyboard Escape closes menu", async () => {
+		const user = userEvent.setup();
+		render(
+			<Menu>
+				<MenuTrigger asChild>
+					<button type="button" data-testid="trigger">
+						Open
+					</button>
+				</MenuTrigger>
+				<MenuContent>
+					<MenuItem>A</MenuItem>
+				</MenuContent>
+			</Menu>,
+		);
+
+		const trigger = screen.getByTestId("trigger");
+		await user.click(trigger);
+
+		// Menu should be visible
+		expect(screen.getByText("A")).toBeInTheDocument();
+
+		await user.keyboard("{Escape}");
+
+		// After Escape, menu items should be hidden
+		expect(screen.queryByText("A")).not.toBeInTheDocument();
+	});
+});
+
+// ─── VerticalMenu Tests ────────────────────────────────────────────────────────
+
+import {
+	VerticalMenu,
+	VerticalMenuContent,
+	VerticalMenuDivider,
+	VerticalMenuGroup,
+} from "./index";
+
+describe("VerticalMenu", () => {
+	// 1. VerticalMenu renders children
+	it("renders children directly without a trigger", () => {
+		render(
+			<VerticalMenu>
+				<VerticalMenuContent>
+					<VerticalMenuGroup>
+						<MenuItem>Item A</MenuItem>
+						<MenuItem>Item B</MenuItem>
+					</VerticalMenuGroup>
+				</VerticalMenuContent>
+			</VerticalMenu>,
+		);
+		expect(screen.getByText("Item A")).toBeInTheDocument();
+		expect(screen.getByText("Item B")).toBeInTheDocument();
+	});
+
+	// 2. Gap variant: no hr elements between groups
+	it("gap separatorStyle renders no divider elements between groups", () => {
+		render(
+			<VerticalMenu>
+				<VerticalMenuContent separatorStyle="gap" data-testid="content">
+					<VerticalMenuGroup>
+						<MenuItem>A</MenuItem>
+					</VerticalMenuGroup>
+					<VerticalMenuGroup>
+						<MenuItem>B</MenuItem>
+					</VerticalMenuGroup>
+				</VerticalMenuContent>
+			</VerticalMenu>,
+		);
+		// No hr elements inserted automatically
+		const hrs = document.querySelectorAll("hr");
+		expect(hrs).toHaveLength(0);
+	});
+
+	// 3. Divider variant: hr elements auto-inserted between groups
+	it("divider separatorStyle inserts an hr between each pair of groups", () => {
+		render(
+			<VerticalMenu>
+				<VerticalMenuContent separatorStyle="divider">
+					<VerticalMenuGroup>
+						<MenuItem>A</MenuItem>
+					</VerticalMenuGroup>
+					<VerticalMenuGroup>
+						<MenuItem>B</MenuItem>
+					</VerticalMenuGroup>
+					<VerticalMenuGroup>
+						<MenuItem>C</MenuItem>
+					</VerticalMenuGroup>
+				</VerticalMenuContent>
+			</VerticalMenu>,
+		);
+		// 3 groups → 2 dividers between them
+		const dividers = document.querySelectorAll("hr");
+		expect(dividers).toHaveLength(2);
+	});
+
+	// 4. VerticalMenuDivider renders an hr with correct classes
+	it("VerticalMenuDivider renders as hr with correct classes", () => {
+		render(<VerticalMenuDivider data-testid="vdivider" />);
+		const el = screen.getByTestId("vdivider");
+		expect(el.tagName).toBe("HR");
+		// Note: <hr> elements have implicit role="separator" from the browser,
+		// but JSDOM may return null from getAttribute("role") since it's implicit.
+		// The element IS semantically a separator via its tag.
+		expect(el.className).toContain("bg-m3-outline-variant");
+		expect(el.className).toContain("mx-3");
+	});
+
+	// 5. VerticalMenuContent auto-injects index/count into VerticalMenuGroup children
+	it("auto-injects index and count props into group children for shape morphing", () => {
+		render(
+			<VerticalMenu>
+				<VerticalMenuContent>
+					<VerticalMenuGroup data-testid="grp-0">
+						<MenuItem>A</MenuItem>
+					</VerticalMenuGroup>
+					<VerticalMenuGroup data-testid="grp-1">
+						<MenuItem>B</MenuItem>
+					</VerticalMenuGroup>
+				</VerticalMenuContent>
+			</VerticalMenu>,
+		);
+		// Both groups rendered (shape morphing is tested visually via shape classes)
+		expect(screen.getByTestId("grp-0")).toBeInTheDocument();
+		expect(screen.getByTestId("grp-1")).toBeInTheDocument();
+	});
+
+	// 6. Standard colorVariant: gap variant — root is transparent, group has bg
+	it("standard colorVariant gap: root is transparent, MenuGroup has surface-container-low", () => {
+		render(
+			<VerticalMenu colorVariant="standard" data-testid="vm-root">
+				<VerticalMenuContent separatorStyle="gap">
+					<VerticalMenuGroup data-testid="vm-group">
+						<MenuItem>A</MenuItem>
+					</VerticalMenuGroup>
+				</VerticalMenuContent>
+			</VerticalMenu>,
+		);
+		// Gap variant: root container is transparent (no bg class)
+		const root = screen.getByTestId("vm-root");
+		expect(root.className).not.toContain("bg-");
+		// Background is on the MenuGroup itself
+		const group = screen.getByTestId("vm-group");
+		expect(group.className).toContain("bg-m3-surface-container-low");
+	});
+
+	// 7. Vibrant colorVariant: gap variant — root is transparent, group has tertiary-container
+	it("vibrant colorVariant gap: root is transparent, MenuGroup has tertiary-container", () => {
+		render(
+			<VerticalMenu colorVariant="vibrant" data-testid="vm-vibrant">
+				<VerticalMenuContent separatorStyle="gap">
+					<VerticalMenuGroup data-testid="vm-group-vibrant">
+						<MenuItem>A</MenuItem>
+					</VerticalMenuGroup>
+				</VerticalMenuContent>
+			</VerticalMenu>,
+		);
+		const root = screen.getByTestId("vm-vibrant");
+		expect(root.className).not.toContain("bg-");
+		const group = screen.getByTestId("vm-group-vibrant");
+		expect(group.className).toContain("bg-m3-tertiary-container");
+	});
+
+	// 8. Divider variant: background applied to VerticalMenuContent
+	it("standard colorVariant divider: VerticalMenuContent has surface-container-low", () => {
+		render(
+			<VerticalMenu colorVariant="standard">
+				<VerticalMenuContent separatorStyle="divider" data-testid="vm-content">
+					<VerticalMenuGroup>
+						<MenuItem>A</MenuItem>
+					</VerticalMenuGroup>
+				</VerticalMenuContent>
+			</VerticalMenu>,
+		);
+		const content = screen.getByTestId("vm-content");
+		expect(content.className).toContain("bg-m3-surface-container-low");
+	});
+
+	// 9. VerticalMenu root has role="menu" and aria-orientation
+	it("VerticalMenu root has role=menu and aria-orientation=vertical", () => {
+		render(
+			<VerticalMenu data-testid="vm-role">
+				<VerticalMenuContent>
+					<VerticalMenuGroup>
+						<MenuItem>A</MenuItem>
+					</VerticalMenuGroup>
+				</VerticalMenuContent>
+			</VerticalMenu>,
+		);
+		const root = screen.getByTestId("vm-role");
+		expect(root.getAttribute("role")).toBe("menu");
+		expect(root.getAttribute("aria-orientation")).toBe("vertical");
+	});
+
+	// 10. Arrow key navigation: ArrowDown moves focus to next item
+	it("ArrowDown key moves focus to next menuitem", async () => {
+		const user = userEvent.setup();
+		render(
+			<VerticalMenu>
+				<VerticalMenuContent>
+					<VerticalMenuGroup>
+						<MenuItem data-testid="vitem-0">Item A</MenuItem>
+						<MenuItem data-testid="vitem-1">Item B</MenuItem>
+						<MenuItem data-testid="vitem-2">Item C</MenuItem>
+					</VerticalMenuGroup>
+				</VerticalMenuContent>
+			</VerticalMenu>,
+		);
+		// Focus first item then ArrowDown
+		const firstItem = screen.getByTestId("vitem-0");
+		firstItem.focus();
+		await user.keyboard("{ArrowDown}");
+		expect(document.activeElement).toBe(screen.getByTestId("vitem-1"));
+	});
+
+	// 11. Arrow key navigation: ArrowUp wraps to last
+	it("ArrowUp from first item wraps to last item", async () => {
+		const user = userEvent.setup();
+		render(
+			<VerticalMenu>
+				<VerticalMenuContent>
+					<VerticalMenuGroup>
+						<MenuItem data-testid="vitem-a">Item A</MenuItem>
+						<MenuItem data-testid="vitem-b">Item B</MenuItem>
+					</VerticalMenuGroup>
+				</VerticalMenuContent>
+			</VerticalMenu>,
+		);
+		const firstItem = screen.getByTestId("vitem-a");
+		firstItem.focus();
+		await user.keyboard("{ArrowUp}");
+		expect(document.activeElement).toBe(screen.getByTestId("vitem-b"));
+	});
+
+	// 12. MenuItem inside VerticalMenu shows check icon when selected
+	it("MenuItem inside VerticalMenu shows check icon when selected=true", () => {
+		render(
+			<VerticalMenu>
+				<VerticalMenuContent>
+					<VerticalMenuGroup>
+						<MenuItem selected>Selected Item</MenuItem>
+					</VerticalMenuGroup>
+				</VerticalMenuContent>
+			</VerticalMenu>,
+		);
+		// Check icon uses Material Symbols text "check"
+		expect(screen.getByText("check")).toBeInTheDocument();
+	});
+});
+
+// ─── SubMenu Tests ────────────────────────────────────────────────────────────
+
+import { SubMenu } from "./index";
+
+describe("SubMenu", () => {
+	// 1. SubMenu renders trigger correctly
+	it("renders trigger item correctly", () => {
+		render(
+			<Menu defaultOpen>
+				<MenuTrigger>
+					<button type="button">Open</button>
+				</MenuTrigger>
+				<MenuContent>
+					<SubMenu
+						trigger={<MenuItem data-testid="sub-trigger">Share</MenuItem>}
+					>
+						<MenuItem>Email</MenuItem>
+					</SubMenu>
+				</MenuContent>
+			</Menu>,
+		);
+		expect(screen.getByTestId("sub-trigger")).toBeInTheDocument();
+		expect(screen.getByText("Share")).toBeInTheDocument();
+	});
+
+	// 2. SubMenu opens via click (fallback for JSDOM flakiness with hover/timers)
+	it("opens via click", async () => {
+		const user = userEvent.setup();
+
+		render(
+			<Menu defaultOpen>
+				<MenuTrigger>
+					<button type="button">Open</button>
+				</MenuTrigger>
+				<MenuContent>
+					<SubMenu
+						trigger={<MenuItem data-testid="sub-trigger">Share</MenuItem>}
+					>
+						<MenuItem data-testid="sub-item">Email</MenuItem>
+					</SubMenu>
+				</MenuContent>
+			</Menu>,
+		);
+
+		const trigger = screen.getByTestId("sub-trigger");
+
+		// Initial state: submenu not visible
+		expect(screen.queryByTestId("sub-item")).not.toBeInTheDocument();
+
+		// Click the trigger (Radix SubTrigger handles this)
+		await user.click(trigger);
+
+		// Now it should be visible
+		expect(screen.getByTestId("sub-item")).toBeInTheDocument();
+	});
+
+	// 3. SubMenu closes on Escape
+	it("closes on Escape", async () => {
+		const user = userEvent.setup();
+
+		render(
+			<Menu defaultOpen>
+				<MenuTrigger>
+					<button type="button">Open</button>
+				</MenuTrigger>
+				<MenuContent>
+					<SubMenu
+						trigger={<MenuItem data-testid="sub-trigger">Share</MenuItem>}
+					>
+						<MenuItem data-testid="sub-item">Email</MenuItem>
+					</SubMenu>
+				</MenuContent>
+			</Menu>,
+		);
+
+		const trigger = screen.getByTestId("sub-trigger");
+		await user.click(trigger);
+		expect(screen.getByTestId("sub-item")).toBeInTheDocument();
+
+		await user.keyboard("{Escape}");
+
+		// Submenu content should be gone
+		expect(screen.queryByTestId("sub-item")).not.toBeInTheDocument();
+	});
+});
+
+// ─── Animation & Context Tests ───────────────────────────────────────────────
+
+import { FAST_SPATIAL_SPRING } from "./menu-animations";
+import { useMenuContext } from "./menu-context";
+
+const ContextChecker = () => {
+	const context = useMenuContext();
+	return <div data-testid="ctx-val">{JSON.stringify(context)}</div>;
+};
+
+describe("Menu Internals", () => {
+	// 1. Context default values
+	it("useMenuContext returns default values when used outside Provider", () => {
+		render(<ContextChecker />);
+		const val = JSON.parse(screen.getByTestId("ctx-val").textContent ?? "{}");
+		expect(val.menuVariant).toBe("baseline");
+		expect(val.colorVariant).toBe("standard");
+		expect(val.isStatic).toBe(false);
+	});
+
+	// 2. MenuGroup shape morphing triggers on hover
+	it("MenuGroup updates state on hover for shape morphing", async () => {
+		render(
+			<Menu menuVariant="expressive" defaultOpen>
+				<MenuContent>
+					<MenuGroup data-testid="group" index={0} count={1}>
+						<MenuItem>A</MenuItem>
+					</MenuGroup>
+				</MenuContent>
+			</Menu>,
+		);
+
+		const group = screen.getByTestId("group");
+		expect(group.className).toContain("overflow-hidden");
+
+		fireEvent.pointerEnter(group);
+		// Verify no timeout occurs and group remains in DOM
+		expect(screen.getByText("A")).toBeInTheDocument();
+	});
+
+	// 3. Animation variants check
+	it("FAST_SPATIAL_SPRING has correct spring parameters", () => {
+		expect(FAST_SPATIAL_SPRING.stiffness).toBe(380);
+		expect(FAST_SPATIAL_SPRING.damping).toBe(28);
+	});
+});