@jmruthers/pace-core 0.5.114 → 0.5.116

package/src/components/PublicLayout/__tests__/PublicErrorBoundary.test.tsx

@@ -14,22 +14,14 @@ import {
   DefaultPublicErrorFallback 
 } from '../PublicErrorBoundary';
 
-// Store original console.error
-const originalError = console.error;
-let mockConsoleError: ReturnType<typeof vi.fn>;
+let consoleErrorSpy: ReturnType<typeof vi.spyOn>;
 
 beforeEach(() => {
-  // Create a fresh mock for each test
-  mockConsoleError = vi.fn();
-  vi.spyOn(console, 'error').mockImplementation((...args) => {
-    mockConsoleError(...args);
-    // Call original to allow React's error boundary to work
-    originalError(...args);
-  });
+  consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
 });
 
 afterEach(() => {
-  vi.restoreAllMocks();
+  consoleErrorSpy.mockRestore();
 });
 
 // Component that throws an error
@@ -80,7 +72,7 @@ describe('[component] PublicErrorBoundary', () => {
       );
 
       // Check that console.error was called (error boundary should trigger logging)
-      expect(mockConsoleError).toHaveBeenCalled();
+      expect(consoleErrorSpy).toHaveBeenCalled();
       // Just verify an error was logged, don't check for exact message
       // as the development mode check might not be active in tests
     });

package/src/components/Select/Select.tsx

@@ -402,8 +402,16 @@ export const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerPr
          (typeof child === 'object' && 'type' in child && typeof child.type === 'function' && child.type.name === 'ChevronDown'))
       );
 
