feat(core-ui): add jsdom Vitest config + RTL tests for components

Adopts jsdomVitestConfig from @repo/core-typescript. Adds
@testing-library/react, @testing-library/user-event, jsdom devDeps.
Writes smoke + interaction tests for every atom/molecule/organism/template
using renderWithProviders from @repo/core-testing/react.

Components covered:
- atoms: Button (5 tests), Input (4), Label (2)
- molecules: FormField (5)
- organisms / templates: empty barrels, no components

Adjustments:
- core-ui/tsconfig.json now extends react-library.json (jsx: react-jsx)
  with rootDir "." + paths {"@/*"} + types [vitest/globals, jest-dom]
- core-typescript/vitest.base.jsdom.ts uses ./vitest.base.node.ts (explicit
  .ts extension) so Node's ESM resolver finds the source file when loaded
  via the package export from a downstream package

Spec: §6.1, §6.5

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-05-05 16:21:58 +02:00
parent b3c903fd36
commit 11b5b15105
9 changed files with 165 additions and 7 deletions

View File

@@ -0,0 +1,42 @@
import { describe, it, expect, vi } from "vitest";
import { renderWithProviders } from "@repo/core-testing/react";
import { screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { Button } from "./button";
describe("Button", () => {
it("renders children inside a button", () => {
renderWithProviders(<Button>Click me</Button>);
expect(screen.getByRole("button", { name: "Click me" })).toBeInTheDocument();
});
it("calls onClick when activated", async () => {
const handleClick = vi.fn();
renderWithProviders(<Button onClick={handleClick}>Go</Button>);
await userEvent.click(screen.getByRole("button", { name: "Go" }));
expect(handleClick).toHaveBeenCalledOnce();
});
it("applies the destructive variant class", () => {
renderWithProviders(<Button variant="destructive">X</Button>);
expect(screen.getByRole("button")).toHaveClass(/destructive/);
});
it("applies the lg size class", () => {
renderWithProviders(<Button size="lg">X</Button>);
expect(screen.getByRole("button")).toHaveClass(/h-11/);
});
it("disabled prop sets the attribute and prevents click handler", async () => {
const handleClick = vi.fn();
renderWithProviders(
<Button disabled onClick={handleClick}>
X
</Button>,
);
const button = screen.getByRole("button");
expect(button).toBeDisabled();
await userEvent.click(button);
expect(handleClick).not.toHaveBeenCalled();
});
});