@bug-on/md3-react 2.0.3 → 3.0.0

package/src/test/icon.test.tsx

@@ -0,0 +1,91 @@
+import { render, screen } from "@testing-library/react";
+import * as React from "react";
+import { describe, expect, it } from "vitest";
+import { Icon } from "../ui/icon";
+
+describe("Icon Component", () => {
+	it("renders successfully with a name", () => {
+		render(<Icon name="home" />);
+		const icon = screen.getByText("home");
+		expect(icon).toBeInTheDocument();
+		expect(icon.tagName).toBe("SPAN");
+	});
+
+	it("applies default styles and attributes", () => {
+		render(<Icon name="home" />);
+		const icon = screen.getByText("home");
+
+		expect(icon).toHaveClass("md-icon", "select-none");
+		expect(icon).toHaveAttribute("aria-hidden", "true");
+
+		expect(icon).toHaveStyle({
+			fontFamily: "'Material Symbols Outlined'",
+			fontSize: "24px",
+			fontVariationSettings: "'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24",
+		});
+	});
+
+	it("renders different variants correctly", () => {
+		const { rerender } = render(<Icon name="home" variant="rounded" />);
+		let icon = screen.getByText("home");
+		expect(icon).toHaveStyle({ fontFamily: "'Material Symbols Rounded'" });
+
+		rerender(<Icon name="home" variant="sharp" />);
+		icon = screen.getByText("home");
+		expect(icon).toHaveStyle({ fontFamily: "'Material Symbols Sharp'" });
+
+		rerender(<Icon name="home" variant="outlined" />);
+		icon = screen.getByText("home");
+		expect(icon).toHaveStyle({ fontFamily: "'Material Symbols Outlined'" });
+	});
+
+	it("updates font-variation-settings based on axes props", () => {
+		render(
+			<Icon
+				name="settings"
+				fill={1}
+				weight={700}
+				grade={200}
+				opticalSize={48}
+			/>,
+		);
+		const icon = screen.getByText("settings");
+		expect(icon).toHaveStyle({
+			fontVariationSettings: "'FILL' 1, 'wght' 700, 'GRAD' 200, 'opsz' 48",
+		});
+	});
+
+	it("overrides font-size when size prop is provided", () => {
+		render(<Icon name="home" size={32} opticalSize={40} />);
+		const icon = screen.getByText("home");
+		expect(icon).toHaveStyle({ fontSize: "32px" });
+		// Ensure opsz axis still uses opticalSize
+		expect(icon.style.fontVariationSettings).toContain("'opsz' 40");
+	});
+
+	it("forwards ref correctly", () => {
+		const ref = React.createRef<HTMLSpanElement>();
+		render(<Icon name="home" ref={ref} />);
+		expect(ref.current).not.toBeNull();
+		expect(ref.current?.tagName).toBe("SPAN");
+		expect(ref.current?.textContent).toBe("home");
+	});
+
+	it("renders with animateFill without crashing", () => {
+		render(<Icon name="favorite" fill={1} animateFill />);
+		const icon = screen.getByText("favorite");
+		expect(icon).toBeInTheDocument();
+		// In a jsdom environment, complex motion logic might not fully 'run'
+		// but we verify the component renders and has the correct styles.
+		const style = window.getComputedStyle(icon);
+		expect(style.fontVariationSettings).toBe(
+			"'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24",
+		);
+	});
+
+	it("passes through extra HTML attributes", () => {
+		render(<Icon name="home" data-testid="custom-icon" id="my-icon" />);
+		const icon = screen.getByTestId("custom-icon");
+		expect(icon).toHaveAttribute("id", "my-icon");
+	});
+});

package/src/test/loading-indicator.test.tsx

