trails/packages/ui/src/components.test.tsx
Ullrich Schäfer 9420201932
Add tests to all packages, remove passWithNoTests
Every package now has tests — no more empty test suites:

- map-core: 33 tests — maxspeedColor, routeGradeColor, elevationColor,
  POI categories, getCategoriesForProfile, tile layer configs
- db: 5 tests — withDb error handling (503 on DB error, re-throws
  Response/DataWithResponseInit, logs errors)
- ui: 14 tests — Button variants/sizes/disabled, Input label/id/error,
  Card className forwarding
- map: 2 tests — baseLayers/overlayLayers re-export verification

Remove passWithNoTests from vitest.shared.ts so missing tests are
caught immediately when adding new packages.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-13 00:48:27 +02:00

87 lines
2.6 KiB
TypeScript

/**
* @vitest-environment jsdom
*/
import { describe, it, expect, afterEach } from "vitest";
import "@testing-library/jest-dom/vitest";
import { render, screen, cleanup } from "@testing-library/react";
import { Button } from "./Button.tsx";
import { Input } from "./Input.tsx";
import { Card } from "./Card.tsx";
afterEach(cleanup);
describe("Button", () => {
it("renders with text", () => {
render(<Button>Click me</Button>);
expect(screen.getByRole("button", { name: "Click me" })).toBeDefined();
});
it("applies primary variant by default", () => {
render(<Button>Test</Button>);
expect(screen.getByRole("button").className).toContain("bg-blue-600");
});
it("applies secondary variant", () => {
render(<Button variant="secondary">Test</Button>);
expect(screen.getByRole("button").className).toContain("bg-gray-100");
});
it("applies ghost variant", () => {
render(<Button variant="ghost">Test</Button>);
expect(screen.getByRole("button").className).toContain("text-gray-700");
});
it("applies size classes", () => {
render(<Button size="lg">Test</Button>);
expect(screen.getByRole("button").className).toContain("px-6");
});
it("forwards disabled prop", () => {
render(<Button disabled>Test</Button>);
expect(screen.getByRole("button")).toBeDisabled();
});
});
describe("Input", () => {
it("renders with label", () => {
render(<Input label="Email" />);
expect(screen.getByLabelText("Email")).toBeDefined();
});
it("generates id from label", () => {
render(<Input label="First Name" />);
expect(screen.getByLabelText("First Name").id).toBe("first-name");
});
it("uses provided id over generated one", () => {
render(<Input label="Email" id="custom-id" />);
expect(screen.getByLabelText("Email").id).toBe("custom-id");
});
it("shows error message", () => {
render(<Input label="Email" error="Required" />);
expect(screen.getByText("Required")).toBeDefined();
});
it("applies error border class", () => {
render(<Input label="Email" error="Required" />);
expect(screen.getByLabelText("Email").className).toContain("border-red-500");
});
it("renders without label", () => {
render(<Input placeholder="Type here" />);
expect(screen.getByPlaceholderText("Type here")).toBeDefined();
});
});
describe("Card", () => {
it("renders children", () => {
render(<Card>Card content</Card>);
expect(screen.getByText("Card content")).toBeDefined();
});
it("applies additional className", () => {
const { container } = render(<Card className="mt-4">Content</Card>);
expect(container.firstElementChild?.className).toContain("mt-4");
});
});