@jmruthers/pace-core 0.5.3 → 0.5.5

package/src/hooks/__tests__/useComponentPerformance.unit.test.tsx

@@ -0,0 +1,133 @@
+import { renderHook } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { useComponentPerformance } from '../useComponentPerformance';
+
+// Mock performance API
+const mockPerformance = {
+  now: vi.fn(),
+};
+
+Object.defineProperty(window, 'performance', {
+  value: mockPerformance,
+  writable: true,
+});
+
+// Mock console.warn
+const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+describe('useComponentPerformance Hook', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockPerformance.now.mockReturnValue(0);
+  });
+
+  afterEach(() => {
+    consoleSpy.mockRestore();
+  });
+
+  it('should return component performance data', () => {
+    const { result } = renderHook(() => useComponentPerformance({ 
+      componentName: 'TestComponent' 
+    }));
+
+    expect(result.current.renderCount).toBeDefined();
+    expect(result.current.componentName).toBe('TestComponent');
+    expect(typeof result.current.renderCount).toBe('number');
+  });
+
+  it('should track render count internally', () => {
+    const { result, rerender } = renderHook(() => useComponentPerformance({ 
+      componentName: 'TestComponent' 
+    }));
+
+    expect(result.current.renderCount).toBe(0);
+
+    // Trigger re-render - renderCount is tracked internally but the returned object doesn't update
+    rerender();
+    // The render count is tracked internally via useRef, but the returned value doesn't change
+    // This is expected behavior since useRef doesn't trigger re-renders
+    expect(result.current.componentName).toBe('TestComponent');
+  });
+
+  it('should log performance warnings when threshold is exceeded', () => {
+    // Set up the spy before any hooks are called
+    const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    
+    mockPerformance.now
+      .mockReturnValueOnce(0) // First render
+      .mockReturnValueOnce(50); // Second render (50ms later, exceeds 16ms threshold)
+
+    const { rerender } = renderHook(() => useComponentPerformance({ 
+      componentName: 'TestComponent',
+      threshold: 16,
+      enableLogging: true
+    }));
+
+    // First render
+    expect(consoleSpy).not.toHaveBeenCalled();
+
+    // Second render (slow)
+    rerender();
+    
+    // The warning should be logged on the second render
+    expect(consoleSpy).toHaveBeenCalledWith(
+      expect.stringContaining('Performance warning: TestComponent rendered in 50.00ms')
+    );
+    
+    consoleSpy.mockRestore();
+  });
+
+  it('should not log warnings when performance is good', () => {
+    mockPerformance.now
+      .mockReturnValueOnce(0) // First render
+      .mockReturnValueOnce(10); // Second render (10ms later, under threshold)
+
+    const { rerender } = renderHook(() => useComponentPerformance({ 
+      componentName: 'TestComponent',
+      threshold: 16
+    }));
+
+    // First render
+    expect(consoleSpy).not.toHaveBeenCalled();
+
+    // Second render (fast)
+    rerender();
+    expect(consoleSpy).not.toHaveBeenCalled();
+  });
+
+  it('should respect custom threshold', () => {
+    mockPerformance.now
+      .mockReturnValueOnce(0) // First render
+      .mockReturnValueOnce(25); // Second render (25ms later)
+
+    const { rerender } = renderHook(() => useComponentPerformance({ 
+      componentName: 'TestComponent',
+      threshold: 30 // Custom threshold
+    }));
+
+    // First render
+    expect(consoleSpy).not.toHaveBeenCalled();
+
+    // Second render (under custom threshold)
+    rerender();
+    expect(consoleSpy).not.toHaveBeenCalled();
+  });
+
+  it('should disable logging when enableLogging is false', () => {
+    mockPerformance.now
+      .mockReturnValueOnce(0) // First render
+      .mockReturnValueOnce(50); // Second render (slow)
+
+    const { rerender } = renderHook(() => useComponentPerformance({ 
+      componentName: 'TestComponent',
+      enableLogging: false
+    }));
+
+    // First render
+    expect(consoleSpy).not.toHaveBeenCalled();
+
+    // Second render (slow, but logging disabled)
+    rerender();
+    expect(consoleSpy).not.toHaveBeenCalled();
+  });
+}); 

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