@@ -0,0 +1,128 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { LoadingIndicator } from "../ui/loading-indicator";
+
+describe("LoadingIndicator", () => {
+	// ─── A11y: ARIA Attributes ───────────────────────────────────────────────
+	it("renders with role='progressbar'", () => {
+		render(<LoadingIndicator aria-label="Loading content" />);
+		expect(screen.getByRole("progressbar")).toBeInTheDocument();
+	});
+
+	it("applies required aria-label", () => {
+		render(<LoadingIndicator aria-label="Loading news article" />);
+		const el = screen.getByRole("progressbar");
+		expect(el).toHaveAttribute("aria-label", "Loading news article");
+	});
+
+	it("sets aria-valuemin and aria-valuemax", () => {
+		render(<LoadingIndicator aria-label="Loading" />);
+		const el = screen.getByRole("progressbar");
+		expect(el).toHaveAttribute("aria-valuemin", "0");
+		expect(el).toHaveAttribute("aria-valuemax", "100");
+	});
+
+	it("does not have aria-valuenow in indeterminate mode", () => {
+		render(<LoadingIndicator aria-label="Loading" />);
+		expect(screen.getByRole("progressbar")).not.toHaveAttribute(
+			"aria-valuenow",
+		);
+	});
+
+	// ─── Determinate Mode ────────────────────────────────────────────────────
+	it("sets aria-valuenow when progress is provided", () => {
+		render(<LoadingIndicator aria-label="Loading" progress={0.5} />);
+		expect(screen.getByRole("progressbar")).toHaveAttribute(
+			"aria-valuenow",
+			"50",
+		);
+	});
+
+	it("clamps aria-valuenow at 0 for negative progress", () => {
+		render(<LoadingIndicator aria-label="Loading" progress={-0.5} />);
+		expect(screen.getByRole("progressbar")).toHaveAttribute(
+			"aria-valuenow",
+			"0",
+		);
+	});
+
+	it("clamps aria-valuenow at 100 for progress > 1", () => {
+		render(<LoadingIndicator aria-label="Loading" progress={1.5} />);
+		expect(screen.getByRole("progressbar")).toHaveAttribute(
+			"aria-valuenow",
+			"100",
+		);
+	});
+
+	it("renders static path (no SMIL) in determinate mode", () => {
+		const { container } = render(
+			<LoadingIndicator aria-label="Loading" progress={0.5} />,
+		);
+		const path = container.querySelector("path");
+		expect(path).toBeInTheDocument();
+		// Determinate mode has no SMIL animate child
+		const animateEl = path?.querySelector("animate");
+		expect(animateEl).toBeNull();
+	});
+
+	// ─── Indeterminate Mode (SMIL) ───────────────────────────────────────────
+	it("renders SVG path with SMIL shape morphing animation in indeterminate mode", async () => {
+		const { container } = render(<LoadingIndicator aria-label="Loading" />);
+		const path = container.querySelector("path");
+		expect(path).toBeInTheDocument();
+		await waitFor(() => {
+			const animateEl = path?.querySelector("animate[attributeName='d']");
+			expect(animateEl).toBeInTheDocument();
+		});
+	});
+
+	// ─── Variants ────────────────────────────────────────────────────────────
+	it("renders default uncontained variant without container background", () => {
+		const { container } = render(<LoadingIndicator aria-label="Loading" />);
+		const inner = container.querySelector(".rounded-full");
+		expect(inner).toBeNull();
+	});
+
+	it("renders contained variant with a circular container", () => {
+		const { container } = render(
+			<LoadingIndicator variant="contained" aria-label="Loading" />,
+		);
+		const inner = container.querySelector(".rounded-full");
+		expect(inner).toBeInTheDocument();
+	});
+
+	// ─── Responsive Sizing ───────────────────────────────────────────────────
+	it("applies custom size via style", () => {
+		render(<LoadingIndicator size={96} aria-label="Loading" />);
+		const el = screen.getByRole("progressbar");
+		expect(el.style.width).toBe("96px");
+		expect(el.style.height).toBe("96px");
+	});
+
+	it("clamps size to 24dp minimum", () => {
+		render(<LoadingIndicator size={8} aria-label="Loading" />);
+		const el = screen.getByRole("progressbar");
+		expect(el.style.width).toBe("24px");
+		expect(el.style.height).toBe("24px");
+	});
+
+	it("clamps size to 240dp maximum", () => {
+		render(<LoadingIndicator size={999} aria-label="Loading" />);
+		const el = screen.getByRole("progressbar");
+		expect(el.style.width).toBe("240px");
+		expect(el.style.height).toBe("240px");
+	});
+
+	// ─── General ─────────────────────────────────────────────────────────────
+	it("renders an SVG element inside", () => {
+		const { container } = render(<LoadingIndicator aria-label="Loading" />);
+		const svg = container.querySelector("svg");
+		expect(svg).toBeInTheDocument();
+		expect(svg).toHaveAttribute("aria-hidden", "true");
+	});
+
+	it("merges custom className", () => {
+		render(<LoadingIndicator aria-label="Loading" className="my-custom" />);
+		expect(screen.getByRole("progressbar").className).toContain("my-custom");
+	});
+});