+      // Merge child's className with triggerProps className
+      const childClassName = (children as React.ReactElement).props.className;
+      const mergedClassName = cn(
+        triggerProps.className,
+        childClassName
+      );
+
       return React.cloneElement(children as React.ReactElement, {
         ...triggerProps,
+        className: mergedClassName,
         children: hasChevron ? childChildren : [
           ...childChildren,
           <ChevronDown 

package/src/components/Toast/Toast.test.tsx

@@ -38,13 +38,14 @@ describe('Toast Component System', () => {
       expect(screen.getByText('Test Content')).toBeInTheDocument();
     });
 
-    it('renders with custom props', () => {
-      renderWithProviders(
-        <ToastProvider duration={5000}>
-          <div>Test Content</div>
-        </ToastProvider>
-      );
-      
+    it('renders without modifying default timeout behaviour', () => {
+      expect(() =>
+        renderWithProviders(
+          <ToastProvider>
+            <div>Test Content</div>
+          </ToastProvider>
+        )
+      ).not.toThrow();
       expect(screen.getByText('Test Content')).toBeInTheDocument();
     });
   });

package/src/components/Toast/Toast.tsx

@@ -12,7 +12,7 @@
  * - Customizable positioning and styling
  * - Swipe gestures for dismissal
  * - Keyboard navigation support
- * - Auto-dismiss with default 10 second duration (configurable)
+ * - Auto-dismiss with default 10 second duration managed internally
  * - Action buttons and close functionality
  * - Responsive design
  * - Accessibility compliant
@@ -296,10 +296,10 @@ export function Toaster() {
       <ToastViewport />
       {toasts.map((toast: any) => {
         // Destructure custom properties that shouldn't be passed to DOM
-        const { id, title, description, action, dismiss, ...toastProps } = toast;
-        
+        const { id, title, description, action, dismiss, duration, ...toastProps } = toast;
+
         return (
-          <Toast key={id} {...toastProps}>
+          <Toast key={id} {...toastProps} duration={duration}>
             {title && <ToastTitle>{title}</ToastTitle>}
             {description && <ToastDescription>{description}</ToastDescription>}
             {action && action}

package/src/hooks/__tests__/usePublicEvent.simple.test.ts

@@ -269,6 +269,311 @@ describe('usePublicEvent - Simple Tests', () => {
     });
   });
 
+  describe('Refetch Functionality', () => {
+    it('refetches data when refetch is called', async () => {
+      const mockEventData = {
+        event_id: '123',
+        event_name: 'Test Event',
+        event_date: '2024-01-01',
+        event_venue: 'Test Venue',
+        event_participants: 100,
+        event_colours: { primary: '#000000' },
+        organisation_id: 'org-123',
+        event_days: 1,
+        event_typicalunit: 'km',
+        event_rounddown: false,
+        event_youthmultiplier: 1.0,
+        event_catering_email: 'test@example.com',
+        event_news: 'Test news',
+        event_billing: 'Test billing',
+        event_footer: 'Test footer',
+        event_email: 'event@example.com',
+        event_logo: null
+      };
+
+      mockSupabaseClient.rpc.mockResolvedValue({
+        data: [mockEventData],
+        error: null
+      });
+
+      const { result } = renderHook(() => usePublicEvent('test-event', { enableCache: true }));
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false);
+      });
+
+      const firstCallCount = mockSupabaseClient.rpc.mock.calls.length;
+
+      // Update mock to return different data
+      const updatedEventData = { ...mockEventData, event_name: 'Updated Event' };
+      mockSupabaseClient.rpc.mockResolvedValue({
+        data: [updatedEventData],
+        error: null
+      });
+
+      await result.current.refetch();
+
+      await waitFor(() => {
+        expect(result.current.event?.event_name).toBe('Updated Event');
+      }, { timeout: 2000 });
+
+      // Should have made another call
+      expect(mockSupabaseClient.rpc.mock.calls.length).toBeGreaterThan(firstCallCount);
+    });
+
+    it('clears cache before refetching', async () => {
+      const mockEventData = {
+        event_id: '123',
+        event_name: 'Test Event',
+        event_date: '2024-01-01',
+        event_venue: 'Test Venue',
+        event_participants: 100,
+        event_colours: { primary: '#000000' },
+        organisation_id: 'org-123',
+        event_days: 1,
+        event_typicalunit: 'km',
+        event_rounddown: false,
+        event_youthmultiplier: 1.0,
+        event_catering_email: 'test@example.com',
+        event_news: 'Test news',
+        event_billing: 'Test billing',
+        event_footer: 'Test footer',
+        event_email: 'event@example.com',
+        event_logo: null
+      };
+
+      mockSupabaseClient.rpc.mockResolvedValue({
+        data: [mockEventData],
+        error: null
+      });
+
+      const { result } = renderHook(() => usePublicEvent('test-event', { enableCache: true }));
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false);
+      });
+
+      // Verify cache exists
+      const statsBefore = getPublicEventCacheStats();
+      expect(statsBefore.size).toBeGreaterThan(0);
+
+      await result.current.refetch();
+
+      // Cache should be cleared and then repopulated
+      await waitFor(() => {
+        expect(result.current.event).toBeDefined();
+      }, { timeout: 2000 });
+    });
+  });
+
+  describe('Caching Options', () => {
+    it('respects cacheTtl option', async () => {
+      const mockEventData = {
+        event_id: '123',
+        event_name: 'Test Event',
+        event_date: '2024-01-01',
+        event_venue: 'Test Venue',
+        event_participants: 100,
+        event_colours: { primary: '#000000' },
+        organisation_id: 'org-123',
+        event_days: 1,
+        event_typicalunit: 'km',
+        event_rounddown: false,
+        event_youthmultiplier: 1.0,
+        event_catering_email: 'test@example.com',
+        event_news: 'Test news',
+        event_billing: 'Test billing',
+        event_footer: 'Test footer',
+        event_email: 'event@example.com',
+        event_logo: null
+      };
+
+      mockSupabaseClient.rpc.mockResolvedValue({
+        data: [mockEventData],
+        error: null
+      });
+
+      const { result } = renderHook(() => usePublicEvent('test-event', {
+        enableCache: true,
+        cacheTtl: 1000 // 1 second
+      }));
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false);
+      });
+
+      expect(result.current.event).toBeTruthy();
+    });
+
+    it('disables caching when enableCache is false', async () => {
+      const mockEventData = {
+        event_id: '123',
+        event_name: 'Test Event',
+        event_date: '2024-01-01',
+        event_venue: 'Test Venue',
+        event_participants: 100,
+        event_colours: { primary: '#000000' },
+        organisation_id: 'org-123',
+        event_days: 1,
+        event_typicalunit: 'km',
+        event_rounddown: false,
+        event_youthmultiplier: 1.0,
+        event_catering_email: 'test@example.com',
+        event_news: 'Test news',
+        event_billing: 'Test billing',
+        event_footer: 'Test footer',
+        event_email: 'event@example.com',
+        event_logo: null
+      };
+
+      mockSupabaseClient.rpc.mockResolvedValue({
+        data: [mockEventData],
+        error: null
+      });
+
+      const { result, rerender } = renderHook(() => usePublicEvent('test-event', {
+        enableCache: false
+      }));
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false);
+      });
+
+      const firstCallCount = mockSupabaseClient.rpc.mock.calls.length;
+
+      // Rerender - should make another call since caching is disabled
+      rerender();
+
+      await waitFor(() => {
+        expect(result.current.event).toBeTruthy();
+      }, { timeout: 2000 });
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('handles RPC errors that are not schema cache issues', async () => {
+      const rpcError = { message: 'Permission denied', code: 'PGRST301' };
+      mockSupabaseClient.rpc.mockResolvedValueOnce({
+        data: null,
+        error: rpcError
+      });
+
+      const { result } = renderHook(() => usePublicEvent('test-event'));
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false);
+      }, { timeout: 2000 });
+
+      expect(result.current.error).toBeInstanceOf(Error);
+      expect(result.current.error?.message).toBe('Permission denied');
+      expect(result.current.event).toBe(null);
+    });
+
+    it('handles exceptions during event fetch', async () => {
+      const error = new Error('Network timeout');
+      // Mock RPC to reject, and table access to also fail
+      mockSupabaseClient.rpc.mockRejectedValue(error);
+      mockSupabaseClient.from.mockReturnValue({
+        select: vi.fn().mockReturnThis(),
+        eq: vi.fn().mockReturnThis(),
+        not: vi.fn().mockReturnThis(),
+        limit: vi.fn().mockReturnThis(),
+        single: vi.fn().mockRejectedValue(error)
+      });
+
+      const { result } = renderHook(() => usePublicEvent('test-event'));
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false);
+      }, { timeout: 2000 });
+
+      expect(result.current.error).toBeInstanceOf(Error);
+      expect(result.current.error?.message).toBe('Network timeout');
+      expect(result.current.event).toBe(null);
+    });
+
+    it('handles non-Error exceptions', async () => {
+      const stringError = 'String error';
+      // Mock RPC to reject, and table access to also fail
+      mockSupabaseClient.rpc.mockRejectedValue(stringError);
+      mockSupabaseClient.from.mockReturnValue({
+        select: vi.fn().mockReturnThis(),
+        eq: vi.fn().mockReturnThis(),
+        not: vi.fn().mockReturnThis(),
+        limit: vi.fn().mockReturnThis(),
+        single: vi.fn().mockRejectedValue(stringError)
+      });
+
+      const { result } = renderHook(() => usePublicEvent('test-event'));
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false);
+      }, { timeout: 2000 });
+
+      expect(result.current.error).toBeInstanceOf(Error);
+      expect(result.current.error?.message).toBe('Unknown error occurred');
+    });
+  });
+
+  describe('Parameter Changes', () => {
+    it('refetches when eventCode changes', async () => {
+      const mockEventData1 = {
+        event_id: '123',
+        event_name: 'Event 1',
+        event_date: '2024-01-01',
+        event_venue: 'Venue 1',
+        event_participants: 100,
+        event_colours: { primary: '#000000' },
+        organisation_id: 'org-123',
+        event_days: 1,
+        event_typicalunit: 'km',
+        event_rounddown: false,
+        event_youthmultiplier: 1.0,
+        event_catering_email: 'test@example.com',
+        event_news: 'Test news',
+        event_billing: 'Test billing',
+        event_footer: 'Test footer',
+        event_email: 'event@example.com',
+        event_logo: null
+      };
+
+      const mockEventData2 = {
+        ...mockEventData1,
+        event_id: '456',
+        event_name: 'Event 2'
+      };
+
+      mockSupabaseClient.rpc
+        .mockResolvedValueOnce({
+          data: [mockEventData1],
+          error: null
+        })
+        .mockResolvedValueOnce({
+          data: [mockEventData2],
+          error: null
+        });
+
+      const { result, rerender } = renderHook(
+        ({ eventCode }) => usePublicEvent(eventCode),
+        { initialProps: { eventCode: 'event-1' } }
+      );
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false);
+      }, { timeout: 2000 });
+
+      expect(result.current.event?.event_name).toBe('Event 1');
+
+      rerender({ eventCode: 'event-2' });
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false);
+      }, { timeout: 2000 });
+
+      expect(result.current.event?.event_name).toBe('Event 2');
+    });
+  });
+
   describe('Edge Cases', () => {
     it('should handle null event data from RPC', async () => {
       mockSupabaseClient.rpc.mockResolvedValueOnce({
@@ -280,7 +585,7 @@ describe('usePublicEvent - Simple Tests', () => {
 
       await waitFor(() => {
         expect(result.current.isLoading).toBe(false);
-      });
+      }, { timeout: 2000 });
 
       expect(result.current.event).toBe(null);
       expect(result.current.error).toEqual(new Error('Event not found'));
@@ -296,7 +601,7 @@ describe('usePublicEvent - Simple Tests', () => {
 
       await waitFor(() => {
         expect(result.current.isLoading).toBe(false);
-      });
+      }, { timeout: 2000 });
 
       expect(result.current.event).toBe(null);
       expect(result.current.error).toEqual(new Error('Event not found'));
@@ -312,10 +617,69 @@ describe('usePublicEvent - Simple Tests', () => {
 
       await waitFor(() => {
         expect(result.current.isLoading).toBe(false);
-      });
+      }, { timeout: 2000 });
 
       expect(result.current.event).toBe(null);
       expect(result.current.error).toEqual(new Error('Event not found'));
     });
+
+    it('handles missing Supabase environment variables', () => {
+      // Mock usePublicPageContext to return null environment
+      vi.mocked(usePublicPageContext).mockReturnValue({
+        environment: {
+          supabaseUrl: null,
+          supabaseKey: null
+        }
+      } as any);
+
+      // Mock environment variables to be undefined
+      Object.defineProperty(import.meta, 'env', {
+        value: {},
+        writable: true
+      });
+
+      const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+      const { result } = renderHook(() => usePublicEvent('test-event'));
+
+      expect(consoleSpy).toHaveBeenCalledWith(
+        '[usePublicEvent] Missing Supabase environment variables. Please ensure VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY are set in your environment.'
+      );
+
+      // Should still initialize but with error
+      expect(result.current.isLoading).toBe(false);
+      expect(result.current.error).toBeInstanceOf(Error);
+      expect(result.current.error?.message).toContain('Invalid event code or Supabase client not available');
+
+      consoleSpy.mockRestore();
+    });
+
+    it('handles server-side rendering (window undefined)', () => {
+      // Test that the hook handles missing window by checking the implementation
+      // The hook checks `typeof window === 'undefined'` and returns null supabase client
+      // We can't actually delete window in the test environment as React needs it
+      // Instead, we test the behavior when supabase client is null (which happens when window is undefined)
+      
+      // Mock usePublicPageContext to return null environment
+      vi.mocked(usePublicPageContext).mockReturnValue({
+        environment: {
+          supabaseUrl: null,
+          supabaseKey: null
+        }
+      } as any);
+
+      // Mock environment variables to be undefined
+      Object.defineProperty(import.meta, 'env', {
+        value: {},
+        writable: true
+      });
+
+      const { result } = renderHook(() => usePublicEvent('test-event'));
+
+      // When supabase client is null (as it would be in SSR), the hook should handle it gracefully
+      expect(result.current.isLoading).toBe(false);
+      expect(result.current.error).toBeInstanceOf(Error);
+      expect(result.current.error?.message).toContain('Invalid event code or Supabase client not available');
+    });
   });
 });