@object-ui/components 2.0.0 → 3.0.1

package/src/__tests__/snapshot-critical.test.tsx

@@ -0,0 +1,317 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Snapshot Tests — Additional Critical UI Components
+ *
+ * Captures render snapshots of Alert, Dialog, Tabs, Accordion, Avatar,
+ * Progress, Tooltip, Breadcrumb, Separator, and Skeleton to detect
+ * unintended visual regressions.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import React from 'react';
+import {
+  Alert,
+  AlertTitle,
+  AlertDescription,
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  Progress,
+  TooltipProvider,
+  Tooltip,
+  TooltipTrigger,
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  Separator,
+  Skeleton,
+} from '@object-ui/components';
+
+// ─── Alert Snapshots ────────────────────────────────────────────────────
+
+describe('Alert snapshots', () => {
+  it('renders default alert with title and description', () => {
+    const { container } = render(
+      <Alert>
+        <AlertTitle>Heads up!</AlertTitle>
+        <AlertDescription>
+          You can add components to your app using the CLI.
+        </AlertDescription>
+      </Alert>,
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders destructive alert with title and description', () => {
+    const { container } = render(
+      <Alert variant="destructive">
+        <AlertTitle>Error</AlertTitle>
+        <AlertDescription>
+          Your session has expired. Please log in again.
+        </AlertDescription>
+      </Alert>,
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
+
+// ─── Dialog Snapshots ───────────────────────────────────────────────────
+
+describe('Dialog snapshots', () => {
+  it('renders open dialog structure', () => {
+    const { baseElement } = render(
+      <Dialog open>
+        <DialogTrigger>Open</DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Edit Profile</DialogTitle>
+            <DialogDescription>
+              Make changes to your profile here.
+            </DialogDescription>
+          </DialogHeader>
+          <p>Dialog body content</p>
+          <DialogFooter>
+            <button type="submit">Save changes</button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>,
+    );
+    expect(baseElement).toMatchSnapshot();
+  });
+});
+
+// ─── Tabs Snapshots ─────────────────────────────────────────────────────
+
+describe('Tabs snapshots', () => {
+  it('renders tabs with multiple panels', () => {
+    const { container } = render(
+      <Tabs defaultValue="account">
+        <TabsList>
+          <TabsTrigger value="account">Account</TabsTrigger>
+          <TabsTrigger value="password">Password</TabsTrigger>
+          <TabsTrigger value="settings">Settings</TabsTrigger>
+        </TabsList>
+        <TabsContent value="account">Account settings here.</TabsContent>
+        <TabsContent value="password">Change your password.</TabsContent>
+        <TabsContent value="settings">App settings here.</TabsContent>
+      </Tabs>,
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders tabs with second tab active', () => {
+    const { container } = render(
+      <Tabs defaultValue="password">
+        <TabsList>
+          <TabsTrigger value="account">Account</TabsTrigger>
+          <TabsTrigger value="password">Password</TabsTrigger>
+        </TabsList>
+        <TabsContent value="account">Account settings.</TabsContent>
+        <TabsContent value="password">Password settings.</TabsContent>
+      </Tabs>,
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
+
+// ─── Accordion Snapshots ────────────────────────────────────────────────
+
+describe('Accordion snapshots', () => {
+  it('renders accordion with multiple items', () => {
+    const { container } = render(
+      <Accordion type="single" collapsible>
+        <AccordionItem value="item-1">
+          <AccordionTrigger>Is it accessible?</AccordionTrigger>
+          <AccordionContent>
+            Yes. It adheres to the WAI-ARIA design pattern.
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-2">
+          <AccordionTrigger>Is it styled?</AccordionTrigger>
+          <AccordionContent>
+            Yes. It comes with default styles that match the design system.
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-3">
+          <AccordionTrigger>Is it animated?</AccordionTrigger>
+          <AccordionContent>
+            Yes. It uses CSS animations for smooth transitions.
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>,
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders accordion with first item expanded', () => {
+    const { container } = render(
+      <Accordion type="single" defaultValue="item-1">
+        <AccordionItem value="item-1">
+          <AccordionTrigger>Section One</AccordionTrigger>
+          <AccordionContent>Content for section one.</AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-2">
+          <AccordionTrigger>Section Two</AccordionTrigger>
+          <AccordionContent>Content for section two.</AccordionContent>
+        </AccordionItem>
+      </Accordion>,
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
+
+// ─── Avatar Snapshots ───────────────────────────────────────────────────
+
+describe('Avatar snapshots', () => {
+  it('renders avatar with image and fallback', () => {
+    const { container } = render(
+      <Avatar>
+        <AvatarImage src="https://example.com/avatar.png" alt="User avatar" />
+        <AvatarFallback>JD</AvatarFallback>
+      </Avatar>,
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders avatar with fallback only', () => {
+    const { container } = render(
+      <Avatar>
+        <AvatarFallback>AB</AvatarFallback>
+      </Avatar>,
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
+
+// ─── Progress Snapshots ─────────────────────────────────────────────────
+
+describe('Progress snapshots', () => {
+  it('renders progress at 0%', () => {
+    const { container } = render(<Progress value={0} />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders progress at 50%', () => {
+    const { container } = render(<Progress value={50} />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders progress at 100%', () => {
+    const { container } = render(<Progress value={100} />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
+
+// ─── Tooltip Snapshots ──────────────────────────────────────────────────
+
+describe('Tooltip snapshots', () => {
+  it('renders tooltip trigger', () => {
+    const { container } = render(
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button>Hover me</button>
+          </TooltipTrigger>
+        </Tooltip>
+      </TooltipProvider>,
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
+
+// ─── Breadcrumb Snapshots ───────────────────────────────────────────────
+
+describe('Breadcrumb snapshots', () => {
+  it('renders multi-level breadcrumb', () => {
+    const { container } = render(
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink href="/">Home</BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbLink href="/products">Products</BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbPage>Current Page</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>,
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
+
+// ─── Separator Snapshots ────────────────────────────────────────────────
+
+describe('Separator snapshots', () => {
+  it('renders horizontal separator', () => {
+    const { container } = render(<Separator />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders vertical separator', () => {
+    const { container } = render(<Separator orientation="vertical" />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
+
+// ─── Skeleton Snapshots ─────────────────────────────────────────────────
+
+describe('Skeleton snapshots', () => {
+  it('renders default skeleton', () => {
+    const { container } = render(<Skeleton />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders skeleton with text line dimensions', () => {
+    const { container } = render(<Skeleton className="h-4 w-[250px]" />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders skeleton with circular avatar dimensions', () => {
+    const { container } = render(<Skeleton className="h-12 w-12 rounded-full" />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders skeleton loading card layout', () => {
+    const { container } = render(
+      <div className="flex flex-col space-y-3">
+        <Skeleton className="h-[125px] w-[250px] rounded-xl" />
+        <div className="space-y-2">
+          <Skeleton className="h-4 w-[250px]" />
+          <Skeleton className="h-4 w-[200px]" />
+        </div>
+      </div>,
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

package/src/__tests__/snapshot.test.tsx

@@ -0,0 +1,205 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Snapshot Tests — Critical UI Components
+ *
+ * Captures render snapshots of Button, Badge, Card, Empty, and Spinner
+ * with all major variant permutations to detect unintended visual regressions.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import React from 'react';
+import {
+  Button,
+  Badge,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyMedia,
+  EmptyContent,
+  Spinner,
+} from '../index';
+
+// ─── Button Snapshots ───────────────────────────────────────────────────
+
+describe('Button snapshots', () => {
+  const variants = ['default', 'destructive', 'outline', 'secondary', 'ghost', 'link'] as const;
+
+  variants.forEach((variant) => {
+    it(`renders variant="${variant}"`, () => {
+      const { container } = render(
+        <Button variant={variant}>Click me</Button>,
+      );
+      expect(container.firstChild).toMatchSnapshot();
+    });
+  });
+
+  it('renders disabled state', () => {
+    const { container } = render(<Button disabled>Disabled</Button>);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders size="sm"', () => {
+    const { container } = render(<Button size="sm">Small</Button>);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders size="lg"', () => {
+    const { container } = render(<Button size="lg">Large</Button>);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders size="icon"', () => {
+    const { container } = render(
+      <Button size="icon" aria-label="Icon button">
+        ★
+      </Button>,
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
+
+// ─── Badge Snapshots ────────────────────────────────────────────────────
+
+describe('Badge snapshots', () => {
+  const variants = ['default', 'secondary', 'destructive', 'outline'] as const;
+
+  variants.forEach((variant) => {
+    it(`renders variant="${variant}"`, () => {
+      const { container } = render(
+        <Badge variant={variant}>Label</Badge>,
+      );
+      expect(container.firstChild).toMatchSnapshot();
+    });
+  });
+
+  it('renders with custom className', () => {
+    const { container } = render(
+      <Badge className="custom-class">Custom</Badge>,
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
+
+// ─── Card Snapshots ─────────────────────────────────────────────────────
+
+describe('Card snapshots', () => {
+  it('renders with header, content, and footer', () => {
+    const { container } = render(
+      <Card>
+        <CardHeader>
+          <CardTitle>Card Title</CardTitle>
+          <CardDescription>A brief description</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p>Card body content</p>
+        </CardContent>
+        <CardFooter>
+          <Button>Action</Button>
+        </CardFooter>
+      </Card>,
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders header-only card', () => {
+    const { container } = render(
+      <Card>
+        <CardHeader>
+          <CardTitle>Minimal Card</CardTitle>
+        </CardHeader>
+      </Card>,
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders content-only card', () => {
+    const { container } = render(
+      <Card>
+        <CardContent>Just content</CardContent>
+      </Card>,
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders with custom className', () => {
+    const { container } = render(
+      <Card className="w-96 shadow-lg">
+        <CardContent>Styled card</CardContent>
+      </Card>,
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
+
+// ─── Empty State Snapshots ──────────────────────────────────────────────
+
+describe('Empty state snapshots', () => {
+  it('renders full empty state with media, title, description, and content', () => {
+    const { container } = render(
+      <Empty>
+        <EmptyHeader>
+          <EmptyMedia variant="icon">
+            <span>📭</span>
+          </EmptyMedia>
+          <EmptyTitle>No results found</EmptyTitle>
+          <EmptyDescription>
+            Try adjusting your search or filter criteria.
+          </EmptyDescription>
+        </EmptyHeader>
+        <EmptyContent>
+          <Button variant="outline">Clear filters</Button>
+        </EmptyContent>
+      </Empty>,
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders minimal empty state with title only', () => {
+    const { container } = render(
+      <Empty>
+        <EmptyHeader>
+          <EmptyTitle>Nothing here yet</EmptyTitle>
+        </EmptyHeader>
+      </Empty>,
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders empty media with default variant', () => {
+    const { container } = render(
+      <EmptyMedia>
+        <span>🔍</span>
+      </EmptyMedia>,
+    );
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
+
+// ─── Spinner Snapshots ──────────────────────────────────────────────────
+
+describe('Spinner snapshots', () => {
+  it('renders default spinner', () => {
+    const { container } = render(<Spinner />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders with custom className', () => {
+    const { container } = render(<Spinner className="h-8 w-8" />);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});