@gv-tech/design-system 1.1.0 → 1.2.0

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

@@ -0,0 +1,92 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarTrigger,
+} from './menubar';
+
+describe('Menubar', () => {
+  it('renders trigger correctly', () => {
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger>File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarItem>New Tab</MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>,
+    );
+
+    expect(screen.getByText('File')).toBeInTheDocument();
+  });
+
+  it('opens menu on click', async () => {
+    const user = userEvent.setup();
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger>File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarItem>New Tab</MenubarItem>
+            <MenubarItem>New Window</MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>,
+    );
+
+    await user.click(screen.getByText('File'));
+
+    expect(screen.getByText('New Tab')).toBeVisible();
+    expect(screen.getByText('New Window')).toBeVisible();
+  });
+
+  it('handles checkbox items', async () => {
+    const user = userEvent.setup();
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger>View</MenubarTrigger>
+          <MenubarContent>
+            <MenubarCheckboxItem checked>Show Sidebar</MenubarCheckboxItem>
+            <MenubarCheckboxItem checked={false}>Show Status Bar</MenubarCheckboxItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>,
+    );
+
+    await user.click(screen.getByText('View'));
+
+    expect(screen.getByRole('menuitemcheckbox', { name: 'Show Sidebar' })).toBeChecked();
+    expect(screen.getByRole('menuitemcheckbox', { name: 'Show Status Bar' })).not.toBeChecked();
+  });
+
+  it('handles radio items', async () => {
+    const user = userEvent.setup();
+    render(
+      <Menubar>
+        <MenubarMenu>
+          <MenubarTrigger>Profiles</MenubarTrigger>
+          <MenubarContent>
+            <MenubarRadioGroup value="andy">
+              <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
+              <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
+            </MenubarRadioGroup>
+          </MenubarContent>
+        </MenubarMenu>
+      </Menubar>,
+    );
+
+    await user.click(screen.getByText('Profiles'));
+
+    expect(screen.getByRole('menuitemradio', { name: 'Andy' })).toBeChecked();
+    expect(screen.getByRole('menuitemradio', { name: 'Benoit' })).not.toBeChecked();
+  });
+});

package/src/components/ui/navigation-menu.test.tsx

@@ -0,0 +1,53 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+} from './navigation-menu';
+
+describe('NavigationMenu', () => {
+  it('renders trigger correctly', () => {
+    render(
+      <NavigationMenu>
+        <NavigationMenuList>
+          <NavigationMenuItem>
+            <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
+            <NavigationMenuContent>
+              <NavigationMenuLink>Link One</NavigationMenuLink>
+            </NavigationMenuContent>
+          </NavigationMenuItem>
+        </NavigationMenuList>
+      </NavigationMenu>,
+    );
+
+    expect(screen.getByText('Item One')).toBeInTheDocument();
+  });
+
+  it('shows content on click (or hover depending on implementation)', async () => {
+    // Radix Navigation Menu usually works on hover for desktop, click for touch/mobile.
+    // In JSDOM, we can simulate clicks.
+    const user = userEvent.setup();
+    render(
+      <NavigationMenu>
+        <NavigationMenuList>
+          <NavigationMenuItem>
+            <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
+            <NavigationMenuContent>
+              <NavigationMenuLink>Link One</NavigationMenuLink>
+            </NavigationMenuContent>
+          </NavigationMenuItem>
+        </NavigationMenuList>
+      </NavigationMenu>,
+    );
+
+    const trigger = screen.getByText('Item One');
+    await user.click(trigger);
+
+    expect(screen.getByText('Link One')).toBeVisible();
+  });
+});

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

