@jmruthers/pace-core 0.2.7 → 0.5.1

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

@@ -0,0 +1,128 @@
+/**
+ * @file User Profile Integration Tests
+ * @description Example integration test patterns
+ */
+
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { renderWithProviders } from '../helpers/test-utils';
+import { testData } from '../fixtures/mocks';
+
+// Mock components for demonstration
+const UserProfile = ({ userId }: { userId: string }) => {
+  const [user, setUser] = React.useState<any>(null);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    // Simulate API call
+    const fetchUser = async () => {
+      try {
+        setLoading(true);
+        const userData = testData.users.find(u => u.id === userId);
+        if (userData) {
+          setUser(userData);
+        } else {
+          setError('User not found');
+        }
+      } catch (err) {
+        setError('Failed to fetch user');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchUser();
+  }, [userId]);
+
+  if (loading) return <div>Loading...</div>;
+  if (error) return <div>Error: {error}</div>;
+  if (!user) return <div>No user found</div>;
+
+  return (
+    <div data-testid="user-profile">
+      <h1>{user.name}</h1>
+      <p>{user.email}</p>
+      <button onClick={() => setUser({ ...user, name: 'Updated Name' })}>
+        Update Name
+      </button>
+    </div>
+  );
+};
+
+describe('User Profile Integration Tests', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Data Loading', () => {
+    it('loads and displays user data', async () => {
+      renderWithProviders(<UserProfile userId="1" />);
+      
+      // The component loads data synchronously in this mock, so we just check the final state
+      await waitFor(() => {
+        expect(screen.getByText('John Doe')).toBeInTheDocument();
+      });
+      
+      expect(screen.getByText('john@example.com')).toBeInTheDocument();
+    });
+
+    it('handles user not found', async () => {
+      renderWithProviders(<UserProfile userId="999" />);
+      
+      await waitFor(() => {
+        expect(screen.getByText('Error: User not found')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('User Interactions', () => {
+    it('allows updating user name', async () => {
+      const user = userEvent.setup();
+      renderWithProviders(<UserProfile userId="1" />);
+      
+      await waitFor(() => {
+        expect(screen.getByText('John Doe')).toBeInTheDocument();
+      });
+      
+      await user.click(screen.getByText('Update Name'));
+      
+      expect(screen.getByText('Updated Name')).toBeInTheDocument();
+      expect(screen.queryByText('John Doe')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Component State Management', () => {
+    it('maintains state across re-renders', async () => {
+      const { rerender } = renderWithProviders(<UserProfile userId="1" />);
+      
+      await waitFor(() => {
+        expect(screen.getByText('John Doe')).toBeInTheDocument();
+      });
+      
+      rerender(<UserProfile userId="1" />);
+      
+      expect(screen.getByText('John Doe')).toBeInTheDocument();
+    });
+  });
+});
+
+// Example of testing with different user IDs
+describe('User Profile - Different Users', () => {
+  const testCases = [
+    { userId: '1', expectedName: 'John Doe' },
+    { userId: '2', expectedName: 'Jane Smith' },
+  ];
+
+  testCases.forEach(({ userId, expectedName }) => {
+    it(`displays correct data for user ${userId}`, async () => {
+      renderWithProviders(<UserProfile userId={userId} />);
+      
+      await waitFor(() => {
+        expect(screen.getByText(expectedName)).toBeInTheDocument();
+      });
+    });
+  });
+});

package/src/__tests__/setup.ts

@@ -1,259 +1,71 @@
-
 /**
- * @file Enhanced test setup with improved isolation
+ * @file Test Setup Configuration
+ * @description Global test setup, mocks, and utilities
  */
 
 import '@testing-library/jest-dom';
-import { vi, beforeEach, afterEach } from 'vitest';
-import { TestIsolation } from './utils/testIsolation';
-import { configure } from '@testing-library/dom';
-
-// Configure testing-library
-configure({
-  testIdAttribute: 'data-testid',
-  asyncUtilTimeout: 1000,
-  getElementError: (message) => {
-    const error = new Error(message || 'Element not found');
-    error.name = 'TestingLibraryElementError';
-    return error;
-  },
-});
+import { vi } from 'vitest';
+import { cleanup } from '@testing-library/react';
 
-// Set up test isolation for all tests
+// Global test setup
 beforeEach(() => {
-  TestIsolation.setupTest({
-    resetMocks: true,
-    clearTimers: true,
-    restoreConsole: false, // Keep console mocked to reduce noise
-    clearLocalStorage: true,
-    resetScrollPosition: true,
-  });
+  // Clear all mocks before each test
+  vi.clearAllMocks();
 });
 
 afterEach(() => {
-  TestIsolation.teardownTest({
-    clearTimers: true,
-  });
+  // Clean up DOM after each test
+  cleanup();
 });
 
-// Mock console methods in test environment to reduce noise
-const originalError = console.error;
-const originalWarn = console.warn;
-
-beforeEach(() => {
-  // Mock console.error to suppress React error boundary logs
-  console.error = vi.fn((message) => {
-    if (
-      typeof message === 'string' &&
-      (message.includes('Warning:') || 
-       message.includes('ReactDOMTestUtils') ||
-       message.includes('act()'))
-    ) {
-      return;
-    }
-    originalError(message);
-  });
-
-  // Mock console.warn to suppress React warnings
-  console.warn = vi.fn((message) => {
-    if (typeof message === 'string' && 
-        (message.includes('Warning:') ||
-         message.includes('deprecated'))) {
-      return;
-    }
-    originalWarn(message);
-  });
-});
+// Mock console methods to reduce noise in tests
+global.console = {
+  ...console,
+  // Uncomment to suppress console.log in tests
+  // log: vi.fn(),
+  // warn: vi.fn(),
+  // error: vi.fn(),
+};
 
-// Enhanced global mocks with better isolation
+// Mock IntersectionObserver
 global.IntersectionObserver = vi.fn().mockImplementation(() => ({
   observe: vi.fn(),
   unobserve: vi.fn(),
   disconnect: vi.fn(),
 }));
 
+// Mock ResizeObserver
 global.ResizeObserver = vi.fn().mockImplementation(() => ({
   observe: vi.fn(),
   unobserve: vi.fn(),
   disconnect: vi.fn(),
 }));
 
-// Deterministic animation frame mock
-let rafId = 0;
-global.requestAnimationFrame = vi.fn().mockImplementation((cb) => {
-  rafId++;
-  setTimeout(cb, 16);
-  return rafId;
-});
-
-global.cancelAnimationFrame = vi.fn().mockImplementation(() => {
-  // No-op in tests
-});
-
-// Enhanced matchMedia mock with event simulation
+// Mock matchMedia
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
-  value: vi.fn().mockImplementation((query) => {
-    const mockMatch = {
-      matches: false,
-      media: query,
-      onchange: null,
-      addEventListener: vi.fn(),
-      removeEventListener: vi.fn(),
-      dispatchEvent: vi.fn(),
-    };
-    
-    // Add method to simulate media query changes
-    mockMatch.addEventListener.mockImplementation((event, handler) => {
-      if (event === 'change') {
-        // Store handler for potential simulation
-        mockMatch.onchange = handler;
-      }
-    });
-    
-    return mockMatch;
-  }),
-});
-
-// Enhanced scroll mock with position tracking
-let scrollPosition = { x: 0, y: 0 };
-const mockScrollTo = vi.fn().mockImplementation((arg1?: any, y?: number) => {
-  if (typeof arg1 === 'object') {
-    scrollPosition.x = arg1.left || 0;
-    scrollPosition.y = arg1.top || 0;
-  } else {
-    scrollPosition.x = arg1 || 0;
-    scrollPosition.y = y || 0;
-  }
+  value: vi.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
 });
 
+// Mock scrollTo
 Object.defineProperty(window, 'scrollTo', {
-  value: mockScrollTo,
-  writable: true
-});
-
-Object.defineProperty(window, 'scrollX', {
-  get: () => scrollPosition.x,
-  configurable: true
-});
-
-Object.defineProperty(window, 'scrollY', {
-  get: () => scrollPosition.y,
-  configurable: true
-});
-
-// Enhanced performance mock with timing simulation
-Object.defineProperty(window, 'performance', {
-  value: {
-    now: vi.fn(() => Date.now()),
-    mark: vi.fn(),
-    measure: vi.fn(),
-    getEntriesByName: vi.fn(() => []),
-    getEntriesByType: vi.fn(() => []),
-    timing: {
-      navigationStart: Date.now() - 1000,
-      loadEventEnd: Date.now(),
-    },
-  },
-});
-
-// Improved localStorage mock with error simulation
-const createStorageMock = () => {
-  let store: Record<string, string> = {};
-  
-  return {
-    getItem: vi.fn((key: string) => store[key] || null),
-    setItem: vi.fn((key: string, value: string) => {
-      store[key] = value;
-    }),
-    removeItem: vi.fn((key: string) => {
-      delete store[key];
-    }),
-    clear: vi.fn(() => {
-      store = {};
-    }),
-    key: vi.fn((index: number) => Object.keys(store)[index] || null),
-    get length() {
-      return Object.keys(store).length;
-    },
-  };
-};
-
-Object.defineProperty(window, 'localStorage', {
-  value: createStorageMock(),
-});
-
-Object.defineProperty(window, 'sessionStorage', {
-  value: createStorageMock(),
-});
-
-// Enhanced crypto mock for testing
-Object.defineProperty(global, 'crypto', {
-  value: {
-    randomUUID: vi.fn(() => `mock-uuid-${Date.now()}-${Math.random()}`),
-    getRandomValues: vi.fn((arr) => {
-      for (let i = 0; i < arr.length; i++) {
-        arr[i] = Math.floor(Math.random() * 256);
-      }
-      return arr;
-    }),
-  },
+  writable: true,
+  value: vi.fn(),
 });
 
-// Set consistent test environment variables
-process.env.NODE_ENV = 'test';
-process.env.VITE_SUPABASE_URL = 'https://test.supabase.co';
-process.env.VITE_SUPABASE_ANON_KEY = 'test-anon-key';
-
-// Global test utilities
-(global as any).testUtils = {
-  waitForStableState: TestIsolation.waitForStableState,
-  createDeterministicMock: TestIsolation.createDeterministicMock,
-};
-
-// Add DOM mocks required for accessibility testing
+// Mock getComputedStyle
 Object.defineProperty(window, 'getComputedStyle', {
+  writable: true,
   value: vi.fn().mockImplementation(() => ({
-    getPropertyValue: vi.fn(),
+    getPropertyValue: vi.fn().mockReturnValue(''),
   })),
-});
-
-// Mock Element class for accessibility testing
-class MockElement {
-  [key: string]: any;
-  
-  getAttribute(name: string) {
-    return this[name];
-  }
-  
-  setAttribute(name: string, value: string) {
-    this[name] = value;
-  }
-  
-  removeAttribute(name: string) {
-    delete this[name];
-  }
-  
-  hasAttribute(name: string) {
-    return name in this;
-  }
-  
-  getAttributeNames() {
-    return Object.keys(this);
-  }
-}
-
-Object.defineProperty(window, 'Element', {
-  value: MockElement,
-});
-
-// Mock Node properties required for accessibility testing
-Object.defineProperty(Node.prototype, 'nodeType', {
-  value: 1,
-  configurable: true,
-});
-
-Object.defineProperty(Node.prototype, 'nodeName', {
-  value: 'DIV',
-  configurable: true,
-});
+});

package/src/__tests__/templates/component.test.template.tsx

@@ -1,122 +1,144 @@
 /**
- * @file Template for component unit tests
- * Copy this file and replace ComponentName with your actual component
- * 
- * Instructions:
- * 1. Copy this file to your component's __tests__ folder
- * 2. Rename to YourComponent.unit.test.tsx  
- * 3. Replace all instances of "ComponentName" with your actual component name
- * 4. Uncomment and fix the import paths below
- * 5. Customize the tests for your component's specific functionality
+ * @file Component Test Template
+ * @description Template for creating component tests
+ * @usage Copy this template and replace ComponentName with your component
  */
 
-// Uncomment and update these imports for your component:
-// import React from 'react';
-// import { render, screen, fireEvent } from '@testing-library/react';
-// import userEvent from '@testing-library/user-event';
-// import { describe, it, expect, vi, beforeEach } from 'vitest';
-// import { ComponentName } from '../ComponentName';
-// import { renderWithProviders } from '../../utils/renderHelpers';
+import React from 'react';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { ComponentName } from '../../components/ComponentName/ComponentName';
+import { renderWithProviders } from '../helpers/test-utils';
 
-/*
 describe('ComponentName Component', () => {
-  const user = userEvent.setup();
-  
   beforeEach(() => {
     vi.clearAllMocks();
   });
 
+  // Basic rendering tests
   describe('Rendering', () => {
     it('renders with default props', () => {
-      renderWithProviders(<ComponentName>Default content</ComponentName>);
-      expect(screen.getByText('Default content')).toBeInTheDocument();
+      renderWithProviders(<ComponentName />);
+      expect(screen.getByRole('generic')).toBeInTheDocument();
     });
 
-    it('applies custom className', () => {
-      renderWithProviders(<ComponentName className="custom-class">Content</ComponentName>);
-      const element = screen.getByText('Content');
-      expect(element).toHaveClass('custom-class');
+    it('renders with custom props', () => {
+      renderWithProviders(<ComponentName customProp="value" />);
+      expect(screen.getByRole('generic')).toBeInTheDocument();
     });
 
-    it('forwards ref correctly', () => {
-      const ref = React.createRef<HTMLElement>();
-      renderWithProviders(<ComponentName ref={ref}>Content</ComponentName>);
-      expect(ref.current).toBeInstanceOf(HTMLElement);
+    it('renders with children', () => {
+      renderWithProviders(
+        <ComponentName>
+          <span>Child content</span>
+        </ComponentName>
+      );
+      expect(screen.getByText('Child content')).toBeInTheDocument();
     });
   });
 
-  describe('Interactions', () => {
+  // Event handling tests
+  describe('Event Handling', () => {
     it('handles click events', async () => {
       const handleClick = vi.fn();
-      renderWithProviders(<ComponentName onClick={handleClick}>Clickable</ComponentName>);
+      const user = userEvent.setup();
+      
+      renderWithProviders(<ComponentName onClick={handleClick} />);
       
-      await user.click(screen.getByText('Clickable'));
+      await user.click(screen.getByRole('generic'));
       expect(handleClick).toHaveBeenCalledTimes(1);
     });
 
-    it('supports keyboard navigation', async () => {
+    it('handles keyboard events', async () => {
       const handleKeyDown = vi.fn();
-      renderWithProviders(<ComponentName onKeyDown={handleKeyDown}>Keyboard</ComponentName>);
+      const user = userEvent.setup();
+      
+      renderWithProviders(<ComponentName onKeyDown={handleKeyDown} />);
+      
+      screen.getByRole('generic').focus();
+      await user.keyboard('{Enter}');
+      expect(handleKeyDown).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  // State management tests
+  describe('State Management', () => {
+    it('handles controlled state', () => {
+      const { rerender } = renderWithProviders(
+        <ComponentName value="initial" />
+      );
       
-      const element = screen.getByText('Keyboard');
-      element.focus();
-      await user.keyboard('[Enter]');
+      expect(screen.getByDisplayValue('initial')).toBeInTheDocument();
       
-      expect(handleKeyDown).toHaveBeenCalled();
+      rerender(<ComponentName value="updated" />);
+      expect(screen.getByDisplayValue('updated')).toBeInTheDocument();
+    });
+
+    it('handles uncontrolled state', () => {
+      renderWithProviders(<ComponentName defaultValue="default" />);
+      expect(screen.getByDisplayValue('default')).toBeInTheDocument();
     });
   });
 
-  describe('States', () => {
-    it('handles loading state', () => {
-      renderWithProviders(<ComponentName isLoading>Loading content</ComponentName>);
-      expect(screen.getByRole('status')).toBeInTheDocument();
+  // Accessibility tests
+  describe('Accessibility', () => {
+    it('has proper ARIA attributes', () => {
+      renderWithProviders(<ComponentName aria-label="Test component" />);
+      expect(screen.getByRole('generic')).toHaveAttribute('aria-label', 'Test component');
     });
 
-    it('handles disabled state', () => {
-      renderWithProviders(<ComponentName disabled>Disabled content</ComponentName>);
-      const element = screen.getByText('Disabled content');
-      expect(element).toBeDisabled();
+    it('is keyboard accessible', () => {
+      renderWithProviders(<ComponentName />);
+      expect(screen.getByRole('generic')).not.toHaveAttribute('tabindex', '-1');
     });
 
-    it('handles error state', () => {
-      renderWithProviders(<ComponentName error="Error message">Error content</ComponentName>);
-      expect(screen.getByRole('alert')).toHaveTextContent('Error message');
+    it('supports screen readers', () => {
+      renderWithProviders(<ComponentName />);
+      // Add specific screen reader tests here
     });
   });
 
-  describe('With Providers', () => {
-    it('works with auth context', () => {
+  // Error handling tests
+  describe('Error Handling', () => {
+    it('handles invalid props gracefully', () => {
+      // @ts-expect-error Testing invalid prop
+      renderWithProviders(<ComponentName invalidProp="test" />);
+      expect(screen.getByRole('generic')).toBeInTheDocument();
+    });
+
+    it('displays error states', () => {
+      renderWithProviders(<ComponentName error="Something went wrong" />);
+      expect(screen.getByText('Something went wrong')).toBeInTheDocument();
+    });
+  });
+
+  // Integration tests
+  describe('Integration', () => {
+    it('works with other components', () => {
       renderWithProviders(
-        <ComponentName>Auth content</ComponentName>,
-        { user: { id: '123', email: 'test@example.com' } }
+        <div>
+          <ComponentName />
+          <ComponentName />
+        </div>
       );
       
-      expect(screen.getByText('Auth content')).toBeInTheDocument();
+      expect(screen.getAllByRole('generic')).toHaveLength(2);
     });
 
-    it('works with permissions', () => {
+    it('works with forms', async () => {
+      const handleSubmit = vi.fn((e) => e.preventDefault());
+      const user = userEvent.setup();
+      
       renderWithProviders(
-        <ComponentName>Permission content</ComponentName>,
-        { permissions: { 'read:content': true } }
+        <form onSubmit={handleSubmit}>
+          <ComponentName />
+          <button type="submit">Submit</button>
+        </form>
       );
       
-      expect(screen.getByText('Permission content')).toBeInTheDocument();
+      await user.click(screen.getByRole('button', { name: 'Submit' }));
+      expect(handleSubmit).toHaveBeenCalledTimes(1);
     });
   });
-
-  describe('Edge Cases', () => {
-    it('handles null children gracefully', () => {
-      renderWithProviders(<ComponentName>{null}</ComponentName>);
-      // Should not crash
-    });
-
-    it('handles empty string props', () => {
-      renderWithProviders(<ComponentName title="">Empty title</ComponentName>);
-      expect(screen.getByText('Empty title')).toBeInTheDocument();
-    });
-  });
-});
-*/
-
-// This file is a template - copy and uncomment the code above to use it
-export {};
+});