@@ -0,0 +1,82 @@
+import { renderHook, act } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { useDebounce } from '../useDebounce';
+
+describe('useDebounce Hook', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('should return initial value immediately', () => {
+    const { result } = renderHook(() => useDebounce('initial', 500));
+    expect(result.current).toBe('initial');
+  });
+
+  it('should debounce value changes', () => {
+    const { result, rerender } = renderHook(
+      ({ value }) => useDebounce(value, 500),
+      { initialProps: { value: 'initial' } }
+    );
+
+    // Change value
+    rerender({ value: 'changed' });
+    expect(result.current).toBe('initial'); // Should still be initial
+
+    // Fast forward time
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+
+    expect(result.current).toBe('changed'); // Should now be changed
+  });
+
+  it('should reset timer on rapid changes', () => {
+    const { result, rerender } = renderHook(
+      ({ value }) => useDebounce(value, 500),
+      { initialProps: { value: 'initial' } }
+    );
+
+    // Rapid changes
+    rerender({ value: 'change1' });
+    act(() => {
+      vi.advanceTimersByTime(250); // Half way through
+    });
+
+    rerender({ value: 'change2' });
+    expect(result.current).toBe('initial'); // Should still be initial
+
+    act(() => {
+      vi.advanceTimersByTime(250); // Half way through again
+    });
+    expect(result.current).toBe('initial'); // Should still be initial
+
+    act(() => {
+      vi.advanceTimersByTime(250); // Complete the full delay
+    });
+    expect(result.current).toBe('change2'); // Should now be the last value
+  });
+
+  it('should handle different delay times', () => {
+    const { result, rerender } = renderHook(
+      ({ value }) => useDebounce(value, 1000),
+      { initialProps: { value: 'initial' } }
+    );
+
+    rerender({ value: 'changed' });
+    expect(result.current).toBe('initial');
+
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+    expect(result.current).toBe('initial'); // Should still be initial
+
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+    expect(result.current).toBe('changed'); // Should now be changed
+  });
+}); 

package/src/hooks/__tests__/useFocusTrap.unit.test.tsx

