@jmruthers/pace-core 0.5.68 → 0.5.69

package/src/hooks/__tests__/usePublicEventLogo.unit.test.ts

@@ -0,0 +1,640 @@
+import React from 'react';
+import { renderHook, waitFor, act } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { usePublicEventLogo, clearPublicLogoCache, getPublicLogoCacheStats } from '../public/usePublicEventLogo';
+import type { SupabaseClient } from '@supabase/supabase-js';
+import type { Database } from '../../types/database';
+
+// Mock Supabase client
+const mockSupabaseClient = {
+  rpc: vi.fn()
+} as unknown as SupabaseClient<Database>;
+
+// Mock fetch for image validation
+const mockFetch = vi.fn();
+global.fetch = mockFetch;
+
+describe('usePublicEventLogo', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    clearPublicLogoCache();
+  });
+
+  afterEach(() => {
+    clearPublicLogoCache();
+  });
+
+    describe('Basic Functionality', () => {
+    it('should initialize with loading state false when no eventId', () => {
+      const { result } = renderHook(() => 
+        usePublicEventLogo(undefined, 'Test Event', 'org-123', { supabase: mockSupabaseClient })
+      );
+
+      expect(result.current.isLoading).toBe(false);
+      expect(result.current.logoUrl).toBe(null);
+      expect(result.current.error).toBe(null);
+      expect(result.current.fallbackText).toBe('TE');
+    });
+
+    it('should initialize with loading state false when no organisationId', () => {
+      const { result } = renderHook(() => 
+        usePublicEventLogo('event-123', 'Test Event', undefined, { supabase: mockSupabaseClient })
+      );
+
+      expect(result.current.isLoading).toBe(false);
+      expect(result.current.logoUrl).toBe(null);
+      expect(result.current.error).toBe(null);
+      expect(result.current.fallbackText).toBe('TE');
+    });
+
+    it('should initialize with loading state false when no supabase client', () => {
+      const { result } = renderHook(() => 
+        usePublicEventLogo('event-123', 'Test Event', 'org-123', { supabase: null as any })
+      );
+
+      expect(result.current.isLoading).toBe(false);
+      expect(result.current.logoUrl).toBe(null);
+      expect(result.current.error).toBe(null);
+      expect(result.current.fallbackText).toBe('TE');
+    });
+
+    it('should fetch logo successfully', async () => {
+      const mockLogoData = {
+        logo_url: 'https://example.com/logo.png'
+      };
+
+      mockSupabaseClient.rpc.mockResolvedValueOnce({
+        data: [mockLogoData],
+        error: null
+      });
+
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        status: 200
+      });
+
+      const { result } = renderHook(() => 
+        usePublicEventLogo('event-123', 'Test Event', 'org-123', { supabase: mockSupabaseClient })
+      );
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false);
+      }, { interval: 10 });
+
+      expect(result.current.logoUrl).toBe('https://example.com/logo.png');
+      expect(result.current.fallbackText).toBe('TE');
+      expect(result.current.error).toBe(null);
+    });
+
+    it('should generate fallback text correctly', () => {
+      const { result } = renderHook(() => 
+        usePublicEventLogo('event-123', 'Test Event Name', 'org-123', { supabase: mockSupabaseClient })
+      );
+
+      expect(result.current.fallbackText).toBe('TEN');
+    });
+
+    it('should handle single word event name', () => {
+      const { result } = renderHook(() => 
+        usePublicEventLogo('event-123', 'Event', 'org-123', { supabase: mockSupabaseClient })
+      );
+
+      expect(result.current.fallbackText).toBe('E');
+    });
+
+    it('should handle empty event name', () => {
+      const { result } = renderHook(() => 
+        usePublicEventLogo('event-123', '', 'org-123', { supabase: mockSupabaseClient })
+      );
+
+      expect(result.current.fallbackText).toBe('EV');
+    });
+
+    it('should handle undefined event name', () => {
+      const { result } = renderHook(() => 
+        usePublicEventLogo('event-123', undefined, 'org-123', { supabase: mockSupabaseClient })
+      );
+
+      expect(result.current.fallbackText).toBe('EV');
+    });
+
+    it('should limit fallback text to 3 characters', () => {
+      const { result } = renderHook(() => 
+        usePublicEventLogo('event-123', 'Very Long Event Name', 'org-123', { supabase: mockSupabaseClient })
+      );
+
+      expect(result.current.fallbackText).toBe('VLE');
+    });
+  });
+
+  describe('Caching', () => {
+    it('should cache logo data', async () => {
+      const mockLogoData = {
+        logo_url: 'https://example.com/logo.png'
+      };
+
+      mockSupabaseClient.rpc.mockResolvedValueOnce({
+        data: [mockLogoData],
+        error: null
+      });
+
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        status: 200
+      });
+
+      const { result, rerender } = renderHook(() => 
+        usePublicEventLogo('event-123', 'Test Event', 'org-123', { supabase: mockSupabaseClient })
+      );
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false);
+      }, { interval: 10 });
+
+      // Rerender with same parameters - should use cache
+      rerender();
+      
+      // Should not call RPC again
+      expect(mockSupabaseClient.rpc).toHaveBeenCalledTimes(1);
+    });
+
+    it('should respect cache TTL', async () => {
+      const mockLogoData = {
+        logo_url: 'https://example.com/logo.png'
+      };
+
+      mockSupabaseClient.rpc.mockResolvedValue({
+        data: [mockLogoData],
+        error: null
+      });
+
+      mockFetch.mockResolvedValue({
+        ok: true,
+        status: 200
+      });
+
+      const { result } = renderHook(() => 
+        usePublicEventLogo('event-123', 'Test Event', 'org-123', { 
+          supabase: mockSupabaseClient,
+          cacheTtl: 100 
+        })
+      );
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false);
+      }, { interval: 10 });
+
+      // Wait for cache to expire
+      await new Promise(resolve => setTimeout(resolve, 150));
+
+      // Rerender should fetch again
+      const { result: result2 } = renderHook(() => 
+        usePublicEventLogo('event-123', 'Test Event', 'org-123', { 
+          supabase: mockSupabaseClient,
+          cacheTtl: 100 
+        })
+      );
+      
+      await waitFor(() => {
+        expect(result2.current.isLoading).toBe(false);
+      }, { interval: 10 });
+
+      expect(mockSupabaseClient.rpc).toHaveBeenCalledTimes(2);
+    });
+
+    it('should disable caching when requested', async () => {
+      const mockLogoData = {
+        logo_url: 'https://example.com/logo.png'
+      };
+
+      mockSupabaseClient.rpc.mockResolvedValueOnce({
+        data: [mockLogoData],
+        error: null
+      });
+
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        status: 200
+      });
+
+      const { result } = renderHook(() => 
+        usePublicEventLogo('event-123', 'Test Event', 'org-123', { 
+          supabase: mockSupabaseClient,
+          enableCache: false 
+        })
+      );
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false);
+      }, { interval: 10 });
+
+      // When caching is disabled, the hook should not use cache
+      // but it also doesn't refetch on rerender - only on parameter changes
+      expect(result.current.logoUrl).toBe('https://example.com/logo.png');
+      expect(mockSupabaseClient.rpc).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('should handle RPC errors', async () => {
+      mockSupabaseClient.rpc.mockResolvedValueOnce({
+        data: null,
+        error: { message: 'Database error' }
+      });
+
+      const { result } = renderHook(() => 
+        usePublicEventLogo('event-123', 'Test Event', 'org-123', { supabase: mockSupabaseClient })
+      );
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false);
+      }, { interval: 10 });
+
+      expect(result.current.error).toEqual(new Error('Database error'));
+      expect(result.current.logoUrl).toBe(null);
+    });
+
+    it('should handle empty logo data', async () => {
+      mockSupabaseClient.rpc.mockResolvedValueOnce({
+        data: [],
+        error: null
+      });
+
+      const { result } = renderHook(() => 
+        usePublicEventLogo('event-123', 'Test Event', 'org-123', { supabase: mockSupabaseClient })
+      );
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false);
+      }, { interval: 10 });
+
+      expect(result.current.logoUrl).toBe(null);
+      expect(result.current.error).toBe(null);
+    });
+
+    it('should handle null logo data', async () => {
+      mockSupabaseClient.rpc.mockResolvedValueOnce({
+        data: [null],
+        error: null
+      });
+
+      const { result } = renderHook(() => 
+        usePublicEventLogo('event-123', 'Test Event', 'org-123', { supabase: mockSupabaseClient })
+      );
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false);
+      }, { interval: 10 });
+
+      expect(result.current.logoUrl).toBe(null);
+      expect(result.current.error).toBe(null);
+    });
+
+    it('should handle undefined logo URL', async () => {
+      mockSupabaseClient.rpc.mockResolvedValueOnce({
+        data: [{ logo_url: undefined }],
+        error: null
+      });
+
+      const { result } = renderHook(() => 
+        usePublicEventLogo('event-123', 'Test Event', 'org-123', { supabase: mockSupabaseClient })
+      );
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false);
+      }, { interval: 10 });
+
+      expect(result.current.logoUrl).toBe(null);
+      expect(result.current.error).toBe(null);
+    });
+  });
+
+  describe('Image Validation', () => {
+    it('should validate image existence when enabled', async () => {
+      const mockLogoData = {
+        logo_url: 'https://example.com/logo.png'
+      };
+
+      mockSupabaseClient.rpc.mockResolvedValueOnce({
+        data: [mockLogoData],
+        error: null
+      });
+
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        status: 200
+      });
+
+      const { result } = renderHook(() => 
+        usePublicEventLogo('event-123', 'Test Event', 'org-123', { 
+          supabase: mockSupabaseClient,
+          validateImage: true 
+        })
+      );
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false);
+      }, { interval: 10 });
+
+      expect(result.current.logoUrl).toBe('https://example.com/logo.png');
+      expect(mockFetch).toHaveBeenCalledWith('https://example.com/logo.png', { method: 'HEAD' });
+    });
+
+    it('should skip image validation when disabled', async () => {
+      const mockLogoData = {
+        logo_url: 'https://example.com/logo.png'
+      };
+
+      mockSupabaseClient.rpc.mockResolvedValueOnce({
+        data: [mockLogoData],
+        error: null
+      });
+
+      const { result } = renderHook(() => 
+        usePublicEventLogo('event-123', 'Test Event', 'org-123', { 
+          supabase: mockSupabaseClient,
+          validateImage: false 
+        })
+      );
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false);
+      }, { interval: 10 });
+
+      expect(result.current.logoUrl).toBe('https://example.com/logo.png');
+      expect(mockFetch).not.toHaveBeenCalled();
+    });
+
+    it('should handle image validation failure', async () => {
+      const mockLogoData = {
+        logo_url: 'https://example.com/logo.png'
+      };
+
+      mockSupabaseClient.rpc.mockResolvedValueOnce({
+        data: [mockLogoData],
+        error: null
+      });
+
+      mockFetch.mockResolvedValueOnce({
+        ok: false,
+        status: 404
+      });
+
+      const { result } = renderHook(() => 
+        usePublicEventLogo('event-123', 'Test Event', 'org-123', { 
+          supabase: mockSupabaseClient,
+          validateImage: true 
+        })
+      );
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false);
+      }, { interval: 10 });
+
+      expect(result.current.logoUrl).toBe(null);
+      expect(result.current.error).toBe(null);
+    });
+
+    it('should handle image validation error', async () => {
+      const mockLogoData = {
+        logo_url: 'https://example.com/logo.png'
+      };
+
+      mockSupabaseClient.rpc.mockResolvedValueOnce({
+        data: [mockLogoData],
+        error: null
+      });
+
+      mockFetch.mockRejectedValueOnce(new Error('Network error'));
+
+      const { result } = renderHook(() => 
+        usePublicEventLogo('event-123', 'Test Event', 'org-123', { 
+          supabase: mockSupabaseClient,
+          validateImage: true 
+        })
+      );
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false);
+      }, { interval: 10 });
+
+      expect(result.current.logoUrl).toBe(null);
+      expect(result.current.error).toBe(null);
+    });
+  });
+
+  describe('Custom Fallback Text Generator', () => {
+    it('should use custom fallback text generator', () => {
+      const customGenerator = (eventName: string) => `CUSTOM-${eventName.toUpperCase()}`;
+
+      const { result } = renderHook(() => 
+        usePublicEventLogo('event-123', 'Test Event', 'org-123', { 
+          supabase: mockSupabaseClient,
+          generateFallbackText: customGenerator
+        })
+      );
+
+      expect(result.current.fallbackText).toBe('CUSTOM-TEST EVENT');
+    });
+  });
+
+  describe('Refetch Functionality', () => {
+    it('should refetch logo when refetch is called', async () => {
+      const mockLogoData = {
+        logo_url: 'https://example.com/logo.png'
+      };
+
+      mockSupabaseClient.rpc.mockResolvedValue({
+        data: [mockLogoData],
+        error: null
+      });
+
+      mockFetch.mockResolvedValue({
+        ok: true,
+        status: 200
+      });
+
+      const { result } = renderHook(() => 
+        usePublicEventLogo('event-123', 'Test Event', 'org-123', { supabase: mockSupabaseClient })
+      );
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false);
+      }, { interval: 10 });
+
+      // Call refetch
+      await act(async () => {
+        await result.current.refetch();
+      });
+
+      expect(mockSupabaseClient.rpc).toHaveBeenCalledTimes(2);
+    });
+
+    it('should clear cache when refetch is called', async () => {
+      const mockLogoData = {
+        logo_url: 'https://example.com/logo.png'
+      };
+
+      mockSupabaseClient.rpc.mockResolvedValue({
+        data: [mockLogoData],
+        error: null
+      });
+
+      mockFetch.mockResolvedValue({
+        ok: true,
+        status: 200
+      });
+
+      const { result } = renderHook(() => 
+        usePublicEventLogo('event-123', 'Test Event', 'org-123', { supabase: mockSupabaseClient })
+      );
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false);
+      }, { interval: 10 });
+
+      // Call refetch
+      await act(async () => {
+        await result.current.refetch();
+      });
+
+      // Should call RPC again (cache was cleared)
+      expect(mockSupabaseClient.rpc).toHaveBeenCalledTimes(2);
+    });
+
+    it('should not refetch when eventId is missing', async () => {
+      const { result } = renderHook(() => 
+        usePublicEventLogo(undefined, 'Test Event', 'org-123', { supabase: mockSupabaseClient })
+      );
+
+      await act(async () => {
+        await result.current.refetch();
+      });
+
+      expect(mockSupabaseClient.rpc).not.toHaveBeenCalled();
+    });
+
+    it('should not refetch when organisationId is missing', async () => {
+      const { result } = renderHook(() => 
+        usePublicEventLogo('event-123', 'Test Event', undefined, { supabase: mockSupabaseClient })
+      );
+
+      await act(async () => {
+        await result.current.refetch();
+      });
+
+      expect(mockSupabaseClient.rpc).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Cache Management Utilities', () => {
+    it('should clear public logo cache', () => {
+      const stats = getPublicLogoCacheStats();
+      expect(stats.size).toBe(0);
+
+      clearPublicLogoCache();
+      
+      const statsAfter = getPublicLogoCacheStats();
+      expect(statsAfter.size).toBe(0);
+    });
+
+    it('should get cache statistics', () => {
+      const stats = getPublicLogoCacheStats();
+      expect(stats).toEqual({
+        size: 0,
+        keys: []
+      });
+    });
+  });
+
+  describe('UUID Validation', () => {
+    it('should warn about invalid organisationId format but still proceed', async () => {
+      const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+      const mockLogoData = {
+        logo_url: 'https://example.com/logo.png'
+      };
+
+      mockSupabaseClient.rpc.mockResolvedValueOnce({
+        data: [mockLogoData],
+        error: null
+      });
+
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        status: 200
+      });
+
+      const { result } = renderHook(() => 
+        usePublicEventLogo('event-123', 'Test Event', 'invalid-uuid', { supabase: mockSupabaseClient })
+      );
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false);
+      }, { interval: 10 });
+
+      expect(consoleSpy).toHaveBeenCalledWith(
+        '[usePublicEventLogo] Invalid organisationId format (not a valid UUID):',
+        'invalid-uuid'
+      );
+
+      expect(result.current.logoUrl).toBe('https://example.com/logo.png');
+
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle rapid parameter changes', async () => {
+      const mockLogoData = {
+        logo_url: 'https://example.com/logo.png'
+      };
+
+      mockSupabaseClient.rpc.mockResolvedValue({
+        data: [mockLogoData],
+        error: null
+      });
+
+      mockFetch.mockResolvedValue({
+        ok: true,
+        status: 200
+      });
+
+      const { result, rerender } = renderHook(
+        ({ eventId, organisationId }) => 
+          usePublicEventLogo(eventId, 'Test Event', organisationId, { supabase: mockSupabaseClient }),
+        { initialProps: { eventId: 'event-1', organisationId: 'org-1' } }
+      );
+
+      // Change parameters rapidly
+      rerender({ eventId: 'event-2', organisationId: 'org-1' });
+      rerender({ eventId: 'event-2', organisationId: 'org-2' });
+      rerender({ eventId: 'event-3', organisationId: 'org-2' });
+
+      await waitFor(() => {
+        expect(result.current.isLoading).toBe(false);
+      }, { interval: 10 });
+
+      // Should have called RPC for the final parameters
+      expect(mockSupabaseClient.rpc).toHaveBeenCalledWith('get_public_event_logo', {
+        event_id_param: 'event-3',
+        organisation_id_param: 'org-2'
+      });
+    });
+
+    it('should handle parameters becoming undefined', async () => {
+      const { result, rerender } = renderHook(
+        ({ eventId, organisationId }) => 
+          usePublicEventLogo(eventId, 'Test Event', organisationId, { supabase: mockSupabaseClient }),
+        { initialProps: { eventId: 'event-1', organisationId: 'org-1' } }
+      );
+
+      // Change to undefined
+      rerender({ eventId: undefined, organisationId: 'org-1' });
+
+      expect(result.current.logoUrl).toBe(null);
+      expect(result.current.isLoading).toBe(false);
+      expect(result.current.error).toBe(null);
+    });
+  });
+});