@nationaldesignstudio/react 0.2.0 → 0.3.0

package/src/components/atoms/input/input-group.test.tsx

@@ -0,0 +1,376 @@
+import { describe, expect, test, vi } from "vitest";
+import { page, userEvent } from "vitest/browser";
+import { render } from "vitest-browser-react";
+import {
+	InputGroup,
+	InputGroupAddon,
+	InputGroupButton,
+	InputGroupInput,
+	InputGroupText,
+	InputGroupTextarea,
+} from "./input-group";
+
+// Simple placeholder icon for tests
+const SearchIcon = () => (
+	<svg
+		width="16"
+		height="16"
+		viewBox="0 0 16 16"
+		fill="none"
+		data-testid="search-icon"
+		aria-hidden="true"
+	>
+		<circle cx="7" cy="7" r="5" stroke="currentColor" strokeWidth="1.5" />
+		<path d="M14 14L11 11" stroke="currentColor" strokeWidth="1.5" />
+	</svg>
+);
+
+describe("InputGroup", () => {
+	describe("Accessibility", () => {
+		test("has group role", async () => {
+			render(
+				<InputGroup>
+					<InputGroupInput placeholder="Test" />
+				</InputGroup>,
+			);
+			await expect.element(page.getByRole("group")).toBeInTheDocument();
+		});
+
+		test("input is focusable via keyboard", async () => {
+			render(
+				<InputGroup>
+					<InputGroupInput placeholder="Focusable" />
+				</InputGroup>,
+			);
+			await userEvent.keyboard("{Tab}");
+			await expect.element(page.getByRole("textbox")).toHaveFocus();
+		});
+
+		test("disabled group prevents input focus", async () => {
+			render(
+				<>
+					<InputGroup disabled>
+						<InputGroupInput disabled placeholder="Disabled" />
+					</InputGroup>
+					<InputGroup>
+						<InputGroupInput placeholder="After" />
+					</InputGroup>
+				</>,
+			);
+			await userEvent.keyboard("{Tab}");
+			await expect.element(page.getByPlaceholder("After")).toHaveFocus();
+		});
+
+		test("error state sets aria-invalid on input", async () => {
+			render(
+				<InputGroup>
+					<InputGroupInput aria-invalid="true" placeholder="Error" />
+				</InputGroup>,
+			);
+			await expect
+				.element(page.getByRole("textbox"))
+				.toHaveAttribute("aria-invalid", "true");
+		});
+
+		test("addon button is accessible", async () => {
+			render(
+				<InputGroup>
+					<InputGroupInput placeholder="Input" />
+					<InputGroupAddon align="inline-end">
+						<InputGroupButton aria-label="Submit">Submit</InputGroupButton>
+					</InputGroupAddon>
+				</InputGroup>,
+			);
+			await expect
+				.element(page.getByRole("button", { name: "Submit" }))
+				.toBeInTheDocument();
+		});
+	});
+
+	describe("Interactions", () => {
+		test("input accepts text", async () => {
+			render(
+				<InputGroup>
+					<InputGroupInput placeholder="Type here" />
+				</InputGroup>,
+			);
+			const input = page.getByRole("textbox");
+			await input.fill("Hello World");
+			await expect.element(input).toHaveValue("Hello World");
+		});
+
+		test("clicking addon focuses input", async () => {
+			render(
+				<InputGroup>
+					<InputGroupAddon data-testid="addon">
+						<SearchIcon />
+					</InputGroupAddon>
+					<InputGroupInput placeholder="Test" />
+				</InputGroup>,
+			);
+			await page.getByTestId("addon").click();
+			await expect.element(page.getByRole("textbox")).toHaveFocus();
+		});
+
+		test("clicking button in addon does not focus input", async () => {
+			const handleClick = vi.fn();
+			render(
+				<InputGroup>
+					<InputGroupInput placeholder="Test" />
+					<InputGroupAddon align="inline-end">
+						<InputGroupButton onClick={handleClick}>Click</InputGroupButton>
+					</InputGroupAddon>
+				</InputGroup>,
+			);
+			await page.getByRole("button", { name: "Click" }).click();
+			expect(handleClick).toHaveBeenCalledOnce();
+			// Input should not have focus (button click should work independently)
+		});
+
+		test("input onChange is called", async () => {
+			const handleChange = vi.fn();
+			render(
+				<InputGroup>
+					<InputGroupInput onChange={handleChange} placeholder="Type" />
+				</InputGroup>,
+			);
+			await page.getByRole("textbox").fill("Test");
+			expect(handleChange).toHaveBeenCalled();
+		});
+
+		test("textarea accepts multiline text", async () => {
+			render(
+				<InputGroup>
+					<InputGroupTextarea placeholder="Enter text" rows={4} />
+				</InputGroup>,
+			);
+			const textarea = page.getByRole("textbox");
+			await textarea.fill("Line 1\nLine 2");
+			await expect.element(textarea).toHaveValue("Line 1\nLine 2");
+		});
+	});
+
+	describe("Variants", () => {
+		test("applies default size classes", async () => {
+			render(
+				<InputGroup>
+					<InputGroupInput placeholder="Default" />
+				</InputGroup>,
+			);
+			const group = page.getByRole("group");
+			await expect.element(group).toHaveClass(/h-36/);
+		});
+
+		test("applies small size classes", async () => {
+			render(
+				<InputGroup size="sm">
+					<InputGroupInput placeholder="Small" />
+				</InputGroup>,
+			);
+			const group = page.getByRole("group");
+			await expect.element(group).toHaveClass(/h-32/);
+		});
+
+		test("applies large size classes", async () => {
+			render(
+				<InputGroup size="lg">
+					<InputGroupInput placeholder="Large" />
+				</InputGroup>,
+			);
+			const group = page.getByRole("group");
+			await expect.element(group).toHaveClass(/h-48/);
+		});
+
+		test("applies disabled data attribute", async () => {
+			render(
+				<InputGroup disabled>
+					<InputGroupInput disabled placeholder="Disabled" />
+				</InputGroup>,
+			);
+			const group = page.getByRole("group").first();
+			await expect.element(group).toHaveAttribute("data-disabled", "true");
+		});
+
+		test("applies semantic token classes for background", async () => {
+			render(
+				<InputGroup>
+					<InputGroupInput placeholder="Default" />
+				</InputGroup>,
+			);
+			const group = page.getByRole("group").first();
+			await expect.element(group).toHaveClass(/bg-ui-control-background/);
+		});
+
+		test("applies semantic token classes for border", async () => {
+			render(
+				<InputGroup>
+					<InputGroupInput placeholder="Default" />
+				</InputGroup>,
+			);
+			const group = page.getByRole("group").first();
+			await expect.element(group).toHaveClass(/border-ui-color-border/);
+		});
+	});
+
+	describe("Addon Positioning", () => {
+		test("inline-start addon appears first", async () => {
+			render(
+				<InputGroup>
+					<InputGroupAddon data-testid="start-addon">
+						<SearchIcon />
+					</InputGroupAddon>
+					<InputGroupInput placeholder="Input" />
+				</InputGroup>,
+			);
+			const addon = page.getByTestId("start-addon");
+			await expect.element(addon).toHaveAttribute("data-align", "inline-start");
+			await expect.element(addon).toHaveClass(/order-first/);
+		});
+
+		test("inline-end addon appears last", async () => {
+			render(
+				<InputGroup>
+					<InputGroupInput placeholder="Input" />
+					<InputGroupAddon align="inline-end" data-testid="end-addon">
+						<SearchIcon />
+					</InputGroupAddon>
+				</InputGroup>,
+			);
+			const addon = page.getByTestId("end-addon");
+			await expect.element(addon).toHaveAttribute("data-align", "inline-end");
+			await expect.element(addon).toHaveClass(/order-last/);
+		});
+
+		test("block-start addon appears first with full width", async () => {
+			render(
+				<InputGroup>
+					<InputGroupAddon align="block-start" data-testid="block-start-addon">
+						<InputGroupText>Label</InputGroupText>
+					</InputGroupAddon>
+					<InputGroupInput placeholder="Input" />
+				</InputGroup>,
+			);
+			const addon = page.getByTestId("block-start-addon");
+			await expect.element(addon).toHaveAttribute("data-align", "block-start");
+			await expect.element(addon).toHaveClass(/w-full/);
+		});
+
+		test("block-end addon appears last with full width", async () => {
+			render(
+				<InputGroup>
+					<InputGroupInput placeholder="Input" />
+					<InputGroupAddon align="block-end" data-testid="block-end-addon">
+						<InputGroupText>Helper</InputGroupText>
+					</InputGroupAddon>
+				</InputGroup>,
+			);
+			const addon = page.getByTestId("block-end-addon");
+			await expect.element(addon).toHaveAttribute("data-align", "block-end");
+			await expect.element(addon).toHaveClass(/w-full/);
+		});
+	});
+
+	describe("InputGroupButton", () => {
+		test("renders as button with ghost variant by default", async () => {
+			render(
+				<InputGroup>
+					<InputGroupInput placeholder="Input" />
+					<InputGroupAddon align="inline-end">
+						<InputGroupButton>Click</InputGroupButton>
+					</InputGroupAddon>
+				</InputGroup>,
+			);
+			const button = page.getByRole("button", { name: "Click" });
+			await expect.element(button).toHaveAttribute("type", "button");
+		});
+
+		test("button click is handled", async () => {
+			const handleClick = vi.fn();
+			render(
+				<InputGroup>
+					<InputGroupInput placeholder="Input" />
+					<InputGroupAddon align="inline-end">
+						<InputGroupButton onClick={handleClick}>Submit</InputGroupButton>
+					</InputGroupAddon>
+				</InputGroup>,
+			);
+			await page.getByRole("button", { name: "Submit" }).click();
+			expect(handleClick).toHaveBeenCalledOnce();
+		});
+
+		test("supports different sizes", async () => {
+			render(
+				<InputGroup>
+					<InputGroupInput placeholder="Input" />
+					<InputGroupAddon align="inline-end">
+						<InputGroupButton size="sm" data-testid="sm-button">
+							Small
+						</InputGroupButton>
+					</InputGroupAddon>
+				</InputGroup>,
+			);
+			const button = page.getByTestId("sm-button");
+			await expect.element(button).toHaveAttribute("data-size", "sm");
+		});
+	});
+
+	describe("InputGroupText", () => {
+		test("renders text content", async () => {
+			render(
+				<InputGroup>
+					<InputGroupAddon>
+						<InputGroupText>https://</InputGroupText>
+					</InputGroupAddon>
+					<InputGroupInput placeholder="example.com" />
+				</InputGroup>,
+			);
+			await expect.element(page.getByText("https://")).toBeInTheDocument();
+		});
+
+		test("applies text styling", async () => {
+			render(
+				<InputGroup>
+					<InputGroupAddon>
+						<InputGroupText data-testid="text">Prefix</InputGroupText>
+					</InputGroupAddon>
+					<InputGroupInput placeholder="Input" />
+				</InputGroup>,
+			);
+			const text = page.getByTestId("text");
+			await expect.element(text).toHaveClass(/text-text-muted/);
+		});
+	});
+
+	describe("InputGroupTextarea", () => {
+		test("renders textarea element", async () => {
+			render(
+				<InputGroup>
+					<InputGroupTextarea placeholder="Enter text" rows={4} />
+				</InputGroup>,
+			);
+			await expect.element(page.getByRole("textbox")).toBeInTheDocument();
+		});
+
+		test("supports rows attribute", async () => {
+			render(
+				<InputGroup>
+					<InputGroupTextarea placeholder="Enter text" rows={6} />
+				</InputGroup>,
+			);
+			await expect
+				.element(page.getByRole("textbox"))
+				.toHaveAttribute("rows", "6");
+		});
+
+		test("has data-slot attribute", async () => {
+			render(
+				<InputGroup>
+					<InputGroupTextarea placeholder="Enter text" />
+				</InputGroup>,
+			);
+			await expect
+				.element(page.getByRole("textbox"))
+				.toHaveAttribute("data-slot", "input-group-control");
+		});
+	});
+});