@jmruthers/pace-core 0.2.7 → 0.5.1

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

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

@@ -1,285 +0,0 @@
-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();
-  });
-});