package/src/test/progress-indicator.test.tsx

@@ -0,0 +1,306 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { ProgressIndicator } from "../ui/progress-indicator";
+
+describe("ProgressIndicator", () => {
+	// ── Linear Flat ──────────────────────────────────────────────────────────
+	describe("Linear - Flat", () => {
+		it("renders with role='progressbar'", () => {
+			render(
+				<ProgressIndicator variant="linear" aria-label="Uploading file" />,
+			);
+			expect(screen.getByRole("progressbar")).toBeInTheDocument();
+		});
+
+		it("applies required aria-label", () => {
+			render(
+				<ProgressIndicator variant="linear" aria-label="Uploading file" />,
+			);
+			expect(screen.getByRole("progressbar")).toHaveAttribute(
+				"aria-label",
+				"Uploading file",
+			);
+		});
+
+		it("shows aria-valuenow for determinate state", () => {
+			render(
+				<ProgressIndicator
+					variant="linear"
+					value={42}
+					aria-label="Downloading"
+				/>,
+			);
+			const el = screen.getByRole("progressbar");
+			expect(el).toHaveAttribute("aria-valuenow", "42");
+			expect(el).toHaveAttribute("aria-valuemin", "0");
+			expect(el).toHaveAttribute("aria-valuemax", "100");
+		});
+
+		it("does not show aria-valuenow for indeterminate state", () => {
+			render(<ProgressIndicator variant="linear" aria-label="Loading" />);
+			expect(screen.getByRole("progressbar")).not.toHaveAttribute(
+				"aria-valuenow",
+			);
+		});
+
+		it("clamps value between 0 and 100", () => {
+			render(
+				<ProgressIndicator
+					variant="linear"
+					value={150}
+					aria-label="Overloaded"
+				/>,
+			);
+			expect(screen.getByRole("progressbar")).toHaveAttribute(
+				"aria-valuenow",
+				"100",
+			);
+		});
+
+		it("shows stop indicator dot in determinate mode by default", () => {
+			const { container } = render(
+				<ProgressIndicator variant="linear" value={50} aria-label="Loading" />,
+			);
+			const dot = container.querySelector(".rounded-full[aria-hidden='true']");
+			expect(dot).toBeInTheDocument();
+		});
+
+		it("stop indicator is 4px (MD3 spec) regardless of trackHeight", () => {
+			const { container } = render(
+				<ProgressIndicator
+					variant="linear"
+					value={50}
+					trackHeight={8}
+					aria-label="Thick track"
+				/>,
+			);
+			const dot = container.querySelector(
+				".rounded-full[aria-hidden='true']",
+			) as HTMLElement | null;
+			expect(dot).toBeInTheDocument();
+			expect(dot?.style.width).toBe("4px");
+			expect(dot?.style.height).toBe("4px");
+		});
+
+		it("stop indicator is NOT shown for indeterminate state", () => {
+			const { container } = render(
+				<ProgressIndicator variant="linear" aria-label="Loading" />,
+			);
+			const dot = container.querySelector(".rounded-full[aria-hidden='true']");
+			expect(dot).toBeNull();
+		});
+
+		it("accepts space prop", () => {
+			render(
+				<ProgressIndicator
+					variant="linear"
+					value={50}
+					gapSize={8}
+					aria-label="Test space"
+				/>,
+			);
+			expect(screen.getByRole("progressbar")).toBeInTheDocument();
+		});
+
+		it("hides stop indicator when showStopIndicator=false", () => {
+			const { container } = render(
+				<ProgressIndicator
+					variant="linear"
+					value={50}
+					showStopIndicator={false}
+					aria-label="Loading"
+				/>,
+			);
+			const dot = container.querySelector(".rounded-full[aria-hidden='true']");
+			expect(dot).toBeNull();
+		});
+
+		it("merges custom className", () => {
+			render(
+				<ProgressIndicator
+					variant="linear"
+					aria-label="Loading"
+					className="test-class"
+				/>,
+			);
+			expect(screen.getByRole("progressbar").className).toContain("test-class");
+		});
+
+		it("active indicator has minWidth (dot) when value is 0 — MD3 spec", () => {
+			// MD3 spec: "When progress first begins, the active indicator appears as a dot."
+			const { container } = render(
+				<ProgressIndicator variant="linear" value={0} aria-label="Starting" />,
+			);
+			// The animated div inside the track should have minWidth set (not zero)
+			// Track background is the first absolute div, active is the second absolute div.
+			const track = container.querySelectorAll(".relative.w-full .absolute")[1];
+			expect(track).toBeInTheDocument();
+			const style = (track as HTMLElement)?.style;
+			// minWidth should be the trackHeight default (4px)
+			expect(style?.minWidth).toBe("4px");
+		});
+	});
+
+	// ── Linear Wavy ──────────────────────────────────────────────────────────
+	describe("Linear - Wavy", () => {
+		it("renders SVG for wavy shape", () => {
+			const { container } = render(
+				<ProgressIndicator
+					variant="linear"
+					shape="wavy"
+					aria-label="Loading wavy"
+				/>,
+			);
+			const svg = container.querySelector("svg");
+			expect(svg).toBeInTheDocument();
+		});
+
+		it("accepts custom amplitude and wavelength", () => {
+			const { container } = render(
+				<ProgressIndicator
+					variant="linear"
+					shape="wavy"
+					amplitude={10}
+					wavelength={40}
+					aria-label="Loading wavy custom"
+				/>,
+			);
+			expect(container.querySelector("svg")).toBeInTheDocument();
+		});
+
+		it("SVG has overflow=visible to prevent wave clip (MD3)", () => {
+			const { container } = render(
+				<ProgressIndicator
+					variant="linear"
+					shape="wavy"
+					aria-label="Loading wavy overflow"
+				/>,
+			);
+			const svg = container.querySelector("svg") as SVGElement | null;
+			expect(svg?.style.overflow).toBe("visible");
+		});
+
+		it("accepts indeterminateWavelength prop", () => {
+			const { container } = render(
+				<ProgressIndicator
+					variant="linear"
+					shape="wavy"
+					indeterminateWavelength={30}
+					aria-label="Custom indeterminate wavelength"
+				/>,
+			);
+			expect(container.querySelector("svg")).toBeInTheDocument();
+		});
+
+		it("does NOT show stop indicator for wavy indeterminate — MD3 spec", () => {
+			const { container } = render(
+				<ProgressIndicator
+					variant="linear"
+					shape="wavy"
+					aria-label="Loading wavy no stop"
+				/>,
+			);
+			const dot = container.querySelector(".rounded-full[aria-hidden='true']");
+			expect(dot).toBeNull();
+		});
+	});
+
+	// ── Circular ─────────────────────────────────────────────────────────────
+	describe("Circular", () => {
+		it("renders with role='progressbar'", () => {
+			render(
+				<ProgressIndicator variant="circular" aria-label="Loading circular" />,
+			);
+			expect(screen.getByRole("progressbar")).toBeInTheDocument();
+		});
+
+		it("renders SVG with circle elements", () => {
+			const { container } = render(
+				<ProgressIndicator variant="circular" aria-label="Loading circular" />,
+			);
+			const circles = container.querySelectorAll("circle");
+			expect(circles.length).toBeGreaterThanOrEqual(2);
+		});
+
+		it("shows aria-valuenow for determinate state", () => {
+			render(
+				<ProgressIndicator
+					variant="circular"
+					value={75}
+					aria-label="Loading 75%"
+				/>,
+			);
+			expect(screen.getByRole("progressbar")).toHaveAttribute(
+				"aria-valuenow",
+				"75",
+			);
+		});
+
+		it("applies custom size via inline style", () => {
+			render(
+				<ProgressIndicator variant="circular" size={64} aria-label="Loading" />,
+			);
+			const el = screen.getByRole("progressbar");
+			expect(el.style.width).toBe("64px");
+			expect(el.style.height).toBe("64px");
+		});
+
+		it("does not show aria-valuenow for indeterminate", () => {
+			render(<ProgressIndicator variant="circular" aria-label="Loading" />);
+			expect(screen.getByRole("progressbar")).not.toHaveAttribute(
+				"aria-valuenow",
+			);
+		});
+	});
+
+	// ── Circular Wavy ────────────────────────────────────────────────────────
+	describe("Circular - Wavy", () => {
+		it("renders SVG with path element for wavy shape", () => {
+			const { container } = render(
+				<ProgressIndicator
+					variant="circular"
+					shape="wavy"
+					aria-label="Loading circular wavy"
+				/>,
+			);
+			const svg = container.querySelector("svg");
+			expect(svg).toBeInTheDocument();
+			const path = container.querySelector("path");
+			expect(path).toBeInTheDocument();
+		});
+
+		it("accepts custom amplitude and wavelength", () => {
+			const { container } = render(
+				<ProgressIndicator
+					variant="circular"
+					shape="wavy"
+					amplitude={8}
+					wavelength={40}
+					aria-label="Loading circular wavy custom"
+				/>,
+			);
+			const path = container.querySelector("path");
+			expect(path).toBeInTheDocument();
+			// verify that path starts with M (move layout command generated mathematically)
+			expect(path?.getAttribute("d")?.startsWith("M ")).toBe(true);
+		});
+	});
+
+	// ── RTL Support ──────────────────────────────────────────────────────────
+	describe("RTL support", () => {
+		it("renders linear inside RTL container without crashing", () => {
+			const { container } = render(
+				<div dir="rtl">
+					<ProgressIndicator
+						variant="linear"
+						value={30}
+						aria-label="RTL progress"
+					/>
+				</div>,
+			);
+			expect(
+				container.querySelector("[role='progressbar']"),
+			).toBeInTheDocument();
+		});
+	});
+});

