@gv-tech/design-system 1.1.0 → 1.2.0

package/src/components/ui/accordion.test.tsx

@@ -0,0 +1,86 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './accordion';
+
+describe('Accordion', () => {
+  it('renders correctly', () => {
+    render(
+      <Accordion type="single" collapsible>
+        <AccordionItem value="item-1">
+          <AccordionTrigger>Trigger 1</AccordionTrigger>
+          <AccordionContent>Content 1</AccordionContent>
+        </AccordionItem>
+      </Accordion>,
+    );
+
+    expect(screen.getByText('Trigger 1')).toBeInTheDocument();
+    // Content should not be visible initially
+    expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
+  });
+
+  it('expands when clicked', async () => {
+    render(
+      <Accordion type="single" collapsible>
+        <AccordionItem value="item-1">
+          <AccordionTrigger>Trigger 1</AccordionTrigger>
+          <AccordionContent>Content 1</AccordionContent>
+        </AccordionItem>
+      </Accordion>,
+    );
+
+    const trigger = screen.getByText('Trigger 1');
+    await userEvent.click(trigger);
+
+    await waitFor(() => {
+      expect(screen.getByText('Content 1')).toBeVisible();
+    });
+  });
+
+  it('collapses when clicked again', async () => {
+    render(
+      <Accordion type="single" collapsible defaultValue="item-1">
+        <AccordionItem value="item-1">
+          <AccordionTrigger>Trigger 1</AccordionTrigger>
+          <AccordionContent>Content 1</AccordionContent>
+        </AccordionItem>
+      </Accordion>,
+    );
+
+    // Initial state open
+    expect(screen.getByText('Content 1')).toBeVisible();
+
+    const trigger = screen.getByText('Trigger 1');
+    await userEvent.click(trigger);
+
+    await waitFor(() => {
+      expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
+    });
+  });
+
+  it('handles single mode correctly', async () => {
+    render(
+      <Accordion type="single" collapsible>
+        <AccordionItem value="item-1">
+          <AccordionTrigger>Trigger 1</AccordionTrigger>
+          <AccordionContent>Content 1</AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-2">
+          <AccordionTrigger>Trigger 2</AccordionTrigger>
+          <AccordionContent>Content 2</AccordionContent>
+        </AccordionItem>
+      </Accordion>,
+    );
+
+    // Click item 1
+    await userEvent.click(screen.getByText('Trigger 1'));
+    await waitFor(() => expect(screen.getByText('Content 1')).toBeVisible());
+
+    // Click item 2
+    await userEvent.click(screen.getByText('Trigger 2'));
+    await waitFor(() => expect(screen.getByText('Content 2')).toBeVisible());
+
+    // Item 1 should be closed
+    await waitFor(() => expect(screen.queryByText('Content 1')).not.toBeInTheDocument());
+  });
+});

package/src/components/ui/alert-dialog.test.tsx

@@ -0,0 +1,89 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from './alert-dialog';
+
+describe('AlertDialog', () => {
+  it('renders correctly', async () => {
+    render(
+      <AlertDialog>
+        <AlertDialogTrigger>Open</AlertDialogTrigger>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+            <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction>Continue</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>,
+    );
+
+    expect(screen.getByText('Open')).toBeInTheDocument();
+    expect(screen.queryByText('Are you sure?')).not.toBeInTheDocument();
+
+    await userEvent.click(screen.getByText('Open'));
+
+    await waitFor(() => {
+      expect(screen.getByRole('alertdialog')).toBeInTheDocument();
+      expect(screen.getByText('Are you sure?')).toBeInTheDocument();
+      expect(screen.getByText('This action cannot be undone.')).toBeInTheDocument();
+    });
+  });
+
+  it('closes when cancel is clicked', async () => {
+    render(
+      <AlertDialog>
+        <AlertDialogTrigger>Open</AlertDialogTrigger>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>,
+    );
+
+    await userEvent.click(screen.getByText('Open'));
+    await waitFor(() => expect(screen.getByRole('alertdialog')).toBeInTheDocument());
+
+    await userEvent.click(screen.getByText('Cancel'));
+    await waitFor(() => expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument());
+  });
+
+  it('closes when action is clicked', async () => {
+    render(
+      <AlertDialog>
+        <AlertDialogTrigger>Open</AlertDialogTrigger>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogAction>Continue</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>,
+    );
+
+    await userEvent.click(screen.getByText('Open'));
+    await waitFor(() => expect(screen.getByRole('alertdialog')).toBeInTheDocument());
+
+    await userEvent.click(screen.getByText('Continue'));
+    await waitFor(() => expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument());
+  });
+});

