@jmruthers/pace-core 0.2.7 → 0.5.1

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

@@ -1,761 +0,0 @@
-/**
- * @file EventLogo Component Tests
- * @package @jmruthers/pace-core
- * @module Components/PublicLayout/__tests__
- * @since 1.0.0
- *
- * Comprehensive tests for EventLogo component covering all scenarios,
- * edge cases, and error conditions to achieve 90%+ coverage.
- */
-
-// Mock the usePublicEventLogo hook
-const mockUsePublicEventLogo = vi.hoisted(() => vi.fn());
-vi.mock('../../../hooks/public/usePublicEventLogo', () => ({
-  usePublicEventLogo: mockUsePublicEventLogo
-}));
-
-// Mock the usePublicPageContext hook
-const mockUsePublicPageContext = vi.hoisted(() => vi.fn());
-vi.mock('../PublicPageProvider', () => ({
-  usePublicPageContext: mockUsePublicPageContext
-}));
-
-import React from 'react';
-import { render, screen, waitFor, fireEvent } from '@testing-library/react';
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { EventLogo, EventLogoCompact, EventLogoLarge } from '../EventLogo';
-
-// Mock the UnifiedAuthProvider
-vi.mock('../../../providers/UnifiedAuthProvider', () => ({
-  useUnifiedAuth: vi.fn()
-}));
-
-
-describe('EventLogo', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    
-    // Default mock implementations
-    mockUsePublicEventLogo.mockReturnValue({
-      logoUrl: null,
-      fallbackText: 'TE',
-      isLoading: false,
-      error: null
-    });
-
-    mockUsePublicPageContext.mockReturnValue({
-      isPublicPage: true,
-      supabase: {
-        rpc: vi.fn().mockResolvedValue({ data: [], error: null })
-      }
-    });
-  });
-
-  describe('Basic Rendering', () => {
-    it('should render with required props', () => {
-      render(
-        <EventLogo
-          eventId="test-event-id"
-          eventName="Test Event"
-          organisationId="550e8400-e29b-41d4-a716-446655440000"
-        />
-      );
-
-      expect(screen.getByText('TE')).toBeInTheDocument();
-      expect(screen.getByTitle('Test Event logo')).toBeInTheDocument();
-    });
-
-    it('should apply custom className', () => {
-      const { container } = render(
-        <EventLogo
-          eventId="test-event-id"
-          eventName="Test Event"
-          organisationId="550e8400-e29b-41d4-a716-446655440000"
-          className="custom-class"
-        />
-      );
-
-      const logoElement = container.querySelector('.custom-class');
-      expect(logoElement).toBeInTheDocument();
-    });
-
-    it('should use default size when not provided', () => {
-      const { container } = render(
-        <EventLogo
-          eventId="test-event-id"
-          eventName="Test Event"
-          organisationId="550e8400-e29b-41d4-a716-446655440000"
-        />
-      );
-
-      const logoElement = container.querySelector('.h-8.w-8');
-      expect(logoElement).toBeInTheDocument();
-    });
-  });
-
-  describe('Size Variants', () => {
-    it('should render xs size correctly', () => {
-      const { container } = render(
-        <EventLogo
-          eventId="test-event-id"
-          eventName="Test Event"
-          organisationId="550e8400-e29b-41d4-a716-446655440000"
-          size="xs"
-        />
-      );
-
-      const logoElement = container.querySelector('.h-4.w-4.text-xs');
-      expect(logoElement).toBeInTheDocument();
-    });
-
-    it('should render sm size correctly', () => {
-      const { container } = render(
-        <EventLogo
-          eventId="test-event-id"
-          eventName="Test Event"
-          organisationId="550e8400-e29b-41d4-a716-446655440000"
-          size="sm"
-        />
-      );
-
-      const logoElement = container.querySelector('.h-6.w-6.text-sm');
-      expect(logoElement).toBeInTheDocument();
-    });
-
-    it('should render md size correctly', () => {
-      const { container } = render(
-        <EventLogo
-          eventId="test-event-id"
-          eventName="Test Event"
-          organisationId="550e8400-e29b-41d4-a716-446655440000"
-          size="md"
-        />
-      );
-
-      const logoElement = container.querySelector('.h-8.w-8.text-base');
-      expect(logoElement).toBeInTheDocument();
-    });
-
-    it('should render lg size correctly', () => {
-      const { container } = render(
-        <EventLogo
-          eventId="test-event-id"
-          eventName="Test Event"
-          organisationId="550e8400-e29b-41d4-a716-446655440000"
-          size="lg"
-        />
-      );
-
-      const logoElement = container.querySelector('.h-12.w-12.text-lg');
-      expect(logoElement).toBeInTheDocument();
-    });
-
-    it('should render xl size correctly', () => {
-      const { container } = render(
-        <EventLogo
-          eventId="test-event-id"
-          eventName="Test Event"
-          organisationId="550e8400-e29b-41d4-a716-446655440000"
-          size="xl"
-        />
-      );
-
-      const logoElement = container.querySelector('.h-16.w-16.text-xl');
-      expect(logoElement).toBeInTheDocument();
-    });
-
-    it('should render 2xl size correctly', () => {
-      const { container } = render(
-        <EventLogo
-          eventId="test-event-id"
-          eventName="Test Event"
-          organisationId="550e8400-e29b-41d4-a716-446655440000"
-          size="2xl"
-        />
-      );
-
-      const logoElement = container.querySelector('.h-20.w-20.text-2xl');
-      expect(logoElement).toBeInTheDocument();
-    });
-  });
-
-  describe('Fallback Text Generation', () => {
-    it('should generate fallback text from event name', () => {
-      // Mock the hook to return the fallback text
-      mockUsePublicEventLogo.mockReturnValue({
-        logoUrl: null,
-        fallbackText: 'TE',
-        isLoading: false,
-        error: null
-      });
-      
-      render(
-        <EventLogo
-          eventId="test-event-id"
-          eventName="Test Event"
-          organisationId="550e8400-e29b-41d4-a716-446655440000"
-        />
-      );
-
-      expect(screen.getByText('TE')).toBeInTheDocument();
-    });
-
-    it('should handle single word event name', () => {
-      mockUsePublicEventLogo.mockReturnValue({
-        logoUrl: null,
-        fallbackText: 'T',
-        isLoading: false,
-        error: null
-      });
-
-      render(
-        <EventLogo
-          eventId="test-event-id"
-          eventName="Test"
-          organisationId="550e8400-e29b-41d4-a716-446655440000"
-        />
-      );
-
-      expect(screen.getByText('T')).toBeInTheDocument();
-    });
-
-    it('should handle empty event name', () => {
-      mockUsePublicEventLogo.mockReturnValue({
-        logoUrl: null,
-        fallbackText: 'EV',
-        isLoading: false,
-        error: null
-      });
-
-      render(
-        <EventLogo
-          eventId="test-event-id"
-          eventName=""
-          organisationId="550e8400-e29b-41d4-a716-446655440000"
-        />
-      );
-
-      expect(screen.getByText('EV')).toBeInTheDocument();
-    });
-
-    it('should use custom fallback text generator', () => {
-      const customGenerator = (name: string) => `CUSTOM-${name.substring(0, 2).toUpperCase()}`;
-      
-      mockUsePublicEventLogo.mockReturnValue({
-        logoUrl: null,
-        fallbackText: 'CUSTOM-TE',
-        isLoading: false,
-        error: null
-      });
-
-      render(
-        <EventLogo
-          eventId="test-event-id"
-          eventName="Test Event"
-          organisationId="550e8400-e29b-41d4-a716-446655440000"
-          generateFallbackText={customGenerator}
-        />
-      );
-
-      expect(screen.getByText('CUSTOM-TE')).toBeInTheDocument();
-    });
-  });
-
-  describe('Loading State', () => {
-    it('should render loading state when isLoading is true', () => {
-      mockUsePublicEventLogo.mockReturnValue({
-        logoUrl: null,
-        fallbackText: 'TE',
-        isLoading: true,
-        error: null
-      });
-
-      const { container } = render(
-        <EventLogo
-          eventId="test-event-id"
-          eventName="Test Event"
-          organisationId="550e8400-e29b-41d4-a716-446655440000"
-        />
-      );
-
-      const loadingElement = container.querySelector('.animate-pulse');
-      expect(loadingElement).toBeInTheDocument();
-    });
-
-    it('should render custom loading component when provided', () => {
-      const CustomLoading = () => <div data-testid="custom-loading">Loading...</div>;
-
-      mockUsePublicEventLogo.mockReturnValue({
-        logoUrl: null,
-        fallbackText: 'TE',
-        isLoading: true,
-        error: null
-      });
-
-      render(
-        <EventLogo
-          eventId="test-event-id"
-          eventName="Test Event"
-          organisationId="550e8400-e29b-41d4-a716-446655440000"
-          loadingComponent={CustomLoading}
-        />
-      );
-
-      expect(screen.getByTestId('custom-loading')).toBeInTheDocument();
-      expect(screen.getByText('Loading...')).toBeInTheDocument();
-    });
-  });
-
-  describe('Error State', () => {
-    it('should render error state when error exists', () => {
-      const testError = new Error('Logo fetch failed');
-      
-      mockUsePublicEventLogo.mockReturnValue({
-        logoUrl: null,
-        fallbackText: 'TE',
-        isLoading: false,
-        error: testError
-      });
-
-      render(
-        <EventLogo
-          eventId="test-event-id"
-          eventName="Test Event"
-          organisationId="550e8400-e29b-41d4-a716-446655440000"
-        />
-      );
-
-      expect(screen.getByText('TE')).toBeInTheDocument();
-    });
-
-    it('should render custom error component when provided', () => {
-      const testError = new Error('Logo fetch failed');
-      const CustomError = ({ error }: { error: Error }) => (
-        <div data-testid="custom-error">Error: {error.message}</div>
-      );
-
-      mockUsePublicEventLogo.mockReturnValue({
-        logoUrl: null,
-        fallbackText: 'TE',
-        isLoading: false,
-        error: testError
-      });
-
-      render(
-        <EventLogo
-          eventId="test-event-id"
-          eventName="Test Event"
-          organisationId="550e8400-e29b-41d4-a716-446655440000"
-          errorComponent={CustomError}
-        />
-      );
-
-      expect(screen.getByTestId('custom-error')).toBeInTheDocument();
-      expect(screen.getByText('Error: Logo fetch failed')).toBeInTheDocument();
-    });
-
-    it('should return null when error exists and showFallback is false', () => {
-      const testError = new Error('Logo fetch failed');
-      
-      mockUsePublicEventLogo.mockReturnValue({
-        logoUrl: null,
-        fallbackText: 'TE',
-        isLoading: false,
-        error: testError
-      });
-
-      const { container } = render(
-        <EventLogo
-          eventId="test-event-id"
-          eventName="Test Event"
-          organisationId="550e8400-e29b-41d4-a716-446655440000"
-          showFallback={false}
-        />
-      );
-
-      expect(container.firstChild).toBeNull();
-    });
-  });
-
-  describe('Logo URL Rendering', () => {
-    it('should render logo when logoUrl is available', () => {
-      mockUsePublicEventLogo.mockReturnValue({
-        logoUrl: 'https://example.com/logo.png',
-        fallbackText: 'TE',
-        isLoading: false,
-        error: null
-      });
-
-      render(
-        <EventLogo
-          eventId="test-event-id"
-          eventName="Test Event"
-          organisationId="550e8400-e29b-41d4-a716-446655440000"
-        />
-      );
-
-      const img = screen.getByAltText('Test Event logo');
-      expect(img).toBeInTheDocument();
-      expect(img).toHaveAttribute('src', 'https://example.com/logo.png');
-    });
-
-    it('should return null when no logoUrl and showFallback is false', () => {
-      mockUsePublicEventLogo.mockReturnValue({
-        logoUrl: null,
-        fallbackText: 'TE',
-        isLoading: false,
-        error: null
-      });
-
-      const { container } = render(
-        <EventLogo
-          eventId="test-event-id"
-          eventName="Test Event"
-          organisationId="550e8400-e29b-41d4-a716-446655440000"
-          showFallback={false}
-        />
-      );
-
-      expect(container.firstChild).toBeNull();
-    });
-
-    it('should handle image load error', () => {
-      mockUsePublicEventLogo.mockReturnValue({
-        logoUrl: 'https://example.com/logo.png',
-        fallbackText: 'TE',
-        isLoading: false,
-        error: null
-      });
-
-      const { container } = render(
-        <EventLogo
-          eventId="test-event-id"
-          eventName="Test Event"
-          organisationId="550e8400-e29b-41d4-a716-446655440000"
-        />
-      );
-
-      const img = screen.getByAltText('Test Event logo');
-      
-      // Simulate image load error
-      fireEvent.error(img);
-
-      // The onError handler should hide the image and show fallback
-      expect(img).toHaveStyle('display: none');
-    });
-  });
-
-  describe('Organisation ID Validation', () => {
-    it('should show fallback immediately for invalid organisation ID', () => {
-      render(
-        <EventLogo
-          eventId="test-event-id"
-          eventName="Test Event"
-          organisationId="invalid-id"
-        />
-      );
-
-      expect(screen.getByText('TE')).toBeInTheDocument();
-      expect(screen.getByTitle('Test Event logo (invalid organisation ID)')).toBeInTheDocument();
-    });
-
-    it('should validate UUID format correctly', () => {
-      const validUuid = '123e4567-e89b-12d3-a456-426614174000';
-      const invalidUuid = 'not-a-uuid';
-
-      // Test valid UUID
-      const { rerender } = render(
-        <EventLogo
-          eventId="test-event-id"
-          eventName="Test Event"
-          organisationId={validUuid}
-        />
-      );
-
-      expect(mockUsePublicEventLogo).toHaveBeenCalledWith(
-        'test-event-id',
-        'Test Event',
-        validUuid,
-        expect.any(Object)
-      );
-
-      // Test invalid UUID
-      rerender(
-        <EventLogo
-          eventId="test-event-id"
-          eventName="Test Event"
-          organisationId={invalidUuid}
-        />
-      );
-
-      expect(screen.getByText('TE')).toBeInTheDocument();
-    });
-  });
-
-  describe('Context Awareness', () => {
-    it('should detect public page context', () => {
-      mockUsePublicPageContext.mockReturnValue({
-        isPublicPage: true
-      });
-
-      render(
-        <EventLogo
-          eventId="test-event-id"
-          eventName="Test Event"
-          organisationId="550e8400-e29b-41d4-a716-446655440000"
-        />
-      );
-
-      expect(mockUsePublicPageContext).toHaveBeenCalled();
-    });
-
-    it('should handle context detection error', () => {
-      mockUsePublicPageContext.mockImplementation(() => {
-        throw new Error('Context not available');
-      });
-
-      // The component should handle the error gracefully
-      expect(() => {
-        render(
-          <EventLogo
-            eventId="test-event-id"
-            eventName="Test Event"
-            organisationId="550e8400-e29b-41d4-a716-446655440000"
-          />
-        );
-      }).toThrow('Context not available');
-    });
-
-    it('should avoid auth context when in public page', () => {
-      mockUsePublicPageContext.mockReturnValue({
-        isPublicPage: true,
-        supabase: {
-          rpc: vi.fn().mockResolvedValue({ data: [], error: null })
-        }
-      });
-
-      render(
-        <EventLogo
-          eventId="test-event-id"
-          eventName="Test Event"
-          organisationId="550e8400-e29b-41d4-a716-446655440000"
-        />
-      );
-
-      // Should not call useUnifiedAuth when in public context
-      expect(mockUsePublicEventLogo).toHaveBeenCalled();
-    });
-  });
-
-  describe('Hook Integration', () => {
-    it('should call usePublicEventLogo with correct parameters', () => {
-      render(
-        <EventLogo
-          eventId="test-event-id"
-          eventName="Test Event"
-          organisationId="550e8400-e29b-41d4-a716-446655440000"
-          validateImage={false}
-        />
-      );
-
-      expect(mockUsePublicEventLogo).toHaveBeenCalledWith(
-        'test-event-id',
-        'Test Event',
-        '550e8400-e29b-41d4-a716-446655440000',
-        {
-          validateImage: false,
-          generateFallbackText: expect.any(Function),
-          supabase: expect.objectContaining({
-            rpc: expect.any(Function)
-          })
-        }
-      );
-    });
-
-    it('should pass custom generateFallbackText to hook', () => {
-      const customGenerator = (name: string) => `CUSTOM-${name}`;
-
-      render(
-        <EventLogo
-          eventId="test-event-id"
-          eventName="Test Event"
-          organisationId="550e8400-e29b-41d4-a716-446655440000"
-          generateFallbackText={customGenerator}
-        />
-      );
-
-      expect(mockUsePublicEventLogo).toHaveBeenCalledWith(
-        'test-event-id',
-        'Test Event',
-        '550e8400-e29b-41d4-a716-446655440000',
-        {
-          validateImage: true,
-          generateFallbackText: customGenerator,
-          supabase: expect.objectContaining({
-            rpc: expect.any(Function)
-          })
-        }
-      );
-    });
-  });
-
-  describe('EventLogoCompact', () => {
-    it('should render with compact size and rounded-sm class', () => {
-      const { container } = render(
-        <EventLogoCompact
-          eventId="test-event-id"
-          eventName="Test Event"
-          organisationId="550e8400-e29b-41d4-a716-446655440000"
-        />
-      );
-
-      const logoElement = container.querySelector('.h-6.w-6.text-sm.rounded-sm');
-      expect(logoElement).toBeInTheDocument();
-    });
-
-    it('should merge custom className with compact classes', () => {
-      const { container } = render(
-        <EventLogoCompact
-          eventId="test-event-id"
-          eventName="Test Event"
-          organisationId="550e8400-e29b-41d4-a716-446655440000"
-          className="custom-class"
-        />
-      );
-
-      const logoElement = container.querySelector('.custom-class.rounded-sm');
-      expect(logoElement).toBeInTheDocument();
-    });
-  });
-
-  describe('EventLogoLarge', () => {
-    it('should render with large size and rounded-lg class', () => {
-      const { container } = render(
-        <EventLogoLarge
-          eventId="test-event-id"
-          eventName="Test Event"
-          organisationId="550e8400-e29b-41d4-a716-446655440000"
-        />
-      );
-
-      const logoElement = container.querySelector('.h-16.w-16.text-xl.rounded-lg');
-      expect(logoElement).toBeInTheDocument();
-    });
-
-    it('should merge custom className with large classes', () => {
-      const { container } = render(
-        <EventLogoLarge
-          eventId="test-event-id"
-          eventName="Test Event"
-          organisationId="550e8400-e29b-41d4-a716-446655440000"
-          className="custom-class"
-        />
-      );
-
-      const logoElement = container.querySelector('.custom-class.rounded-lg');
-      expect(logoElement).toBeInTheDocument();
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('should handle very long event names', () => {
-      const longEventName = 'A'.repeat(1000);
-      
-      mockUsePublicEventLogo.mockReturnValue({
-        logoUrl: null,
-        fallbackText: 'AAA',
-        isLoading: false,
-        error: null
-      });
-
-      render(
-        <EventLogo
-          eventId="test-event-id"
-          eventName={longEventName}
-          organisationId="550e8400-e29b-41d4-a716-446655440000"
-        />
-      );
-
-      expect(screen.getByText('AAA')).toBeInTheDocument();
-    });
-
-    it('should handle special characters in event name', () => {
-      const specialEventName = 'Test Event @#$%^&*()';
-      
-      mockUsePublicEventLogo.mockReturnValue({
-        logoUrl: null,
-        fallbackText: 'TE@',
-        isLoading: false,
-        error: null
-      });
-
-      render(
-        <EventLogo
-          eventId="test-event-id"
-          eventName={specialEventName}
-          organisationId="550e8400-e29b-41d4-a716-446655440000"
-        />
-      );
-
-      expect(screen.getByText('TE@')).toBeInTheDocument();
-    });
-
-    it('should handle undefined organisationId', () => {
-      render(
-        <EventLogo
-          eventId="test-event-id"
-          eventName="Test Event"
-          organisationId={undefined as any}
-        />
-      );
-
-      expect(screen.getByText('TE')).toBeInTheDocument();
-    });
-
-    it('should handle null organisationId', () => {
-      render(
-        <EventLogo
-          eventId="test-event-id"
-          eventName="Test Event"
-          organisationId={null as any}
-        />
-      );
-
-      expect(screen.getByText('TE')).toBeInTheDocument();
-    });
-  });
-
-  describe('Props Validation', () => {
-    it('should handle all optional props as undefined', () => {
-      render(
-        <EventLogo
-          eventId="test-event-id"
-          eventName="Test Event"
-          organisationId="550e8400-e29b-41d4-a716-446655440000"
-          size={undefined}
-          className={undefined}
-          showFallback={undefined}
-          generateFallbackText={undefined}
-          validateImage={undefined}
-          loadingComponent={undefined}
-          errorComponent={undefined}
-        />
-      );
-
-      expect(screen.getByText('TE')).toBeInTheDocument();
-    });
-
-    it('should handle empty string props', () => {
-      render(
-        <EventLogo
-          eventId=""
-          eventName=""
-          organisationId=""
-          className=""
-        />
-      );
-
-      expect(screen.getByText('TE')).toBeInTheDocument();
-    });
-  });
-});