@jmruthers/pace-core 0.6.2 → 0.6.3

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

@@ -1,720 +0,0 @@
-/**
- * @file EventSelector Component Tests
- * @description Comprehensive test suite for EventSelector component
- * @package @jmruthers/pace-core
- * @module Components/EventSelector
- * @since 0.1.0
- * 
- * Comprehensive test suite for EventSelector component following testing guidelines.
- * Tests cover all major functionality, edge cases, and user interactions.
- */
-
-import React from 'react';
-import { screen, waitFor, act } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { EventSelector, EventSelectorProps } from './EventSelector';
-import { renderWithProviders } from '../../__tests__/helpers/test-utils';
-import type { Event } from '../../types';
-
-// Mock the useEvents hook
-const mockUseEvents = vi.fn();
-vi.mock('../../hooks/useEvents', () => ({
-  useEvents: () => mockUseEvents(),
-}));
-
-// Mock child components
-let mockOnValueChange: ((value: string) => void) | null = null;
-
-vi.mock('../Select', () => ({
-  Select: ({ children, value, onValueChange, className }: any) => {
-    // Store the onValueChange callback for SelectItem to use
-    mockOnValueChange = onValueChange;
-    return (
-      <div data-testid="select" data-value={value} className={className}>
-        {children}
-      </div>
-    );
-  },
-  SelectContent: ({ children }: any) => (
-    <div data-testid="select-content">{children}</div>
-  ),
-  SelectItem: ({ children, value, className }: any) => (
-    <div 
-      data-testid={`select-item-${value}`}
-      className={className}
-      onClick={() => mockOnValueChange?.(value)}
-    >
-      {children}
-    </div>
-  ),
-  SelectTrigger: ({ children, className }: any) => (
-    <button data-testid="select-trigger" className={className}>
-      {children}
-    </button>
-  ),
-  SelectValue: ({ placeholder, children }: any) => (
-    <span data-testid="select-value">
-      {children || placeholder}
-    </span>
-  ),
-}));
-
-vi.mock('../Alert/Alert', () => ({
-  Alert: ({ children, variant }: any) => (
-    <div data-testid="alert" 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" 
-      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>
-  ),
-}));
-
-vi.mock('lucide-react', () => ({
-  RefreshCw: () => <span data-testid="icon-refresh">refresh</span>,
-  AlertCircle: () => <span data-testid="icon-alert">alert</span>,
-  Lock: () => <span data-testid="icon-lock">lock</span>,
-  Calendar: () => <span data-testid="icon-calendar">calendar</span>,
-  Star: () => <span data-testid="icon-star">star</span>,
-}));
-
-// Test data
-const mockEvents: Event[] = [
-  {
-    id: 'event-1',
-    event_id: 'event-1',
-    event_name: 'Spring Festival 2024',
-    event_date: '2024-03-15T00:00:00Z',
-    event_venue: 'City Park',
-    organisation_id: 'org-1',
-    created_at: '2023-01-01T00:00:00Z',
-    updated_at: '2023-01-01T00:00:00Z',
-  },
-  {
-    id: 'event-2',
-    event_id: 'event-2',
-    event_name: 'Summer Conference',
-    event_date: '2024-06-20T00:00:00Z',
-    event_venue: 'Convention Center',
-    organisation_id: 'org-1',
-    created_at: '2023-01-02T00:00:00Z',
-    updated_at: '2023-01-02T00:00:00Z',
-  },
-  {
-    id: 'event-3',
-    event_id: 'event-3',
-    event_name: 'Winter Gala',
-    event_date: '2024-12-01T00:00:00Z',
-    event_venue: 'Grand Hotel',
-    organisation_id: 'org-1',
-    created_at: '2023-01-03T00:00:00Z',
-    updated_at: '2023-01-03T00:00:00Z',
-  },
-];
-
-const mockSelectedEvent = mockEvents[0];
-
-const defaultMockContext = {
-  events: mockEvents,
-  selectedEvent: mockSelectedEvent,
-  isLoading: false,
-  error: null,
-  setSelectedEvent: vi.fn(),
-  refreshEvents: vi.fn().mockResolvedValue(undefined),
-};
-
-describe('EventSelector Component', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    
-    // Setup the default mock context
-    mockUseEvents.mockReturnValue(defaultMockContext);
-  });
-
-  afterEach(() => {
-    vi.useRealTimers();
-    mockOnValueChange = null;
-  });
-
-  describe('Rendering', () => {
-    it('renders with default props', () => {
-      renderWithProviders(<EventSelector />);
-      
-      expect(screen.getByTestId('select')).toBeInTheDocument();
-      expect(screen.getByTestId('select-trigger')).toBeInTheDocument();
-    });
-
-    it('renders with custom placeholder', () => {
-      mockUseEvents.mockReturnValue({
-        ...defaultMockContext,
-        selectedEvent: null, // No selected event should show placeholder
-      });
-
-      renderWithProviders(<EventSelector placeholder="Choose an event" />);
-      
-      expect(screen.getByTestId('select-value')).toBeInTheDocument();
-    });
-
-    it('renders with custom className', () => {
-      renderWithProviders(<EventSelector className="custom-class" />);
-      
-      const select = screen.getByTestId('select');
-      expect(select).toBeInTheDocument();
-      expect(select).toBeVisible();
-    });
-
-    it('renders all events in dropdown', () => {
-      renderWithProviders(<EventSelector />);
-      
-      expect(screen.getByTestId('select-content')).toBeInTheDocument();
-    });
-  });
-
-  describe('Loading State', () => {
-    it('shows loading spinner when isLoading is true', () => {
-      mockUseEvents.mockReturnValue({
-        ...defaultMockContext,
-        isLoading: true,
-      });
-
-      renderWithProviders(<EventSelector />);
-      
-      expect(screen.getByTestId('loading-spinner')).toBeInTheDocument();
-      expect(screen.getByText('Loading events...')).toBeInTheDocument();
-    });
-  });
-
-  describe('Error State', () => {
-    it('shows error message when error occurs', () => {
-      const error = new Error('Failed to load events');
-      mockUseEvents.mockReturnValue({
-        ...defaultMockContext,
-        error,
-      });
-
-      renderWithProviders(<EventSelector />);
-      
-      expect(screen.getByTestId('alert')).toBeInTheDocument();
-      expect(screen.getByTestId('alert')).toHaveAttribute('data-variant', 'destructive');
-      expect(screen.getByText('Failed to load events')).toBeInTheDocument();
-    });
-
-    it('shows retry button when error and showRetryButton is true', () => {
-      const error = new Error('Failed to load events');
-      mockUseEvents.mockReturnValue({
-        ...defaultMockContext,
-        error,
-      });
-
-      renderWithProviders(<EventSelector showRetryButton={true} />);
-      
-      expect(screen.getByTestId('button')).toBeInTheDocument();
-      expect(screen.getByText('Retry')).toBeInTheDocument();
-    });
-
-    it('hides retry button when showRetryButton is false', () => {
-      const error = new Error('Failed to load events');
-      mockUseEvents.mockReturnValue({
-        ...defaultMockContext,
-        error,
-      });
-
-      renderWithProviders(<EventSelector showRetryButton={false} />);
-      
-      expect(screen.queryByTestId('button')).not.toBeInTheDocument();
-    });
-
-    it('calls refreshEvents when retry button is clicked', async () => {
-      const refreshEventsMock = vi.fn().mockResolvedValue(undefined);
-      const error = new Error('Failed to load events');
-      
-      mockUseEvents.mockReturnValue({
-        ...defaultMockContext,
-        error,
-        refreshEvents: refreshEventsMock,
-      });
-
-      renderWithProviders(<EventSelector showRetryButton={true} />);
-      
-      const retryButton = screen.getByTestId('button');
-      const user = userEvent.setup();
-      await user.click(retryButton);
-      
-      expect(refreshEventsMock).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe('No Events State', () => {
-    it('shows no events message when showNoEventsMessage is true and no events', () => {
-      mockUseEvents.mockReturnValue({
-        ...defaultMockContext,
-        events: [],
-      });
-
-      renderWithProviders(<EventSelector showNoEventsMessage={true} />);
-      
-      expect(screen.getByTestId('alert')).toBeInTheDocument();
-      expect(screen.getByText('No events available.')).toBeInTheDocument();
-    });
-
-    it('hides message when showNoEventsMessage is false and no events', () => {
-      mockUseEvents.mockReturnValue({
-        ...defaultMockContext,
-        events: [],
-      });
-
-      const { container } = renderWithProviders(<EventSelector showNoEventsMessage={false} />);
-      
-      expect(container.firstChild).toBeNull();
-    });
-
-    it('shows refresh button when no events and showRetryButton is true', () => {
-      mockUseEvents.mockReturnValue({
-        ...defaultMockContext,
-        events: [],
-      });
-
-      renderWithProviders(<EventSelector showRetryButton={true} />);
-      
-      expect(screen.getByTestId('button')).toBeInTheDocument();
-      expect(screen.getByText('Refresh')).toBeInTheDocument();
-    });
-  });
-
-  describe('Event Selection', () => {
-    it('calls onEventChange when an event is selected', async () => {
-      const onEventChangeMock = vi.fn();
-      
-      renderWithProviders(
-        <EventSelector onEventChange={onEventChangeMock} />
-      );
-      
-      // Find and click an event item
-      const user = userEvent.setup();
-      const eventItem = screen.getByTestId('select-item-event-2');
-      await user.click(eventItem);
-      
-      expect(onEventChangeMock).toHaveBeenCalledTimes(1);
-    });
-
-    it('calls setSelectedEvent when an event is selected', async () => {
-      const setSelectedEventMock = vi.fn();
-      
-      mockUseEvents.mockReturnValue({
-        ...defaultMockContext,
-        setSelectedEvent: setSelectedEventMock,
-      });
-
-      renderWithProviders(<EventSelector />);
-      
-      const user = userEvent.setup();
-      const eventItem = screen.getByTestId('select-item-event-2');
-      await user.click(eventItem);
-      
-      expect(setSelectedEventMock).toHaveBeenCalled();
-    });
-
-    it('displays selected event name and date', () => {
-      renderWithProviders(<EventSelector />);
-      
-      expect(screen.getByTestId('select')).toHaveAttribute('data-value', 'event-1');
-    });
-  });
-
-  describe('Event Sorting', () => {
-    it('sorts events by date descending (newest first)', () => {
-      const unsortedEvents: Event[] = [
-        {
-          id: 'event-old',
-          event_id: 'event-old',
-          event_name: 'Old Event',
-          event_date: '2024-01-01T00:00:00Z',
-          organisation_id: 'org-1',
-          created_at: '2023-01-01T00:00:00Z',
-          updated_at: '2023-01-01T00:00:00Z',
-        },
-        {
-          id: 'event-new',
-          event_id: 'event-new',
-          event_name: 'New Event',
-          event_date: '2024-12-31T00:00:00Z',
-          organisation_id: 'org-1',
-          created_at: '2023-01-02T00:00:00Z',
-          updated_at: '2023-01-02T00:00:00Z',
-        },
-      ];
-
-      mockUseEvents.mockReturnValue({
-        ...defaultMockContext,
-        events: unsortedEvents,
-      });
-
-      renderWithProviders(<EventSelector />);
-      
-      // The newest event should appear first in the DOM
-      const items = screen.getAllByTestId(/^select-item-/);
-      expect(items[0]).toHaveAttribute('data-testid', 'select-item-event-new');
-    });
-  });
-
-  describe('Auto-Selection', () => {
-    it('auto-selects next upcoming event when no event is selected', async () => {
-      const setSelectedEventMock = vi.fn();
-      const onEventChangeMock = vi.fn();
-
-      // The component's useEffect depends on events.length, so when events.length changes,
-      // it should trigger. However, refs are initialized with the current value, so we need
-      // to simulate the scenario where events are loaded after the component mounts.
-      // 
-      // Strategy: Start with a different events array length, then change it
-      // This ensures eventsLengthChanged will be true
-      
-      // First render: Start with one event (different length than what we'll add)
-      mockUseEvents.mockReturnValue({
-        ...defaultMockContext,
-        events: [mockEvents[0]], // Start with 1 event
-        selectedEvent: null,
-        isLoading: false,
-        setSelectedEvent: setSelectedEventMock,
-        refreshEvents: vi.fn(),
-        clearEventSelection: vi.fn(),
-        eventLoading: false,
-      });
-
-      const { rerender } = renderWithProviders(<EventSelector onEventChange={onEventChangeMock} />);
-      
-      // Wait for initial render
-      await act(async () => {
-        await new Promise(resolve => setTimeout(resolve, 10));
-      });
-      
-      // Now change to all events (length changes from 1 to 3) - this triggers eventsLengthChanged
-      await act(async () => {
-        mockUseEvents.mockReturnValue({
-          ...defaultMockContext,
-          events: mockEvents, // Length changes from 1 to 3
-          selectedEvent: null, // Still no event selected
-          isLoading: false,
-          setSelectedEvent: setSelectedEventMock,
-          refreshEvents: vi.fn(),
-          clearEventSelection: vi.fn(),
-          eventLoading: false,
-        });
-
-        rerender(<EventSelector onEventChange={onEventChangeMock} />);
-      });
-      
-      // Wait for the effect to run and auto-select
-      await waitFor(() => {
-        expect(setSelectedEventMock).toHaveBeenCalled();
-      }, { timeout: 2000 });
-      
-      // Verify it selected an event
-      // Note: The component selects the next upcoming event based on the current date
-      // Since we're using real dates, it will select the event closest to today that's in the future
-      // or the most recent past event if all are in the past
-      expect(setSelectedEventMock).toHaveBeenCalled();
-      
-      // Get the actual event that was selected
-      const selectedEvent = setSelectedEventMock.mock.calls[0][0];
-      expect(selectedEvent).toBeDefined();
-      expect(selectedEvent.event_id).toBeDefined();
-      expect(selectedEvent.event_date).toBeDefined();
-    });
-  });
-
-  describe('Event Details Display', () => {
-    it('shows event details when showEventDetails is true', () => {
-      renderWithProviders(<EventSelector showEventDetails={true} />);
-      
-      expect(screen.getByTestId('select-content')).toBeInTheDocument();
-    });
-
-    it('hides event details when showEventDetails is false', () => {
-      renderWithProviders(<EventSelector showEventDetails={false} />);
-      
-      // Details should not be visible in the rendered content
-      const content = screen.getByTestId('select-content');
-      expect(content).toBeInTheDocument();
-    });
-  });
-
-  describe('Next Event Indicator', () => {
-    it('shows next event indicator when showNextEventIndicator is true', () => {
-      const today = new Date('2024-03-10T12:00:00Z');
-      vi.useFakeTimers({ now: today });
-
-      renderWithProviders(<EventSelector showNextEventIndicator={true} />);
-      
-      // Should render the star icon for next events (events-1, 2, 3 are in the future)
-      expect(screen.getAllByTestId('icon-star').length).toBeGreaterThan(0);
-    });
-
-    it('hides next event indicator when showNextEventIndicator is false', () => {
-      renderWithProviders(<EventSelector showNextEventIndicator={false} />);
-      
-      // No star icons should be present
-      expect(screen.queryByTestId('icon-star')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('Format Event Date', () => {
-    it('formats today\'s date as "Today"', () => {
-      const today = new Date('2024-03-15T12:00:00Z');
-      vi.useFakeTimers({ now: today });
-
-      const todayEvent: Event[] = [{
-        id: 'event-today',
-        event_id: 'event-today',
-        event_name: 'Today Event',
-        event_date: '2024-03-15T00:00:00Z',
-        organisation_id: 'org-1',
-        created_at: '2024-01-01T00:00:00Z',
-        updated_at: '2024-01-01T00:00:00Z',
-      }];
-
-      mockUseEvents.mockReturnValue({
-        ...defaultMockContext,
-        events: todayEvent,
-        selectedEvent: todayEvent[0],
-      });
-
-      renderWithProviders(<EventSelector />);
-      
-      // Should display "Today" for today's event
-      expect(screen.getByText('Today')).toBeInTheDocument();
-    });
-
-    it('formats tomorrow\'s date as "Tomorrow"', () => {
-      const today = new Date('2024-03-15T12:00:00Z');
-      vi.useFakeTimers({ now: today });
-
-      const tomorrowEvent: Event[] = [{
-        id: 'event-tomorrow',
-        event_id: 'event-tomorrow',
-        event_name: 'Tomorrow Event',
-        event_date: '2024-03-16T00:00:00Z',
-        organisation_id: 'org-1',
-        created_at: '2024-01-01T00:00:00Z',
-        updated_at: '2024-01-01T00:00:00Z',
-      }];
-
-      mockUseEvents.mockReturnValue({
-        ...defaultMockContext,
-        events: tomorrowEvent,
-        selectedEvent: tomorrowEvent[0],
-      });
-
-      renderWithProviders(<EventSelector />);
-      
-      // Should display "Tomorrow" for tomorrow's event
-      expect(screen.getByText('Tomorrow')).toBeInTheDocument();
-    });
-
-    it('formats past/future dates as locale date string', () => {
-      const today = new Date('2024-03-15T12:00:00Z');
-      vi.useFakeTimers({ now: today });
-
-      const futureEvent: Event[] = [{
-        id: 'event-future',
-        event_id: 'event-future',
-        event_name: 'Future Event',
-        event_date: '2024-06-20T00:00:00Z',
-        organisation_id: 'org-1',
-        created_at: '2024-01-01T00:00:00Z',
-        updated_at: '2024-01-01T00:00:00Z',
-      }];
-
-      mockUseEvents.mockReturnValue({
-        ...defaultMockContext,
-        events: futureEvent,
-        selectedEvent: futureEvent[0],
-      });
-
-      renderWithProviders(<EventSelector />);
-      
-      // Should display formatted date
-      const dateString = new Date('2024-06-20T00:00:00Z').toLocaleDateString();
-      expect(screen.getByText(dateString)).toBeInTheDocument();
-    });
-  });
-
-  describe('Is Next Event', () => {
-    it('identifies events on or after today as next events', () => {
-      const today = new Date('2024-03-15T12:00:00Z');
-      vi.useFakeTimers({ now: today });
-
-      const futureEvent: Event[] = [{
-        id: 'event-future',
-        event_id: 'event-future',
-        event_name: 'Future Event',
-        event_date: '2024-06-20T00:00:00Z',
-        organisation_id: 'org-1',
-        created_at: '2024-01-01T00:00:00Z',
-        updated_at: '2024-01-01T00:00:00Z',
-      }];
-
-      mockUseEvents.mockReturnValue({
-        ...defaultMockContext,
-        events: futureEvent,
-      });
-
-      renderWithProviders(<EventSelector showNextEventIndicator={true} />);
-      
-      // Should show star indicator for future events
-      expect(screen.getByTestId('icon-star')).toBeInTheDocument();
-    });
-
-    it('does not identify past events as next events', () => {
-      const today = new Date('2024-03-15T12:00:00Z');
-      vi.useFakeTimers({ now: today });
-
-      const pastEvent: Event[] = [{
-        id: 'event-past',
-        event_id: 'event-past',
-        event_name: 'Past Event',
-        event_date: '2024-01-01T00:00:00Z',
-        organisation_id: 'org-1',
-        created_at: '2024-01-01T00:00:00Z',
-        updated_at: '2024-01-01T00:00:00Z',
-      }];
-
-      mockUseEvents.mockReturnValue({
-        ...defaultMockContext,
-        events: pastEvent,
-      });
-
-      renderWithProviders(<EventSelector showNextEventIndicator={true} />);
-      
-      // Should not show star indicator for past events
-      expect(screen.queryByTestId('icon-star')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('Integration with useEvents Hook', () => {
-    it('uses events from useEvents hook', () => {
-      const customEvents: Event[] = [
-        {
-          id: 'custom-event',
-          event_id: 'custom-event',
-          event_name: 'Custom Event',
-          event_date: '2024-12-01T00:00:00Z',
-          organisation_id: 'org-1',
-          created_at: '2024-01-01T00:00:00Z',
-          updated_at: '2024-01-01T00:00:00Z',
-        },
-      ];
-
-      mockUseEvents.mockReturnValue({
-        ...defaultMockContext,
-        events: customEvents,
-      });
-
-      renderWithProviders(<EventSelector />);
-      
-      expect(mockUseEvents).toHaveBeenCalled();
-    });
-
-    it('calls setSelectedEvent from useEvents hook when event changes', async () => {
-      const setSelectedEventMock = vi.fn();
-      
-      mockUseEvents.mockReturnValue({
-        ...defaultMockContext,
-        setSelectedEvent: setSelectedEventMock,
-      });
-
-      renderWithProviders(<EventSelector />);
-      
-      const user = userEvent.setup();
-      const eventItem = screen.getByTestId('select-item-event-2');
-      await user.click(eventItem);
-      
-      expect(setSelectedEventMock).toHaveBeenCalled();
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('handles events without event_date gracefully', () => {
-      const eventsWithoutDate: Event[] = [{
-        id: 'no-date-event',
-        event_id: 'no-date-event',
-        event_name: 'Event Without Date',
-        organisation_id: 'org-1',
-        created_at: '2024-01-01T00:00:00Z',
-        updated_at: '2024-01-01T00:00:00Z',
-      }];
-
-      mockUseEvents.mockReturnValue({
-        ...defaultMockContext,
-        events: eventsWithoutDate,
-        selectedEvent: eventsWithoutDate[0],
-      });
-
-      renderWithProviders(<EventSelector />);
-      
-      expect(screen.getByTestId('select')).toBeInTheDocument();
-    });
-
-    it('handles events with missing venue gracefully', () => {
-      const eventsWithoutVenue: Event[] = [{
-        id: 'no-venue-event',
-        event_id: 'no-venue-event',
-        event_name: 'Event Without Venue',
-        event_date: '2024-12-01T00:00:00Z',
-        organisation_id: 'org-1',
-        created_at: '2024-01-01T00:00:00Z',
-        updated_at: '2024-01-01T00:00:00Z',
-      }];
-
-      mockUseEvents.mockReturnValue({
-        ...defaultMockContext,
-        events: eventsWithoutVenue,
-        selectedEvent: eventsWithoutVenue[0],
-      });
-
-      renderWithProviders(<EventSelector />);
-      
-      expect(screen.getByTestId('select')).toBeInTheDocument();
-    });
-
-    it('handles rapid event changes without errors', async () => {
-      const user = userEvent.setup();
-      
-      renderWithProviders(<EventSelector />);
-      
-      // Rapidly change events
-      const event1 = screen.getByTestId('select-item-event-1');
-      const event2 = screen.getByTestId('select-item-event-2');
-      
-      await user.click(event1);
-      await user.click(event2);
-      await user.click(event1);
-      
-      expect(screen.getByTestId('select')).toBeInTheDocument();
-    });
-  });
-});
-