@hilum/ui 0.1.1 → 0.1.3

package/src/components/__tests__/overlay.test.tsx

@@ -1,90 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { render, screen } from "@testing-library/react";
-import { userEvent } from "@testing-library/user-event";
-import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from "../tooltip";
-import { Progress } from "../progress";
-import { Switch } from "../switch";
-import { Slider } from "../slider";
-
-/**
- * Tests for Radix overlay primitives. These focus on:
- * 1. Trigger elements render and are accessible
- * 2. Content appears on interaction
- * 3. No render crashes
- */
-
-/* ------------------------------------------------------------------ */
-/* Tooltip                                                              */
-/* ------------------------------------------------------------------ */
-
-describe("Tooltip", () => {
-  it("renders the trigger element", () => {
-    render(
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <button>Hover me</button>
-          </TooltipTrigger>
-          <TooltipContent>Helpful hint</TooltipContent>
-        </Tooltip>
-      </TooltipProvider>,
-    );
-    expect(screen.getByRole("button", { name: "Hover me" })).toBeInTheDocument();
-  });
-
-  it("shows tooltip content on hover", async () => {
-    const user = userEvent.setup();
-    render(
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <button>Trigger</button>
-          </TooltipTrigger>
-          <TooltipContent>Tooltip text</TooltipContent>
-        </Tooltip>
-      </TooltipProvider>,
-    );
-    await user.hover(screen.getByRole("button", { name: "Trigger" }));
-    // Use role="tooltip" to target the accessible tooltip element specifically
-    expect(await screen.findByRole("tooltip", { name: "Tooltip text" })).toBeInTheDocument();
-  });
-});
-
-/* ------------------------------------------------------------------ */
-/* Switch — additional a11y checks                                      */
-/* ------------------------------------------------------------------ */
-
-describe("Switch a11y", () => {
-  it("has a role of switch", () => {
-    render(<Switch aria-label="Enable notifications" />);
-    expect(screen.getByRole("switch", { name: "Enable notifications" })).toBeInTheDocument();
-  });
-});
-
-/* ------------------------------------------------------------------ */
-/* Slider — additional a11y checks                                      */
-/* ------------------------------------------------------------------ */
-
-describe("Slider a11y", () => {
-  it("has proper ARIA attributes", () => {
-    render(<Slider defaultValue={[30]} min={0} max={100} aria-label="Volume" />);
-    const slider = screen.getByRole("slider");
-    expect(slider).toHaveAttribute("aria-valuemin", "0");
-    expect(slider).toHaveAttribute("aria-valuemax", "100");
-    expect(slider).toHaveAttribute("aria-valuenow", "30");
-  });
-});
-
-/* ------------------------------------------------------------------ */
-/* Progress — additional a11y checks                                    */
-/* ------------------------------------------------------------------ */
-
-describe("Progress a11y", () => {
-  it("has proper ARIA range attributes", () => {
-    render(<Progress value={45} />);
-    const bar = screen.getByRole("progressbar");
-    expect(bar).toHaveAttribute("aria-valuemin", "0");
-    expect(bar).toHaveAttribute("aria-valuemax", "100");
-    expect(bar).toHaveAttribute("aria-valuenow", "45");
-  });
-});

package/src/components/__tests__/primitives.test.tsx

