@jmruthers/pace-core 0.2.7 → 0.5.1

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

@@ -1,528 +0,0 @@
-/**
- * @file EventSelector Component Tests
- * @package @jmruthers/pace-core
- * @module Components/EventSelector/__tests__
- * @since 0.1.0
- *
- * Comprehensive test suite for the EventSelector component covering:
- * - Component rendering and initialization
- * - Event selection and change handling
- * - Loading states and error handling
- * - Event sorting and filtering
- * - Next event detection and indicators
- * - Date formatting and display
- * - Accessibility features
- * - Edge cases and error scenarios
- */
-
-// Mock lucide-react icons
-vi.mock('lucide-react', () => ({
-  RefreshCw: () => <div data-testid="refresh-icon" />,
-  AlertCircle: () => <div data-testid="alert-circle-icon" />,
-  Lock: () => <div data-testid="lock-icon" />,
-  Calendar: () => <div data-testid="calendar-icon" />,
-  Star: () => <div data-testid="star-icon" />,
-  ChevronDown: () => <div data-testid="chevron-down-icon">▼</div>,
-  Check: () => <div data-testid="check-icon" />
-}));
-
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
-import { EventSelector, EventSelectorProps } from '../EventSelector';
-import { EventProvider } from '../../../providers/EventProvider';
-import { Event } from '../../../types';
-
-// Mock the EventProvider
-const mockEvents: Event[] = [
-  {
-    id: '1',
-    event_id: 'event-1',
-    name: 'Test Event 1',
-    event_name: 'Test Event 1',
-    event_date: '2024-12-25',
-    event_venue: 'Test Venue 1',
-    created_at: '2024-01-01T00:00:00Z',
-    updated_at: '2024-01-01T00:00:00Z'
-  },
-  {
-    id: '2',
-    event_id: 'event-2',
-    name: 'Test Event 2',
-    event_name: 'Test Event 2',
-    event_date: '2024-12-30',
-    event_venue: 'Test Venue 2',
-    created_at: '2024-01-02T00:00:00Z',
-    updated_at: '2024-01-02T00:00:00Z'
-  },
-  {
-    id: '3',
-    event_id: 'event-3',
-    name: 'Past Event',
-    event_name: 'Past Event',
-    event_date: '2023-12-01',
-    event_venue: 'Past Venue',
-    created_at: '2023-01-01T00:00:00Z',
-    updated_at: '2023-01-01T00:00:00Z'
-  },
-  {
-    id: '4',
-    event_id: 'event-4',
-    name: 'No Date Event',
-    event_name: 'No Date Event',
-    event_venue: 'No Date Venue',
-    created_at: '2024-01-03T00:00:00Z',
-    updated_at: '2024-01-03T00:00:00Z'
-  }
-];
-
-const mockEventProviderValue = {
-  events: mockEvents,
-  selectedEvent: null,
-  isLoading: false,
-  error: null,
-  setSelectedEvent: vi.fn(),
-  refreshEvents: vi.fn(),
-  clearError: vi.fn()
-};
-
-// Mock the useEvents hook
-vi.mock('../../../providers/EventProvider', () => ({
-  EventProvider: ({ children }: { children: React.ReactNode }) => children,
-  useEvents: () => mockEventProviderValue
-}));
-
-// Mock date to ensure consistent testing
-const mockDate = new Date('2024-12-20T12:00:00Z');
-vi.setSystemTime(mockDate);
-
-// Mock Date constructor to ensure consistent behavior
-const OriginalDate = global.Date;
-global.Date = class extends OriginalDate {
-  constructor(...args: any[]) {
-    if (args.length === 0) {
-      return new OriginalDate('2024-12-20T12:00:00Z');
-    }
-    return new OriginalDate(...args);
-  }
-  
-  static now() {
-    return new OriginalDate('2024-12-20T12:00:00Z').getTime();
-  }
-} as any;
-
-const renderEventSelector = (props: Partial<EventSelectorProps> = {}) => {
-  const defaultProps: EventSelectorProps = {
-    onEventChange: vi.fn(),
-    ...props
-  };
-
-  return render(
-    <EventProvider>
-      <EventSelector {...defaultProps} />
-    </EventProvider>
-  );
-};
-
-describe('EventSelector', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    // Reset the mock provider value
-    Object.assign(mockEventProviderValue, {
-      events: mockEvents,
-      selectedEvent: null,
-      isLoading: false,
-      error: null,
-      setSelectedEvent: vi.fn(),
-      refreshEvents: vi.fn(),
-      clearError: vi.fn()
-    });
-  });
-
-  afterEach(() => {
-    // Restore original Date constructor
-    global.Date = OriginalDate;
-    vi.restoreAllMocks();
-  });
-
-  describe('Component Rendering', () => {
-    it('should render with default props', () => {
-      renderEventSelector();
-      
-      expect(screen.getByRole('combobox')).toBeInTheDocument();
-      expect(screen.getByText('Select an event')).toBeInTheDocument();
-    });
-
-    it('should render with custom placeholder', () => {
-      renderEventSelector({ placeholder: 'Choose an event...' });
-      
-      expect(screen.getByText('Choose an event...')).toBeInTheDocument();
-    });
-
-    it('should apply custom className', () => {
-      const { container } = renderEventSelector({ className: 'custom-class' });
-      
-      // The className is applied to the outer div, not the SelectTrigger
-      const outerDiv = container.firstChild as HTMLElement;
-      expect(outerDiv).toHaveClass('custom-class');
-    });
-
-    it('should render with all events in dropdown', async () => {
-      renderEventSelector();
-      
-      const trigger = screen.getByRole('combobox');
-      fireEvent.click(trigger);
-      
-      await waitFor(() => {
-        expect(screen.getByText('Test Event 1')).toBeInTheDocument();
-        expect(screen.getByText('Test Event 2')).toBeInTheDocument();
-        expect(screen.getByText('Past Event')).toBeInTheDocument();
-        expect(screen.getByText('No Date Event')).toBeInTheDocument();
-      });
-    });
-  });
-
-  describe('Event Selection', () => {
-    it('should call onEventChange when event is selected', async () => {
-      const onEventChange = vi.fn();
-      renderEventSelector({ onEventChange });
-      
-      const trigger = screen.getByRole('combobox');
-      fireEvent.click(trigger);
-      
-      await waitFor(() => {
-        const event1 = screen.getByText('Test Event 1');
-        fireEvent.click(event1);
-      });
-      
-      expect(mockEventProviderValue.setSelectedEvent).toHaveBeenCalledWith(mockEvents[0]);
-      expect(onEventChange).toHaveBeenCalledWith(mockEvents[0]);
-    });
-
-    it('should handle event selection without onEventChange callback', async () => {
-      renderEventSelector({ onEventChange: undefined });
-      
-      const trigger = screen.getByRole('combobox');
-      fireEvent.click(trigger);
-      
-      await waitFor(() => {
-        const event1 = screen.getByText('Test Event 1');
-        fireEvent.click(event1);
-      });
-      
-      expect(mockEventProviderValue.setSelectedEvent).toHaveBeenCalledWith(mockEvents[0]);
-    });
-
-    it('should display selected event in trigger', () => {
-      mockEventProviderValue.selectedEvent = mockEvents[0];
-      renderEventSelector();
-      
-      expect(screen.getByText('Test Event 1')).toBeInTheDocument();
-      expect(screen.getByText('(12/25/2024)')).toBeInTheDocument();
-    });
-  });
-
-  describe('Event Sorting', () => {
-    it('should sort events by date descending (newest first)', async () => {
-      renderEventSelector();
-      
-      const trigger = screen.getByRole('combobox');
-      fireEvent.click(trigger);
-      
-      await waitFor(() => {
-        const items = screen.getAllByRole('option');
-        // Events should be sorted by date descending
-        expect(items[0]).toHaveTextContent('Test Event 2'); // 2024-12-30
-        expect(items[1]).toHaveTextContent('Test Event 1'); // 2024-12-25
-        expect(items[2]).toHaveTextContent('Past Event'); // 2023-12-01
-        expect(items[3]).toHaveTextContent('No Date Event'); // No date
-      });
-    });
-  });
-
-  describe('Next Event Detection', () => {
-    it('should show next event indicator for upcoming events', async () => {
-      // Create events with future dates
-      const futureDate1 = new Date();
-      futureDate1.setDate(futureDate1.getDate() + 1);
-      const futureDate2 = new Date();
-      futureDate2.setDate(futureDate2.getDate() + 2);
-      
-      const futureEvents = [
-        {
-          ...mockEvents[0],
-          event_date: futureDate1.toISOString().split('T')[0]
-        },
-        {
-          ...mockEvents[1],
-          event_date: futureDate2.toISOString().split('T')[0]
-        }
-      ];
-      
-      mockEventProviderValue.events = futureEvents;
-      renderEventSelector({ showNextEventIndicator: true });
-      
-      const trigger = screen.getByRole('combobox');
-      fireEvent.click(trigger);
-      
-      await waitFor(() => {
-        // Test Event 1 and 2 should have next indicators
-        const event1Item = screen.getByText('Test Event 1').closest('[role="option"]');
-        const event2Item = screen.getByText('Test Event 2').closest('[role="option"]');
-        
-        expect(event1Item).toHaveTextContent('(Next)');
-        expect(event2Item).toHaveTextContent('(Next)');
-      });
-    });
-
-    it('should not show next event indicator when disabled', async () => {
-      renderEventSelector({ showNextEventIndicator: false });
-      
-      const trigger = screen.getByRole('combobox');
-      fireEvent.click(trigger);
-      
-      await waitFor(() => {
-        const items = screen.getAllByRole('option');
-        items.forEach(item => {
-          expect(item).not.toHaveTextContent('(Next)');
-        });
-      });
-    });
-
-    it('should auto-select next upcoming event on mount', () => {
-      // Create events with future dates
-      const futureDate1 = new Date();
-      futureDate1.setDate(futureDate1.getDate() + 1);
-      
-      const futureEvents = [
-        {
-          ...mockEvents[0],
-          event_date: futureDate1.toISOString().split('T')[0]
-        }
-      ];
-      
-      mockEventProviderValue.events = futureEvents;
-      renderEventSelector();
-      
-      // Should auto-select the first upcoming event
-      expect(mockEventProviderValue.setSelectedEvent).toHaveBeenCalledWith(futureEvents[0]);
-    });
-  });
-
-  describe('Date Formatting', () => {
-    it('should format today\'s date as "Today"', () => {
-      // Use the mocked system time to ensure consistent testing
-      const today = '2024-12-20'; // This matches the mocked system time
-      const todayEvent = {
-        ...mockEvents[0],
-        event_date: today
-      };
-      mockEventProviderValue.selectedEvent = todayEvent;
-      renderEventSelector();
-      
-      expect(screen.getByText((content, element) => {
-        return element?.textContent === '(Today)';
-      })).toBeInTheDocument();
-    });
-
-    it('should format tomorrow\'s date as "Tomorrow"', () => {
-      // Use the mocked system time + 1 day
-      const tomorrow = '2024-12-21'; // This is tomorrow from the mocked system time
-      const tomorrowEvent = {
-        ...mockEvents[0],
-        event_date: tomorrow
-      };
-      mockEventProviderValue.selectedEvent = tomorrowEvent;
-      renderEventSelector();
-      
-      expect(screen.getByText((content, element) => {
-        return element?.textContent === '(Tomorrow)';
-      })).toBeInTheDocument();
-    });
-
-    it('should format other dates with locale date string', () => {
-      const futureEvent = {
-        ...mockEvents[0],
-        event_date: '2024-12-25'
-      };
-      mockEventProviderValue.selectedEvent = futureEvent;
-      renderEventSelector();
-      
-      expect(screen.getByText('(12/25/2024)')).toBeInTheDocument();
-    });
-  });
-
-  describe('Event Details Display', () => {
-    it('should show event details when enabled', async () => {
-      renderEventSelector({ showEventDetails: true });
-      
-      const trigger = screen.getByRole('combobox');
-      fireEvent.click(trigger);
-      
-      await waitFor(() => {
-        // Check that venue information is displayed in the dropdown
-        expect(screen.getByText(/Test Venue 1/)).toBeInTheDocument();
-        expect(screen.getByText(/Test Venue 2/)).toBeInTheDocument();
-      });
-    });
-
-    it('should not show event details when disabled', async () => {
-      renderEventSelector({ showEventDetails: false });
-      
-      const trigger = screen.getByRole('combobox');
-      fireEvent.click(trigger);
-      
-      await waitFor(() => {
-        expect(screen.queryByText('Test Venue 1')).not.toBeInTheDocument();
-        expect(screen.queryByText('Test Venue 2')).not.toBeInTheDocument();
-      });
-    });
-  });
-
-  describe('Loading State', () => {
-    it('should show loading spinner when loading', () => {
-      mockEventProviderValue.isLoading = true;
-      renderEventSelector();
-      
-      expect(screen.getByText('Loading events...')).toBeInTheDocument();
-      expect(screen.getByRole('status')).toBeInTheDocument();
-    });
-  });
-
-  describe('Error State', () => {
-    it('should show error message when error occurs', () => {
-      mockEventProviderValue.error = new Error('Failed to load events');
-      renderEventSelector();
-      
-      expect(screen.getByText('Failed to load events')).toBeInTheDocument();
-      expect(screen.getByTestId('lock-icon')).toBeInTheDocument();
-    });
-
-    it('should show retry button when error and retry enabled', () => {
-      mockEventProviderValue.error = new Error('Failed to load events');
-      renderEventSelector({ showRetryButton: true });
-      
-      const retryButton = screen.getByRole('button', { name: /retry/i });
-      expect(retryButton).toBeInTheDocument();
-      
-      fireEvent.click(retryButton);
-      expect(mockEventProviderValue.refreshEvents).toHaveBeenCalled();
-    });
-
-    it('should not show retry button when retry disabled', () => {
-      mockEventProviderValue.error = new Error('Failed to load events');
-      renderEventSelector({ showRetryButton: false });
-      
-      expect(screen.queryByRole('button', { name: /retry/i })).not.toBeInTheDocument();
-    });
-  });
-
-  describe('No Events State', () => {
-    it('should show no events message when no events available', () => {
-      mockEventProviderValue.events = [];
-      renderEventSelector({ showNoEventsMessage: true });
-      
-      expect(screen.getByText('No events available.')).toBeInTheDocument();
-      expect(screen.getByTestId('alert-circle-icon')).toBeInTheDocument();
-    });
-
-    it('should show refresh button when no events and retry enabled', () => {
-      mockEventProviderValue.events = [];
-      renderEventSelector({ showNoEventsMessage: true, showRetryButton: true });
-      
-      const refreshButton = screen.getByRole('button', { name: /refresh/i });
-      expect(refreshButton).toBeInTheDocument();
-      
-      fireEvent.click(refreshButton);
-      expect(mockEventProviderValue.refreshEvents).toHaveBeenCalled();
-    });
-
-    it('should return null when no events and message disabled', () => {
-      mockEventProviderValue.events = [];
-      const { container } = renderEventSelector({ showNoEventsMessage: false });
-      
-      expect(container.firstChild).toBeNull();
-    });
-  });
-
-  describe('Current Event Indicator', () => {
-    it('should show current indicator for selected event', async () => {
-      mockEventProviderValue.selectedEvent = mockEvents[0];
-      renderEventSelector();
-      
-      const trigger = screen.getByRole('combobox');
-      fireEvent.click(trigger);
-      
-      await waitFor(() => {
-        const currentEventItem = screen.getByText('Current');
-        expect(currentEventItem).toBeInTheDocument();
-      });
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('should have proper ARIA attributes', () => {
-      renderEventSelector();
-      
-      const combobox = screen.getByRole('combobox');
-      expect(combobox).toHaveAttribute('aria-expanded', 'false');
-    });
-
-    it('should be keyboard accessible', async () => {
-      renderEventSelector();
-      
-      const trigger = screen.getByRole('combobox');
-      trigger.focus();
-      fireEvent.keyDown(trigger, { key: 'Enter' });
-      
-      await waitFor(() => {
-        expect(screen.getByText('Test Event 1')).toBeInTheDocument();
-      });
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('should handle events without event_date', async () => {
-      renderEventSelector();
-      
-      const trigger = screen.getByRole('combobox');
-      fireEvent.click(trigger);
-      
-      await waitFor(() => {
-        const noDateItem = screen.getByText('No Date Event').closest('[role="option"]');
-        expect(noDateItem).not.toHaveTextContent('(Next)');
-      });
-    });
-
-    it('should handle events with both id and event_id', async () => {
-      const eventWithBothIds = {
-        ...mockEvents[0],
-        id: 'fallback-id',
-        event_id: 'primary-id'
-      };
-      mockEventProviderValue.events = [eventWithBothIds];
-      mockEventProviderValue.selectedEvent = eventWithBothIds;
-      
-      renderEventSelector();
-      
-      expect(screen.getByText('Test Event 1')).toBeInTheDocument();
-    });
-
-    it('should handle events with only id (no event_id)', async () => {
-      const eventWithOnlyId = {
-        ...mockEvents[0],
-        id: 'only-id'
-      };
-      delete eventWithOnlyId.event_id;
-      mockEventProviderValue.events = [eventWithOnlyId];
-      
-      renderEventSelector();
-      
-      const trigger = screen.getByRole('combobox');
-      fireEvent.click(trigger);
-      
-      await waitFor(() => {
-        expect(screen.getByText('Test Event 1')).toBeInTheDocument();
-      });
-    });
-  });
-});