@object-ui/components 2.0.0 → 3.0.0

package/src/__tests__/color-contrast.test.tsx

@@ -0,0 +1,212 @@
+/**
+ * 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.
+ */
+
+/**
+ * WCAG 2.1 AA Color Contrast Tests.
+ *
+ * Verifies that key color combinations used in ObjectUI meet WCAG AA
+ * contrast ratio requirements:
+ * - 4.5:1 for normal text (< 18pt or < 14pt bold)
+ * - 3:1 for large text (≥ 18pt or ≥ 14pt bold)
+ *
+ * Tests both light and dark theme color values.
+ * Part of P2.3 Accessibility & Inclusive Design roadmap.
+ */
+
+import { describe, it, expect } from 'vitest';
+
+/**
+ * Calculate relative luminance per WCAG 2.1.
+ * https://www.w3.org/TR/WCAG21/#dfn-relative-luminance
+ */
+function relativeLuminance(r: number, g: number, b: number): number {
+  const [rs, gs, bs] = [r, g, b].map((c) => {
+    const sRGB = c / 255;
+    return sRGB <= 0.03928 ? sRGB / 12.92 : Math.pow((sRGB + 0.055) / 1.055, 2.4);
+  });
+  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+}
+
+/**
+ * Calculate contrast ratio between two colors.
+ * https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio
+ */
+function contrastRatio(
+  fg: [number, number, number],
+  bg: [number, number, number]
+): number {
+  const l1 = relativeLuminance(...fg);
+  const l2 = relativeLuminance(...bg);
+  const lighter = Math.max(l1, l2);
+  const darker = Math.min(l1, l2);
+  return (lighter + 0.05) / (darker + 0.05);
+}
+
+// WCAG AA thresholds
+const AA_NORMAL_TEXT = 4.5;
+const AA_LARGE_TEXT = 3.0;
+
+// ── Light Theme Colors (based on Shadcn/Tailwind defaults) ──
+
+const light = {
+  background: [255, 255, 255] as [number, number, number],       // hsl(0 0% 100%)
+  foreground: [10, 10, 10] as [number, number, number],           // hsl(0 0% 3.9%)
+  muted: [245, 245, 245] as [number, number, number],             // hsl(0 0% 96.1%)
+  mutedForeground: [115, 115, 115] as [number, number, number],   // hsl(0 0% 45.1%)
+  primary: [24, 24, 27] as [number, number, number],              // hsl(240 5.9% 10%)
+  primaryForeground: [250, 250, 250] as [number, number, number], // hsl(0 0% 98%)
+  destructive: [239, 68, 68] as [number, number, number],         // hsl(0 84.2% 60.2%) — red-500
+  destructiveForeground: [255, 255, 255] as [number, number, number],
+  card: [255, 255, 255] as [number, number, number],
+  cardForeground: [10, 10, 10] as [number, number, number],
+  border: [229, 229, 229] as [number, number, number],            // hsl(0 0% 89.8%)
+  accent: [245, 245, 245] as [number, number, number],
+  accentForeground: [24, 24, 27] as [number, number, number],
+};
+
+// ── Dark Theme Colors (based on Shadcn/Tailwind defaults) ──
+
+const dark = {
+  background: [10, 10, 10] as [number, number, number],           // hsl(0 0% 3.9%)
+  foreground: [250, 250, 250] as [number, number, number],        // hsl(0 0% 98%)
+  muted: [38, 38, 38] as [number, number, number],                // hsl(0 0% 14.9%)
+  mutedForeground: [163, 163, 163] as [number, number, number],   // hsl(0 0% 63.9%)
+  primary: [250, 250, 250] as [number, number, number],           // hsl(0 0% 98%)
+  primaryForeground: [24, 24, 27] as [number, number, number],    // hsl(240 5.9% 10%)
+  destructive: [239, 68, 68] as [number, number, number],          // hsl(0 84.2% 60.2%) — red-500 (same in dark)
+  destructiveForeground: [250, 250, 250] as [number, number, number],
+  card: [10, 10, 10] as [number, number, number],
+  cardForeground: [250, 250, 250] as [number, number, number],
+  border: [38, 38, 38] as [number, number, number],
+  accent: [38, 38, 38] as [number, number, number],
+  accentForeground: [250, 250, 250] as [number, number, number],
+};
+
+describe('WCAG 2.1 AA Color Contrast — Light Theme', () => {
+  it('foreground on background meets AA for normal text (4.5:1)', () => {
+    const ratio = contrastRatio(light.foreground, light.background);
+    expect(ratio).toBeGreaterThanOrEqual(AA_NORMAL_TEXT);
+  });
+
+  it('primary foreground on primary meets AA for normal text', () => {
+    const ratio = contrastRatio(light.primaryForeground, light.primary);
+    expect(ratio).toBeGreaterThanOrEqual(AA_NORMAL_TEXT);
+  });
+
+  it('destructive foreground on destructive meets AA for large text (3:1)', () => {
+    const ratio = contrastRatio(light.destructiveForeground, light.destructive);
+    expect(ratio).toBeGreaterThanOrEqual(AA_LARGE_TEXT);
+  });
+
+  it('muted foreground on background meets AA for large text (3:1)', () => {
+    const ratio = contrastRatio(light.mutedForeground, light.background);
+    expect(ratio).toBeGreaterThanOrEqual(AA_LARGE_TEXT);
+  });
+
+  it('muted foreground on muted background meets AA for large text (3:1)', () => {
+    const ratio = contrastRatio(light.mutedForeground, light.muted);
+    expect(ratio).toBeGreaterThanOrEqual(AA_LARGE_TEXT);
+  });
+
+  it('card foreground on card background meets AA for normal text', () => {
+    const ratio = contrastRatio(light.cardForeground, light.card);
+    expect(ratio).toBeGreaterThanOrEqual(AA_NORMAL_TEXT);
+  });
+
+  it('accent foreground on accent background meets AA for normal text', () => {
+    const ratio = contrastRatio(light.accentForeground, light.accent);
+    expect(ratio).toBeGreaterThanOrEqual(AA_NORMAL_TEXT);
+  });
+
+  it('foreground on muted background meets AA for normal text', () => {
+    const ratio = contrastRatio(light.foreground, light.muted);
+    expect(ratio).toBeGreaterThanOrEqual(AA_NORMAL_TEXT);
+  });
+
+  it('primary on background meets AA for normal text', () => {
+    const ratio = contrastRatio(light.primary, light.background);
+    expect(ratio).toBeGreaterThanOrEqual(AA_NORMAL_TEXT);
+  });
+
+  it('destructive on background meets AA for large text', () => {
+    const ratio = contrastRatio(light.destructive, light.background);
+    expect(ratio).toBeGreaterThanOrEqual(AA_LARGE_TEXT);
+  });
+});
+
+describe('WCAG 2.1 AA Color Contrast — Dark Theme', () => {
+  it('foreground on background meets AA for normal text (4.5:1)', () => {
+    const ratio = contrastRatio(dark.foreground, dark.background);
+    expect(ratio).toBeGreaterThanOrEqual(AA_NORMAL_TEXT);
+  });
+
+  it('primary foreground on primary meets AA for normal text', () => {
+    const ratio = contrastRatio(dark.primaryForeground, dark.primary);
+    expect(ratio).toBeGreaterThanOrEqual(AA_NORMAL_TEXT);
+  });
+
+  it('destructive foreground on destructive meets AA for large text (3:1)', () => {
+    const ratio = contrastRatio(dark.destructiveForeground, dark.destructive);
+    expect(ratio).toBeGreaterThanOrEqual(AA_LARGE_TEXT);
+  });
+
+  it('muted foreground on background meets AA for large text (3:1)', () => {
+    const ratio = contrastRatio(dark.mutedForeground, dark.background);
+    expect(ratio).toBeGreaterThanOrEqual(AA_LARGE_TEXT);
+  });
+
+  it('muted foreground on muted background meets AA for large text (3:1)', () => {
+    const ratio = contrastRatio(dark.mutedForeground, dark.muted);
+    expect(ratio).toBeGreaterThanOrEqual(AA_LARGE_TEXT);
+  });
+
+  it('card foreground on card background meets AA for normal text', () => {
+    const ratio = contrastRatio(dark.cardForeground, dark.card);
+    expect(ratio).toBeGreaterThanOrEqual(AA_NORMAL_TEXT);
+  });
+
+  it('accent foreground on accent background meets AA for normal text', () => {
+    const ratio = contrastRatio(dark.accentForeground, dark.accent);
+    expect(ratio).toBeGreaterThanOrEqual(AA_NORMAL_TEXT);
+  });
+
+  it('foreground on muted background meets AA for normal text', () => {
+    const ratio = contrastRatio(dark.foreground, dark.muted);
+    expect(ratio).toBeGreaterThanOrEqual(AA_NORMAL_TEXT);
+  });
+
+  it('primary on background meets AA for normal text', () => {
+    const ratio = contrastRatio(dark.primary, dark.background);
+    expect(ratio).toBeGreaterThanOrEqual(AA_NORMAL_TEXT);
+  });
+
+  it('destructive on background meets AA for large text', () => {
+    const ratio = contrastRatio(dark.destructive, dark.background);
+    expect(ratio).toBeGreaterThanOrEqual(AA_LARGE_TEXT);
+  });
+});
+
+describe('WCAG 2.1 AA Color Contrast — Utility Validation', () => {
+  it('contrastRatio returns 21:1 for black on white', () => {
+    const ratio = contrastRatio([0, 0, 0], [255, 255, 255]);
+    expect(ratio).toBeCloseTo(21, 0);
+  });
+
+  it('contrastRatio returns 1:1 for same color', () => {
+    const ratio = contrastRatio([128, 128, 128], [128, 128, 128]);
+    expect(ratio).toBeCloseTo(1, 1);
+  });
+
+  it('relativeLuminance returns 0 for black', () => {
+    expect(relativeLuminance(0, 0, 0)).toBe(0);
+  });
+
+  it('relativeLuminance returns 1 for white', () => {
+    expect(relativeLuminance(255, 255, 255)).toBeCloseTo(1, 4);
+  });
+});