@@ -1,248 +0,0 @@
-import { describe, it, expect } from "vitest";
-import { render, screen } from "@testing-library/react";
-import { Button } from "../button";
-import { Badge } from "../badge";
-import { Input } from "../input";
-import { Textarea } from "../textarea";
-import { Label } from "../label";
-import { Spinner } from "../spinner";
-import { Skeleton } from "../skeleton";
-import { Separator } from "../separator";
-import { Kbd } from "../kbd";
-
-/* ------------------------------------------------------------------ */
-/* Button                                                               */
-/* ------------------------------------------------------------------ */
-
-describe("Button", () => {
-  it("renders as a button element by default", () => {
-    render(<Button>Click me</Button>);
-    expect(screen.getByRole("button", { name: "Click me" })).toBeInTheDocument();
-  });
-
-  it("forwards data-slot attribute", () => {
-    render(<Button>Test</Button>);
-    expect(screen.getByRole("button")).toHaveAttribute("data-slot", "button");
-  });
-
-  it("renders all variants without error", () => {
-    const variants = [
-      "default",
-      "destructive",
-      "outline",
-      "secondary",
-      "brand",
-      "ghost",
-      "link",
-    ] as const;
-    for (const variant of variants) {
-      const { unmount } = render(<Button variant={variant}>Btn</Button>);
-      expect(screen.getByRole("button")).toBeInTheDocument();
-      unmount();
-    }
-  });
-
-  it("renders all sizes without error", () => {
-    const sizes = ["default", "xs", "sm", "lg", "icon", "icon-xs", "icon-sm", "icon-lg"] as const;
-    for (const size of sizes) {
-      const { unmount } = render(<Button size={size}>B</Button>);
-      expect(screen.getByRole("button")).toBeInTheDocument();
-      unmount();
-    }
-  });
-
-  it("renders as child element when asChild is true", () => {
-    render(
-      <Button asChild>
-        <a href="/home">Home</a>
-      </Button>,
-    );
-    expect(screen.getByRole("link", { name: "Home" })).toBeInTheDocument();
-  });
-
-  it("is disabled when disabled prop is set", () => {
-    render(<Button disabled>Disabled</Button>);
-    expect(screen.getByRole("button")).toBeDisabled();
-  });
-});
-
-/* ------------------------------------------------------------------ */
-/* Badge                                                                */
-/* ------------------------------------------------------------------ */
-
-describe("Badge", () => {
-  it("renders children", () => {
-    render(<Badge>Active</Badge>);
-    expect(screen.getByText("Active")).toBeInTheDocument();
-  });
-
-  it("renders all variants without error", () => {
-    const variants = [
-      "default",
-      "secondary",
-      "outline",
-      "brand",
-      "success",
-      "warning",
-      "destructive",
-    ] as const;
-    for (const variant of variants) {
-      const { unmount } = render(<Badge variant={variant}>v</Badge>);
-      expect(screen.getByText("v")).toBeInTheDocument();
-      unmount();
-    }
-  });
-
-  it("forwards className", () => {
-    const { container } = render(<Badge className="custom-class">Badge</Badge>);
-    expect(container.firstChild).toHaveClass("custom-class");
-  });
-});
-
-/* ------------------------------------------------------------------ */
-/* Input                                                                */
-/* ------------------------------------------------------------------ */
-
-describe("Input", () => {
-  it("renders an input element", () => {
-    render(<Input />);
-    expect(screen.getByRole("textbox")).toBeInTheDocument();
-  });
-
-  it("carries data-slot attribute", () => {
-    render(<Input />);
-    expect(screen.getByRole("textbox")).toHaveAttribute("data-slot", "input");
-  });
-
-  it("accepts a placeholder", () => {
-    render(<Input placeholder="Type here" />);
-    expect(screen.getByPlaceholderText("Type here")).toBeInTheDocument();
-  });
-
-  it("is disabled when disabled prop is set", () => {
-    render(<Input disabled />);
-    expect(screen.getByRole("textbox")).toBeDisabled();
-  });
-});
-
-/* ------------------------------------------------------------------ */
-/* Textarea                                                             */
-/* ------------------------------------------------------------------ */
-
-describe("Textarea", () => {
-  it("renders a textarea", () => {
-    render(<Textarea />);
-    expect(screen.getByRole("textbox")).toBeInTheDocument();
-  });
-
-  it("carries data-slot attribute", () => {
-    render(<Textarea />);
-    expect(screen.getByRole("textbox")).toHaveAttribute("data-slot", "textarea");
-  });
-
-  it("accepts placeholder", () => {
-    render(<Textarea placeholder="Write here" />);
-    expect(screen.getByPlaceholderText("Write here")).toBeInTheDocument();
-  });
-});
-
-/* ------------------------------------------------------------------ */
-/* Label                                                                */
-/* ------------------------------------------------------------------ */
-
-describe("Label", () => {
-  it("renders label text", () => {
-    render(<Label>Username</Label>);
-    expect(screen.getByText("Username")).toBeInTheDocument();
-  });
-
-  it("associates with an input via htmlFor", () => {
-    render(
-      <>
-        <Label htmlFor="input-id">Name</Label>
-        <input id="input-id" />
-      </>,
-    );
-    expect(screen.getByLabelText("Name")).toBeInTheDocument();
-  });
-});
-
-/* ------------------------------------------------------------------ */
-/* Spinner                                                              */
-/* ------------------------------------------------------------------ */
-
-describe("Spinner", () => {
-  it('renders with role="status"', () => {
-    render(<Spinner />);
-    expect(screen.getByRole("status")).toBeInTheDocument();
-  });
-
-  it("has accessible label", () => {
-    render(<Spinner />);
-    expect(screen.getByRole("status")).toHaveAttribute("aria-label", "Loading");
-  });
-
-  it("renders all sizes without error", () => {
-    const sizes = ["xs", "sm", "default", "lg", "xl"] as const;
-    for (const size of sizes) {
-      const { unmount } = render(<Spinner size={size} />);
-      expect(screen.getByRole("status")).toBeInTheDocument();
-      unmount();
-    }
-  });
-});
-
-/* ------------------------------------------------------------------ */
-/* Skeleton                                                             */
-/* ------------------------------------------------------------------ */
-
-describe("Skeleton", () => {
-  it("renders a div with data-slot", () => {
-    const { container } = render(<Skeleton />);
-    expect(container.firstChild).toHaveAttribute("data-slot", "skeleton");
-  });
-
-  it("forwards className", () => {
-    const { container } = render(<Skeleton className="w-24 h-4" />);
-    expect(container.firstChild).toHaveClass("w-24", "h-4");
-  });
-});
-
-/* ------------------------------------------------------------------ */
-/* Separator                                                            */
-/* ------------------------------------------------------------------ */
-
-describe("Separator", () => {
-  it("renders a separator with role", () => {
-    render(<Separator />);
-    expect(screen.getByRole("none")).toBeInTheDocument();
-  });
-
-  it("renders horizontal orientation without error", () => {
-    const { unmount } = render(<Separator orientation="horizontal" />);
-    expect(screen.getByRole("none")).toBeInTheDocument();
-    unmount();
-  });
-
-  it("renders vertical orientation without error", () => {
-    const { unmount } = render(<Separator orientation="vertical" />);
-    expect(screen.getByRole("none")).toBeInTheDocument();
-    unmount();
-  });
-});
-
-/* ------------------------------------------------------------------ */
-/* Kbd                                                                  */
-/* ------------------------------------------------------------------ */
-
-describe("Kbd", () => {
-  it("renders keyboard shortcut text", () => {
-    render(<Kbd>⌘K</Kbd>);
-    expect(screen.getByText("⌘K")).toBeInTheDocument();
-  });
-
-  it("renders as kbd element", () => {
-    const { container } = render(<Kbd>Esc</Kbd>);
-    expect(container.querySelector("kbd")).toBeInTheDocument();
-  });
-});