package/src/components/ui/alert.test.tsx

@@ -0,0 +1,33 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { Alert, AlertDescription, AlertTitle } from './alert';
+
+describe('Alert', () => {
+  it('renders correctly', () => {
+    render(
+      <Alert>
+        <AlertTitle>Heads up!</AlertTitle>
+        <AlertDescription>You can add components to your app using the cli.</AlertDescription>
+      </Alert>,
+    );
+
+    const alert = screen.getByRole('alert');
+    expect(alert).toBeInTheDocument();
+    expect(screen.getByText('Heads up!')).toBeInTheDocument();
+    expect(screen.getByText('You can add components to your app using the cli.')).toBeInTheDocument();
+  });
+
+  it('renders destructive variant', () => {
+    render(
+      <Alert variant="destructive">
+        <AlertTitle>Error</AlertTitle>
+        <AlertDescription>Your session has expired.</AlertDescription>
+      </Alert>,
+    );
+
+    const alert = screen.getByRole('alert');
+    expect(alert).toBeInTheDocument();
+    expect(alert).toHaveClass('border-destructive/50');
+    expect(alert).toHaveClass('text-destructive');
+  });
+});

package/src/components/ui/aspect-ratio.test.tsx

@@ -0,0 +1,34 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { AspectRatio } from './aspect-ratio';
+
+describe('AspectRatio', () => {
+  it('renders correctly', () => {
+    const { container } = render(
+      <AspectRatio ratio={16 / 9}>
+        <img src="test.jpg" alt="test" />
+      </AspectRatio>,
+    );
+
+    const img = screen.getByRole('img');
+    expect(img).toBeInTheDocument();
+
+    // Radix AspectRatio renders a wrapper with padding-bottom based on ratio
+    // We can check if the wrapper style is applied
+    const wrapper = container.firstChild;
+    expect(wrapper).toHaveStyle({ paddingBottom: expect.stringMatching(/%$/) });
+  });
+
+  it('renders with custom ratio', () => {
+    const { container } = render(
+      <AspectRatio ratio={1 / 1}>
+        <div>Square</div>
+      </AspectRatio>,
+    );
+
+    expect(screen.getByText('Square')).toBeInTheDocument();
+    const wrapper = container.firstChild;
+    // 1/1 ratio should be 100% padding-bottom
+    expect(wrapper).toHaveStyle({ paddingBottom: '100%' });
+  });
+});

package/src/components/ui/avatar.test.tsx

@@ -0,0 +1,33 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { Avatar, AvatarFallback, AvatarImage } from './avatar';
+
+describe('Avatar', () => {
+  it('renders correctly', () => {
+    render(
+      <Avatar>
+        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+        <AvatarFallback>CN</AvatarFallback>
+      </Avatar>,
+    );
+
+    // In JSDOM, image loading might not happen immediately or at all without mocking.
+    // However, the elements should be in the DOM.
+    // Radix conditionally renders Image or Fallback.
+    // By default, it might render Image and hide Fallback, or vice versa depending on loading.
+
+    // Let's check that the root is present
+    const avatar = screen.getByText('CN')?.parentElement || screen.getByRole('img').parentElement;
+    expect(avatar).toBeInTheDocument();
+  });
+
+  it('renders fallback when image is missing', () => {
+    render(
+      <Avatar>
+        <AvatarFallback>CN</AvatarFallback>
+      </Avatar>,
+    );
+
+    expect(screen.getByText('CN')).toBeInTheDocument();
+  });
+});

