@jmruthers/pace-core 0.2.4

package/src/hooks/__tests__/hooks.integration.test.tsx

@@ -0,0 +1,575 @@
+import React, { useState, useEffect } from 'react';
+import { screen, fireEvent, waitFor, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { renderHook } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { vi, describe, it, beforeEach, afterEach } from 'vitest';
+import { renderWithProviders } from '../../__tests__/shared';
+import { useDebounce } from '../useDebounce';
+import { useIsMobile } from '../useIsMobile';
+import { useZodForm } from '../useZodForm';
+import { useKeyboardShortcuts } from '../useKeyboardShortcuts';
+import { useFocusManagement } from '../useFocusManagement';
+import { useComponentPerformance } from '../useComponentPerformance';
+import { usePerformanceMonitor } from '../usePerformanceMonitor';
+import { useDataTableState } from '../useDataTableState';
+import { Button } from '../../components/Button/Button';
+import { Input } from '../../components/Input/Input';
+import { Form } from '../../components/Form/Form';
+import { z } from 'zod';
+import { useForm } from 'react-hook-form';
+
+// Mock performance API
+const mockPerformance = {
+  now: vi.fn(),
+};
+
+Object.defineProperty(window, 'performance', {
+  value: mockPerformance,
+  writable: true,
+});
+
+beforeEach(() => {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: vi.fn().mockImplementation(query => ({
+      matches: window.innerWidth < 768,
+      media: query,
+      onchange: null,
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
+    })),
+  });
+});
+
+// Mock window.innerWidth
+Object.defineProperty(window, 'innerWidth', {
+  writable: true,
+  value: 1024,
+});
+
+// Test component for useDebounce integration
+const DebouncedSearch = () => {
+  const [searchTerm, setSearchTerm] = useState('');
+  const debouncedSearchTerm = useDebounce(searchTerm, 300);
+  const [searchResults, setSearchResults] = useState<string[]>([]);
+
+  useEffect(() => {
+    if (debouncedSearchTerm) {
+      // Simulate API call
+      setSearchResults([`Result for: ${debouncedSearchTerm}`]);
+    } else {
+      setSearchResults([]);
+    }
+  }, [debouncedSearchTerm]);
+
+  return (
+    <div>
+      <Input
+        data-testid="search-input"
+        value={searchTerm}
+        onChange={(e) => setSearchTerm(e.target.value)}
+        placeholder="Search..."
+      />
+      <div data-testid="search-term">Current: {searchTerm}</div>
+      <div data-testid="debounced-term">Debounced: {debouncedSearchTerm}</div>
+      <div data-testid="results">
+        {searchResults.map((result, index) => (
+          <div key={index} data-testid={`result-${index}`}>{result}</div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+// Test component for useIsMobile integration
+const ResponsiveComponent = () => {
+  const isMobile = useIsMobile();
+
+  return (
+    <div>
+      <div data-testid="device-type">
+        {isMobile ? 'Mobile' : 'Desktop'}
+      </div>
+      <Button 
+        data-testid="responsive-button"
+        className={isMobile ? 'mobile-button' : 'desktop-button'}
+      >
+        {isMobile ? 'Mobile Action' : 'Desktop Action'}
+      </Button>
+    </div>
+  );
+};
+
+// Test component for useZodForm integration
+const ValidatedForm = () => {
+  const schema = z.object({
+    name: z.string().min(2, 'Name must be at least 2 characters'),
+    email: z.string().email('Invalid email address'),
+    age: z.number().min(18, 'Must be at least 18 years old'),
+  });
+
+  const onSubmit = (data: z.infer<typeof schema>) => {
+    // Handle form submission
+    console.log('Form submitted:', data);
+  };
+
+  return (
+    <Form 
+      schema={schema}
+      defaultValues={{ name: '', email: '', age: 18 }}
+      mode="onChange"
+      onSubmit={onSubmit}
+    >
+      {(methods) => (
+        <>
+          <div>
+            <Input
+              {...methods.register('name')}
+              data-testid="name-input"
+              placeholder="Name"
+            />
+            {methods.formState.errors.name && (
+              <div data-testid="name-error">{methods.formState.errors.name.message}</div>
+            )}
+          </div>
+          <div>
+            <Input
+              {...methods.register('email')}
+              data-testid="email-input"
+              placeholder="Email"
+            />
+            {methods.formState.errors.email && (
+              <div data-testid="email-error">{methods.formState.errors.email.message}</div>
+            )}
+          </div>
+          <div>
+            <Input
+              {...methods.register('age', { valueAsNumber: true })}
+              data-testid="age-input"
+              type="number"
+              placeholder="Age"
+            />
+            {methods.formState.errors.age && (
+              <div data-testid="age-error">{methods.formState.errors.age.message}</div>
+            )}
+          </div>
+          <Button type="submit" data-testid="submit-button">
+            Submit
+          </Button>
+        </>
+      )}
+    </Form>
+  );
+};
+
+// Test component for useKeyboardShortcuts integration
+const KeyboardShortcutsComponent = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [savedData, setSavedData] = useState<string>('');
+
+  const shortcuts = [
+    {
+      key: 'Escape',
+      handler: () => setIsModalOpen(false),
+      description: 'Close modal',
+    },
+    {
+      key: 'ctrl+s',
+      handler: () => setSavedData('Data saved!'),
+      description: 'Save data',
+      preventDefault: true,
+    },
+  ];
+
+  useKeyboardShortcuts(shortcuts);
+
+  return (
+    <div>
+      <Button onClick={() => setIsModalOpen(true)} data-testid="open-modal">
+        Open Modal
+      </Button>
+      {isModalOpen && (
+        <div data-testid="modal">
+          <div>Modal Content</div>
+          <Button onClick={() => setIsModalOpen(false)} data-testid="close-modal">
+            Close
+          </Button>
+        </div>
+      )}
+      <div data-testid="saved-status">{savedData}</div>
+    </div>
+  );
+};
+
+// Test component for useFocusManagement integration
+const FocusManagementComponent = () => {
+  const focusManager = useFocusManagement({
+    trapFocus: true,
+    autoFocus: true,
+    restoreFocus: true,
+    onEscape: () => console.log('Escape pressed'),
+  });
+
+  return (
+    <div ref={focusManager.containerRef}>
+      <Button data-testid="first-button">First Button</Button>
+      <Input data-testid="first-input" placeholder="First Input" />
+      <Button data-testid="second-button">Second Button</Button>
+      <Input data-testid="second-input" placeholder="Second Input" />
+      <Button data-testid="last-button">Last Button</Button>
+    </div>
+  );
+};
+
+// Test component for useComponentPerformance integration
+const PerformanceTestComponent = () => {
+  useComponentPerformance({
+    componentName: 'PerformanceTestComponent',
+    threshold: 16,
+    enableLogging: true,
+  });
+
+  return (
+    <div data-testid="performance-component">
+      <h1>Performance Test Component</h1>
+      <p>This component is being monitored for performance.</p>
+    </div>
+  );
+};
+
+// Test component for useDataTableState integration
+const DataTableStateComponent = () => {
+  const tableState = useDataTableState({ initialPageSize: 10, data: [] });
+
+  return (
+    <div>
+      <div data-testid="sorting-state">
+        Sorting: {JSON.stringify(tableState.state.sorting)}
+      </div>
+      <div data-testid="filters-state">
+        Filters: {JSON.stringify(tableState.state.columnFilters)}
+      </div>
+      <div data-testid="page-state">
+        Page: {tableState.state.pageIndex + 1} of {Math.ceil(100 / tableState.state.pageSize)}
+      </div>
+      <div data-testid="selected-rows">
+        Selected: {tableState.state.selectedRows.length} rows
+      </div>
+      <Button 
+        onClick={() => tableState.actions.setSorting([{ id: 'name', desc: false }])}
+        data-testid="sort-name"
+      >
+        Sort by Name
+      </Button>
+      <Button 
+        onClick={() => tableState.actions.setColumnFilters([{ id: 'status', value: 'active' }])}
+        data-testid="filter-active"
+      >
+        Filter Active
+      </Button>
+    </div>
+  );
+};
+
+describe('Hooks Integration', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockPerformance.now.mockReturnValue(0);
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('useDebounce Integration', () => {
+    it('debounces search input with component integration', async () => {
+      renderWithProviders(<DebouncedSearch />);
+
+      const searchInput = screen.getByTestId('search-input');
+      
+      // Type quickly
+      fireEvent.change(searchInput, { target: { value: 'test' } });
+      
+      expect(screen.getByTestId('search-term')).toHaveTextContent('Current: test');
+      expect(screen.getByTestId('debounced-term').textContent?.trim()).toMatch(/^Debounced:$/);
+
+      // Wait for debounce
+      await waitFor(() => {
+        expect(screen.getByTestId('debounced-term')).toHaveTextContent('Debounced: test');
+      }, { timeout: 400 });
+
+      expect(screen.getByTestId('result-0')).toHaveTextContent('Result for: test');
+    });
+
+    it('handles rapid input changes correctly', async () => {
+      const user = userEvent.setup();
+      renderWithProviders(<DebouncedSearch />);
+
+      const searchInput = screen.getByTestId('search-input');
+      
+      // Type rapidly using userEvent
+      await user.type(searchInput, 'abc');
+
+      // Should not show results immediately
+      expect(screen.queryByTestId('result-0')).not.toBeInTheDocument();
+
+      // Wait for final debounced value
+      await waitFor(() => {
+        expect(screen.getByTestId('debounced-term')).toHaveTextContent('Debounced: abc');
+      }, { timeout: 400 });
+
+      expect(screen.getByTestId('result-0')).toHaveTextContent('Result for: abc');
+    });
+  });
+
+  describe('useIsMobile Integration', () => {
+    it('adapts component layout based on mobile detection', () => {
+      // Set up desktop viewport
+      Object.defineProperty(window, 'innerWidth', { writable: true, value: 1024 });
+      renderWithProviders(<ResponsiveComponent />);
+
+      const deviceType = screen.getByTestId('device-type');
+      const button = screen.getByTestId('responsive-button');
+
+      // Should be desktop
+      expect(deviceType).toHaveTextContent('Desktop');
+      expect(button).toHaveClass('desktop-button');
+      expect(button).toHaveTextContent('Desktop Action');
+    });
+
+    it('updates when viewport changes', async () => {
+      // Set up mobile viewport
+      Object.defineProperty(window, 'innerWidth', { writable: true, value: 375 });
+      renderWithProviders(<ResponsiveComponent />);
+      
+      await waitFor(() => {
+        const deviceType = screen.getByTestId('device-type');
+        expect(deviceType).toHaveTextContent('Mobile');
+      });
+    });
+  });
+
+  describe('useZodForm Integration', () => {
+    it('validates form with real-time feedback', async () => {
+      renderWithProviders(<ValidatedForm />);
+
+      const nameInput = screen.getByTestId('name-input');
+      const emailInput = screen.getByTestId('email-input');
+      const ageInput = screen.getByTestId('age-input');
+      const submitButton = screen.getByTestId('submit-button');
+
+      // Test validation errors
+      await act(async () => {
+        fireEvent.change(nameInput, { target: { value: 'a' } });
+        fireEvent.change(emailInput, { target: { value: 'invalid-email' } });
+        fireEvent.change(ageInput, { target: { value: '15' } });
+      });
+      await act(async () => {
+        fireEvent.click(submitButton);
+      });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('name-error')).toHaveTextContent('Name must be at least 2 characters');
+        expect(screen.getByTestId('email-error')).toHaveTextContent('Invalid email address');
+        expect(screen.getByTestId('age-error')).toHaveTextContent('Must be at least 18 years old');
+      });
+    });
+
+    it('submits form with valid data', async () => {
+      const consoleSpy = vi.spyOn(console, 'log').mockImplementation(() => {});
+      
+      renderWithProviders(<ValidatedForm />);
+
+      const nameInput = screen.getByTestId('name-input');
+      const emailInput = screen.getByTestId('email-input');
+      const ageInput = screen.getByTestId('age-input');
+      const submitButton = screen.getByTestId('submit-button');
+
+      // Fill with valid data
+      await act(async () => {
+        fireEvent.change(nameInput, { target: { value: 'John Doe' } });
+        fireEvent.change(emailInput, { target: { value: 'john@example.com' } });
+        fireEvent.change(ageInput, { target: { value: '25' } });
+      });
+      await act(async () => {
+        fireEvent.click(submitButton);
+      });
+
+      await waitFor(() => {
+        expect(consoleSpy).toHaveBeenCalledWith('Form submitted:', {
+          name: 'John Doe',
+          email: 'john@example.com',
+          age: 25,
+        });
+      });
+
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('useKeyboardShortcuts Integration', () => {
+    it('handles keyboard shortcuts in component context', async () => {
+      renderWithProviders(<KeyboardShortcutsComponent />);
+
+      const openButton = screen.getByTestId('open-modal');
+      fireEvent.click(openButton);
+
+      expect(screen.getByTestId('modal')).toBeInTheDocument();
+
+      // Test Escape key
+      fireEvent.keyDown(document, { key: 'Escape' });
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('modal')).not.toBeInTheDocument();
+      });
+    });
+
+    it('handles Ctrl+S shortcut', async () => {
+      renderWithProviders(<KeyboardShortcutsComponent />);
+
+      // Test Ctrl+S
+      fireEvent.keyDown(document, { key: 's', ctrlKey: true });
+
+      await waitFor(() => {
+        expect(screen.getByTestId('saved-status')).toHaveTextContent('Data saved!');
+      });
+    });
+  });
+
+  describe('useFocusManagement Integration', () => {
+    it('manages focus within component', () => {
+      renderWithProviders(<FocusManagementComponent />);
+
+      const firstButton = screen.getByTestId('first-button');
+      const firstInput = screen.getByTestId('first-input');
+      const secondButton = screen.getByTestId('second-button');
+      const secondInput = screen.getByTestId('second-input');
+      const lastButton = screen.getByTestId('last-button');
+
+      // Test focus management
+      firstButton.focus();
+      expect(document.activeElement).toBe(firstButton);
+
+      firstInput.focus();
+      expect(document.activeElement).toBe(firstInput);
+
+      secondButton.focus();
+      expect(document.activeElement).toBe(secondButton);
+    });
+
+    it('provides focus management functions', () => {
+      const { result } = renderHook(() => useFocusManagement());
+
+      expect(result.current.setFocus).toBeDefined();
+      expect(result.current.focusFirst).toBeDefined();
+      expect(result.current.focusLast).toBeDefined();
+      expect(result.current.trapFocus).toBeDefined();
+      expect(result.current.releaseFocus).toBeDefined();
+      expect(result.current.getFocusableElements).toBeDefined();
+    });
+  });
+
+  describe('useComponentPerformance Integration', () => {
+    it('monitors component performance', () => {
+      const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+      
+      renderWithProviders(<PerformanceTestComponent />);
+
+      expect(screen.getByTestId('performance-component')).toBeInTheDocument();
+
+      // Simulate slow render
+      mockPerformance.now.mockReturnValueOnce(0);
+      mockPerformance.now.mockReturnValueOnce(50);
+
+      // Rerender to trigger performance check
+      const { rerender } = renderHook(() => useComponentPerformance({ 
+        componentName: 'PerformanceTestComponent',
+        threshold: 16,
+        enableLogging: true,
+      }));
+      rerender();
+
+      expect(consoleSpy).toHaveBeenCalledWith(
+        expect.stringContaining('Performance warning: PerformanceTestComponent rendered in 50.00ms')
+      );
+
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('useDataTableState Integration', () => {
+    it('manages table state with component integration', () => {
+      renderWithProviders(<DataTableStateComponent />);
+
+      const sortButton = screen.getByTestId('sort-name');
+      const filterButton = screen.getByTestId('filter-active');
+
+      // Test sorting
+      fireEvent.click(sortButton);
+
+      // Use regex to match id property in output
+      expect(screen.getByTestId('sorting-state').textContent).toMatch(/"id":"name"/);
+
+      // Test filtering
+      fireEvent.click(filterButton);
+
+      expect(screen.getByTestId('filters-state').textContent).toMatch(/"id":"status"/);
+    });
+
+    it('provides table state management functions', () => {
+      const { result } = renderHook(() => useDataTableState({ initialPageSize: 10, data: [] }));
+
+      expect(result.current.actions.setSorting).toBeDefined();
+      expect(result.current.actions.setColumnFilters).toBeDefined();
+      expect(result.current.actions.setExpanded).toBeDefined();
+      expect(result.current.actions.setPageSize).toBeDefined();
+      expect(result.current.actions.setPageIndex).toBeDefined();
+      expect(result.current.actions.setSelectedRows).toBeDefined();
+    });
+  });
+
+  describe('usePerformanceMonitor Integration', () => {
+    it('monitors performance metrics', () => {
+      const { result } = renderHook(() => 
+        usePerformanceMonitor('TestComponent', true, 'COMPONENT_RENDER')
+      );
+
+      expect(result.current.getMetrics).toBeDefined();
+      expect(result.current.getAverageRenderTime).toBeDefined();
+      expect(result.current.getBudgetStatus).toBeDefined();
+      expect(result.current.startMeasurement).toBeDefined();
+      expect(result.current.endMeasurement).toBeDefined();
+    });
+
+    it('provides performance budget status', () => {
+      const { result } = renderHook(() => 
+        usePerformanceMonitor('TestComponent', true, 'COMPONENT_RENDER')
+      );
+
+      const budgetStatus = result.current.getBudgetStatus();
+      expect(budgetStatus).toBeDefined();
+      expect(budgetStatus?.budget).toBeDefined();
+      expect(budgetStatus?.average).toBeDefined();
+      expect(budgetStatus?.passed).toBeDefined();
+    });
+  });
+
+  describe('Basic Hook Tests', () => {
+    it('should return mobile state from useIsMobile', () => {
+      const { result } = renderHook(() => useIsMobile());
+      expect(typeof result.current).toBe('boolean');
+    });
+
+    it('should provide focus management functions from useFocusManagement', () => {
+      const { result } = renderHook(() => useFocusManagement());
+      
+      expect(result.current.setFocus).toBeDefined();
+      expect(result.current.trapFocus).toBeDefined();
+      expect(result.current.releaseFocus).toBeDefined();
+    });
+  });
+}); 

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

@@ -0,0 +1,115 @@
+
+import React from 'react';
+import { renderHook, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { renderWithProviders } from '../../__tests__/shared';
+
+// Mock fetch globally for all tests
+const mockFetch = vi.fn();
+global.fetch = mockFetch;
+
+// Simple hook for testing API fetch functionality
+function useApiFetch(url: string) {
+  const [data, setData] = React.useState<any>(null);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    const fetchData = async () => {
+      try {
+        setLoading(true);
+        const response = await fetch(url);
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        setData(result);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'An error occurred');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, [url]);
+
+  return { data, loading, error };
+}
+
+describe('useApiFetch', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('fetches data on mount', async () => {
+    const mockData = { id: 1, name: 'Test' };
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      json: async () => mockData,
+    });
+
+    const { result } = renderHook(() => useApiFetch('/api/test'));
+
+    expect(result.current.loading).toBe(true);
+    expect(result.current.data).toBe(null);
+
+    await waitFor(() => {
+      expect(result.current.loading).toBe(false);
+    });
+
+    expect(result.current.data).toEqual(mockData);
+    expect(mockFetch).toHaveBeenCalledWith('/api/test');
+  });
+
+  it('sets loading state', async () => {
+    const mockData = { id: 1, name: 'Test' };
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      json: async () => mockData,
+    });
+
+    const { result } = renderHook(() => useApiFetch('/api/test'));
+
+    // Initially loading should be true
+    expect(result.current.loading).toBe(true);
+
+    await waitFor(() => {
+      expect(result.current.loading).toBe(false);
+    });
+  });
+
+  it('returns data', async () => {
+    const mockData = { id: 1, name: 'Test Data' };
+    mockFetch.mockResolvedValueOnce({
+      ok: true,
+      json: async () => mockData,
+    });
+
+    const { result } = renderHook(() => useApiFetch('/api/data'));
+
+    await waitFor(() => {
+      expect(result.current.data).toEqual(mockData);
+    });
+
+    expect(result.current.error).toBe(null);
+  });
+
+  it('handles errors gracefully', async () => {
+    const errorMessage = 'Network error';
+    mockFetch.mockRejectedValueOnce(new Error(errorMessage));
+
+    const { result } = renderHook(() => useApiFetch('/api/error'));
+
+    await waitFor(() => {
+      expect(result.current.loading).toBe(false);
+    });
+
+    expect(result.current.error).toBe(errorMessage);
+    expect(result.current.data).toBe(null);
+  });
+});