@aiready/components 0.13.22 → 0.14.0

package/src/hooks/__tests__/useDebounce.test.ts

@@ -0,0 +1,173 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { useDebounce } from '../useDebounce';
+
+describe('useDebounce', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('should return initial value immediately', () => {
+    const { result } = renderHook(() => useDebounce('initial', 300));
+    expect(result.current).toBe('initial');
+  });
+
+  it('should debounce value updates', () => {
+    const { result, rerender } = renderHook(
+      ({ value, delay }) => useDebounce(value, delay),
+      { initialProps: { value: 'initial', delay: 300 } }
+    );
+
+    expect(result.current).toBe('initial');
+
+    // Update value
+    rerender({ value: 'updated', delay: 300 });
+
+    // Value should still be initial before delay
+    expect(result.current).toBe('initial');
+
+    // Fast forward time by 300ms
+    act(() => {
+      vi.advanceTimersByTime(300);
+    });
+
+    // Value should now be updated
+    expect(result.current).toBe('updated');
+  });
+
+  it('should reset timer on rapid value changes', () => {
+    const { result, rerender } = renderHook(
+      ({ value, delay }) => useDebounce(value, delay),
+      { initialProps: { value: 'initial', delay: 300 } }
+    );
+
+    // First update
+    rerender({ value: 'first', delay: 300 });
+    act(() => {
+      vi.advanceTimersByTime(100);
+    });
+
+    // Second update before first delay completes
+    rerender({ value: 'second', delay: 300 });
+    act(() => {
+      vi.advanceTimersByTime(100);
+    });
+
+    // Third update before second delay completes
+    rerender({ value: 'third', delay: 300 });
+
+    // Value should still be initial
+    expect(result.current).toBe('initial');
+
+    // Complete the delay
+    act(() => {
+      vi.advanceTimersByTime(300);
+    });
+
+    // Should have the last value
+    expect(result.current).toBe('third');
+  });
+
+  it('should use default delay of 300ms', () => {
+    const { result, rerender } = renderHook(({ value }) => useDebounce(value), {
+      initialProps: { value: 'initial' },
+    });
+
+    rerender({ value: 'updated' });
+
+    act(() => {
+      vi.advanceTimersByTime(299);
+    });
+    expect(result.current).toBe('initial');
+
+    act(() => {
+      vi.advanceTimersByTime(1);
+    });
+    expect(result.current).toBe('updated');
+  });
+
+  it('should work with different value types', () => {
+    // Test with number
+    const { result: numberResult, rerender: numberRerender } = renderHook(
+      ({ value }) => useDebounce(value, 100),
+      { initialProps: { value: 0 } }
+    );
+
+    numberRerender({ value: 42 });
+    act(() => {
+      vi.advanceTimersByTime(100);
+    });
+    expect(numberResult.current).toBe(42);
+
+    // Test with object
+    const { result: objectResult, rerender: objectRerender } = renderHook(
+      ({ value }) => useDebounce(value, 100),
+      { initialProps: { value: { key: 'initial' } } }
+    );
+
+    objectRerender({ value: { key: 'updated' } });
+    act(() => {
+      vi.advanceTimersByTime(100);
+    });
+    expect(objectResult.current).toEqual({ key: 'updated' });
+
+    // Test with array
+    const { result: arrayResult, rerender: arrayRerender } = renderHook(
+      ({ value }) => useDebounce(value, 100),
+      { initialProps: { value: [1, 2, 3] } }
+    );
+
+    arrayRerender({ value: [4, 5, 6] });
+    act(() => {
+      vi.advanceTimersByTime(100);
+    });
+    expect(arrayResult.current).toEqual([4, 5, 6]);
+  });
+
+  it('should handle delay changes', () => {
+    const { result, rerender } = renderHook(
+      ({ value, delay }) => useDebounce(value, delay),
+      { initialProps: { value: 'initial', delay: 300 } }
+    );
+
+    rerender({ value: 'updated', delay: 300 });
+
+    // Change delay before first one completes
+    rerender({ value: 'updated', delay: 500 });
+
+    act(() => {
+      vi.advanceTimersByTime(300);
+    });
+
+    // Should still be initial because delay changed
+    expect(result.current).toBe('initial');
+
+    act(() => {
+      vi.advanceTimersByTime(200);
+    });
+
+    // Now should be updated
+    expect(result.current).toBe('updated');
+  });
+
+  it('should cleanup timer on unmount', () => {
+    const { unmount, rerender } = renderHook(
+      ({ value }) => useDebounce(value, 300),
+      { initialProps: { value: 'initial' } }
+    );
+
+    rerender({ value: 'updated' });
+
+    // Unmount before delay completes
+    unmount();
+
+    // Advance timers - should not cause errors
+    act(() => {
+      vi.advanceTimersByTime(300);
+    });
+  });
+});

package/src/utils/__tests__/cn.test.ts