@@ -0,0 +1,57 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from './pagination';
+
+describe('Pagination', () => {
+  it('renders correctly', () => {
+    render(
+      <Pagination>
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious href="#" />
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationLink href="#">1</PaginationLink>
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationEllipsis />
+          </PaginationItem>
+          <PaginationItem>
+            <PaginationNext href="#" />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>,
+    );
+
+    expect(screen.getByRole('navigation', { name: 'pagination' })).toBeInTheDocument();
+    expect(screen.getByText('Previous')).toBeInTheDocument();
+    expect(screen.getByText('1')).toBeInTheDocument();
+    expect(screen.getByText('Next')).toBeInTheDocument();
+    expect(screen.getByText('More pages')).toBeInTheDocument();
+  });
+
+  it('marks active page correctly', () => {
+    render(
+      <Pagination>
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationLink href="#" isActive>
+              1
+            </PaginationLink>
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>,
+    );
+
+    const link = screen.getByText('1').closest('a');
+    expect(link).toHaveAttribute('aria-current', 'page');
+  });
+});

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

@@ -0,0 +1,31 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
+
+describe('Popover', () => {
+  it('renders trigger correctly', () => {
+    render(
+      <Popover>
+        <PopoverTrigger>Open</PopoverTrigger>
+        <PopoverContent>Content</PopoverContent>
+      </Popover>,
+    );
+
+    expect(screen.getByText('Open')).toBeInTheDocument();
+  });
+
+  it('opens content on click', async () => {
+    const user = userEvent.setup();
+    render(
+      <Popover>
+        <PopoverTrigger>Open</PopoverTrigger>
+        <PopoverContent>Content</PopoverContent>
+      </Popover>,
+    );
+
+    await user.click(screen.getByText('Open'));
+
+    expect(screen.getByText('Content')).toBeVisible();
+  });
+});

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

@@ -0,0 +1,18 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { Progress } from './progress';
+
+describe('Progress', () => {
+  it('renders correctly', () => {
+    render(<Progress value={50} aria-label="progress-bar" />);
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+    expect(screen.getByRole('progressbar')).toHaveAttribute('aria-valuenow', '50');
+  });
+
+  it('renders correctly with no value', () => {
+    render(<Progress aria-label="progress-bar" />);
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+    // When value is undefined, Radix UI might behave in specific ways, typically indeterminate or 0.
+    // Our wrapper: transform: `translateX(-${100 - (value || 0)}%)` -> -100%
+  });
+});

package/src/components/ui/progress.tsx

@@ -10,6 +10,7 @@ const Progress = React.forwardRef<
   <ProgressPrimitive.Root
     ref={ref}
     className={cn('relative h-2 w-full overflow-hidden rounded-full bg-primary/20', className)}
+    value={value}
     {...props}
   >
     <ProgressPrimitive.Indicator

package/src/components/ui/radio-group.test.tsx

@@ -0,0 +1,39 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import { RadioGroup, RadioGroupItem } from './radio-group';
+
+describe('RadioGroup', () => {
+  it('renders correctly', () => {
+    render(
+      <RadioGroup defaultValue="option-one">
+        <RadioGroupItem value="option-one" id="option-one" aria-label="Option One" />
+        <RadioGroupItem value="option-two" id="option-two" aria-label="Option Two" />
+      </RadioGroup>,
+    );
+
+    expect(screen.getByRole('radio', { name: /Option One/i })).toBeInTheDocument();
+    // Radix RadioGroup renders standard inputs visually hidden.
+    // Testing library query by role 'radio' should find them.
+    // However, since we didn't provide labels, we might need to rely on 'checked' state or IDs.
+
+    const radio1 = screen.getByRole('radio', { checked: true });
+    expect(radio1).toBeInTheDocument();
+    expect(radio1).toHaveValue('option-one');
+  });
+
+  it('changes value on click', async () => {
+    const user = userEvent.setup();
+    render(
+      <RadioGroup defaultValue="option-one">
+        <RadioGroupItem value="option-one" />
+        <RadioGroupItem value="option-two" data-testid="radio-two" />
+      </RadioGroup>,
+    );
+
+    const radio2 = screen.getByTestId('radio-two');
+    await user.click(radio2);
+
+    expect(radio2).toBeChecked();
+  });
+});

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