@@ -0,0 +1,293 @@
+/**
+ * @file UseFocusTrap Hook Unit Tests
+ * @package @jmruthers/pace-core
+ * @module Hooks/UseFocusTrap
+ * @since 0.4.0
+ */
+
+import React from 'react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { renderWithProviders } from '../../__tests__/helpers/test-utils';
+import '@testing-library/jest-dom';
+import { useFocusTrap } from '../useFocusTrap';
+
+// Create a test component that uses the hook
+const TestComponent = ({ options = {} }: { options?: any }) => {
+  const focusTrap = useFocusTrap(options);
+
+  return (
+    <div ref={focusTrap.containerRef as any} data-testid="container">
+      <button data-testid="button-1">Button 1</button>
+      <input data-testid="input-1" type="text" />
+      <button data-testid="button-2">Button 2</button>
+      <button data-testid="button-3" disabled>Disabled Button</button>
+      <div data-testid="non-focusable">Non-focusable</div>
+    </div>
+  );
+};
+
+describe('useFocusTrap', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe('Basic Functionality', () => {
+    it('should render without errors', () => {
+      expect(() => renderWithProviders(<TestComponent />)).not.toThrow();
+    });
+
+    it('should render with container element', () => {
+      renderWithProviders(<TestComponent />);
+      expect(screen.getByTestId('container')).toBeInTheDocument();
+    });
+
+    it('should render with focusable elements', () => {
+      renderWithProviders(<TestComponent />);
+      expect(screen.getByTestId('button-1')).toBeInTheDocument();
+      expect(screen.getByTestId('input-1')).toBeInTheDocument();
+      expect(screen.getByTestId('button-2')).toBeInTheDocument();
+    });
+
+    it('should handle disabled elements', () => {
+      renderWithProviders(<TestComponent />);
+      const disabledButton = screen.getByTestId('button-3');
+      expect(disabledButton).toBeInTheDocument();
+      expect(disabledButton).toBeDisabled();
+    });
+
+    it('should handle non-focusable elements', () => {
+      renderWithProviders(<TestComponent />);
+      expect(screen.getByTestId('non-focusable')).toBeInTheDocument();
+    });
+  });
+
+  describe('Hook Interface', () => {
+    it('should return focus trap interface', () => {
+      const TestHook = () => {
+        const focusTrap = useFocusTrap();
+        
+        expect(focusTrap.containerRef).toBeDefined();
+        expect(typeof focusTrap.focusFirst).toBe('function');
+        expect(typeof focusTrap.focusLast).toBe('function');
+        expect(typeof focusTrap.getFocusableElements).toBe('function');
+        
+        return <div ref={focusTrap.containerRef as any} data-testid="container" />;
+      };
+
+      renderWithProviders(<TestHook />);
+    });
+
+    it('should handle default options', () => {
+      const TestHook = () => {
+        const focusTrap = useFocusTrap();
+        
+        // Should work with default options
+        expect(focusTrap.containerRef.current).toBeDefined();
+        
+        return <div ref={focusTrap.containerRef as any} data-testid="container" />;
+      };
+
+      renderWithProviders(<TestHook />);
+    });
+
+    it('should handle custom options', () => {
+      const TestHook = () => {
+        const focusTrap = useFocusTrap({
+          isActive: true,
+          autoFocus: true,
+          restoreFocus: true,
+          onEscape: vi.fn(),
+          focusableSelector: 'button:not([disabled])'
+        });
+        
+        expect(focusTrap.containerRef.current).toBeDefined();
+        
+        return <div ref={focusTrap.containerRef as any} data-testid="container" />;
+      };
+
+      renderWithProviders(<TestHook />);
+    });
+  });
+
+  describe('Focus Management Functions', () => {
+    it('should provide focus management functions', () => {
+      const TestHook = () => {
+        const focusTrap = useFocusTrap();
+        
+        // Test that functions exist and can be called
+        expect(() => focusTrap.focusFirst()).not.toThrow();
+        expect(() => focusTrap.focusLast()).not.toThrow();
+        expect(() => focusTrap.getFocusableElements()).not.toThrow();
+        
+        return <div ref={focusTrap.containerRef as any} data-testid="container" />;
+      };
+
+      renderWithProviders(<TestHook />);
+    });
+
+    it('should handle empty focusable elements gracefully', () => {
+      const TestHook = () => {
+        const focusTrap = useFocusTrap();
+        
+        // Should not throw when no focusable elements exist
+        expect(() => focusTrap.focusFirst()).not.toThrow();
+        expect(() => focusTrap.focusLast()).not.toThrow();
+        expect(() => focusTrap.getFocusableElements()).not.toThrow();
+        
+        return <div ref={focusTrap.containerRef as any} data-testid="container" />;
+      };
+
+      renderWithProviders(<TestHook />);
+    });
+  });
+
+  describe('Options Handling', () => {
+    it('should handle isActive option', () => {
+      const TestHook = () => {
+        const focusTrap = useFocusTrap({ isActive: true });
+        expect(focusTrap.containerRef.current).toBeDefined();
+        return <div ref={focusTrap.containerRef as any} data-testid="container" />;
+      };
+
+      renderWithProviders(<TestHook />);
+    });
+
+    it('should handle autoFocus option', () => {
+      const TestHook = () => {
+        const focusTrap = useFocusTrap({ autoFocus: true });
+        expect(focusTrap.containerRef.current).toBeDefined();
+        return <div ref={focusTrap.containerRef as any} data-testid="container" />;
+      };
+
+      renderWithProviders(<TestHook />);
+    });
+
+    it('should handle restoreFocus option', () => {
+      const TestHook = () => {
+        const focusTrap = useFocusTrap({ restoreFocus: true });
+        expect(focusTrap.containerRef.current).toBeDefined();
+        return <div ref={focusTrap.containerRef as any} data-testid="container" />;
+      };
+
+      renderWithProviders(<TestHook />);
+    });
+
+    it('should handle onEscape option', () => {
+      const onEscape = vi.fn();
+      const TestHook = () => {
+        const focusTrap = useFocusTrap({ onEscape });
+        expect(focusTrap.containerRef.current).toBeDefined();
+        return <div ref={focusTrap.containerRef as any} data-testid="container" />;
+      };
+
+      renderWithProviders(<TestHook />);
+    });
+
+    it('should handle custom focusableSelector', () => {
+      const TestHook = () => {
+        const focusTrap = useFocusTrap({ 
+          focusableSelector: 'button:not([disabled])' 
+        });
+        expect(focusTrap.containerRef.current).toBeDefined();
+        return <div ref={focusTrap.containerRef as any} data-testid="container" />;
+      };
+
+      renderWithProviders(<TestHook />);
+    });
+  });
+
+  describe('Integration Tests', () => {
+    it('should work with multiple instances', () => {
+      const TestMultiple = () => {
+        const focusTrap1 = useFocusTrap({ isActive: true });
+        const focusTrap2 = useFocusTrap({ isActive: false });
+        
+        expect(focusTrap1.containerRef.current).toBeDefined();
+        expect(focusTrap2.containerRef.current).toBeDefined();
+        
+        return (
+          <div>
+            <div ref={focusTrap1.containerRef as any} data-testid="container-1" />
+            <div ref={focusTrap2.containerRef as any} data-testid="container-2" />
+          </div>
+        );
+      };
+
+      renderWithProviders(<TestMultiple />);
+      expect(screen.getByTestId('container-1')).toBeInTheDocument();
+      expect(screen.getByTestId('container-2')).toBeInTheDocument();
+    });
+
+    it('should handle component unmounting', () => {
+      const { unmount } = renderWithProviders(<TestComponent />);
+      
+      expect(() => unmount()).not.toThrow();
+    });
+
+    it('should handle all options together', () => {
+      const onEscape = vi.fn();
+      const TestAllOptions = () => {
+        const focusTrap = useFocusTrap({
+          isActive: true,
+          autoFocus: true,
+          restoreFocus: true,
+          onEscape,
+          focusableSelector: 'button:not([disabled])'
+        });
+        
+        expect(focusTrap.containerRef.current).toBeDefined();
+        
+        return <div ref={focusTrap.containerRef as any} data-testid="container" />;
+      };
+
+      renderWithProviders(<TestAllOptions />);
+      expect(screen.getByTestId('container')).toBeInTheDocument();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle null container ref', () => {
+      const TestNullRef = () => {
+        const focusTrap = useFocusTrap();
+        
+        // Test that functions don't throw even with null ref
+        expect(() => focusTrap.focusFirst()).not.toThrow();
+        expect(() => focusTrap.focusLast()).not.toThrow();
+        expect(() => focusTrap.getFocusableElements()).not.toThrow();
+        
+        return <div ref={focusTrap.containerRef as any} data-testid="container" />;
+      };
+
+      renderWithProviders(<TestNullRef />);
+    });
+
+    it('should handle undefined options', () => {
+      const TestUndefinedOptions = () => {
+        const focusTrap = useFocusTrap(undefined as any);
+        
+        expect(focusTrap.containerRef.current).toBeDefined();
+        
+        return <div ref={focusTrap.containerRef as any} data-testid="container" />;
+      };
+
+      renderWithProviders(<TestUndefinedOptions />);
+    });
+
+    it('should handle partial options', () => {
+      const TestPartialOptions = () => {
+        const focusTrap = useFocusTrap({ isActive: true });
+        
+        expect(focusTrap.containerRef.current).toBeDefined();
+        
+        return <div ref={focusTrap.containerRef as any} data-testid="container" />;
+      };
+
+      renderWithProviders(<TestPartialOptions />);
+    });
+  });
+});