@jmruthers/pace-core 0.2.4

package/src/components/Button/__tests__/Button.unit.test.tsx

@@ -0,0 +1,189 @@
+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 { Button } from '../Button';
+import { renderWithProviders, testPerformance, measureRenderPerformance, testComponentRendering, testComponentAccessibility } from '../../../__tests__/shared';
+
+describe('Button Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('renders with default props', () => {
+      renderWithProviders(<Button>Default Button</Button>);
+      expect(screen.getByRole('button')).toHaveTextContent('Default Button');
+    });
+
+    it('applies custom className', () => {
+      renderWithProviders(<Button className="custom-class">Button</Button>);
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass('custom-class');
+    });
+
+    it('forwards ref correctly', () => {
+      const ref = React.createRef<HTMLButtonElement>();
+      renderWithProviders(<Button ref={ref}>Button</Button>);
+      expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+    });
+
+    it('renders with different variants', () => {
+      // Test each variant separately to avoid DOM accumulation
+      const variants = ['default', 'destructive', 'outline', 'secondary', 'ghost', 'link'] as const;
+      
+      variants.forEach(variant => {
+        const { unmount } = renderWithProviders(<Button variant={variant}>{variant}</Button>);
+        expect(screen.getByRole('button')).toBeInTheDocument();
+        unmount(); // Clean up after each test
+      });
+    });
+
+    it('renders with different sizes', () => {
+      // Test each size separately to avoid DOM accumulation
+      const sizes = ['default', 'sm', 'lg', 'icon'] as const;
+      
+      sizes.forEach(size => {
+        const { unmount } = renderWithProviders(<Button size={size}>{size}</Button>);
+        expect(screen.getByRole('button')).toBeInTheDocument();
+        unmount(); // Clean up after each test
+      });
+    });
+  });
+
+  describe('Interactions', () => {
+    it('handles click events', async () => {
+      const user = userEvent.setup();
+      const handleClick = vi.fn();
+      renderWithProviders(<Button onClick={handleClick}>Clickable</Button>);
+      
+      await user.click(screen.getByRole('button'));
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('prevents click when disabled', async () => {
+      const user = userEvent.setup();
+      const handleClick = vi.fn();
+      renderWithProviders(<Button onClick={handleClick} disabled>Disabled</Button>);
+      
+      await user.click(screen.getByRole('button'));
+      expect(handleClick).not.toHaveBeenCalled();
+    });
+
+    it('supports keyboard navigation', async () => {
+      const user = userEvent.setup();
+      const handleClick = vi.fn();
+      renderWithProviders(<Button onClick={handleClick}>Keyboard</Button>);
+      
+      const button = screen.getByRole('button');
+      button.focus();
+      expect(button).toHaveFocus();
+      
+      await user.keyboard('[Enter]');
+      expect(handleClick).toHaveBeenCalled();
+    });
+  });
+
+  describe('States', () => {
+    it('handles loading state', () => {
+      renderWithProviders(<Button disabled>Loading Button</Button>);
+      const button = screen.getByRole('button');
+      expect(button).toBeDisabled();
+    });
+
+    it('handles disabled state', () => {
+      renderWithProviders(<Button disabled>Disabled Button</Button>);
+      const button = screen.getByRole('button');
+      expect(button).toBeDisabled();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles null children gracefully', () => {
+      renderWithProviders(<Button>{null}</Button>);
+      expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+
+    it('handles empty string children', () => {
+      renderWithProviders(<Button>{''}</Button>);
+      expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+  });
+
+  describe('Performance', () => {
+    it('should render within performance budget', async () => {
+      const renderResult = await measureRenderPerformance(Button, { children: 'Performance Test' });
+      
+      expect(renderResult.averageTime).toBeLessThan(16); // 16ms for 60fps
+    });
+
+    it('should handle rapid clicks efficiently', async () => {
+      const handleClick = vi.fn();
+      renderWithProviders(<Button onClick={handleClick}>Click Me</Button>);
+      
+      const button = screen.getByRole('button');
+      const user = userEvent.setup();
+      
+      // Simulate rapid clicks
+      for (let i = 0; i < 10; i++) {
+        await user.click(button);
+      }
+      
+      expect(handleClick).toHaveBeenCalledTimes(10);
+    });
+
+    it('should render multiple buttons efficiently', async () => {
+      const ButtonList = () => (
+        <div>
+          {Array.from({ length: 100 }, (_, i) => (
+            <Button key={i}>Button {i}</Button>
+          ))}
+        </div>
+      );
+
+      const renderResult = await measureRenderPerformance(ButtonList, {});
+      
+      expect(renderResult.averageTime).toBeLessThan(100); // Should render 100 buttons in under 100ms
+    });
+  });
+
+  // Test Pattern Migration - Using shared utilities
+  describe('Button - Shared Utilities Tests', () => {
+    testComponentRendering(Button, [
+      {
+        name: 'with default props',
+        props: { children: 'Default Button' },
+        expectedText: 'Default Button'
+      },
+      {
+        name: 'with custom className',
+        props: { children: 'Button', className: 'custom-class' },
+        expectedText: 'Button',
+        expectedClassName: 'custom-class'
+      },
+      {
+        name: 'with variant',
+        props: { children: 'Primary Button', variant: 'primary' },
+        expectedText: 'Primary Button'
+      },
+      {
+        name: 'with size',
+        props: { children: 'Large Button', size: 'lg' },
+        expectedText: 'Large Button'
+      },
+      {
+        name: 'disabled state',
+        props: { children: 'Disabled Button', disabled: true },
+        expectedText: 'Disabled Button',
+        expectedDisabled: true
+      }
+    ]);
+
+    testComponentAccessibility(Button, {
+      requiredAttributes: [],
+      shouldBeKeyboardAccessible: false,
+      shouldHaveValidRole: false,
+      shouldHaveValidAriaLabel: false
+    });
+  });
+});

package/src/components/Button/__tests__/EventSelector.integration.test.tsx

@@ -0,0 +1,285 @@
+import React from 'react';
+import { screen, fireEvent, waitFor } from '@testing-library/react';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import '@testing-library/jest-dom';
+import { renderWithProviders } from '../../../__tests__/shared';
+import { EventSelector } from '../../EventSelector/EventSelector';
+
+/**
+ * EventSelector Integration Test - SKIPPED DUE TO HANGING ISSUE
+ * 
+ * INVESTIGATION FINDINGS:
+ * 
+ * 1. ROOT CAUSE: The EventSelector component itself causes the test runner to hang
+ *    - Test hangs even with just: import { EventSelector } from '../../EventSelector/EventSelector';
+ *    - Test hangs even when moved to different directories (Button/__tests__)
+ *    - Test hangs even with minimal mocking and no rendering
+ * 
+ * 2. WHAT WE RULED OUT:
+ *    - Not a directory-specific issue (hangs in Button/__tests__ too)
+ *    - Not a complex mocking issue (hangs with minimal mocks)
+ *    - Not a test logic issue (hangs with just import)
+ *    - Not a cache issue (persisted after clearing .vite/.vitest caches)
+ *    - Not a circular dependency (confirmed no circular imports)
+ * 
+ * 3. WHAT WE CONFIRMED:
+ *    - Other tests in different directories run fine
+ *    - Minimal tests in same directory run fine
+ *    - Issue is specific to importing EventSelector component
+ * 
+ * 4. POSSIBLE CAUSES:
+ *    - Infinite loop or unresolved promise in EventSelector component
+ *    - Side effect during module import/initialization
+ *    - Complex dependency tree causing import resolution issues
+ *    - Vitest bug triggered by specific component structure
+ * 
+ * 5. NEXT STEPS WHEN RETURNING:
+ *    - Investigate EventSelector component for infinite loops in useEffect
+ *    - Check for unresolved promises in component initialization
+ *    - Review all dependencies of EventSelector for hanging issues
+ *    - Try importing dependencies individually to isolate the problematic one
+ *    - Consider creating a minimal reproduction of EventSelector
+ * 
+ * 6. WORKAROUND:
+ *    - Skip integration tests for EventSelector until component issue is resolved
+ *    - Focus on unit tests that don't import the full component
+ *    - Consider testing EventSelector logic in isolation
+ */
+
+// Mock lucide-react icons
+vi.mock('lucide-react', () => ({
+  RefreshCw: ({ className }: any) => <div data-testid="refresh-icon" className={className} />,
+  AlertCircle: ({ className }: any) => <div data-testid="alert-circle-icon" className={className} />,
+  Lock: ({ className }: any) => <div data-testid="lock-icon" className={className} />,
+  Calendar: ({ className }: any) => <div data-testid="calendar-icon" className={className} />,
+  Star: ({ className }: any) => <div data-testid="star-icon" className={className} />,
+}));
+
+// Mock all React components to prevent hanging
+vi.mock('../../Select/select', () => ({
+  Select: ({ children, value, onValueChange }: any) => (
+    <div data-testid="select-component" data-value={value}>
+      {children}
+    </div>
+  ),
+  SelectContent: ({ children }: any) => (
+    <div data-testid="select-content">{children}</div>
+  ),
+  SelectItem: ({ children, value }: any) => (
+    <div data-testid="select-item" data-value={value}>
+      {children}
+    </div>
+  ),
+  SelectTrigger: ({ children, className }: any) => (
+    <div data-testid="select-trigger" className={className}>
+      {children}
+    </div>
+  ),
+  SelectValue: ({ placeholder }: any) => (
+    <div data-testid="select-value" data-placeholder={placeholder}>
+      {placeholder}
+    </div>
+  ),
+}));
+
+vi.mock('../../Alert/Alert', () => ({
+  Alert: ({ children, variant }: any) => (
+    <div data-testid="alert-component" data-variant={variant}>
+      {children}
+    </div>
+  ),
+  AlertDescription: ({ children, className }: any) => (
+    <div data-testid="alert-description" className={className}>
+      {children}
+    </div>
+  ),
+}));
+
+vi.mock('../../Button/Button', () => ({
+  Button: ({ children, onClick, variant, size, className }: any) => (
+    <button 
+      data-testid="button-component" 
+      onClick={onClick}
+      data-variant={variant}
+      data-size={size}
+      className={className}
+    >
+      {children}
+    </button>
+  ),
+}));
+
+vi.mock('../../LoadingSpinner/LoadingSpinner', () => ({
+  LoadingSpinner: ({ size }: any) => (
+    <div data-testid="loading-spinner" data-size={size}>
+      Loading...
+    </div>
+  ),
+}));
+
+// Mock the event color manager
+vi.mock('../../../utils/eventColorManager', () => ({
+  EventColorManager: {
+    updateEventColors: vi.fn().mockResolvedValue(undefined),
+    resetEventColorsToDefault: vi.fn(),
+    getCSSVar: vi.fn().mockReturnValue(''),
+  },
+}));
+
+// Mock lucide-react icons
+vi.mock('lucide-react', () => ({
+  RefreshCw: ({ className }: any) => <div data-testid="refresh-icon" className={className} />,
+  AlertCircle: ({ className }: any) => <div data-testid="alert-circle-icon" className={className} />,
+  Lock: ({ className }: any) => <div data-testid="lock-icon" className={className} />,
+  Calendar: ({ className }: any) => <div data-testid="calendar-icon" className={className} />,
+  Star: ({ className }: any) => <div data-testid="star-icon" className={className} />,
+}));
+
+// Use a top-level variable for the mock implementation
+let mockUseEventsImpl: () => any = () => ({
+  events: [],
+  selectedEvent: null,
+  isLoading: false,
+  error: null,
+  setSelectedEvent: vi.fn(),
+  refreshEvents: vi.fn(),
+});
+
+vi.mock('../../../providers/EventProvider', () => ({
+  EventProvider: ({ children }: any) => <div data-testid="event-provider">{children}</div>,
+  useEvents: () => mockUseEventsImpl(),
+}));
+
+describe('EventSelector Integration Test', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockUseEventsImpl = () => ({
+      events: [],
+      selectedEvent: null,
+      isLoading: false,
+      error: null,
+      setSelectedEvent: vi.fn(),
+      refreshEvents: vi.fn(),
+    });
+  });
+
+  it('should import EventSelector without hanging', () => {
+    expect(EventSelector).toBeDefined();
+  });
+
+  it('shows loading state', () => {
+    mockUseEventsImpl = () => ({
+      events: [],
+      selectedEvent: null,
+      isLoading: true,
+      error: null,
+      setSelectedEvent: vi.fn(),
+      refreshEvents: vi.fn(),
+    });
+    renderWithProviders(<EventSelector />);
+    expect(screen.getByTestId('loading-spinner')).toBeInTheDocument();
+    expect(screen.getByText('Loading events...')).toBeInTheDocument();
+  });
+
+  it('shows no events message', () => {
+    mockUseEventsImpl = () => ({
+      events: [] as any,
+      selectedEvent: null,
+      isLoading: false,
+      error: null,
+      setSelectedEvent: vi.fn(),
+      refreshEvents: vi.fn(),
+    });
+    renderWithProviders(<EventSelector />);
+    expect(screen.getByTestId('alert-component')).toBeInTheDocument();
+    expect(screen.getByText('No events available.')).toBeInTheDocument();
+  });
+
+  it('shows access error state', () => {
+    mockUseEventsImpl = () => ({
+      events: [] as any,
+      selectedEvent: null,
+      isLoading: false,
+      error: { message: 'Access denied' } as any,
+      setSelectedEvent: vi.fn(),
+      refreshEvents: vi.fn(),
+    });
+    renderWithProviders(<EventSelector />);
+    expect(screen.getByTestId('alert-component')).toBeInTheDocument();
+    expect(screen.getByText('Access denied')).toBeInTheDocument();
+  });
+
+  it('shows general error state', () => {
+    mockUseEventsImpl = () => ({
+      events: [] as any,
+      selectedEvent: null,
+      isLoading: false,
+      error: { message: 'Failed to load events' } as any,
+      setSelectedEvent: vi.fn(),
+      refreshEvents: vi.fn(),
+    });
+    renderWithProviders(<EventSelector />);
+    expect(screen.getByTestId('alert-component')).toBeInTheDocument();
+    expect(screen.getByText('Failed to load events')).toBeInTheDocument();
+  });
+
+  it('renders event selector when events are available', () => {
+    const mockEvents = [
+      { id: '1', event_id: '1', event_name: 'Test Event 1', event_date: '2024-01-01' },
+      { id: '2', event_id: '2', event_name: 'Test Event 2', event_date: '2024-01-02' },
+    ];
+    mockUseEventsImpl = () => ({
+      events: mockEvents as any,
+      selectedEvent: null,
+      isLoading: false,
+      error: null,
+      setSelectedEvent: vi.fn(),
+      refreshEvents: vi.fn(),
+    });
+    renderWithProviders(<EventSelector />);
+    expect(screen.getByTestId('select-component')).toBeInTheDocument();
+    expect(screen.getByTestId('select-trigger')).toBeInTheDocument();
+  });
+
+  it('calls refreshEvents when retry button is clicked', () => {
+    const refreshEvents = vi.fn();
+    mockUseEventsImpl = () => ({
+      events: [] as any,
+      selectedEvent: null,
+      isLoading: false,
+      error: null,
+      setSelectedEvent: vi.fn(),
+      refreshEvents,
+    });
+    renderWithProviders(<EventSelector />);
+    const retryButton = screen.getByTestId('button-component');
+    fireEvent.click(retryButton);
+    expect(refreshEvents).toHaveBeenCalled();
+  });
+
+  it('respects showNoEventsMessage prop', () => {
+    mockUseEventsImpl = () => ({
+      events: [] as any,
+      selectedEvent: null,
+      isLoading: false,
+      error: null,
+      setSelectedEvent: vi.fn(),
+      refreshEvents: vi.fn(),
+    });
+    renderWithProviders(<EventSelector showNoEventsMessage={false} />);
+    expect(screen.queryByText('No events available.')).not.toBeInTheDocument();
+  });
+
+  it('respects showRetryButton prop', () => {
+    mockUseEventsImpl = () => ({
+      events: [] as any,
+      selectedEvent: null,
+      isLoading: false,
+      error: null,
+      setSelectedEvent: vi.fn(),
+      refreshEvents: vi.fn(),
+    });
+    renderWithProviders(<EventSelector showRetryButton={false} />);
+    expect(screen.queryByTestId('button-component')).not.toBeInTheDocument();
+  });
+}); 

package/src/components/Button/index.ts

@@ -0,0 +1,2 @@
+export { Button, ButtonGroup, IconButton } from './Button';
+export type { ButtonProps, ButtonGroupProps, IconButtonProps } from './Button';