package/src/components/ui/badge.test.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { Badge } from './badge';
+
+describe('Badge', () => {
+  it('renders correctly', () => {
+    render(<Badge>Test Badge</Badge>);
+    expect(screen.getByText('Test Badge')).toBeInTheDocument();
+  });
+
+  it('renders variants', () => {
+    const { rerender, getByText } = render(<Badge variant="default">Default</Badge>);
+    expect(getByText('Default')).toHaveClass('bg-primary');
+
+    rerender(<Badge variant="secondary">Secondary</Badge>);
+    expect(getByText('Secondary')).toHaveClass('bg-secondary');
+
+    rerender(<Badge variant="destructive">Destructive</Badge>);
+    expect(getByText('Destructive')).toHaveClass('bg-destructive');
+
+    rerender(<Badge variant="outline">Outline</Badge>);
+    expect(getByText('Outline')).toHaveClass('text-foreground');
+  });
+});

package/src/components/ui/breadcrumb.test.tsx

@@ -0,0 +1,55 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from './breadcrumb';
+
+describe('Breadcrumb', () => {
+  it('renders correctly', () => {
+    render(
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink href="/">Home</BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbPage>Page</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>,
+    );
+
+    const nav = screen.getByRole('navigation');
+    expect(nav).toBeInTheDocument();
+    expect(nav).toHaveAttribute('aria-label', 'breadcrumb');
+
+    const links = screen.getAllByRole('link');
+    expect(links).toHaveLength(2); // Link and Page (span role="link")
+    expect(links[0]).toHaveAttribute('href', '/');
+    expect(links[1]).toHaveTextContent('Page');
+  });
+
+  it('renders custom separator', () => {
+    render(
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink>Home</BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator>/</BreadcrumbSeparator>
+          <BreadcrumbItem>
+            <BreadcrumbPage>Page</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>,
+    );
+
+    expect(screen.getByText('/')).toBeInTheDocument();
+  });
+});

package/src/components/ui/button.test.tsx

@@ -0,0 +1,62 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { Button } from './button';
+
+describe('Button', () => {
+  it('renders correctly', () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByRole('button', { name: /click me/i })).toBeInTheDocument();
+  });
+
+  it('handles click events', async () => {
+    const handleClick = vi.fn();
+    render(<Button onClick={handleClick}>Click me</Button>);
+
+    await userEvent.click(screen.getByRole('button', { name: /click me/i }));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('can be disabled', () => {
+    render(<Button disabled>Click me</Button>);
+    expect(screen.getByRole('button', { name: /click me/i })).toBeDisabled();
+  });
+
+  it('supports asChild prop', () => {
+    render(
+      <Button asChild>
+        <a href="/test">Link Button</a>
+      </Button>,
+    );
+
+    const link = screen.getByRole('link', { name: /link button/i });
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute('href', '/test');
+  });
+
+  describe('Variants', () => {
+    const variants = ['default', 'destructive', 'outline', 'secondary', 'ghost', 'link'] as const;
+
+    variants.forEach((variant) => {
+      it(`renders ${variant} variant`, () => {
+        render(<Button variant={variant}>{variant}</Button>);
+        const button = screen.getByRole('button', { name: variant });
+        expect(button).toBeInTheDocument();
+        // We could check for specific classes here, but that might make tests too brittle
+        // checking the role and content presence is a good baseline
+      });
+    });
+  });
+
+  describe('Sizes', () => {
+    const sizes = ['default', 'sm', 'lg', 'icon'] as const;
+
+    sizes.forEach((size) => {
+      it(`renders ${size} size`, () => {
+        render(<Button size={size}>{size}</Button>);
+        const button = screen.getByRole('button', { name: size });
+        expect(button).toBeInTheDocument();
+      });
+    });
+  });
+});

package/src/components/ui/calendar.test.tsx