package/src/__tests__/edge-cases.test.tsx

@@ -0,0 +1,285 @@
+/**
+ * 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.
+ */
+
+/**
+ * P3.1 Component Quality Audit - Edge Cases
+ *
+ * Tests key components with edge-case data: null/undefined children,
+ * overflow text, empty content, large datasets, and special characters.
+ */
+
+import { describe, it, expect } from 'vitest';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import {
+  Badge,
+  Button,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  Input,
+  Separator,
+  Skeleton,
+  Progress,
+  Alert,
+  AlertTitle,
+  AlertDescription,
+  Label,
+} from '../index';
+
+describe('P3.1 Edge Cases', () => {
+  // ---------------------------------------------------------------
+  // Null / undefined / empty children
+  // ---------------------------------------------------------------
+  describe('null and empty children', () => {
+    it('Badge renders with empty string', () => {
+      const { container } = render(<Badge>{''}</Badge>);
+      expect(container.firstElementChild).toBeInTheDocument();
+    });
+
+    it('Badge renders with null child', () => {
+      const { container } = render(<Badge>{null}</Badge>);
+      expect(container.firstElementChild).toBeInTheDocument();
+    });
+
+    it('Badge renders with undefined child', () => {
+      const { container } = render(<Badge>{undefined}</Badge>);
+      expect(container.firstElementChild).toBeInTheDocument();
+    });
+
+    it('Button renders with empty string', () => {
+      render(<Button>{''}</Button>);
+      expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+
+    it('Card renders with no children', () => {
+      const { container } = render(<Card />);
+      expect(container.firstElementChild).toBeInTheDocument();
+    });
+
+    it('CardTitle renders empty', () => {
+      const { container } = render(<CardTitle />);
+      expect(container.firstElementChild).toBeInTheDocument();
+    });
+
+    it('Alert renders with no children', () => {
+      render(<Alert />);
+      expect(screen.getByRole('alert')).toBeInTheDocument();
+    });
+
+    it('AlertTitle renders with empty string', () => {
+      const { container } = render(<AlertTitle>{''}</AlertTitle>);
+      expect(container.firstElementChild).toBeInTheDocument();
+    });
+
+    it('AlertDescription renders with no children', () => {
+      const { container } = render(<AlertDescription />);
+      expect(container.firstElementChild).toBeInTheDocument();
+    });
+  });
+
+  // ---------------------------------------------------------------
+  // Very long text / overflow
+  // ---------------------------------------------------------------
+  describe('overflow and long text', () => {
+    const longText = 'A'.repeat(10000);
+
+    it('Badge handles very long text without crashing', () => {
+      const { container } = render(<Badge>{longText}</Badge>);
+      expect(container.textContent).toHaveLength(10000);
+    });
+
+    it('Button handles very long text without crashing', () => {
+      render(<Button>{longText}</Button>);
+      expect(screen.getByRole('button').textContent).toHaveLength(10000);
+    });
+
+    it('CardTitle handles very long text', () => {
+      const { container } = render(<CardTitle>{longText}</CardTitle>);
+      expect(container.textContent).toHaveLength(10000);
+    });
+
+    it('Input handles very long value', () => {
+      render(<Input defaultValue={longText} data-testid="inp" />);
+      expect(screen.getByTestId('inp')).toHaveValue(longText);
+    });
+
+    it('Label handles very long text', () => {
+      const { container } = render(<Label>{longText}</Label>);
+      expect(container.textContent).toHaveLength(10000);
+    });
+  });
+
+  // ---------------------------------------------------------------
+  // Special characters / unicode / emoji
+  // ---------------------------------------------------------------
+  describe('special characters and unicode', () => {
+    it('Badge renders emoji', () => {
+      const { container } = render(<Badge>🚀🎉✨</Badge>);
+      expect(container.textContent).toBe('🚀🎉✨');
+    });
+
+    it('Button renders RTL text', () => {
+      render(<Button>مرحبا</Button>);
+      expect(screen.getByRole('button').textContent).toBe('مرحبا');
+    });
+
+    it('CardTitle renders HTML entities as text', () => {
+      const { container } = render(<CardTitle>{'<script>alert("xss")</script>'}</CardTitle>);
+      expect(container.textContent).toBe('<script>alert("xss")</script>');
+      expect(container.querySelector('script')).toBeNull();
+    });
+
+    it('Input handles emoji value', () => {
+      render(<Input defaultValue="Hello 🌍" data-testid="inp" />);
+      expect(screen.getByTestId('inp')).toHaveValue('Hello 🌍');
+    });
+
+    it('Alert handles multi-language text', () => {
+      render(
+        <Alert>
+          <AlertTitle>日本語タイトル</AlertTitle>
+          <AlertDescription>中文描述 и русский текст</AlertDescription>
+        </Alert>
+      );
+      expect(screen.getByText('日本語タイトル')).toBeInTheDocument();
+      expect(screen.getByText('中文描述 и русский текст')).toBeInTheDocument();
+    });
+  });
+
+  // ---------------------------------------------------------------
+  // Numeric edge cases
+  // ---------------------------------------------------------------
+  describe('numeric edge cases', () => {
+    it('Progress handles value of 0', () => {
+      render(<Progress value={0} data-testid="prog" />);
+      expect(screen.getByTestId('prog')).toBeInTheDocument();
+    });
+
+    it('Progress handles value of 100', () => {
+      render(<Progress value={100} data-testid="prog" />);
+      expect(screen.getByTestId('prog')).toBeInTheDocument();
+    });
+
+    it('Progress handles negative value gracefully', () => {
+      render(<Progress value={-10} data-testid="prog" />);
+      expect(screen.getByTestId('prog')).toBeInTheDocument();
+    });
+
+    it('Progress handles value > 100 gracefully', () => {
+      render(<Progress value={200} data-testid="prog" />);
+      expect(screen.getByTestId('prog')).toBeInTheDocument();
+    });
+
+    it('Progress handles undefined value', () => {
+      render(<Progress value={undefined} data-testid="prog" />);
+      expect(screen.getByTestId('prog')).toBeInTheDocument();
+    });
+  });
+
+  // ---------------------------------------------------------------
+  // Multiple instances
+  // ---------------------------------------------------------------
+  describe('multiple component instances', () => {
+    it('renders many Badges without interference', () => {
+      const { container } = render(
+        <div>
+          {Array.from({ length: 100 }, (_, i) => (
+            <Badge key={i}>Badge {i}</Badge>
+          ))}
+        </div>
+      );
+      const badges = container.querySelectorAll('[class*="inline-flex"]');
+      expect(badges.length).toBe(100);
+    });
+
+    it('renders many Buttons without interference', () => {
+      render(
+        <div>
+          {Array.from({ length: 50 }, (_, i) => (
+            <Button key={i}>Btn {i}</Button>
+          ))}
+        </div>
+      );
+      expect(screen.getAllByRole('button')).toHaveLength(50);
+    });
+
+    it('renders many Inputs without interference', () => {
+      render(
+        <div>
+          {Array.from({ length: 50 }, (_, i) => (
+            <Input key={i} data-testid={`inp-${i}`} defaultValue={`val-${i}`} />
+          ))}
+        </div>
+      );
+      expect(screen.getByTestId('inp-0')).toHaveValue('val-0');
+      expect(screen.getByTestId('inp-49')).toHaveValue('val-49');
+    });
+  });
+
+  // ---------------------------------------------------------------
+  // Separator edge cases
+  // ---------------------------------------------------------------
+  describe('Separator edge cases', () => {
+    it('renders multiple separators', () => {
+      const { container } = render(
+        <div>
+          <Separator />
+          <Separator />
+          <Separator />
+        </div>
+      );
+      expect(container.querySelectorAll('[data-orientation]')).toHaveLength(3);
+    });
+  });
+
+  // ---------------------------------------------------------------
+  // Skeleton edge cases
+  // ---------------------------------------------------------------
+  describe('Skeleton edge cases', () => {
+    it('renders with custom dimensions via className', () => {
+      const { container } = render(<Skeleton className="w-[200px] h-[20px]" />);
+      expect(container.firstElementChild!.className).toContain('w-[200px]');
+      expect(container.firstElementChild!.className).toContain('h-[20px]');
+    });
+
+    it('renders with children', () => {
+      const { container } = render(<Skeleton>Loading...</Skeleton>);
+      expect(container.textContent).toBe('Loading...');
+    });
+  });
+
+  // ---------------------------------------------------------------
+  // Card with complex nested content
+  // ---------------------------------------------------------------
+  describe('Card with complex nested content', () => {
+    it('renders deeply nested structure', () => {
+      const { container } = render(
+        <Card>
+          <CardHeader>
+            <CardTitle>
+              <Badge>New</Badge> Dashboard
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div>
+              <Button>Action 1</Button>
+              <Button>Action 2</Button>
+            </div>
+          </CardContent>
+        </Card>
+      );
+      expect(container.textContent).toContain('New');
+      expect(container.textContent).toContain('Dashboard');
+      expect(screen.getAllByRole('button')).toHaveLength(2);
+    });
+  });
+});