Danijel Martinek
11b5b15105
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>
43 lines
1.5 KiB
TypeScript
43 lines
1.5 KiB
TypeScript
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();
|
|
});
|
|
});
|