@jmruthers/pace-core 0.5.75 → 0.5.76

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

@@ -0,0 +1,672 @@
+/**
+ * @file EventSelector Component Tests
+ * @package @jmruthers/pace-core
+ * @module Components/EventSelector
+ * @since 0.1.0
+ *
+ * Comprehensive test suite for the EventSelector component covering all functionality,
+ * event selection, error handling, and accessibility features.
+ */
+
+import React from 'react';
+import { screen, waitFor } 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(() => {
+    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', () => {
+      const { container } = renderWithProviders(<EventSelector className="custom-class" />);
+      
+      const select = screen.getByTestId('select');
+      expect(select).toHaveClass('custom-class');
+    });
+
+    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', () => {
+      const today = new Date('2024-03-10T00:00:00Z');
+      vi.useFakeTimers({ now: today });
+      
+      const setSelectedEventMock = vi.fn();
+      const onEventChangeMock = vi.fn();
+
+      mockUseEvents.mockReturnValue({
+        ...defaultMockContext,
+        selectedEvent: null,
+        setSelectedEvent: setSelectedEventMock,
+      });
+
+      renderWithProviders(<EventSelector onEventChange={onEventChangeMock} />);
+      
+      // Should auto-select the next event (event-1 with date 2024-03-15)
+      expect(setSelectedEventMock).toHaveBeenCalled();
+    });
+  });
+
+  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();
+    });
+  });
+});
+