@jmruthers/pace-core 0.2.7 → 0.5.1

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

@@ -1,133 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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

@@ -1,293 +0,0 @@
-/**
- * @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__/shared';
-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 />);
-    });
-  });
-});