@@ -0,0 +1,67 @@
+import { describe, it, expect } from 'vitest';
+import { cn } from '../cn';
+
+describe('cn', () => {
+  it('should merge class names', () => {
+    expect(cn('foo', 'bar')).toBe('foo bar');
+  });
+
+  it('should handle conditional classes', () => {
+    const showBar = false;
+    const showBaz = true;
+    expect(cn('foo', showBar && 'bar', 'baz')).toBe('foo baz');
+    expect(cn('foo', showBaz && 'bar', 'baz')).toBe('foo bar baz');
+  });
+
+  it('should handle undefined and null values', () => {
+    expect(cn('foo', undefined, null, 'bar')).toBe('foo bar');
+  });
+
+  it('should handle arrays', () => {
+    expect(cn(['foo', 'bar'], 'baz')).toBe('foo bar baz');
+  });
+
+  it('should handle objects', () => {
+    expect(cn({ foo: true, bar: false, baz: true })).toBe('foo baz');
+  });
+
+  it('should merge Tailwind classes correctly', () => {
+    expect(cn('px-4 py-2', 'px-6')).toBe('py-2 px-6');
+  });
+
+  it('should handle empty inputs', () => {
+    expect(cn()).toBe('');
+    expect(cn('')).toBe('');
+  });
+
+  it('should merge conflicting Tailwind padding classes', () => {
+    expect(cn('p-4', 'p-6')).toBe('p-6');
+    expect(cn('px-4', 'px-6')).toBe('px-6');
+    expect(cn('py-2', 'py-4')).toBe('py-4');
+  });
+
+  it('should merge conflicting Tailwind margin classes', () => {
+    expect(cn('m-4', 'm-6')).toBe('m-6');
+    expect(cn('mx-4', 'mx-6')).toBe('mx-6');
+  });
+
+  it('should merge conflicting Tailwind text color classes', () => {
+    expect(cn('text-red-500', 'text-blue-500')).toBe('text-blue-500');
+  });
+
+  it('should merge conflicting Tailwind background classes', () => {
+    expect(cn('bg-red-500', 'bg-blue-500')).toBe('bg-blue-500');
+  });
+
+  it('should preserve non-conflicting classes', () => {
+    expect(cn('flex', 'items-center', 'justify-center')).toBe(
+      'flex items-center justify-center'
+    );
+  });
+
+  it('should handle mixed Tailwind and custom classes', () => {
+    expect(cn('custom-class', 'p-4', 'another-class')).toBe(
+      'custom-class p-4 another-class'
+    );
+  });
+});

package/src/utils/__tests__/colors.test.ts

@@ -0,0 +1,94 @@
+import { describe, it, expect } from 'vitest';
+import {
+  severityColors,
+  domainColors,
+  chartColors,
+  getDomainColor,
+  getSeverityColor,
+  hexToRgba,
+} from '../colors';
+
+describe('Color Utilities', () => {
+  describe('severityColors', () => {
+    it('should have correct severity color mappings', () => {
+      expect(severityColors.critical).toBe('#ef4444');
+      expect(severityColors.major).toBe('#f59e0b');
+      expect(severityColors.minor).toBe('#eab308');
+      expect(severityColors.info).toBe('#60a5fa');
+    });
+  });
+
+  describe('domainColors', () => {
+    it('should have at least 8 domain colors', () => {
+      expect(domainColors.length).toBeGreaterThanOrEqual(8);
+    });
+
+    it('should contain valid hex color codes', () => {
+      const hexPattern = /^#[0-9a-f]{6}$/i;
+      domainColors.forEach((color) => {
+        expect(color).toMatch(hexPattern);
+      });
+    });
+  });
+
+  describe('chartColors', () => {
+    it('should have correct chart color mappings', () => {
+      expect(chartColors.primary).toBe('#3b82f6');
+      expect(chartColors.success).toBe('#10b981');
+      expect(chartColors.warning).toBe('#f59e0b');
+      expect(chartColors.danger).toBe('#ef4444');
+      expect(chartColors.info).toBe('#06b6d4');
+    });
+  });
+
+  describe('getDomainColor', () => {
+    it('should return correct color for valid index', () => {
+      expect(getDomainColor(0)).toBe(domainColors[0]);
+      expect(getDomainColor(1)).toBe(domainColors[1]);
+      expect(getDomainColor(2)).toBe(domainColors[2]);
+    });
+
+    it('should wrap around for indices greater than array length', () => {
+      const length = domainColors.length;
+      expect(getDomainColor(length)).toBe(domainColors[0]);
+      expect(getDomainColor(length + 1)).toBe(domainColors[1]);
+      expect(getDomainColor(length * 2)).toBe(domainColors[0]);
+    });
+  });
+
+  describe('getSeverityColor', () => {
+    it('should return correct color for critical severity', () => {
+      expect(getSeverityColor('critical')).toBe('#ef4444');
+    });
+
+    it('should return correct color for major severity', () => {
+      expect(getSeverityColor('major')).toBe('#f59e0b');
+    });
+
+    it('should return correct color for minor severity', () => {
+      expect(getSeverityColor('minor')).toBe('#eab308');
+    });
+
+    it('should return correct color for info severity', () => {
+      expect(getSeverityColor('info')).toBe('#60a5fa');
+    });
+  });
+
+  describe('hexToRgba', () => {
+    it('should convert hex to rgba with alpha 1', () => {
+      expect(hexToRgba('#ff0000', 1)).toBe('rgba(255, 0, 0, 1)');
+    });
+
+    it('should convert hex to rgba with alpha 0.5', () => {
+      expect(hexToRgba('#00ff00', 0.5)).toBe('rgba(0, 255, 0, 0.5)');
+    });
+
+    it('should convert hex to rgba with alpha 0', () => {
+      expect(hexToRgba('#0000ff', 0)).toBe('rgba(0, 0, 255, 0)');
+    });
+
+    it('should handle mixed hex colors', () => {
+      expect(hexToRgba('#3b82f6', 0.8)).toBe('rgba(59, 130, 246, 0.8)');
+    });
+  });
+});