@jmruthers/pace-core 0.5.181 → 0.5.182

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

@@ -0,0 +1,1210 @@
+/**
+ * @file PublicLayout Component Tests
+ * @package @jmruthers/pace-core
+ * @module Components/PublicLayout
+ * @since 1.0.0
+ *
+ * Comprehensive test suite for all PublicLayout components following testing standards.
+ * Tests cover all major functionality, edge cases, user interactions, and accessibility.
+ */
+
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { 
+  PublicPageLayout, 
+  PublicPageHeader, 
+  PublicPageFooter 
+} from './PublicPageLayout';
+import { PublicPageProvider, usePublicPageContext, useIsPublicPage } from './PublicPageProvider';
+import { useEventTheme } from '../../hooks/useEventTheme';
+import type { Event } from '../../types/event';
+import { assertOrganisationId } from '../../types/core';
+
+// === SHARED MOCKS ===
+
+vi.mock('../ErrorBoundary', () => ({
+  ErrorBoundary: vi.fn(({ children }) => <div data-testid="error-boundary">{children}</div>)
+}));
+
+vi.mock('../LoadingSpinner', () => ({
+  LoadingSpinner: vi.fn(({ size, className }) => (
+    <div data-testid="loading-spinner" data-size={size} className={className}>
+      Loading...
+    </div>
+  ))
+}));
+
+vi.mock('../../Button', () => ({
+  Button: vi.fn(({ children, onClick, ...props }) => (
+    <button onClick={onClick} {...props}>
+      {children}
+    </button>
+  ))
+}));
+
+vi.mock('../../hooks/useEventTheme', () => ({
+  useEventTheme: vi.fn()
+}));
+
+// Don't mock PublicPageProvider - let tests use the actual implementation
+// Instead, mock useAppConfig to work with public page context
+
+// Use vi.hoisted() to avoid hoisting issues
+// Mock useAppConfig to return a default config without requiring UnifiedAuthProvider
+const mockUseAppConfig = vi.hoisted(() => vi.fn(() => ({
+  appName: 'Test App',
+  supportsDirectAccess: false,
+  requiresEvent: true,
+  isLoading: false,
+})));
+
+vi.mock('../../hooks/useAppConfig', () => ({
+  useAppConfig: mockUseAppConfig
+}));
+
+vi.mock('../FileDisplay/FileDisplay', () => ({
+  FileDisplay: vi.fn(({ table_name, record_id, organisation_id, category, className, generateFallbackText }) => (
+    <div 
+      data-testid="event-logo" 
+      data-table-name={table_name}
+      data-record-id={record_id}
+      data-organisation-id={organisation_id}
+      data-category={category}
+      className={className}
+    >
+      Event Logo
+    </div>
+  ))
+}));
+
+vi.mock('../../utils/core/cn', () => ({
+  cn: vi.fn((...classes) => classes.filter(Boolean).join(' '))
+}));
+
+// Mock Supabase client - use vi.hoisted to make it accessible in tests
+const mockCreateClient = vi.hoisted(() => vi.fn(() => ({
+  from: vi.fn(),
+  rpc: vi.fn(),
+})));
+
+vi.mock('@supabase/supabase-js', () => ({
+  createClient: mockCreateClient
+}));
+
+// Mock logger
+// Note: Must define mock inside factory to avoid hoisting issues
+vi.mock('../../utils/core/logger', () => {
+  const mockLogger = {
+    debug: vi.fn(),
+    info: vi.fn(),
+    warn: vi.fn(),
+    error: vi.fn(),
+    createScopedLogger: vi.fn(() => mockLogger),
+    configure: vi.fn(),
+  };
+  
+  return {
+    logger: mockLogger,
+    createLogger: () => mockLogger,
+    Logger: {
+      debug: vi.fn(),
+      info: vi.fn(),
+      warn: vi.fn(),
+      error: vi.fn(),
+      configure: vi.fn(),
+      createScopedLogger: vi.fn(() => mockLogger),
+    },
+    LogLevel: {
+      DEBUG: 0,
+      INFO: 1,
+      WARN: 2,
+      ERROR: 3,
+    },
+  };
+});
+
+// Mock event data
+const mockEvent: Event = {
+  event_id: 'event-123',
+  event_name: 'Test Event',
+  event_venue: 'Test Venue',
+  organisation_id: assertOrganisationId('org-123'),
+  event_start_date: '2024-01-01',
+  event_end_date: '2024-01-02',
+  event_description: 'Test event description',
+  event_status: 'active',
+  created_at: '2024-01-01T00:00:00Z',
+  updated_at: '2024-01-01T00:00:00Z'
+};
+
+const mockEventWithoutVenue: Event = {
+  ...mockEvent,
+  event_venue: undefined
+};
+
+// === PUBLIC PAGE LAYOUT TESTS ===
+
+describe('[component] PublicPageLayout', () => {
+  const mockUseEventTheme = vi.mocked(useEventTheme);
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Event Theming', () => {
+    it('applies event theme when event is provided', () => {
+      const eventWithColours: Event = {
+        ...mockEvent,
+        event_colours: {
+          main: { '500': { L: 0.5, C: 0.2, H: 0 } },
+          sec: { '500': { L: 0.5, C: 0.2, H: 120 } },
+          acc: { '500': { L: 0.5, C: 0.2, H: 240 } }
+        }
+      };
+
+      render(
+        <PublicPageLayout eventCode="EVENT123" event={eventWithColours}>
+          <div>Test Content</div>
+        </PublicPageLayout>
+      );
+
+      expect(mockUseEventTheme).toHaveBeenCalledWith(eventWithColours);
+    });
+
+    it('applies theme with null event', () => {
+      render(
+        <PublicPageLayout eventCode="EVENT123" event={null}>
+          <div>Test Content</div>
+        </PublicPageLayout>
+      );
+
+      expect(mockUseEventTheme).toHaveBeenCalledWith(null);
+    });
+
+    it('applies theme with undefined event', () => {
+      render(
+        <PublicPageLayout eventCode="EVENT123" event={undefined} showValidationErrors={false}>
+          <div>Test Content</div>
+        </PublicPageLayout>
+      );
+
+      // When event is undefined, it gets defaulted to null in the function signature
+      // But useEventTheme is called before the early return, so it should be called
+      expect(mockUseEventTheme).toHaveBeenCalled();
+    });
+  });
+
+  describe('Loading States', () => {
+    it('shows loading spinner when isLoading is true', () => {
+      render(
+        <PublicPageLayout eventCode="EVENT123" isLoading={true}>
+          <div>Test Content</div>
+        </PublicPageLayout>
+      );
+
+      expect(screen.getByTestId('loading-spinner')).toBeInTheDocument();
+      expect(screen.queryByText('Test Content')).not.toBeInTheDocument();
+    });
+
+    it('shows custom loading message when provided', () => {
+      render(
+        <PublicPageLayout 
+          eventCode="EVENT123" 
+          isLoading={true}
+          loadingMessage="Loading event data..."
+        >
+          <div>Test Content</div>
+        </PublicPageLayout>
+      );
+
+      expect(screen.getByText('Loading event data...')).toBeInTheDocument();
+      expect(screen.getByTestId('loading-spinner')).toBeInTheDocument();
+    });
+
+    it('uses custom loading fallback when provided', () => {
+      const CustomLoading = () => <div data-testid="custom-loading">Custom Loading</div>;
+
+      render(
+        <PublicPageLayout 
+          eventCode="EVENT123" 
+          isLoading={true}
+          loadingFallback={CustomLoading}
+        >
+          <div>Test Content</div>
+        </PublicPageLayout>
+      );
+
+      expect(screen.getByTestId('custom-loading')).toBeInTheDocument();
+      expect(screen.queryByTestId('loading-spinner')).not.toBeInTheDocument();
+    });
+
+    it('renders loading state with proper layout classes', () => {
+      const { container } = render(
+        <PublicPageLayout eventCode="EVENT123" isLoading={true}>
+          <div>Test Content</div>
+        </PublicPageLayout>
+      );
+
+      const loadingContainer = container.querySelector('.min-h-screen');
+      expect(loadingContainer).toBeInTheDocument();
+      expect(loadingContainer).toHaveClass('bg-background', 'flex', 'items-center', 'justify-center');
+    });
+  });
+
+  describe('Error States', () => {
+    it('renders error state when error is provided', () => {
+      const error = new Error('Event not found');
+
+      render(
+        <PublicPageLayout eventCode="EVENT123" error={error}>
+          <div>Test Content</div>
+        </PublicPageLayout>
+      );
+
+      expect(screen.getByText('Event Not Found')).toBeInTheDocument();
+      expect(screen.getByText(/The event code "EVENT123" is invalid/)).toBeInTheDocument();
+      expect(screen.getByText('Try Again')).toBeInTheDocument();
+    });
+
+    it('calls refetch when Try Again button is clicked', async () => {
+      const user = userEvent.setup();
+      const mockRefetch = vi.fn().mockResolvedValue(undefined);
+      const error = new Error('Event not found');
+
+      render(
+        <PublicPageLayout eventCode="EVENT123" error={error} refetch={mockRefetch}>
+          <div>Test Content</div>
+        </PublicPageLayout>
+      );
+
+      const tryAgainButton = screen.getByText('Try Again');
+      await user.click(tryAgainButton);
+
+      expect(mockRefetch).toHaveBeenCalledTimes(1);
+    });
+
+    it('uses custom error fallback when provided', () => {
+      const CustomError = ({ error, retry }: { error: Error; retry: () => void }) => (
+        <div data-testid="custom-error">
+          Custom Error: {error.message}
+          <button onClick={retry}>Retry</button>
+        </div>
+      );
+      const error = new Error('Custom error');
+
+      render(
+        <PublicPageLayout 
+          eventCode="EVENT123" 
+          error={error}
+          errorFallback={CustomError}
+        >
+          <div>Test Content</div>
+        </PublicPageLayout>
+      );
+
+      expect(screen.getByTestId('custom-error')).toBeInTheDocument();
+      expect(screen.getByText('Custom Error: Custom error')).toBeInTheDocument();
+      expect(screen.queryByText('Event Not Found')).not.toBeInTheDocument();
+    });
+
+    it('hides error state when showValidationErrors is false', () => {
+      const error = new Error('Event not found');
+
+      render(
+        <PublicPageLayout 
+          eventCode="EVENT123" 
+          error={error}
+          showValidationErrors={false}
+        >
+          <div data-testid="content">Test Content</div>
+        </PublicPageLayout>
+      );
+
+      expect(screen.getByTestId('content')).toBeInTheDocument();
+      expect(screen.queryByText('Event Not Found')).not.toBeInTheDocument();
+    });
+
+    it('handles refetch function that returns void', async () => {
+      const user = userEvent.setup();
+      const mockRefetch = vi.fn();
+      const error = new Error('Event not found');
+
+      render(
+        <PublicPageLayout eventCode="EVENT123" error={error} refetch={mockRefetch}>
+          <div>Test Content</div>
+        </PublicPageLayout>
+      );
+
+      const tryAgainButton = screen.getByText('Try Again');
+      await user.click(tryAgainButton);
+
+      expect(mockRefetch).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Missing Event State', () => {
+    it('renders missing event state when no event is provided', () => {
+      render(
+        <PublicPageLayout eventCode="EVENT123">
+          <div>Test Content</div>
+        </PublicPageLayout>
+      );
+
+      expect(screen.getByText('Event Not Available')).toBeInTheDocument();
+      expect(screen.getByText('This event is not available for public viewing.')).toBeInTheDocument();
+      expect(screen.getByText('Try Again')).toBeInTheDocument();
+    });
+
+    it('calls refetch when Try Again is clicked in missing event state', async () => {
+      const user = userEvent.setup();
+      const mockRefetch = vi.fn().mockResolvedValue(undefined);
+
+      render(
+        <PublicPageLayout eventCode="EVENT123" refetch={mockRefetch}>
+          <div>Test Content</div>
+        </PublicPageLayout>
+      );
+
+      const tryAgainButton = screen.getByText('Try Again');
+      await user.click(tryAgainButton);
+
+      expect(mockRefetch).toHaveBeenCalledTimes(1);
+    });
+
+    it('hides validation errors when showValidationErrors is false', () => {
+      render(
+        <PublicPageLayout eventCode="EVENT123" showValidationErrors={false}>
+          <div data-testid="content">Test Content</div>
+        </PublicPageLayout>
+      );
+
+      expect(screen.getByTestId('content')).toBeInTheDocument();
+      expect(screen.queryByText('Event Not Available')).not.toBeInTheDocument();
+    });
+
+    it('does not show Try Again button when refetch is not provided', () => {
+      render(
+        <PublicPageLayout eventCode="EVENT123">
+          <div>Test Content</div>
+        </PublicPageLayout>
+      );
+
+      // Should still show Try Again button (default refetch is provided)
+      expect(screen.getByText('Try Again')).toBeInTheDocument();
+    });
+  });
+
+  describe('Rendering', () => {
+    it('renders with basic props', () => {
+      render(
+        <PublicPageLayout eventCode="EVENT123" event={mockEvent}>
+          <div data-testid="content">Test Content</div>
+        </PublicPageLayout>
+      );
+
+      expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
+      expect(screen.getByTestId('content')).toBeInTheDocument();
+    });
+
+    it('renders header by default', () => {
+      render(
+        <PublicPageLayout eventCode="EVENT123" event={mockEvent}>
+          <div>Test Content</div>
+        </PublicPageLayout>
+      );
+
+      expect(screen.getByRole('banner')).toBeInTheDocument();
+    });
+
+    it('renders footer by default when event exists', () => {
+      render(
+        <PublicPageLayout eventCode="EVENT123" event={mockEvent}>
+          <div>Test Content</div>
+        </PublicPageLayout>
+      );
+
+      expect(screen.getByRole('contentinfo')).toBeInTheDocument();
+    });
+
+    it('does not render footer when showFooter is false', () => {
+      render(
+        <PublicPageLayout eventCode="EVENT123" event={mockEvent} showFooter={false}>
+          <div data-testid="content">Test Content</div>
+        </PublicPageLayout>
+      );
+
+      expect(screen.getByRole('banner')).toBeInTheDocument();
+      expect(screen.queryByRole('contentinfo')).not.toBeInTheDocument();
+    });
+
+    it('does not render footer when event is null', () => {
+      render(
+        <PublicPageLayout eventCode="EVENT123" event={null} showValidationErrors={false}>
+          <div data-testid="content">Test Content</div>
+        </PublicPageLayout>
+      );
+
+      expect(screen.queryByRole('contentinfo')).not.toBeInTheDocument();
+    });
+
+    it('renders with custom header', () => {
+      const customHeader = <div data-testid="custom-header">Custom Header</div>;
+      
+      render(
+        <PublicPageLayout eventCode="EVENT123" event={mockEvent} customHeader={customHeader}>
+          <div data-testid="content">Test Content</div>
+        </PublicPageLayout>
+      );
+
+      expect(screen.getByTestId('custom-header')).toBeInTheDocument();
+      expect(screen.queryByRole('banner')).not.toBeInTheDocument();
+    });
+
+    it('renders with custom footer', () => {
+      const customFooter = <div data-testid="custom-footer">Custom Footer</div>;
+      
+      render(
+        <PublicPageLayout eventCode="EVENT123" event={mockEvent} customFooter={customFooter}>
+          <div data-testid="content">Test Content</div>
+        </PublicPageLayout>
+      );
+
+      expect(screen.getByTestId('custom-footer')).toBeInTheDocument();
+    });
+
+    it('renders main content with correct classes', () => {
+      const { container } = render(
+        <PublicPageLayout eventCode="EVENT123" event={mockEvent}>
+          <div>Test Content</div>
+        </PublicPageLayout>
+      );
+
+      const main = container.querySelector('main');
+      expect(main).toBeInTheDocument();
+      expect(main).toHaveClass('px-4', 'w-[min(var(--app-width),100%)]', 'mx-auto', 'py-8');
+    });
+
+    it('wraps content in error boundary', () => {
+      render(
+        <PublicPageLayout eventCode="EVENT123" event={mockEvent}>
+          <div>Test Content</div>
+        </PublicPageLayout>
+      );
+
+      expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles empty eventCode', () => {
+      render(
+        <PublicPageLayout eventCode="" event={mockEvent}>
+          <div data-testid="content">Test Content</div>
+        </PublicPageLayout>
+      );
+
+      expect(screen.getByTestId('content')).toBeInTheDocument();
+    });
+
+    it('handles event without venue', () => {
+      render(
+        <PublicPageLayout eventCode="EVENT123" event={mockEventWithoutVenue}>
+          <div data-testid="content">Test Content</div>
+        </PublicPageLayout>
+      );
+
+      expect(screen.getByTestId('content')).toBeInTheDocument();
+      expect(screen.queryByText('Test Venue')).not.toBeInTheDocument();
+    });
+
+    it('handles deprecated className prop gracefully', () => {
+      const { container } = render(
+        <PublicPageLayout 
+          eventCode="EVENT123" 
+          event={mockEvent}
+          className="deprecated-class"
+        >
+          <div>Test Content</div>
+        </PublicPageLayout>
+      );
+
+      // Component should still render even with deprecated prop
+      expect(container).toBeInTheDocument();
+    });
+  });
+});
+
+// === PUBLIC PAGE HEADER TESTS ===
+
+describe('[component] PublicPageHeader', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockUseAppConfig.mockReturnValue({
+      appName: 'Test App'
+    });
+  });
+
+  describe('Rendering', () => {
+    it('renders with basic props', () => {
+      render(
+        <PublicPageHeader event={mockEvent} eventCode="EVENT123" />
+      );
+
+      expect(screen.getByRole('banner')).toBeInTheDocument();
+      expect(screen.getByText('Test Event')).toBeInTheDocument();
+      expect(screen.getByText('Test Venue')).toBeInTheDocument();
+    });
+
+    it('renders with custom className', () => {
+      const { container } = render(
+        <PublicPageHeader 
+          event={mockEvent} 
+          eventCode="EVENT123" 
+          className="custom-header-class"
+        />
+      );
+
+      const header = container.firstChild as HTMLElement;
+      expect(header).toHaveClass('custom-header-class');
+    });
+
+    it('renders with title and description', () => {
+      render(
+        <PublicPageHeader 
+          event={mockEvent} 
+          eventCode="EVENT123"
+          title="Page Title"
+          description="Page Description"
+        />
+      );
+
+      expect(screen.getByText('Page Title')).toBeInTheDocument();
+      expect(screen.getByText('Page Description')).toBeInTheDocument();
+    });
+
+    it('renders with custom children', () => {
+      render(
+        <PublicPageHeader event={mockEvent} eventCode="EVENT123">
+          <div data-testid="custom-content">Custom Content</div>
+        </PublicPageHeader>
+      );
+
+      expect(screen.getByTestId('custom-content')).toBeInTheDocument();
+    });
+
+    it('renders without event', () => {
+      render(
+        <PublicPageHeader event={undefined} eventCode="EVENT123" />
+      );
+
+      expect(screen.getByRole('banner')).toBeInTheDocument();
+      expect(screen.queryByText('Test Event')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Logo Display', () => {
+    it('shows app logo by default', () => {
+      render(
+        <PublicPageHeader event={mockEvent} eventCode="EVENT123" />
+      );
+
+      const appLogo = screen.getByAltText('Test App');
+      expect(appLogo).toBeInTheDocument();
+      expect(appLogo).toHaveAttribute('src', '/test app_logo_wide.svg');
+    });
+
+    it('hides app logo when showAppLogo is false', () => {
+      render(
+        <PublicPageHeader 
+          event={mockEvent} 
+          eventCode="EVENT123" 
+          showAppLogo={false}
+        />
+      );
+
+      expect(screen.queryByAltText('Test App')).not.toBeInTheDocument();
+    });
+
+    it('hides app logo when appName is not available', () => {
+      mockUseAppConfig.mockReturnValueOnce({
+        appName: null
+      });
+
+      render(
+        <PublicPageHeader event={mockEvent} eventCode="EVENT123" />
+      );
+
+      expect(screen.queryByAltText('Test App')).not.toBeInTheDocument();
+    });
+
+    it('shows event logo by default', () => {
+      render(
+        <PublicPageHeader event={mockEvent} eventCode="EVENT123" />
+      );
+
+      expect(screen.getByTestId('event-logo')).toBeInTheDocument();
+      expect(screen.getByTestId('event-logo')).toHaveAttribute('data-table-name', 'event');
+      expect(screen.getByTestId('event-logo')).toHaveAttribute('data-record-id', 'event-123');
+    });
+
+    it('hides event logo when showEventLogo is false', () => {
+      render(
+        <PublicPageHeader 
+          event={mockEvent} 
+          eventCode="EVENT123"
+          showEventLogo={false}
+        />
+      );
+
+      expect(screen.queryByTestId('event-logo')).not.toBeInTheDocument();
+    });
+
+    it('uses custom event logo when provided', () => {
+      const customLogo = <div data-testid="custom-event-logo">Custom Logo</div>;
+
+      render(
+        <PublicPageHeader 
+          event={mockEvent} 
+          eventCode="EVENT123"
+          customEventLogo={customLogo}
+        />
+      );
+
+      expect(screen.getByTestId('custom-event-logo')).toBeInTheDocument();
+      expect(screen.queryByTestId('event-logo')).not.toBeInTheDocument();
+    });
+
+    it('does not show event logo when event is not provided', () => {
+      render(
+        <PublicPageHeader event={undefined} eventCode="EVENT123" />
+      );
+
+      expect(screen.queryByTestId('event-logo')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Event Information', () => {
+    it('displays event name as main heading', () => {
+      render(
+        <PublicPageHeader event={mockEvent} eventCode="EVENT123" />
+      );
+
+      const heading = screen.getByRole('heading', { level: 1 });
+      expect(heading).toHaveTextContent('Test Event');
+    });
+
+    it('displays event venue when available', () => {
+      render(
+        <PublicPageHeader event={mockEvent} eventCode="EVENT123" />
+      );
+
+      expect(screen.getByText('Test Venue')).toBeInTheDocument();
+    });
+
+    it('does not display venue when event has no venue', () => {
+      render(
+        <PublicPageHeader event={mockEventWithoutVenue} eventCode="EVENT123" />
+      );
+
+      expect(screen.queryByText('Test Venue')).not.toBeInTheDocument();
+    });
+
+    it('displays event name even when venue is missing', () => {
+      render(
+        <PublicPageHeader event={mockEventWithoutVenue} eventCode="EVENT123" />
+      );
+
+      expect(screen.getByText('Test Event')).toBeInTheDocument();
+    });
+  });
+
+  describe('Title and Description', () => {
+    it('prioritizes title over event name when both are provided', () => {
+      render(
+        <PublicPageHeader 
+          event={mockEvent} 
+          eventCode="EVENT123"
+          title="Custom Title"
+        />
+      );
+
+      const headings = screen.getAllByRole('heading', { level: 1 });
+      expect(headings.some(h => h.textContent === 'Custom Title')).toBe(true);
+    });
+
+    it('renders description when provided with title', () => {
+      render(
+        <PublicPageHeader 
+          event={mockEvent} 
+          eventCode="EVENT123"
+          title="Page Title"
+          description="Page Description"
+        />
+      );
+
+      expect(screen.getByText('Page Description')).toBeInTheDocument();
+    });
+
+    it('does not render description without title', () => {
+      render(
+        <PublicPageHeader 
+          event={mockEvent} 
+          eventCode="EVENT123"
+          description="Page Description"
+        />
+      );
+
+      expect(screen.queryByText('Page Description')).not.toBeInTheDocument();
+    });
+  });
+});
+
+// === PUBLIC PAGE FOOTER TESTS ===
+
+describe('[component] PublicPageFooter', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('renders with basic props', () => {
+      render(<PublicPageFooter event={mockEvent} />);
+
+      expect(screen.getByRole('contentinfo')).toBeInTheDocument();
+      expect(screen.getByText(/© Copyright 2022–/)).toBeInTheDocument();
+      expect(screen.getByText(/Solvera Solutions Pty Ltd/)).toBeInTheDocument();
+    });
+
+    it('renders with custom company name', () => {
+      render(
+        <PublicPageFooter 
+          event={mockEvent} 
+          companyName="Custom Company"
+        />
+      );
+
+      expect(screen.getByText(/Custom Company/)).toBeInTheDocument();
+    });
+
+    it('renders with custom copyright text', () => {
+      render(
+        <PublicPageFooter 
+          event={mockEvent} 
+          copyright="Custom copyright text"
+        />
+      );
+
+      expect(screen.getByText('Custom copyright text')).toBeInTheDocument();
+    });
+
+    it('renders with custom year', () => {
+      render(
+        <PublicPageFooter 
+          event={mockEvent} 
+          year={2025}
+        />
+      );
+
+      expect(screen.getByText(/© Copyright 2022–2025/)).toBeInTheDocument();
+    });
+
+    it('renders with logo when provided', () => {
+      render(
+        <PublicPageFooter 
+          event={mockEvent} 
+          logo="/path/to/logo.png"
+        />
+      );
+
+      const logo = screen.getByAltText('Logo');
+      expect(logo).toBeInTheDocument();
+      expect(logo).toHaveAttribute('src', '/path/to/logo.png');
+    });
+
+    it('renders with custom children', () => {
+      render(
+        <PublicPageFooter event={mockEvent}>
+          <div data-testid="footer-content">Footer Content</div>
+        </PublicPageFooter>
+      );
+
+      expect(screen.getByTestId('footer-content')).toBeInTheDocument();
+    });
+
+    it('renders with custom className', () => {
+      const { container } = render(
+        <PublicPageFooter 
+          event={mockEvent} 
+          className="custom-footer-class"
+        />
+      );
+
+      const footer = container.firstChild as HTMLElement;
+      expect(footer).toHaveClass('custom-footer-class');
+    });
+  });
+
+  describe('Navigation Links', () => {
+    it('renders navigation links when provided', () => {
+      const links = [
+        { label: 'Home', href: '/' },
+        { label: 'About', href: '/about' }
+      ];
+
+      render(
+        <PublicPageFooter 
+          event={mockEvent} 
+          links={links}
+        />
+      );
+
+      const homeLink = screen.getByText('Home');
+      const aboutLink = screen.getByText('About');
+
+      expect(homeLink).toBeInTheDocument();
+      expect(aboutLink).toBeInTheDocument();
+      expect(homeLink.closest('a')).toHaveAttribute('href', '/');
+      expect(aboutLink.closest('a')).toHaveAttribute('href', '/about');
+    });
+
+    it('does not render links when empty array is provided', () => {
+      render(
+        <PublicPageFooter 
+          event={mockEvent} 
+          links={[]}
+        />
+      );
+
+      expect(screen.queryByRole('list')).not.toBeInTheDocument();
+    });
+
+    it('renders multiple links correctly', () => {
+      const links = [
+        { label: 'Home', href: '/' },
+        { label: 'About', href: '/about' },
+        { label: 'Contact', href: '/contact' }
+      ];
+
+      render(
+        <PublicPageFooter 
+          event={mockEvent} 
+          links={links}
+        />
+      );
+
+      expect(screen.getByText('Home')).toBeInTheDocument();
+      expect(screen.getByText('About')).toBeInTheDocument();
+      expect(screen.getByText('Contact')).toBeInTheDocument();
+    });
+  });
+
+  describe('Copyright Text', () => {
+    it('uses default copyright format', () => {
+      const currentYear = new Date().getFullYear();
+      render(<PublicPageFooter event={mockEvent} />);
+
+      expect(screen.getByText(new RegExp(`© Copyright 2022–${currentYear}`))).toBeInTheDocument();
+    });
+
+    it('uses custom copyright when provided', () => {
+      render(
+        <PublicPageFooter 
+          event={mockEvent} 
+          copyright="All rights reserved"
+        />
+      );
+
+      expect(screen.getByText('All rights reserved')).toBeInTheDocument();
+      expect(screen.queryByText(/© Copyright/)).not.toBeInTheDocument();
+    });
+  });
+});
+
+// === PUBLIC PAGE PROVIDER TESTS ===
+
+describe('[component] PublicPageProvider', () => {
+  const originalEnv = import.meta.env;
+  const originalProcess = process.env;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    Object.defineProperty(import.meta, 'env', {
+      value: {},
+      writable: true,
+      configurable: true
+    });
+    process.env = {};
+  });
+
+  afterEach(() => {
+    Object.defineProperty(import.meta, 'env', {
+      value: originalEnv,
+      writable: true,
+      configurable: true
+    });
+    process.env = originalProcess;
+  });
+
+  describe('Rendering', () => {
+    it('renders children without crashing', () => {
+      render(
+        <PublicPageProvider>
+          <div>Test Content</div>
+        </PublicPageProvider>
+      );
+      
+      expect(screen.getByText('Test Content')).toBeInTheDocument();
+    });
+
+    it('wraps children in error boundary', () => {
+      render(
+        <PublicPageProvider>
+          <div>Test Content</div>
+        </PublicPageProvider>
+      );
+
+      expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
+    });
+  });
+
+  describe('Context API', () => {
+    it('provides context with isPublicPage flag', () => {
+      const TestComponent = () => {
+        const context = usePublicPageContext();
+        return <div>{context.isPublicPage ? 'true' : 'false'}</div>;
+      };
+
+      render(
+        <PublicPageProvider>
+          <TestComponent />
+        </PublicPageProvider>
+      );
+
+      expect(screen.getByText('true')).toBeInTheDocument();
+    });
+
+    it('provides appName in context', () => {
+      const TestComponent = () => {
+        const context = usePublicPageContext();
+        return <div>{context.appName || 'no-app-name'}</div>;
+      };
+
+      render(
+        <PublicPageProvider appName="TestApp">
+          <TestComponent />
+        </PublicPageProvider>
+      );
+
+      expect(screen.getByText('TestApp')).toBeInTheDocument();
+    });
+
+    it('provides null appName when not specified', () => {
+      const TestComponent = () => {
+        const context = usePublicPageContext();
+        return <div>{context.appName === null ? 'null' : 'not-null'}</div>;
+      };
+
+      render(
+        <PublicPageProvider>
+          <TestComponent />
+        </PublicPageProvider>
+      );
+
+      expect(screen.getByText('null')).toBeInTheDocument();
+    });
+
+    it('provides environment variables in context', () => {
+      // Set environment variables - need to set both import.meta.env and process.env
+      // since the component checks both
+      const mockEnv = {
+        VITE_SUPABASE_URL: 'https://test.supabase.co',
+        VITE_SUPABASE_ANON_KEY: 'test-key'
+      };
+      
+      Object.defineProperty(import.meta, 'env', {
+        value: mockEnv,
+        writable: true,
+        configurable: true
+      });
+      
+      // Also set process.env as fallback
+      const originalProcessEnv = process.env;
+      process.env = {
+        ...originalProcessEnv,
+        VITE_SUPABASE_URL: 'https://test.supabase.co',
+        VITE_SUPABASE_ANON_KEY: 'test-key'
+      };
+
+      const TestComponent = () => {
+        const context = usePublicPageContext();
+        return (
+          <div>
+            <span data-testid="url">{context.environment.supabaseUrl || 'no-url'}</span>
+            <span data-testid="key">{context.environment.supabaseKey || 'no-key'}</span>
+          </div>
+        );
+      };
+
+      render(
+        <PublicPageProvider>
+          <TestComponent />
+        </PublicPageProvider>
+      );
+
+      expect(screen.getByTestId('url')).toHaveTextContent('https://test.supabase.co');
+      expect(screen.getByTestId('key')).toHaveTextContent('test-key');
+    });
+  });
+
+  describe('Supabase Client Creation', () => {
+    beforeEach(() => {
+      mockCreateClient.mockClear();
+    });
+
+    it('creates Supabase client when environment variables are available', () => {
+      const originalEnv = import.meta.env;
+      const originalProcessEnv = process.env;
+      
+      // Set environment variables - need to set both import.meta.env and process.env
+      const mockEnv = {
+        VITE_SUPABASE_URL: 'https://test.supabase.co',
+        VITE_SUPABASE_ANON_KEY: 'test-key'
+      };
+      
+      Object.defineProperty(import.meta, 'env', {
+        value: mockEnv,
+        writable: true,
+        configurable: true
+      });
+      
+      process.env = {
+        ...originalProcessEnv,
+        VITE_SUPABASE_URL: 'https://test.supabase.co',
+        VITE_SUPABASE_ANON_KEY: 'test-key'
+      };
+
+      render(
+        <PublicPageProvider>
+          <div>Test</div>
+        </PublicPageProvider>
+      );
+
+      expect(mockCreateClient).toHaveBeenCalledWith('https://test.supabase.co', 'test-key');
+      
+      // Restore
+      Object.defineProperty(import.meta, 'env', {
+        value: originalEnv,
+        writable: true,
+        configurable: true
+      });
+      process.env = originalProcessEnv;
+    });
+
+    it('handles missing environment variables gracefully', () => {
+      const TestComponent = () => {
+        const context = usePublicPageContext();
+        return <div>{context.supabase === null ? 'no-client' : 'has-client'}</div>;
+      };
+
+      render(
+        <PublicPageProvider>
+          <TestComponent />
+        </PublicPageProvider>
+      );
+
+      expect(screen.getByText('no-client')).toBeInTheDocument();
+    });
+
+    it('supports NEXT_PUBLIC_ prefixed environment variables', () => {
+      mockCreateClient.mockClear();
+      
+      const originalEnv = import.meta.env;
+      const originalProcessEnv = process.env;
+      
+      const mockEnv = {
+        NEXT_PUBLIC_SUPABASE_URL: 'https://next.supabase.co',
+        NEXT_PUBLIC_SUPABASE_ANON_KEY: 'next-key'
+      };
+      
+      Object.defineProperty(import.meta, 'env', {
+        value: mockEnv,
+        writable: true,
+        configurable: true
+      });
+      
+      process.env = {
+        ...originalProcessEnv,
+        NEXT_PUBLIC_SUPABASE_URL: 'https://next.supabase.co',
+        NEXT_PUBLIC_SUPABASE_ANON_KEY: 'next-key'
+      };
+
+      render(
+        <PublicPageProvider>
+          <div>Test</div>
+        </PublicPageProvider>
+      );
+
+      expect(mockCreateClient).toHaveBeenCalledWith('https://next.supabase.co', 'next-key');
+      
+      // Restore
+      Object.defineProperty(import.meta, 'env', {
+        value: originalEnv,
+        writable: true,
+        configurable: true
+      });
+      process.env = originalProcessEnv;
+    });
+  });
+
+  describe('usePublicPageContext Hook', () => {
+    it('throws error when used outside provider', () => {
+      const consoleError = console.error;
+      console.error = vi.fn();
+
+      const TestComponent = () => {
+        try {
+          const context = usePublicPageContext();
+          return <div>{context.isPublicPage ? 'true' : 'false'}</div>;
+        } catch (error) {
+          return <div>{(error as Error).message}</div>;
+        }
+      };
+
+      render(<TestComponent />);
+
+      expect(screen.getByText('usePublicPageContext must be used within a PublicPageProvider')).toBeInTheDocument();
+
+      console.error = consoleError;
+    });
+  });
+
+  describe('useIsPublicPage Hook', () => {
+    it('returns false when used outside provider', () => {
+      const TestComponent = () => {
+        const isPublic = useIsPublicPage();
+        return <div>{isPublic ? 'true' : 'false'}</div>;
+      };
+
+      render(<TestComponent />);
+      expect(screen.getByText('false')).toBeInTheDocument();
+    });
+
+    it('returns true when used inside provider', () => {
+      const TestComponent = () => {
+        const isPublic = useIsPublicPage();
+        return <div>{isPublic ? 'true' : 'false'}</div>;
+      };
+
+      render(
+        <PublicPageProvider>
+          <TestComponent />
+        </PublicPageProvider>
+      );
+
+      expect(screen.getByText('true')).toBeInTheDocument();
+    });
+  });
+});
+