@object-ui/components 0.5.0 → 3.0.0

package/src/__tests__/navigation-overlay.test.tsx

@@ -0,0 +1,273 @@
+/**
+ * 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.
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import { NavigationOverlay } from '../custom/navigation-overlay';
+import type { NavigationOverlayProps } from '../custom/navigation-overlay';
+
+// Helper to create default props
+function createProps(overrides: Partial<NavigationOverlayProps> = {}): NavigationOverlayProps {
+  return {
+    isOpen: true,
+    selectedRecord: { _id: '1', name: 'Test Record', email: 'test@example.com' },
+    mode: 'drawer',
+    close: vi.fn(),
+    setIsOpen: vi.fn(),
+    isOverlay: true,
+    children: (record: Record<string, unknown>) => (
+      <div data-testid="record-content">
+        <span>{String(record.name)}</span>
+      </div>
+    ),
+    ...overrides,
+  };
+}
+
+describe('NavigationOverlay', () => {
+  // ============================================================
+  // Non-overlay modes
+  // ============================================================
+
+  describe('non-overlay modes', () => {
+    it('should render nothing for mode: page', () => {
+      const { container } = render(
+        <NavigationOverlay {...createProps({ mode: 'page' })} />
+      );
+      expect(container.innerHTML).toBe('');
+    });
+
+    it('should render nothing for mode: new_window', () => {
+      const { container } = render(
+        <NavigationOverlay {...createProps({ mode: 'new_window' })} />
+      );
+      expect(container.innerHTML).toBe('');
+    });
+
+    it('should render nothing for mode: none', () => {
+      const { container } = render(
+        <NavigationOverlay {...createProps({ mode: 'none' })} />
+      );
+      expect(container.innerHTML).toBe('');
+    });
+
+    it('should render nothing when selectedRecord is null', () => {
+      const { container } = render(
+        <NavigationOverlay {...createProps({ selectedRecord: null })} />
+      );
+      expect(container.innerHTML).toBe('');
+    });
+  });
+
+  // ============================================================
+  // Drawer mode (Sheet)
+  // ============================================================
+
+  describe('drawer mode', () => {
+    it('should render Sheet with record content', () => {
+      render(<NavigationOverlay {...createProps({ mode: 'drawer' })} />);
+      expect(screen.getByText('Test Record')).toBeInTheDocument();
+    });
+
+    it('should render title', () => {
+      render(
+        <NavigationOverlay
+          {...createProps({ mode: 'drawer', title: 'Contact Detail' })}
+        />
+      );
+      expect(screen.getByText('Contact Detail')).toBeInTheDocument();
+    });
+
+    it('should render description when provided', () => {
+      render(
+        <NavigationOverlay
+          {...createProps({
+            mode: 'drawer',
+            title: 'Detail',
+            description: 'View record details',
+          })}
+        />
+      );
+      expect(screen.getByText('View record details')).toBeInTheDocument();
+    });
+
+    it('should use default title when none provided', () => {
+      render(<NavigationOverlay {...createProps({ mode: 'drawer' })} />);
+      expect(screen.getByText('Record Detail')).toBeInTheDocument();
+    });
+  });
+
+  // ============================================================
+  // Modal mode (Dialog)
+  // ============================================================
+
+  describe('modal mode', () => {
+    it('should render Dialog with record content', () => {
+      render(<NavigationOverlay {...createProps({ mode: 'modal' })} />);
+      expect(screen.getByText('Test Record')).toBeInTheDocument();
+    });
+
+    it('should render title in dialog', () => {
+      render(
+        <NavigationOverlay
+          {...createProps({ mode: 'modal', title: 'Account Detail' })}
+        />
+      );
+      expect(screen.getByText('Account Detail')).toBeInTheDocument();
+    });
+
+    it('should render description in dialog', () => {
+      render(
+        <NavigationOverlay
+          {...createProps({
+            mode: 'modal',
+            description: 'View account information',
+          })}
+        />
+      );
+      expect(screen.getByText('View account information')).toBeInTheDocument();
+    });
+  });
+
+  // ============================================================
+  // Split mode (ResizablePanelGroup)
+  // ============================================================
+
+  describe('split mode', () => {
+    it('should render split panels with main content and record detail', () => {
+      render(
+        <NavigationOverlay
+          {...createProps({
+            mode: 'split',
+            mainContent: <div data-testid="main">Main Content</div>,
+          })}
+        />
+      );
+      expect(screen.getByTestId('main')).toBeInTheDocument();
+      expect(screen.getByText('Test Record')).toBeInTheDocument();
+    });
+
+    it('should render nothing when mainContent is not provided', () => {
+      const { container } = render(
+        <NavigationOverlay
+          {...createProps({ mode: 'split', mainContent: undefined })}
+        />
+      );
+      expect(container.innerHTML).toBe('');
+    });
+
+    it('should render close button in split panel', () => {
+      render(
+        <NavigationOverlay
+          {...createProps({
+            mode: 'split',
+            mainContent: <div>Main</div>,
+          })}
+        />
+      );
+      expect(screen.getByLabelText('Close panel')).toBeInTheDocument();
+    });
+
+    it('should call close when close button clicked', () => {
+      const close = vi.fn();
+      render(
+        <NavigationOverlay
+          {...createProps({
+            mode: 'split',
+            close,
+            mainContent: <div>Main</div>,
+          })}
+        />
+      );
+
+      fireEvent.click(screen.getByLabelText('Close panel'));
+      expect(close).toHaveBeenCalled();
+    });
+  });
+
+  // ============================================================
+  // Popover mode
+  // ============================================================
+
+  describe('popover mode', () => {
+    it('should render popover with record content when open', () => {
+      render(
+        <NavigationOverlay
+          {...createProps({
+            mode: 'popover',
+            popoverTrigger: <button>Trigger</button>,
+          })}
+        />
+      );
+      expect(screen.getByText('Test Record')).toBeInTheDocument();
+    });
+
+    it('should render title in popover', () => {
+      render(
+        <NavigationOverlay
+          {...createProps({
+            mode: 'popover',
+            title: 'Quick View',
+          })}
+        />
+      );
+      expect(screen.getByText('Quick View')).toBeInTheDocument();
+    });
+  });
+
+  // ============================================================
+  // Width handling
+  // ============================================================
+
+  describe('width handling', () => {
+    it('should render drawer with string width without error', () => {
+      render(
+        <NavigationOverlay
+          {...createProps({ mode: 'drawer', width: '600px' })}
+        />
+      );
+      expect(screen.getByText('Test Record')).toBeInTheDocument();
+    });
+
+    it('should render modal with numeric width without error', () => {
+      render(
+        <NavigationOverlay
+          {...createProps({ mode: 'modal', width: 800 })}
+        />
+      );
+      expect(screen.getByText('Test Record')).toBeInTheDocument();
+    });
+  });
+
+  // ============================================================
+  // Children render prop
+  // ============================================================
+
+  describe('children render prop', () => {
+    it('should pass the selected record to children', () => {
+      const record = { _id: '42', name: 'Jane Doe', status: 'active' };
+      render(
+        <NavigationOverlay
+          {...createProps({
+            mode: 'drawer',
+            selectedRecord: record,
+            children: (r: Record<string, unknown>) => (
+              <div>
+                <span data-testid="name">{String(r.name)}</span>
+                <span data-testid="status">{String(r.status)}</span>
+              </div>
+            ),
+          })}
+        />
+      );
+      expect(screen.getByTestId('name')).toHaveTextContent('Jane Doe');
+      expect(screen.getByTestId('status')).toHaveTextContent('active');
+    });
+  });
+});

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();
+  });
+});