desertthunder.dev
learn and share notes on atproto (wip) 馃
malfestio.stormlightlabs.org/
readability
solid
axum
atproto
srs
1import { DensityProvider } from "$lib/density-context";
2import { cleanup, fireEvent, render, screen } from "@solidjs/testing-library";
3import { afterEach, describe, expect, it, vi } from "vitest";
4import { Button } from "../Button";
5
6describe("Button", () => {
7 afterEach(cleanup);
8
9 it("renders with default props", () => {
10 render(() => <Button>Click me</Button>);
11 const button = screen.getByRole("button", { name: /click me/i });
12 expect(button).toBeInTheDocument();
13 });
14
15 it("renders with correct variant", () => {
16 render(() => <Button variant="secondary">Secondary</Button>);
17 const button = screen.getByRole("button", { name: /secondary/i });
18 expect(button).toHaveClass("bg-gray-800");
19 });
20
21 it("renders with correct size", () => {
22 render(() => <Button size="lg">Large</Button>);
23 const button = screen.getByRole("button", { name: /large/i });
24 expect(button).toHaveClass("px-6 py-3");
25 });
26
27 it("handles click events", () => {
28 const handleClick = vi.fn();
29 render(() => <Button onClick={handleClick}>Click me</Button>);
30 const button = screen.getByRole("button", { name: /click me/i });
31
32 fireEvent.click(button);
33 expect(handleClick).toHaveBeenCalled();
34 });
35
36 describe("density support", () => {
37 it("renders with density prop", () => {
38 render(() => <Button density="compact">Button</Button>);
39 const button = screen.getByRole("button", { name: /button/i });
40 expect(button).toBeInTheDocument();
41 });
42
43 it("renders within DensityProvider", () => {
44 render(() => (
45 <DensityProvider>
46 <Button>Button</Button>
47 </DensityProvider>
48 ));
49 const button = screen.getByRole("button", { name: /button/i });
50 expect(button).toBeInTheDocument();
51 });
52
53 it("accepts all density modes", () => {
54 const { unmount } = render(() => <Button density="compact">Compact</Button>);
55 expect(screen.getByRole("button")).toBeInTheDocument();
56 unmount();
57
58 render(() => <Button density="spacious">Spacious</Button>);
59 expect(screen.getByRole("button")).toBeInTheDocument();
60 });
61 });
62});