@@ -0,0 +1,23 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { Calendar } from './calendar';
+
+describe('Calendar', () => {
+  it('renders correctly', () => {
+    // Mock date to consistent rendering
+    const date = new Date(2023, 0, 1); // Jan 1, 2023
+
+    render(<Calendar mode="single" selected={date} month={date} />);
+
+    expect(screen.getByText('January 2023')).toBeInTheDocument();
+    const days = screen.getAllByText('1');
+    expect(days.length).toBeGreaterThan(0);
+    expect(screen.getByText('Su')).toBeInTheDocument(); // Sunday header
+  });
+
+  it('renders with class name', () => {
+    const { container } = render(<Calendar className="test-class" />);
+    // DayPicker renders a div with the class
+    expect(container.firstChild).toHaveClass('test-class');
+  });
+});

package/src/components/ui/calendar.tsx

@@ -23,9 +23,10 @@ function Calendar({
     <DayPicker
       showOutsideDays={showOutsideDays}
       className={cn(
-        'bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
+        'bg-background group/calendar p-3 [--cell-size:2.5rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
         String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
         String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        'relative',
         className,
       )}
       captionLayout={captionLayout}
@@ -37,19 +38,22 @@ function Calendar({
         root: cn('w-fit', defaultClassNames.root),
         months: cn('relative flex flex-col gap-4 md:flex-row', defaultClassNames.months),
         month: cn('flex w-full flex-col gap-4', defaultClassNames.month),
-        nav: cn('absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1', defaultClassNames.nav),
+        nav: cn(
+          'absolute inset-x-0 top-2 flex items-center justify-between pointer-events-none px-2',
+          defaultClassNames.nav,
+        ),
         button_previous: cn(
           buttonVariants({ variant: buttonVariant }),
-          'h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50',
+          'h-7 w-7 select-none p-0 aria-disabled:opacity-50 pointer-events-auto',
           defaultClassNames.button_previous,
         ),
         button_next: cn(
           buttonVariants({ variant: buttonVariant }),
-          'h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50',
+          'h-7 w-7 select-none p-0 aria-disabled:opacity-50 pointer-events-auto',
           defaultClassNames.button_next,
         ),
         month_caption: cn(
-          'flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]',
+          'flex h-[--cell-size] w-full items-center justify-center text-sm font-medium',
           defaultClassNames.month_caption,
         ),
         dropdowns: cn(
@@ -68,17 +72,17 @@ function Calendar({
             : '[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5',
           defaultClassNames.caption_label,
         ),
-        table: 'w-full border-collapse',
+        table: 'w-full border-collapse grow',
         weekdays: cn('flex', defaultClassNames.weekdays),
         weekday: cn(
-          'text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal',
+          'text-muted-foreground pt-1 flex-1 select-none rounded-md text-[0.8rem] font-normal uppercase',
           defaultClassNames.weekday,
         ),
-        week: cn('mt-2 flex w-full', defaultClassNames.week),
+        week: cn('flex w-full mt-2', defaultClassNames.week),
         week_number_header: cn('w-[--cell-size] select-none', defaultClassNames.week_number_header),
         week_number: cn('text-muted-foreground select-none text-[0.8rem]', defaultClassNames.week_number),
         day: cn(
-          'group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md',
+          'group/day relative flex aspect-square h-10 w-10 select-none items-center justify-center p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md',
           defaultClassNames.day,
         ),
         range_start: cn('bg-accent rounded-l-md', defaultClassNames.range_start),
@@ -144,7 +148,7 @@ function CalendarDayButton({ className, day, modifiers, ...props }: React.Compon
       data-range-end={modifiers.range_end}
       data-range-middle={modifiers.range_middle}
       className={cn(
-        'data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70',
+        'data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-full w-full min-w-[--cell-size] items-center justify-center font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70',
         defaultClassNames.day,
         className,
       )}

package/src/components/ui/card.test.tsx

@@ -0,0 +1,35 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './card';
+
+describe('Card', () => {
+  it('renders correctly', () => {
+    render(
+      <Card>
+        <CardHeader>
+          <CardTitle>Title</CardTitle>
+          <CardDescription>Description</CardDescription>
+        </CardHeader>
+        <CardContent>Content</CardContent>
+        <CardFooter>Footer</CardFooter>
+      </Card>,
+    );
+
+    expect(screen.getByText('Title')).toBeInTheDocument();
+    expect(screen.getByText('Description')).toBeInTheDocument();
+    expect(screen.getByText('Content')).toBeInTheDocument();
+    expect(screen.getByText('Footer')).toBeInTheDocument();
+  });
+
+  it('renders with class names', () => {
+    const { container } = render(<Card className="test-class" />);
+    expect(container.firstChild).toHaveClass(
+      'test-class',
+      'rounded-xl',
+      'border',
+      'bg-card',
+      'text-card-foreground',
+      'shadow',
+    );
+  });
+});

package/src/components/ui/carousel.test.tsx

@@ -0,0 +1,37 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from './carousel';
+
+describe('Carousel', () => {
+  it('renders correctly', () => {
+    render(
+      <Carousel aria-label="carousel">
+        <CarouselContent>
+          <CarouselItem>Slide 1</CarouselItem>
+          <CarouselItem>Slide 2</CarouselItem>
+          <CarouselItem>Slide 3</CarouselItem>
+        </CarouselContent>
+        <CarouselPrevious />
+        <CarouselNext />
+      </Carousel>,
+    );
+
+    expect(screen.getByRole('region', { name: 'carousel' })).toBeInTheDocument();
+    expect(screen.getByText('Slide 1')).toBeInTheDocument();
+    expect(screen.getByText('Slide 2')).toBeInTheDocument();
+    expect(screen.getByText('Slide 3')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Previous slide' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Next slide' })).toBeInTheDocument();
+  });
+
+  it('renders with orientation vertical', () => {
+    render(
+      <Carousel orientation="vertical" aria-label="carousel">
+        <CarouselContent>
+          <CarouselItem>Slide 1</CarouselItem>
+        </CarouselContent>
+      </Carousel>,
+    );
+    expect(screen.getByRole('region', { name: 'carousel' })).toBeInTheDocument();
+  });
+});

package/src/components/ui/chart.test.tsx

@@ -0,0 +1,62 @@
+import { render, screen } from '@testing-library/react';
+import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts';
+import { describe, expect, it, vi } from 'vitest';
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from './chart';
+
+// Mock Recharts ResponsiveContainer to avoid ResizeObserver issues and render children immediately
+vi.mock('recharts', async (importOriginal) => {
+  const original = await importOriginal();
+  return {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ...(original as any),
+    ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (
+      <div style={{ width: 500, height: 300 }}>{children}</div>
+    ),
+  };
+});
+
+const chartConfig = {
+  desktop: {
+    label: 'Desktop',
+    color: '#2563eb',
+  },
+  mobile: {
+    label: 'Mobile',
+    color: '#60a5fa',
+  },
+};
+
+const chartData = [
+  { month: 'January', desktop: 186, mobile: 80 },
+  { month: 'February', desktop: 305, mobile: 200 },
+];
+
+describe('Chart', () => {
+  it('renders correctly', () => {
+    render(
+      <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
+        <BarChart accessibilityLayer data={chartData} width={500} height={300}>
+          <CartesianGrid vertical={false} />
+          <XAxis
+            dataKey="month"
+            tickLine={false}
+            tickMargin={10}
+            axisLine={false}
+            tickFormatter={(value) => value.slice(0, 3)}
+          />
+          <ChartTooltip content={<ChartTooltipContent />} />
+          <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+          <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+        </BarChart>
+      </ChartContainer>,
+    );
+
+    // Recharts renders SVGs. We can check if the container renders.
+    // The accessibilityLayer prop on BarChart adds role="application" or similar?
+    // Let's check for the chart container.
+    // The ChartContainer adds data-chart attribute.
+    // But we can check for text.
+    expect(screen.getByText('Jan')).toBeInTheDocument();
+    expect(screen.getByText('Feb')).toBeInTheDocument();
+  });
+});