@jmruthers/pace-core 0.5.86 → 0.5.88

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

@@ -1,666 +0,0 @@
-/**
- * @file EventLogo Component Tests
- * @package @jmruthers/pace-core
- * @module Components/PublicLayout/__tests__
- * @since 1.0.0
- */
-
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { 
-  EventLogo, 
-  EventLogoCompact, 
-  EventLogoLarge 
-} from '../EventLogo';
-
-// Mock the usePublicEventLogo hook
-const mockUsePublicEventLogo = vi.fn();
-
-// Mock the usePublicPageContext hook
-const mockUsePublicPageContext = vi.fn();
-
-// Mock the UnifiedAuthProvider
-const mockUseUnifiedAuth = vi.fn();
-
-vi.mock('../../../hooks/public/usePublicEventLogo', () => ({
-  usePublicEventLogo: vi.fn()
-}));
-
-vi.mock('../PublicPageProvider', () => ({
-  usePublicPageContext: () => mockUsePublicPageContext()
-}));
-
-vi.mock('../../../providers/UnifiedAuthProvider', () => ({
-  useUnifiedAuth: () => mockUseUnifiedAuth()
-}));
-
-describe('[component] EventLogo', () => {
-  beforeEach(async () => {
-    vi.clearAllMocks();
-    
-    // Default mock implementations
-    mockUsePublicPageContext.mockReturnValue({
-      isPublicPage: false,
-      supabase: { from: vi.fn() }
-    });
-    
-    mockUsePublicEventLogo.mockReturnValue({
-      logoUrl: null,
-      fallbackText: 'TE',
-      isLoading: false,
-      error: null
-    });
-    
-    // Set up the mocked hook
-    const { usePublicEventLogo } = await import('../../../hooks/public/usePublicEventLogo');
-    vi.mocked(usePublicEventLogo).mockImplementation(mockUsePublicEventLogo);
-  });
-
-  describe('Rendering', () => {
-    it('renders with basic props', () => {
-      render(
-        <EventLogo
-          eventId="event-123"
-          eventName="Test Event"
-          organisationId="org-123"
-        />
-      );
-
-      expect(screen.getByText('TE')).toBeInTheDocument();
-    });
-
-    it('renders with custom className', () => {
-      const { container } = render(
-        <EventLogo
-          eventId="event-123"
-          eventName="Test Event"
-          organisationId="org-123"
-          className="custom-logo-class"
-        />
-      );
-
-      const logo = container.firstChild as HTMLElement;
-      expect(logo).toHaveClass('custom-logo-class');
-    });
-
-    it('renders with custom size', () => {
-      const { container } = render(
-        <EventLogo
-          eventId="event-123"
-          eventName="Test Event"
-          organisationId="org-123"
-          size="lg"
-        />
-      );
-
-      const logo = container.firstChild as HTMLElement;
-      expect(logo).toHaveClass('h-12', 'w-12', 'text-lg');
-    });
-  });
-
-  describe('Size Variants', () => {
-    it('renders with extra small size', () => {
-      const { container } = render(
-        <EventLogo
-          eventId="event-123"
-          eventName="Test Event"
-          organisationId="org-123"
-          size="xs"
-        />
-      );
-
-      const logo = container.firstChild as HTMLElement;
-      expect(logo).toHaveClass('h-4', 'w-4', 'text-xs');
-    });
-
-    it('renders with small size', () => {
-      const { container } = render(
-        <EventLogo
-          eventId="event-123"
-          eventName="Test Event"
-          organisationId="org-123"
-          size="sm"
-        />
-      );
-
-      const logo = container.firstChild as HTMLElement;
-      expect(logo).toHaveClass('h-6', 'w-6', 'text-sm');
-    });
-
-    it('renders with medium size by default', () => {
-      const { container } = render(
-        <EventLogo
-          eventId="event-123"
-          eventName="Test Event"
-          organisationId="org-123"
-        />
-      );
-
-      const logo = container.firstChild as HTMLElement;
-      expect(logo).toHaveClass('h-8', 'w-8', 'text-base');
-    });
-
-    it('renders with large size', () => {
-      const { container } = render(
-        <EventLogo
-          eventId="event-123"
-          eventName="Test Event"
-          organisationId="org-123"
-          size="lg"
-        />
-      );
-
-      const logo = container.firstChild as HTMLElement;
-      expect(logo).toHaveClass('h-12', 'w-12', 'text-lg');
-    });
-
-    it('renders with extra large size', () => {
-      const { container } = render(
-        <EventLogo
-          eventId="event-123"
-          eventName="Test Event"
-          organisationId="org-123"
-          size="xl"
-        />
-      );
-
-      const logo = container.firstChild as HTMLElement;
-      expect(logo).toHaveClass('h-16', 'w-16', 'text-xl');
-    });
-
-    it('renders with 2xl size', () => {
-      const { container } = render(
-        <EventLogo
-          eventId="event-123"
-          eventName="Test Event"
-          organisationId="org-123"
-          size="2xl"
-        />
-      );
-
-      const logo = container.firstChild as HTMLElement;
-      expect(logo).toHaveClass('h-20', 'w-20', 'text-2xl');
-    });
-  });
-
-  describe('Fallback Text Generation', () => {
-    it('generates fallback text from event name', () => {
-      render(
-        <EventLogo
-          eventId="event-123"
-          eventName="Test Event"
-          organisationId="org-123"
-        />
-      );
-
-      expect(screen.getByText('TE')).toBeInTheDocument();
-    });
-
-    it('generates fallback text from single word event name', () => {
-      mockUsePublicEventLogo.mockReturnValue({
-        logoUrl: null,
-        fallbackText: 'T',
-        isLoading: false,
-        error: null
-      });
-
-      render(
-        <EventLogo
-          eventId="event-123"
-          eventName="Test"
-          organisationId="org-123"
-        />
-      );
-
-      expect(screen.getByText('T')).toBeInTheDocument();
-    });
-
-    it('generates fallback text from multi-word event name', () => {
-      mockUsePublicEventLogo.mockReturnValue({
-        logoUrl: null,
-        fallbackText: 'TEC',
-        isLoading: false,
-        error: null
-      });
-
-      render(
-        <EventLogo
-          eventId="event-123"
-          eventName="Test Event Conference"
-          organisationId="org-123"
-        />
-      );
-
-      expect(screen.getByText('TEC')).toBeInTheDocument();
-    });
-
-    it('handles empty event name', () => {
-      mockUsePublicEventLogo.mockReturnValue({
-        logoUrl: null,
-        fallbackText: 'EV',
-        isLoading: false,
-        error: null
-      });
-
-      render(
-        <EventLogo
-          eventId="event-123"
-          eventName=""
-          organisationId="org-123"
-        />
-      );
-
-      expect(screen.getByText('EV')).toBeInTheDocument();
-    });
-  });
-
-  describe('Logo Display', () => {
-    it('renders actual logo when available', () => {
-      mockUsePublicEventLogo.mockReturnValue({
-        logoUrl: 'https://example.com/logo.png',
-        fallbackText: 'TE',
-        isLoading: false,
-        error: null
-      });
-
-      render(
-        <EventLogo
-          eventId="event-123"
-          eventName="Test Event"
-          organisationId="org-123"
-        />
-      );
-
-      const logo = screen.getByAltText('Test Event logo');
-      expect(logo).toBeInTheDocument();
-      expect(logo).toHaveAttribute('src', 'https://example.com/logo.png');
-    });
-
-    it('renders fallback when no logo available', () => {
-      mockUsePublicEventLogo.mockReturnValue({
-        logoUrl: null,
-        fallbackText: 'TE',
-        isLoading: false,
-        error: null
-      });
-
-      render(
-        <EventLogo
-          eventId="event-123"
-          eventName="Test Event"
-          organisationId="org-123"
-        />
-      );
-
-      expect(screen.getByText('TE')).toBeInTheDocument();
-      expect(screen.queryByAltText('Test Event logo')).not.toBeInTheDocument();
-    });
-
-    it('handles image load error', () => {
-      mockUsePublicEventLogo.mockReturnValue({
-        logoUrl: 'https://example.com/logo.png',
-        fallbackText: 'TE',
-        isLoading: false,
-        error: null
-      });
-
-      render(
-        <EventLogo
-          eventId="event-123"
-          eventName="Test Event"
-          organisationId="org-123"
-        />
-      );
-
-      const logo = screen.getByAltText('Test Event logo');
-      
-      // Simulate image load error
-      fireEvent.error(logo);
-      
-      // The image should be hidden and fallback should be shown
-      expect(logo).toHaveStyle('display: none');
-    });
-  });
-
-  describe('Loading States', () => {
-    it('renders loading state', () => {
-      mockUsePublicEventLogo.mockReturnValue({
-        logoUrl: null,
-        fallbackText: 'TE',
-        isLoading: true,
-        error: null
-      });
-
-      const { container } = render(
-        <EventLogo
-          eventId="event-123"
-          eventName="Test Event"
-          organisationId="org-123"
-        />
-      );
-
-      const logo = container.firstChild as HTMLElement;
-      expect(logo).toHaveClass('animate-pulse');
-    });
-
-    it('renders custom loading component', () => {
-      const CustomLoading = () => <div data-testid="custom-loading">Loading...</div>;
-      
-      mockUsePublicEventLogo.mockReturnValue({
-        logoUrl: null,
-        fallbackText: 'TE',
-        isLoading: true,
-        error: null
-      });
-
-      render(
-        <EventLogo
-          eventId="event-123"
-          eventName="Test Event"
-          organisationId="org-123"
-          loadingComponent={CustomLoading}
-        />
-      );
-
-      expect(screen.getByTestId('custom-loading')).toBeInTheDocument();
-    });
-  });
-
-  describe('Error States', () => {
-    it('renders error state with fallback', () => {
-      mockUsePublicEventLogo.mockReturnValue({
-        logoUrl: null,
-        fallbackText: 'TE',
-        isLoading: false,
-        error: new Error('Failed to load logo')
-      });
-
-      render(
-        <EventLogo
-          eventId="event-123"
-          eventName="Test Event"
-          organisationId="org-123"
-        />
-      );
-
-      expect(screen.getByText('TE')).toBeInTheDocument();
-    });
-
-    it('renders custom error component', async () => {
-      const CustomError = ({ error }: { error: Error }) => (
-        <div data-testid="custom-error">Error: {error.message}</div>
-      );
-      
-      // Set up the mock after beforeEach has run
-      mockUsePublicEventLogo.mockReturnValue({
-        logoUrl: null,
-        fallbackText: 'TE',
-        isLoading: false,
-        error: new Error('Failed to load logo')
-      });
-      
-      // Set up the mocked hook
-      const { usePublicEventLogo } = await import('../../../hooks/public/usePublicEventLogo');
-      vi.mocked(usePublicEventLogo).mockImplementation(mockUsePublicEventLogo);
-
-      const { container } = render(
-        <EventLogo
-          eventId="event-123"
-          eventName="Test Event"
-          organisationId="550e8400-e29b-41d4-a716-446655440000"
-          errorComponent={CustomError}
-        />
-      );
-
-      expect(screen.getByTestId('custom-error')).toBeInTheDocument();
-      expect(screen.getByText('Error: Failed to load logo')).toBeInTheDocument();
-    });
-
-    it('returns null when no fallback and error occurs', async () => {
-      // Set up the mock after beforeEach has run
-      mockUsePublicEventLogo.mockReturnValue({
-        logoUrl: null,
-        fallbackText: 'TE',
-        isLoading: false,
-        error: new Error('Failed to load logo')
-      });
-      
-      // Set up the mocked hook
-      const { usePublicEventLogo } = await import('../../../hooks/public/usePublicEventLogo');
-      vi.mocked(usePublicEventLogo).mockImplementation(mockUsePublicEventLogo);
-
-      const { container } = render(
-        <EventLogo
-          eventId="event-123"
-          eventName="Test Event"
-          organisationId="org-123"
-          showFallback={false}
-        />
-      );
-
-      expect(container.firstChild).toBeNull();
-    });
-  });
-
-  describe('Context Awareness', () => {
-    it('handles public page context', () => {
-      mockUsePublicPageContext.mockReturnValue({
-        isPublicPage: true,
-        supabase: { from: vi.fn() }
-      });
-
-      render(
-        <EventLogo
-          eventId="event-123"
-          eventName="Test Event"
-          organisationId="org-123"
-        />
-      );
-
-      expect(screen.getByText('TE')).toBeInTheDocument();
-    });
-
-    it('handles missing Supabase client', () => {
-      mockUsePublicPageContext.mockReturnValue({
-        isPublicPage: false,
-        supabase: null
-      });
-
-      render(
-        <EventLogo
-          eventId="event-123"
-          eventName="Test Event"
-          organisationId="org-123"
-        />
-      );
-
-      expect(screen.getByText('TE')).toBeInTheDocument();
-    });
-  });
-
-  describe('Organisation ID Validation', () => {
-    it('handles invalid organisation ID', () => {
-      mockUsePublicEventLogo.mockReturnValue({
-        logoUrl: null,
-        fallbackText: 'TE',
-        isLoading: false,
-        error: null
-      });
-
-      render(
-        <EventLogo
-          eventId="event-123"
-          eventName="Test Event"
-          organisationId="invalid-id"
-        />
-      );
-
-      expect(screen.getByText('TE')).toBeInTheDocument();
-    });
-
-    it('handles empty organisation ID', () => {
-      mockUsePublicEventLogo.mockReturnValue({
-        logoUrl: null,
-        fallbackText: 'TE',
-        isLoading: false,
-        error: null
-      });
-
-      render(
-        <EventLogo
-          eventId="event-123"
-          eventName="Test Event"
-          organisationId=""
-        />
-      );
-
-      expect(screen.getByText('TE')).toBeInTheDocument();
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('has proper alt text for images', () => {
-      mockUsePublicEventLogo.mockReturnValue({
-        logoUrl: 'https://example.com/logo.png',
-        fallbackText: 'TE',
-        isLoading: false,
-        error: null
-      });
-
-      render(
-        <EventLogo
-          eventId="event-123"
-          eventName="Test Event"
-          organisationId="org-123"
-        />
-      );
-
-      const logo = screen.getByAltText('Test Event logo');
-      expect(logo).toBeInTheDocument();
-    });
-
-    it('has proper title attribute for fallback', () => {
-      mockUsePublicEventLogo.mockReturnValue({
-        logoUrl: null,
-        fallbackText: 'TE',
-        isLoading: false,
-        error: null
-      });
-
-      render(
-        <EventLogo
-          eventId="event-123"
-          eventName="Test Event"
-          organisationId="org-123"
-        />
-      );
-
-      const fallback = screen.getByText('TE');
-      expect(fallback).toHaveAttribute('title', 'Test Event logo (invalid organisation ID)');
-    });
-  });
-
-  describe('Props Validation', () => {
-    it('handles missing eventId prop gracefully', () => {
-      // @ts-expect-error - Testing invalid props
-      const { container } = render(
-        <EventLogo
-          eventName="Test Event"
-          organisationId="org-123"
-        />
-      );
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('handles missing eventName prop gracefully', () => {
-      // @ts-expect-error - Testing invalid props
-      const { container } = render(
-        <EventLogo
-          eventId="event-123"
-          organisationId="org-123"
-        />
-      );
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('handles missing organisationId prop gracefully', () => {
-      // @ts-expect-error - Testing invalid props
-      const { container } = render(
-        <EventLogo
-          eventId="event-123"
-          eventName="Test Event"
-        />
-      );
-      expect(container.firstChild).toBeInTheDocument();
-    });
-  });
-});
-
-describe('[component] EventLogoCompact', () => {
-  beforeEach(async () => {
-    vi.clearAllMocks();
-    mockUsePublicPageContext.mockReturnValue({
-      isPublicPage: false,
-      supabase: { from: vi.fn() }
-    });
-    mockUsePublicEventLogo.mockReturnValue({
-      logoUrl: null,
-      fallbackText: 'TE',
-      isLoading: false,
-      error: null
-    });
-    
-    // Set up the mocked hook
-    const { usePublicEventLogo } = await import('../../../hooks/public/usePublicEventLogo');
-    vi.mocked(usePublicEventLogo).mockImplementation(mockUsePublicEventLogo);
-  });
-
-  it('renders with compact size and rounded corners', () => {
-    const { container } = render(
-      <EventLogoCompact
-        eventId="event-123"
-        eventName="Test Event"
-        organisationId="org-123"
-        className="custom-class"
-      />
-    );
-
-    const logo = container.firstChild as HTMLElement;
-    expect(logo).toHaveClass('h-6', 'w-6', 'text-sm', 'rounded-sm', 'custom-class');
-  });
-});
-
-describe('[component] EventLogoLarge', () => {
-  beforeEach(async () => {
-    vi.clearAllMocks();
-    mockUsePublicPageContext.mockReturnValue({
-      isPublicPage: false,
-      supabase: { from: vi.fn() }
-    });
-    mockUsePublicEventLogo.mockReturnValue({
-      logoUrl: null,
-      fallbackText: 'TE',
-      isLoading: false,
-      error: null
-    });
-    
-    // Set up the mocked hook
-    const { usePublicEventLogo } = await import('../../../hooks/public/usePublicEventLogo');
-    vi.mocked(usePublicEventLogo).mockImplementation(mockUsePublicEventLogo);
-  });
-
-  it('renders with large size and rounded corners', () => {
-    const { container } = render(
-      <EventLogoLarge
-        eventId="event-123"
-        eventName="Test Event"
-        organisationId="org-123"
-        className="custom-class"
-      />
-    );
-
-    const logo = container.firstChild as HTMLElement;
-    expect(logo).toHaveClass('h-16', 'w-16', 'text-xl', 'rounded-lg', 'custom-class');
-  });
-});