@jmruthers/pace-core 0.5.67 → 0.5.69

package/src/providers/__tests__/EventProvider.test.tsx.backup

@@ -0,0 +1,824 @@
+/**
+ * @file EventProvider Component Tests
+ * @package @jmruthers/pace-core
+ * @module Providers/__tests__
+ * @since 0.4.0
+ * 
+ * Comprehensive test suite for EventProvider component covering all critical functionality.
+ * Follows testing guidelines with proper structure, naming, and best practices.
+ */
+
+import React from 'react';
+import { render, screen, waitFor, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { EventProvider, useEvents } from '../EventProvider';
+import { createMockSupabaseClient, testDataGenerators } from '../../__tests__/helpers/test-utils';
+
+// Mock the debug logger
+vi.mock('../../utils/debugLogger', () => ({
+  DebugLogger: {
+    log: vi.fn(),
+  },
+}));
+
+// Mock the organisation context utility
+vi.mock('../../utils/organisationContext', () => ({
+  setOrganisationContext: vi.fn().mockResolvedValue(undefined),
+}));
+
+// Mock UnifiedAuthProvider
+const mockUnifiedAuthState = {
+  user: null as any,
+  session: null as any,
+  supabase: null as any,
+  appName: 'test-app',
+  setSelectedEventId: vi.fn(),
+};
+
+vi.mock('../UnifiedAuthProvider', () => ({
+  useUnifiedAuth: () => ({
+    user: mockUnifiedAuthState.user,
+    session: mockUnifiedAuthState.session,
+    supabase: mockUnifiedAuthState.supabase,
+    appName: mockUnifiedAuthState.appName,
+    setSelectedEventId: mockUnifiedAuthState.setSelectedEventId,
+  }),
+}));
+
+// Mock OrganisationProvider
+const mockOrganisationState = {
+  selectedOrganisation: null as any,
+  ensureOrganisationContext: vi.fn(),
+};
+
+vi.mock('../OrganisationProvider', () => ({
+  useOrganisations: () => ({
+    selectedOrganisation: mockOrganisationState.selectedOrganisation,
+    ensureOrganisationContext: mockOrganisationState.ensureOrganisationContext,
+  }),
+}));
+
+// Test component that uses the hook
+const TestComponent = () => {
+  const { events, isLoading, error, selectedEvent, setSelectedEvent, refreshEvents } = useEvents();
+  
+  return (
+    <div data-testid="test-component">
+      <div data-testid="events-count">{events.length}</div>
+      <div data-testid="is-loading">{isLoading ? 'true' : 'false'}</div>
+      <div data-testid="error">{error?.message || 'no-error'}</div>
+      <div data-testid="selected-event">{selectedEvent?.event_name || 'no-event'}</div>
+      <div data-testid="selected-event-id">{selectedEvent?.event_id || 'no-id'}</div>
+      <button onClick={() => setSelectedEvent(events[0] || null)}>
+        Select First Event
+      </button>
+      <button onClick={() => setSelectedEvent(null)}>
+        Clear Event
+      </button>
+      <button onClick={() => refreshEvents()}>
+        Refresh Events
+      </button>
+    </div>
+  );
+};
+
+// Wrapper component
+const TestWrapper = ({ 
+  children, 
+  supabaseClient, 
+  user = null, 
+  session = null, 
+  appName = 'test-app',
+  selectedOrganisation = null 
+}: { 
+  children: React.ReactNode; 
+  supabaseClient?: any;
+  user?: any;
+  session?: any;
+  appName?: string;
+  selectedOrganisation?: any;
+}) => {
+  // Update mock state
+  mockUnifiedAuthState.user = user;
+  mockUnifiedAuthState.session = session;
+  mockUnifiedAuthState.supabase = supabaseClient;
+  mockUnifiedAuthState.appName = appName;
+  mockOrganisationState.selectedOrganisation = selectedOrganisation;
+  
+  return (
+    <EventProvider supabaseClient={supabaseClient}>
+      {children}
+    </EventProvider>
+  );
+};
+
+describe('[component] EventProvider', () => {
+  let mockSupabaseClient: any;
+
+  const mockEvents = [
+    {
+      event_id: 'event-1',
+      event_name: 'Test Event 1',
+      event_date: '2024-12-31T18:00:00Z',
+      event_venue: 'Test Venue 1',
+      event_participants: 100,
+      event_colours: { primary: '#ff0000', secondary: '#00ff00' },
+      organisation_id: 'org-1',
+      is_visible: true,
+    },
+    {
+      event_id: 'event-2',
+      event_name: 'Test Event 2',
+      event_date: '2025-01-15T19:00:00Z',
+      event_venue: 'Test Venue 2',
+      event_participants: 150,
+      event_colours: { primary: '#0000ff', secondary: '#ffff00' },
+      organisation_id: 'org-1',
+      is_visible: true,
+    },
+    {
+      event_id: 'event-3',
+      event_name: 'Past Event',
+      event_date: '2023-01-01T12:00:00Z',
+      event_venue: 'Old Venue',
+      event_participants: 50,
+      event_colours: { primary: '#888888', secondary: '#cccccc' },
+      organisation_id: 'org-1',
+      is_visible: true,
+    }
+  ];
+
+  const mockOrganisation = {
+    id: 'org-1',
+    name: 'test-org',
+    display_name: 'Test Organisation',
+    subscription_tier: 'standard',
+    settings: {},
+    is_active: true,
+    parent_id: null,
+    created_at: '2023-01-01T00:00:00Z',
+    updated_at: '2023-01-01T00:00:00Z'
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    
+    // Create mock Supabase client
+    mockSupabaseClient = createMockSupabaseClient();
+    
+    // Mock RPC function for getting events
+    mockSupabaseClient.rpc = vi.fn().mockImplementation((functionName: string, params: any) => {
+      if (functionName === 'data_user_events_get') {
+        return Promise.resolve({
+          data: mockEvents,
+          error: null
+        });
+      }
+      return Promise.resolve({ data: null, error: null });
+    });
+
+    // Mock database queries
+    mockSupabaseClient.from = vi.fn().mockReturnValue({
+      select: vi.fn().mockReturnValue({
+        eq: vi.fn().mockReturnValue({
+          order: vi.fn().mockResolvedValue({
+            data: mockEvents,
+            error: null,
+          }),
+        }),
+      }),
+    });
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    localStorage.clear();
+    sessionStorage.clear();
+  });
+
+  describe('Rendering', () => {
+    it('renders with children', () => {
+      render(
+        <TestWrapper supabaseClient={mockSupabaseClient}>
+          <TestComponent />
+        </TestWrapper>
+      );
+
+      expect(screen.getByTestId('test-component')).toBeInTheDocument();
+    });
+
+    it('renders with default state', () => {
+      render(
+        <TestWrapper supabaseClient={mockSupabaseClient}>
+          <TestComponent />
+        </TestWrapper>
+      );
+
+      expect(screen.getByTestId('events-count')).toHaveTextContent('0');
+      expect(screen.getByTestId('is-loading')).toHaveTextContent('false');
+      expect(screen.getByTestId('error')).toHaveTextContent('no-error');
+      expect(screen.getByTestId('selected-event')).toHaveTextContent('no-event');
+    });
+
+    it('renders without supabase client', () => {
+      render(
+        <TestWrapper>
+          <TestComponent />
+        </TestWrapper>
+      );
+
+      expect(screen.getByTestId('test-component')).toBeInTheDocument();
+    });
+  });
+
+  describe('Event Loading', () => {
+    it('loads events successfully', async () => {
+      const user = testDataGenerators.user({ id: 'user-1' });
+      const session = testDataGenerators.session();
+      
+      render(
+        <TestWrapper 
+          supabaseClient={mockSupabaseClient} 
+          user={user} 
+          session={session}
+          selectedOrganisation={mockOrganisation}
+        >
+          <TestComponent />
+        </TestWrapper>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('events-count')).toHaveTextContent('3');
+        expect(screen.getByTestId('is-loading')).toHaveTextContent('false');
+        expect(screen.getByTestId('error')).toHaveTextContent('no-error');
+      }, { timeout: 3000 });
+    }, 10000);
+
+    it('handles loading errors', async () => {
+      const user = testDataGenerators.user({ id: 'user-1' });
+      const session = testDataGenerators.session();
+      
+      // Mock RPC error
+      mockSupabaseClient.rpc.mockImplementation((functionName: string, params: any) => {
+        if (functionName === 'data_user_events_get') {
+          return Promise.resolve({
+            data: null,
+            error: new Error('Failed to fetch events')
+          });
+        }
+        return Promise.resolve({ data: null, error: null });
+      });
+
+      render(
+        <TestWrapper 
+          supabaseClient={mockSupabaseClient} 
+          user={user} 
+          session={session}
+          selectedOrganisation={mockOrganisation}
+        >
+          <TestComponent />
+        </TestWrapper>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('error')).toHaveTextContent('Failed to fetch events');
+        expect(screen.getByTestId('events-count')).toHaveTextContent('0');
+        expect(screen.getByTestId('is-loading')).toHaveTextContent('false');
+      }, { timeout: 5000 });
+    });
+
+    it('skips loading when missing dependencies', async () => {
+      render(
+        <TestWrapper supabaseClient={mockSupabaseClient}>
+          <TestComponent />
+        </TestWrapper>
+      );
+
+      // Should not load events without user/session/organisation
+      expect(screen.getByTestId('events-count')).toHaveTextContent('0');
+      expect(screen.getByTestId('is-loading')).toHaveTextContent('false');
+    });
+
+    it('handles empty events array', async () => {
+      const user = testDataGenerators.user({ id: 'user-1' });
+      const session = testDataGenerators.session();
+      
+      // Mock empty events
+      mockSupabaseClient.rpc.mockImplementation((functionName: string, params: any) => {
+        if (functionName === 'data_user_events_get') {
+          return Promise.resolve({
+            data: [],
+            error: null
+          });
+        }
+        return Promise.resolve({ data: null, error: null });
+      });
+
+      render(
+        <TestWrapper 
+          supabaseClient={mockSupabaseClient} 
+          user={user} 
+          session={session}
+          selectedOrganisation={mockOrganisation}
+        >
+          <TestComponent />
+        </TestWrapper>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('events-count')).toHaveTextContent('0');
+        expect(screen.getByTestId('is-loading')).toHaveTextContent('false');
+      }, { timeout: 5000 });
+    });
+  });
+
+  describe('Event Selection', () => {
+    it('auto-selects next event by date', async () => {
+      const user = testDataGenerators.user({ id: 'user-1' });
+      const session = testDataGenerators.session();
+      
+      render(
+        <TestWrapper 
+          supabaseClient={mockSupabaseClient} 
+          user={user} 
+          session={session}
+          selectedOrganisation={mockOrganisation}
+        >
+          <TestComponent />
+        </TestWrapper>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('events-count')).toHaveTextContent('3');
+        expect(screen.getByTestId('is-loading')).toHaveTextContent('false');
+      }, { timeout: 5000 });
+
+      // Should auto-select the next event (event-1, which is the earliest future event)
+      await waitFor(() => {
+        expect(screen.getByTestId('selected-event')).toHaveTextContent('Test Event 1');
+        expect(screen.getByTestId('selected-event-id')).toHaveTextContent('event-1');
+      });
+    });
+
+    it('allows manual event selection', async () => {
+      const user = testDataGenerators.user({ id: 'user-1' });
+      const session = testDataGenerators.session();
+      
+      render(
+        <TestWrapper 
+          supabaseClient={mockSupabaseClient} 
+          user={user} 
+          session={session}
+          selectedOrganisation={mockOrganisation}
+        >
+          <TestComponent />
+        </TestWrapper>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('events-count')).toHaveTextContent('3');
+      }, { timeout: 5000 });
+
+      // Select first event manually
+      const selectButton = screen.getByText('Select First Event');
+      await userEvent.click(selectButton);
+
+      expect(screen.getByTestId('selected-event')).toHaveTextContent('Test Event 1');
+      expect(screen.getByTestId('selected-event-id')).toHaveTextContent('event-1');
+    });
+
+    it('allows clearing event selection', async () => {
+      const user = testDataGenerators.user({ id: 'user-1' });
+      const session = testDataGenerators.session();
+      
+      render(
+        <TestWrapper 
+          supabaseClient={mockSupabaseClient} 
+          user={user} 
+          session={session}
+          selectedOrganisation={mockOrganisation}
+        >
+          <TestComponent />
+        </TestWrapper>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('events-count')).toHaveTextContent('3');
+      }, { timeout: 5000 });
+
+      // Clear event selection
+      const clearButton = screen.getByText('Clear Event');
+      await userEvent.click(clearButton);
+
+      expect(screen.getByTestId('selected-event')).toHaveTextContent('no-event');
+      expect(screen.getByTestId('selected-event-id')).toHaveTextContent('no-id');
+    });
+
+    it('validates event organisation before selection', async () => {
+      const user = testDataGenerators.user({ id: 'user-1' });
+      const session = testDataGenerators.session();
+      
+      // Create event with different organisation
+      const invalidEvent = {
+        ...mockEvents[0],
+        organisation_id: 'different-org'
+      };
+
+      render(
+        <TestWrapper 
+          supabaseClient={mockSupabaseClient} 
+          user={user} 
+          session={session}
+          selectedOrganisation={mockOrganisation}
+        >
+          <TestComponent />
+        </TestWrapper>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('events-count')).toHaveTextContent('3');
+      }, { timeout: 5000 });
+
+      // Try to select invalid event
+      const TestInvalidSelectionComponent = () => {
+        const { setSelectedEvent } = useEvents();
+        
+        const handleInvalidSelection = () => {
+          setSelectedEvent(invalidEvent as any);
+        };
+
+        return (
+          <button onClick={handleInvalidSelection}>
+            Select Invalid Event
+          </button>
+        );
+      };
+
+      render(
+        <TestWrapper 
+          supabaseClient={mockSupabaseClient} 
+          user={user} 
+          session={session}
+          selectedOrganisation={mockOrganisation}
+        >
+          <TestInvalidSelectionComponent />
+        </TestWrapper>
+      );
+
+      const invalidButton = screen.getByText('Select Invalid Event');
+      await userEvent.click(invalidButton);
+
+      // Should not select the invalid event
+      expect(screen.getByTestId('selected-event')).toHaveTextContent('no-event');
+    });
+  });
+
+  describe('Event Persistence', () => {
+    it('persists event selection in sessionStorage', async () => {
+      const user = testDataGenerators.user({ id: 'user-1' });
+      const session = testDataGenerators.session();
+      
+      render(
+        <TestWrapper 
+          supabaseClient={mockSupabaseClient} 
+          user={user} 
+          session={session}
+          selectedOrganisation={mockOrganisation}
+        >
+          <TestComponent />
+        </TestWrapper>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('events-count')).toHaveTextContent('3');
+      }, { timeout: 5000 });
+
+      // Select an event
+      const selectButton = screen.getByText('Select First Event');
+      await userEvent.click(selectButton);
+
+      // Check that it's persisted
+      expect(sessionStorage.getItem('pace-core-selected-event')).toBe('event-1');
+      expect(localStorage.getItem('pace-core-selected-event')).toBe('event-1');
+    });
+
+    it('restores persisted event selection', async () => {
+      const user = testDataGenerators.user({ id: 'user-1' });
+      const session = testDataGenerators.session();
+      
+      // Set persisted event
+      sessionStorage.setItem('pace-core-selected-event', 'event-2');
+
+      render(
+        <TestWrapper 
+          supabaseClient={mockSupabaseClient} 
+          user={user} 
+          session={session}
+          selectedOrganisation={mockOrganisation}
+        >
+          <TestComponent />
+        </TestWrapper>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('events-count')).toHaveTextContent('3');
+        expect(screen.getByTestId('selected-event')).toHaveTextContent('Test Event 2');
+      }, { timeout: 5000 });
+    });
+
+    it('clears invalid persisted event', async () => {
+      const user = testDataGenerators.user({ id: 'user-1' });
+      const session = testDataGenerators.session();
+      
+      // Set invalid persisted event
+      sessionStorage.setItem('pace-core-selected-event', 'invalid-event-id');
+
+      render(
+        <TestWrapper 
+          supabaseClient={mockSupabaseClient} 
+          user={user} 
+          session={session}
+          selectedOrganisation={mockOrganisation}
+        >
+          <TestComponent />
+        </TestWrapper>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('events-count')).toHaveTextContent('3');
+      }, { timeout: 5000 });
+
+      // Should clear invalid persisted event and auto-select next
+      expect(sessionStorage.getItem('pace-core-selected-event')).toBeNull();
+      expect(localStorage.getItem('pace-core-selected-event')).toBeNull();
+    });
+  });
+
+  describe('Refresh Functionality', () => {
+    it('refreshes events', async () => {
+      const user = testDataGenerators.user({ id: 'user-1' });
+      const session = testDataGenerators.session();
+      
+      render(
+        <TestWrapper 
+          supabaseClient={mockSupabaseClient} 
+          user={user} 
+          session={session}
+          selectedOrganisation={mockOrganisation}
+        >
+          <TestComponent />
+        </TestWrapper>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('events-count')).toHaveTextContent('3');
+      }, { timeout: 5000 });
+
+      // Refresh events
+      const refreshButton = screen.getByText('Refresh Events');
+      await userEvent.click(refreshButton);
+
+      // Should reload events
+      await waitFor(() => {
+        expect(screen.getByTestId('events-count')).toHaveTextContent('3');
+      });
+    });
+  });
+
+  describe('Helper Functions', () => {
+    it('correctly identifies next event by date', async () => {
+      const user = testDataGenerators.user({ id: 'user-1' });
+      const session = testDataGenerators.session();
+      
+      render(
+        <TestWrapper 
+          supabaseClient={mockSupabaseClient} 
+          user={user} 
+          session={session}
+          selectedOrganisation={mockOrganisation}
+        >
+          <TestComponent />
+        </TestWrapper>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('events-count')).toHaveTextContent('3');
+      }, { timeout: 5000 });
+
+      // Should select the earliest future event (event-1)
+      await waitFor(() => {
+        expect(screen.getByTestId('selected-event')).toHaveTextContent('Test Event 1');
+      });
+    });
+
+    it('handles events with no date', async () => {
+      const user = testDataGenerators.user({ id: 'user-1' });
+      const session = testDataGenerators.session();
+      
+      // Mock events with no date
+      const eventsWithoutDate = [
+        {
+          event_id: 'event-no-date',
+          event_name: 'Event Without Date',
+          event_date: null,
+          event_venue: 'Test Venue',
+          event_participants: 100,
+          event_colours: { primary: '#ff0000', secondary: '#00ff00' },
+          organisation_id: 'org-1',
+          is_visible: true,
+        }
+      ];
+
+      mockSupabaseClient.rpc.mockImplementation((functionName: string, params: any) => {
+        if (functionName === 'data_user_events_get') {
+          return Promise.resolve({
+            data: eventsWithoutDate,
+            error: null
+          });
+        }
+        return Promise.resolve({ data: null, error: null });
+      });
+
+      render(
+        <TestWrapper 
+          supabaseClient={mockSupabaseClient} 
+          user={user} 
+          session={session}
+          selectedOrganisation={mockOrganisation}
+        >
+          <TestComponent />
+        </TestWrapper>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('events-count')).toHaveTextContent('1');
+        expect(screen.getByTestId('selected-event')).toHaveTextContent('no-event');
+      }, { timeout: 5000 });
+    });
+  });
+
+  describe('Hook Usage', () => {
+    it('provides useEvents hook', () => {
+      render(
+        <TestWrapper supabaseClient={mockSupabaseClient}>
+          <TestComponent />
+        </TestWrapper>
+      );
+
+      expect(screen.getByTestId('test-component')).toBeInTheDocument();
+    });
+
+    it('throws error when hook is used outside provider', () => {
+      // Suppress console.error for this test
+      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+      expect(() => {
+        render(<TestComponent />);
+      }).toThrow('useEvents must be used within an EventProvider');
+
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('handles Supabase client errors gracefully', async () => {
+      const user = testDataGenerators.user({ id: 'user-1' });
+      const session = testDataGenerators.session();
+      
+      // Mock RPC error
+      mockSupabaseClient.rpc.mockImplementation((functionName: string, params: any) => {
+        if (functionName === 'data_user_events_get') {
+          return Promise.reject(new Error('Network error'));
+        }
+        return Promise.resolve({ data: null, error: null });
+      });
+
+      render(
+        <TestWrapper 
+          supabaseClient={mockSupabaseClient} 
+          user={user} 
+          session={session}
+          selectedOrganisation={mockOrganisation}
+        >
+          <TestComponent />
+        </TestWrapper>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('error')).toHaveTextContent('Network error');
+        expect(screen.getByTestId('events-count')).toHaveTextContent('0');
+      }, { timeout: 5000 });
+    });
+
+    it('handles missing Supabase client', () => {
+      expect(() => {
+        render(
+          <TestWrapper>
+            <TestComponent />
+          </TestWrapper>
+        );
+      }).not.toThrow();
+    });
+
+    it('handles organisation context errors', async () => {
+      const user = testDataGenerators.user({ id: 'user-1' });
+      const session = testDataGenerators.session();
+      
+      // Mock organisation context error
+      mockOrganisationState.ensureOrganisationContext.mockRejectedValue(new Error('Organisation context error'));
+
+      render(
+        <TestWrapper 
+          supabaseClient={mockSupabaseClient} 
+          user={user} 
+          session={session}
+          selectedOrganisation={mockOrganisation}
+        >
+          <TestComponent />
+        </TestWrapper>
+      );
+
+      // Should still load events even if organisation context fails
+      await waitFor(() => {
+        expect(screen.getByTestId('events-count')).toHaveTextContent('3');
+      }, { timeout: 5000 });
+    });
+  });
+
+  describe('Context Value Stability', () => {
+    it('maintains stable context value references', () => {
+      const TestStabilityComponent = () => {
+        const { setSelectedEvent, refreshEvents } = useEvents();
+        const [renderCount, setRenderCount] = React.useState(0);
+        
+        React.useEffect(() => {
+          setRenderCount(prev => prev + 1);
+        });
+        
+        return (
+          <div>
+            <div data-testid="renderCount">{renderCount}</div>
+            <div data-testid="hasStableSetSelectedEvent">{typeof setSelectedEvent === 'function' ? 'true' : 'false'}</div>
+            <div data-testid="hasStableRefreshEvents">{typeof refreshEvents === 'function' ? 'true' : 'false'}</div>
+          </div>
+        );
+      };
+
+      render(
+        <TestWrapper supabaseClient={mockSupabaseClient}>
+          <TestStabilityComponent />
+        </TestWrapper>
+      );
+
+      // Should render multiple times but maintain stable function references
+      expect(screen.getByTestId('hasStableSetSelectedEvent')).toHaveTextContent('true');
+      expect(screen.getByTestId('hasStableRefreshEvents')).toHaveTextContent('true');
+    });
+  });
+
+  describe('Cleanup', () => {
+    it('handles component unmount gracefully', () => {
+      const { unmount } = render(
+        <TestWrapper supabaseClient={mockSupabaseClient}>
+          <div>Test content</div>
+        </TestWrapper>
+      );
+
+      // Should not throw errors on unmount
+      expect(() => unmount()).not.toThrow();
+    });
+
+    it('clears persisted data when event is cleared', async () => {
+      const user = testDataGenerators.user({ id: 'user-1' });
+      const session = testDataGenerators.session();
+      
+      // Set persisted event
+      sessionStorage.setItem('pace-core-selected-event', 'event-1');
+      localStorage.setItem('pace-core-selected-event', 'event-1');
+
+      render(
+        <TestWrapper 
+          supabaseClient={mockSupabaseClient} 
+          user={user} 
+          session={session}
+          selectedOrganisation={mockOrganisation}
+        >
+          <TestComponent />
+        </TestWrapper>
+      );
+
+      await waitFor(() => {
+        expect(screen.getByTestId('events-count')).toHaveTextContent('3');
+      }, { timeout: 5000 });
+
+      // Clear event
+      const clearButton = screen.getByText('Clear Event');
+      await userEvent.click(clearButton);
+
+      // Persisted data should be cleared
+      expect(sessionStorage.getItem('pace-core-selected-event')).toBeNull();
+      expect(localStorage.getItem('pace-core-selected-event')).toBeNull();
+    });
+  });
+});