feat: add core UI components and baseline tests

2026-03-19 16:56:27 +08:00
parent 12642e0a92
commit 063179933c
73 changed files with 5756 additions and 2 deletions
@@ -0,0 +1,55 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { Field, FieldControl, FieldDescription, FieldError } from "./field";
+import { Input } from "./input";
+import { Label } from "./label";
+
+describe("Input", () => {
+  it("renders the input slot and reflects explicit state props", () => {
+    render(
+      <Input
+        aria-label="Project slug"
+        disabled
+        invalid
+        readOnly
+        required
+        size="lg"
+      />
+    );
+
+    const input = screen.getByRole("textbox", { name: "Project slug" });
+
+    expect(input).toHaveAttribute("data-slot", "input");
+    expect(input).toHaveAttribute("data-disabled", "");
+    expect(input).toHaveAttribute("data-invalid", "");
+    expect(input).toHaveAttribute("data-readonly", "");
+    expect(input).toHaveAttribute("data-required", "");
+    expect(input).toHaveAttribute("data-size", "lg");
+    expect(input).toBeDisabled();
+    expect(input).toHaveAttribute("aria-invalid", "true");
+    expect(input).toHaveAttribute("readonly");
+    expect(input).toBeRequired();
+  });
+
+  it("inherits ids and described-by wiring from the surrounding field", () => {
+    render(
+      <Field invalid required>
+        <Label requiredIndicator>Slug</Label>
+        <FieldControl>
+          <Input />
+          <FieldDescription>Use lowercase letters and hyphens.</FieldDescription>
+          <FieldError>Slug is required.</FieldError>
+        </FieldControl>
+      </Field>
+    );
+
+    const input = screen.getByRole("textbox", { name: "Slug" });
+    const description = screen.getByText("Use lowercase letters and hyphens.");
+    const error = screen.getByText("Slug is required.");
+
+    expect(input).toHaveAttribute("aria-describedby", `${description.id} ${error.id}`);
+    expect(input).toHaveAttribute("aria-invalid", "true");
+    expect(input).toBeRequired();
+  });
+});