@@ -0,0 +1,23 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from './resizable';
+
+describe('Resizable', () => {
+  it('renders correctly', () => {
+    // Basic render test
+    render(
+      <ResizablePanelGroup direction="horizontal">
+        <ResizablePanel defaultSize={50}>
+          <div>One</div>
+        </ResizablePanel>
+        <ResizableHandle />
+        <ResizablePanel defaultSize={50}>
+          <div>Two</div>
+        </ResizablePanel>
+      </ResizablePanelGroup>,
+    );
+
+    expect(screen.getByText('One')).toBeInTheDocument();
+    expect(screen.getByText('Two')).toBeInTheDocument();
+  });
+});

package/src/components/ui/scroll-area.test.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { ScrollArea, ScrollBar } from './scroll-area';
+
+describe('ScrollArea', () => {
+  it('renders correctly', () => {
+    render(
+      <ScrollArea className="h-[200px] w-[350px]">
+        <div>Content</div>
+        <ScrollBar />
+      </ScrollArea>,
+    );
+    expect(screen.getByText('Content')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,42 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select';
+
+describe('Select', () => {
+  it('renders correctly', () => {
+    render(
+      <Select>
+        <SelectTrigger>
+          <SelectValue placeholder="Select an option" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="option1">Option 1</SelectItem>
+          <SelectItem value="option2">Option 2</SelectItem>
+        </SelectContent>
+      </Select>,
+    );
+    expect(screen.getByText('Select an option')).toBeInTheDocument();
+  });
+
+  it('opens and selects an option', async () => {
+    const user = userEvent.setup();
+    render(
+      <Select>
+        <SelectTrigger>
+          <SelectValue placeholder="Select an option" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="option1">Option 1</SelectItem>
+          <SelectItem value="option2">Option 2</SelectItem>
+        </SelectContent>
+      </Select>,
+    );
+
+    await user.click(screen.getByRole('combobox'));
+    expect(screen.getByText('Option 1')).toBeVisible();
+
+    await user.click(screen.getByText('Option 1'));
+    expect(screen.getByText('Option 1')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,16 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { Separator } from './separator';
+
+describe('Separator', () => {
+  it('renders correctly', () => {
+    render(<Separator data-testid="separator" />);
+    expect(screen.getByTestId('separator')).toBeInTheDocument();
+    expect(screen.getByTestId('separator')).toHaveClass('bg-border');
+  });
+
+  it('applies orientation classes', () => {
+    render(<Separator orientation="vertical" data-testid="separator-vertical" />);
+    expect(screen.getByTestId('separator-vertical')).toHaveClass('h-full w-[1px]');
+  });
+});

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

@@ -0,0 +1,48 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from './sheet';
+
+// Mock ResizeObserver for Radix UI
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}));
+
+describe('Sheet', () => {
+  it('renders trigger correctly', () => {
+    render(
+      <Sheet>
+        <SheetTrigger>Open Sheet</SheetTrigger>
+        <SheetContent>
+          <SheetHeader>
+            <SheetTitle>Title</SheetTitle>
+            <SheetDescription>Description</SheetDescription>
+          </SheetHeader>
+        </SheetContent>
+      </Sheet>,
+    );
+
+    expect(screen.getByText('Open Sheet')).toBeInTheDocument();
+  });
+
+  it('opens content on click', async () => {
+    const user = userEvent.setup();
+    render(
+      <Sheet>
+        <SheetTrigger>Open Sheet</SheetTrigger>
+        <SheetContent>
+          <SheetHeader>
+            <SheetTitle>Title</SheetTitle>
+            <SheetDescription>Description</SheetDescription>
+          </SheetHeader>
+          <div>Sheet Content</div>
+        </SheetContent>
+      </Sheet>,
+    );
+
+    await user.click(screen.getByText('Open Sheet'));
+    expect(screen.getByText('Sheet Content')).toBeVisible();
+  });
+});

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

@@ -0,0 +1,13 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { Skeleton } from './skeleton';
+
+describe('Skeleton', () => {
+  it('renders correctly', () => {
+    render(<Skeleton data-testid="skeleton" className="h-4 w-[250px]" />);
+    const skeleton = screen.getByTestId('skeleton');
+    expect(skeleton).toBeInTheDocument();
+    expect(skeleton).toHaveClass('animate-pulse');
+    expect(skeleton).toHaveClass('h-4');
+  });
+});

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

@@ -0,0 +1,18 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { Slider } from './slider';
+
+describe('Slider', () => {
+  it('renders correctly', () => {
+    // Radix Slider uses ResizeObserver
+    global.ResizeObserver = class ResizeObserver {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    };
+
+    render(<Slider defaultValue={[50]} max={100} step={1} />);
+    expect(screen.getByRole('slider')).toBeInTheDocument();
+    expect(screen.getByRole('slider')).toHaveAttribute('aria-valuenow', '50');
+  });
+});

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

@@ -0,0 +1,13 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { Toaster } from './sonner';
+
+describe('Sonner Toaster', () => {
+  it('renders correctly', () => {
+    const { container } = render(<Toaster />);
+    // Sonner renders a list/container. Since it's a portal or fixed, we check presence.
+    // However, without triggering a toast, it might be empty or hidden.
+    // We check if the container renders without crashing.
+    expect(container).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,22 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import { Switch } from './switch';
+
+describe('Switch', () => {
+  it('renders correctly', () => {
+    render(<Switch data-testid="switch" />);
+    expect(screen.getByRole('switch')).toBeInTheDocument();
+  });
+
+  it('toggles state', async () => {
+    const user = userEvent.setup();
+    render(<Switch />);
+
+    const switchEl = screen.getByRole('switch');
+    expect(switchEl).toHaveAttribute('aria-checked', 'false');
+
+    await user.click(switchEl);
+    expect(switchEl).toHaveAttribute('aria-checked', 'true');
+  });
+});

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

@@ -0,0 +1,29 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from './table';
+
+describe('Table', () => {
+  it('renders correctly', () => {
+    render(
+      <Table>
+        <TableCaption>A list of invoices.</TableCaption>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-[100px]">Invoice</TableHead>
+            <TableHead>Status</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow>
+            <TableCell className="font-medium">INV001</TableCell>
+            <TableCell>Paid</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>,
+    );
+
+    expect(screen.getByRole('table')).toBeInTheDocument();
+    expect(screen.getByText('A list of invoices.')).toBeInTheDocument();
+    expect(screen.getByText('INV001')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,43 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './tabs';
+
+describe('Tabs', () => {
+  it('renders correctly', () => {
+    render(
+      <Tabs defaultValue="account">
+        <TabsList>
+          <TabsTrigger value="account">Account</TabsTrigger>
+          <TabsTrigger value="password">Password</TabsTrigger>
+        </TabsList>
+        <TabsContent value="account">Account Content</TabsContent>
+        <TabsContent value="password">Password Content</TabsContent>
+      </Tabs>,
+    );
+
+    expect(screen.getByRole('tablist')).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: 'Account' })).toBeInTheDocument();
+
+    // Default value shows Account Content
+    expect(screen.getByText('Account Content')).toBeVisible();
+    expect(screen.queryByText('Password Content')).not.toBeInTheDocument();
+  });
+
+  it('switches tabs', async () => {
+    const user = userEvent.setup();
+    render(
+      <Tabs defaultValue="account">
+        <TabsList>
+          <TabsTrigger value="account">Account</TabsTrigger>
+          <TabsTrigger value="password">Password</TabsTrigger>
+        </TabsList>
+        <TabsContent value="account">Account Content</TabsContent>
+        <TabsContent value="password">Password Content</TabsContent>
+      </Tabs>,
+    );
+
+    await user.click(screen.getByRole('tab', { name: 'Password' }));
+    expect(screen.getByText('Password Content')).toBeVisible();
+  });
+});

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

@@ -0,0 +1,21 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import { Textarea } from './textarea';
+
+describe('Textarea', () => {
+  it('renders correctly', () => {
+    render(<Textarea placeholder="Type here" />);
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Type here')).toBeInTheDocument();
+  });
+
+  it('accepts user input', async () => {
+    const user = userEvent.setup();
+    render(<Textarea />);
+    const textarea = screen.getByRole('textbox');
+
+    await user.type(textarea, 'Hello World');
+    expect(textarea).toHaveValue('Hello World');
+  });
+});