package/src/test/setup.ts

@@ -0,0 +1,80 @@
+import "@testing-library/jest-dom";
+import { vi } from "vitest";
+
+// Mock ResizeObserver for Radix UI (must be a constructor and trigger callback)
+class ResizeObserverMock implements ResizeObserver {
+	private callback: ResizeObserverCallback;
+
+	constructor(callback: ResizeObserverCallback) {
+		this.callback = callback;
+	}
+
+	observe(element: Element, _options?: ResizeObserverOptions) {
+		// Immediately trigger callback with some dimensions to trick Radix
+		this.callback(
+			[
+				{
+					target: element,
+					contentRect: {
+						height: 1000,
+						width: 1000,
+						x: 0,
+						y: 0,
+						top: 0,
+						right: 1000,
+						bottom: 1000,
+						left: 0,
+						toJSON: () => ({}),
+					},
+					borderBoxSize: [],
+					contentBoxSize: [],
+					devicePixelContentBoxSize: [],
+				} as ResizeObserverEntry,
+			],
+			this,
+		);
+	}
+	unobserve = vi.fn((_element: Element) => {});
+	disconnect = vi.fn(() => {});
+}
+
+vi.stubGlobal("ResizeObserver", ResizeObserverMock);
+
+// Mock PointerEvent which is missing in JSDOM but used by Radix
+if (!globalThis.PointerEvent) {
+	class PointerEventMock extends MouseEvent {
+		constructor(type: string, params: PointerEventInit = {}) {
+			super(type, params);
+		}
+	}
+	// Use any here for global registration as it's a known environment issue
+	// but we cast it as unknown first to satisfy some strict linting
+	vi.stubGlobal(
+		"PointerEvent",
+		PointerEventMock as unknown as typeof PointerEvent,
+	);
+}
+
+// Mock HTMLElement prototype to return dimensions
+Object.defineProperty(HTMLElement.prototype, "offsetParent", {
+	get() {
+		return this.parentNode;
+	},
+});
+
+// Mock IntersectionObserver
+class IntersectionObserverMock implements IntersectionObserver {
+	readonly root: Element | null = null;
+	readonly rootMargin: string = "";
+	readonly thresholds: ReadonlyArray<number> = [];
+	constructor(
+		public callback: IntersectionObserverCallback,
+		_options?: IntersectionObserverInit,
+	) {}
+	observe = vi.fn((_element: Element) => {});
+	unobserve = vi.fn((_element: Element) => {});
+	disconnect = vi.fn(() => {});
+	takeRecords = vi.fn(() => []);
+}
+
+vi.stubGlobal("IntersectionObserver", IntersectionObserverMock);