@jmruthers/pace-core 0.6.9 → 0.6.11

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

@@ -1,26 +1,32 @@
 /**
- * @file PublicLayout Component Tests
+ * @file Integration Tests for PublicLayout Components
  * @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.
+ * 
+ * Integration tests for PublicLayout components focusing on observable behavior,
+ * user interactions, accessibility, and edge cases.
  */
 
 import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { render, screen, 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 
+import {
+  PublicPageLayout,
+  PublicPageHeader,
+  PublicPageFooter
 } from './PublicPageLayout';
-import { PublicPageProvider, usePublicPageContext, useIsPublicPage } from './PublicPageProvider';
+import { PublicPageProvider } from './PublicPageProvider';
+import { usePublicPageContext, useIsPublicPage } from './usePublicPageContext';
+import type { PublicPageContextType } from './PublicPageContext';
 import { useEventTheme } from '../../hooks/useEventTheme';
 import type { Event } from '../../types/event';
 import { assertOrganisationId } from '../../types/core';
+import { logger } from '../../utils/core/logger';
+
+// Following testing standards: use timeout parameter to prevent hanging
+const TEST_TIMEOUT = 10000; // 10 seconds per test
 
 // === SHARED MOCKS ===
 
@@ -65,18 +71,22 @@ vi.mock('../../hooks/useAppConfig', () => ({
 }));
 
 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>
-  ))
+  FileDisplay: vi.fn(({ table_name, record_id, organisation_id, category, className, generateFallbackText }) => {
+    const fallbackText = typeof generateFallbackText === 'function' ? generateFallbackText('') : '';
+    return (
+      <div
+        data-testid="event-logo"
+        data-table-name={table_name}
+        data-record-id={record_id}
+        data-organisation-id={organisation_id}
+        data-category={category}
+        data-fallback={fallbackText}
+        className={className}
+      >
+        {fallbackText || 'Event Logo'}
+      </div>
+    );
+  })
 }));
 
 vi.mock('../../utils/core/cn', () => ({
@@ -247,13 +257,13 @@ describe('[component] PublicPageLayout', () => {
         </PublicPageLayout>
       );
 
-      // The loading state renders a <p> tag with grid and place-items-center classes
-      // There may be multiple "Loading..." texts (from LoadingSpinner mock and actual text)
-      // So we query by the container element using getAllByText and find the one in the <p> tag
-      const loadingTexts = screen.getAllByText('Loading...');
-      const loadingContainer = loadingTexts.find(text => text.closest('p'))?.closest('p');
+      // Loading state uses <main> with role="status" and layout classes
+      const loadingContainer = screen.getByRole('status');
       expect(loadingContainer).toBeInTheDocument();
-      expect(loadingContainer).toHaveClass('grid', 'place-items-center', 'text-center', 'size-full');
+      expect(loadingContainer).toHaveClass('grid', 'place-items-center', 'text-center', 'size-full', 'gap-2');
+      expect(loadingContainer).toHaveAttribute('role', 'status');
+      expect(loadingContainer).toHaveAttribute('aria-busy', 'true');
+      expect(loadingContainer.querySelector('.sr-only')).toHaveTextContent('Loading');
     });
   });
 
@@ -272,6 +282,20 @@ describe('[component] PublicPageLayout', () => {
       expect(screen.getByText('Try Again')).toBeInTheDocument();
     });
 
+    it('error state has one h1 and Try Again is a button (accessibility)', () => {
+      const error = new Error('Event not found');
+      render(
+        <PublicPageLayout eventCode="EVENT123" error={error}>
+          <div>Test Content</div>
+        </PublicPageLayout>
+      );
+
+      const headings = screen.getAllByRole('heading', { level: 1 });
+      expect(headings).toHaveLength(1);
+      expect(headings[0]).toHaveTextContent('Event Not Found');
+      expect(screen.getByRole('button', { name: /try again/i })).toBeInTheDocument();
+    });
+
     it('calls refetch when Try Again button is clicked', async () => {
       const user = userEvent.setup();
       const mockRefetch = vi.fn().mockResolvedValue(undefined);
@@ -361,6 +385,19 @@ describe('[component] PublicPageLayout', () => {
       expect(screen.getByText('Try Again')).toBeInTheDocument();
     });
 
+    it('missing event state has one h1 and Try Again is a button (accessibility)', () => {
+      render(
+        <PublicPageLayout eventCode="EVENT123">
+          <div>Test Content</div>
+        </PublicPageLayout>
+      );
+
+      const headings = screen.getAllByRole('heading', { level: 1 });
+      expect(headings).toHaveLength(1);
+      expect(headings[0]).toHaveTextContent('Event Not Available');
+      expect(screen.getByRole('button', { name: /try again/i })).toBeInTheDocument();
+    });
+
     it('calls refetch when Try Again is clicked in missing event state', async () => {
       const user = userEvent.setup();
       const mockRefetch = vi.fn().mockResolvedValue(undefined);
@@ -476,6 +513,7 @@ describe('[component] PublicPageLayout', () => {
       );
 
       expect(screen.getByTestId('custom-footer')).toBeInTheDocument();
+      expect(screen.queryByRole('contentinfo')).not.toBeInTheDocument();
     });
 
     it('renders main content with correct classes', () => {
@@ -487,7 +525,7 @@ describe('[component] PublicPageLayout', () => {
 
       const main = container.querySelector('main');
       expect(main).toBeInTheDocument();
-      expect(main).toHaveClass('px-4', 'w-[min(var(--app-width),100%)]', 'mx-auto', 'py-8');
+      expect(main).toHaveClass('px-4', 'w-full', 'max-w-app-content-max', 'mx-auto', 'py-8');
     });
 
     it('wraps content in error boundary', () => {
@@ -501,6 +539,82 @@ describe('[component] PublicPageLayout', () => {
     });
   });
 
+  describe('Print orientation', () => {
+    it('applies print-page-landscape class in error state when printPageOrientation is landscape', () => {
+      const error = new Error('Event not found');
+      const { container } = render(
+        <PublicPageLayout eventCode="EVENT123" error={error} printPageOrientation="landscape">
+          <div>Test Content</div>
+        </PublicPageLayout>
+      );
+
+      const main = container.querySelector('main');
+      expect(main).toBeInTheDocument();
+      expect(main).toHaveClass('print-page-landscape');
+    });
+
+    it('applies print-page-portrait class in error state when printPageOrientation is portrait', () => {
+      const error = new Error('Event not found');
+      const { container } = render(
+        <PublicPageLayout eventCode="EVENT123" error={error} printPageOrientation="portrait">
+          <div>Test Content</div>
+        </PublicPageLayout>
+      );
+
+      const main = container.querySelector('main');
+      expect(main).toBeInTheDocument();
+      expect(main).toHaveClass('print-page-portrait');
+    });
+
+    it('applies print-page-landscape class in missing-event state when printPageOrientation is landscape', () => {
+      const { container } = render(
+        <PublicPageLayout eventCode="EVENT123" printPageOrientation="landscape">
+          <div>Test Content</div>
+        </PublicPageLayout>
+      );
+
+      const main = container.querySelector('main');
+      expect(main).toBeInTheDocument();
+      expect(main).toHaveClass('print-page-landscape');
+    });
+
+    it('applies print-page-portrait class in missing-event state when printPageOrientation is portrait', () => {
+      const { container } = render(
+        <PublicPageLayout eventCode="EVENT123" printPageOrientation="portrait">
+          <div>Test Content</div>
+        </PublicPageLayout>
+      );
+
+      const main = container.querySelector('main');
+      expect(main).toBeInTheDocument();
+      expect(main).toHaveClass('print-page-portrait');
+    });
+
+    it('applies print-page-landscape class to main content when printPageOrientation is landscape', () => {
+      const { container } = render(
+        <PublicPageLayout eventCode="EVENT123" event={mockEvent} printPageOrientation="landscape">
+          <div data-testid="content">Test Content</div>
+        </PublicPageLayout>
+      );
+
+      const mains = container.querySelectorAll('main');
+      expect(mains.length).toBe(1);
+      expect(mains[0]).toHaveClass('print-page-landscape');
+    });
+
+    it('applies print-page-portrait class to main content when printPageOrientation is portrait', () => {
+      const { container } = render(
+        <PublicPageLayout eventCode="EVENT123" event={mockEvent} printPageOrientation="portrait">
+          <div data-testid="content">Test Content</div>
+        </PublicPageLayout>
+      );
+
+      const mains = container.querySelectorAll('main');
+      expect(mains.length).toBe(1);
+      expect(mains[0]).toHaveClass('print-page-portrait');
+    });
+  });
+
   describe('Edge Cases', () => {
     it('handles empty eventCode', () => {
       render(
@@ -523,10 +637,10 @@ describe('[component] PublicPageLayout', () => {
       expect(screen.queryByText('Test Venue')).not.toBeInTheDocument();
     });
 
-    it('handles deprecated className prop gracefully', () => {
+    it('handles unknown props gracefully', () => {
       const { container } = render(
-        <PublicPageLayout 
-          eventCode="EVENT123" 
+        <PublicPageLayout
+          eventCode="EVENT123"
           event={mockEvent}
           className="deprecated-class"
         >
@@ -534,9 +648,107 @@ describe('[component] PublicPageLayout', () => {
         </PublicPageLayout>
       );
 
-      // Component should still render even with deprecated prop
+      // Component ignores unknown props and still renders
       expect(container).toBeInTheDocument();
-    });
+    }, TEST_TIMEOUT);
+
+    it('handles theme application with invalid event data', () => {
+      const invalidEvent = {
+        ...mockEvent,
+        event_colours: null
+      } as Event;
+
+      render(
+        <PublicPageLayout eventCode="EVENT123" event={invalidEvent} showValidationErrors={false}>
+          <div data-testid="content">Test Content</div>
+        </PublicPageLayout>
+      );
+
+      expect(screen.getByTestId('content')).toBeInTheDocument();
+      // Should not crash even with invalid event data
+    }, TEST_TIMEOUT);
+
+    it('handles loading state transitions', async () => {
+      const { rerender } = render(
+        <PublicPageLayout eventCode="EVENT123" isLoading={true}>
+          <div>Content</div>
+        </PublicPageLayout>
+      );
+
+      expect(screen.getByTestId('loading-spinner')).toBeInTheDocument();
+
+      rerender(
+        <PublicPageLayout eventCode="EVENT123" isLoading={false} event={mockEvent}>
+          <div>Content</div>
+        </PublicPageLayout>
+      );
+
+      expect(screen.queryByTestId('loading-spinner')).not.toBeInTheDocument();
+      expect(screen.getByText('Content')).toBeInTheDocument();
+    }, TEST_TIMEOUT);
+
+    it('handles error state recovery scenarios', async () => {
+      const error = new Error('Event not found');
+
+      const { rerender } = render(
+        <PublicPageLayout eventCode="EVENT123" error={error}>
+          <div>Content</div>
+        </PublicPageLayout>
+      );
+
+      expect(screen.getByText('Event Not Found')).toBeInTheDocument();
+
+      // Simulate recovery by removing error
+      rerender(
+        <PublicPageLayout eventCode="EVENT123" event={mockEvent}>
+          <div>Content</div>
+        </PublicPageLayout>
+      );
+
+      expect(screen.queryByText('Event Not Found')).not.toBeInTheDocument();
+      expect(screen.getByText('Content')).toBeInTheDocument();
+    }, TEST_TIMEOUT);
+
+    it('handles missing event with various refetch scenarios', async () => {
+      const user = userEvent.setup();
+      const mockRefetchPromise = vi.fn().mockResolvedValue(undefined);
+      const mockRefetchVoid = vi.fn();
+      const mockRefetchError = vi.fn().mockRejectedValue(new Error('Refetch failed'));
+
+      // Test with promise-returning refetch
+      const { rerender } = render(
+        <PublicPageLayout eventCode="EVENT123" refetch={mockRefetchPromise}>
+          <div>Content</div>
+        </PublicPageLayout>
+      );
+
+      const tryAgain1 = screen.getByText('Try Again');
+      await user.click(tryAgain1);
+      expect(mockRefetchPromise).toHaveBeenCalledTimes(1);
+
+      // Test with void-returning refetch
+      rerender(
+        <PublicPageLayout eventCode="EVENT123" refetch={mockRefetchVoid}>
+          <div>Content</div>
+        </PublicPageLayout>
+      );
+
+      const tryAgain2 = screen.getByText('Try Again');
+      await user.click(tryAgain2);
+      expect(mockRefetchVoid).toHaveBeenCalledTimes(1);
+
+      // Test with error-throwing refetch
+      rerender(
+        <PublicPageLayout eventCode="EVENT123" refetch={mockRefetchError}>
+          <div>Content</div>
+        </PublicPageLayout>
+      );
+
+      const tryAgain3 = screen.getByText('Try Again');
+      await user.click(tryAgain3);
+      expect(mockRefetchError).toHaveBeenCalledTimes(1);
+      // Should handle error gracefully
+    }, TEST_TIMEOUT);
   });
 });
 
@@ -649,10 +861,31 @@ describe('[component] PublicPageHeader', () => {
       );
 
       expect(screen.getByTestId('event-logo')).toBeInTheDocument();
-      expect(screen.getByTestId('event-logo')).toHaveAttribute('data-table-name', 'event');
+      expect(screen.getByTestId('event-logo')).toHaveAttribute('data-table-name', 'core_events');
       expect(screen.getByTestId('event-logo')).toHaveAttribute('data-record-id', 'event-123');
     });
 
+    it('renders event logo fallback text from event name abbreviation (generateFallbackText)', () => {
+      render(
+        <PublicPageHeader event={mockEvent} eventCode="EVENT123" />
+      );
+
+      const eventLogo = screen.getByTestId('event-logo');
+      expect(eventLogo).toHaveAttribute('data-fallback', 'TE');
+      expect(eventLogo).toHaveTextContent('TE');
+    });
+
+    it('renders event logo fallback EV when event has no event_name', () => {
+      const eventWithNoName = { ...mockEvent, event_name: '' };
+      render(
+        <PublicPageHeader event={eventWithNoName} eventCode="EVENT123" />
+      );
+
+      const eventLogo = screen.getByTestId('event-logo');
+      expect(eventLogo).toHaveAttribute('data-fallback', 'EV');
+      expect(eventLogo).toHaveTextContent('EV');
+    });
+
     it('hides event logo when showEventLogo is false', () => {
       render(
         <PublicPageHeader 
@@ -707,6 +940,20 @@ describe('[component] PublicPageHeader', () => {
       expect(screen.getByText('Test Venue')).toBeInTheDocument();
     });
 
+    it('uses correct heading order (h1 then h4 when venue present) for accessibility', () => {
+      render(
+        <PublicPageHeader event={mockEvent} eventCode="EVENT123" />
+      );
+
+      const header = screen.getByRole('banner');
+      expect(header.tagName).toBe('HEADER');
+      const h1 = header.querySelector('h1');
+      const h4 = header.querySelector('h4');
+      expect(h1).toBeInTheDocument();
+      expect(h4).toBeInTheDocument();
+      expect((h1!.compareDocumentPosition(h4!) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0).toBe(true);
+    });
+
     it('does not display venue when event has no venue', () => {
       render(
         <PublicPageHeader event={mockEventWithoutVenue} eventCode="EVENT123" />
@@ -1060,6 +1307,41 @@ describe('[component] PublicPageProvider', () => {
       expect(screen.getByTestId('url')).toHaveTextContent('https://test.supabase.co');
       expect(screen.getByTestId('key')).toHaveTextContent('test-key');
     });
+
+    it('uses process.env when import.meta.env is undefined (getEnvVar process.env branch)', () => {
+      mockCreateClient.mockClear();
+      Object.defineProperty(import.meta, 'env', {
+        value: undefined,
+        writable: true,
+        configurable: true
+      });
+      const originalProcessEnv = process.env;
+      process.env = {
+        ...originalProcessEnv,
+        VITE_SUPABASE_URL: 'https://process-env.supabase.co',
+        VITE_SUPABASE_PUBLISHABLE_KEY: 'process-env-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://process-env.supabase.co');
+      expect(screen.getByTestId('key')).toHaveTextContent('process-env-key');
+      expect(mockCreateClient).toHaveBeenCalledWith('https://process-env.supabase.co', 'process-env-key');
+    });
   });
 
   describe('Supabase Client Creation', () => {
@@ -1119,6 +1401,10 @@ describe('[component] PublicPageProvider', () => {
       );
 
       expect(screen.getByText('no-client')).toBeInTheDocument();
+      expect(logger.warn).toHaveBeenCalledWith(
+        'PublicPageProvider',
+        expect.stringContaining('Missing Supabase')
+      );
     });
 
     it('supports NEXT_PUBLIC_ prefixed environment variables', () => {
@@ -1178,7 +1464,9 @@ describe('[component] PublicPageProvider', () => {
 
       render(<TestComponent />);
 
-      expect(screen.getByText('usePublicPageContext must be used within a PublicPageProvider')).toBeInTheDocument();
+      const message = screen.getByText('usePublicPageContext must be used within a PublicPageProvider');
+      expect(message).toBeInTheDocument();
+      expect(message.textContent).toContain('PublicPageProvider');
 
       console.error = consoleError;
     });
@@ -1193,7 +1481,7 @@ describe('[component] PublicPageProvider', () => {
 
       render(<TestComponent />);
       expect(screen.getByText('false')).toBeInTheDocument();
-    });
+    }, TEST_TIMEOUT);
 
     it('returns true when used inside provider', () => {
       const TestComponent = () => {
@@ -1208,7 +1496,1321 @@ describe('[component] PublicPageProvider', () => {
       );
 
       expect(screen.getByText('true')).toBeInTheDocument();
-    });
+    }, TEST_TIMEOUT);
+  });
+
+  describe('Edge Cases', () => {
+    it('handles empty string appName', () => {
+      const TestComponent = () => {
+        const context = usePublicPageContext();
+        return <div>{context.appName === null ? 'null' : context.appName || 'empty'}</div>;
+      };
+
+      render(
+        <PublicPageProvider appName="">
+          <TestComponent />
+        </PublicPageProvider>
+      );
+
+      // Empty string should be treated as falsy and become null
+      expect(screen.getByText('null')).toBeInTheDocument();
+    }, TEST_TIMEOUT);
+
+    it('handles very long appName', () => {
+      const longAppName = 'A'.repeat(1000);
+      const TestComponent = () => {
+        const context = usePublicPageContext();
+        return <div>{context.appName}</div>;
+      };
+
+      render(
+        <PublicPageProvider appName={longAppName}>
+          <TestComponent />
+        </PublicPageProvider>
+      );
+
+      expect(screen.getByText(longAppName)).toBeInTheDocument();
+    }, TEST_TIMEOUT);
+
+    it('handles special characters in appName', () => {
+      const specialAppName = 'Test-App_123 & Co.';
+      const TestComponent = () => {
+        const context = usePublicPageContext();
+        return <div>{context.appName}</div>;
+      };
+
+      render(
+        <PublicPageProvider appName={specialAppName}>
+          <TestComponent />
+        </PublicPageProvider>
+      );
+
+      expect(screen.getByText(specialAppName)).toBeInTheDocument();
+    }, TEST_TIMEOUT);
+
+    it('handles nested providers (uses innermost)', () => {
+      const TestComponent = () => {
+        const context = usePublicPageContext();
+        return <div>{context.appName || 'no-app'}</div>;
+      };
+
+      render(
+        <PublicPageProvider appName="Outer">
+          <PublicPageProvider appName="Inner">
+            <TestComponent />
+          </PublicPageProvider>
+        </PublicPageProvider>
+      );
+
+      // Should use the innermost provider's appName
+      expect(screen.getByText('Inner')).toBeInTheDocument();
+    }, TEST_TIMEOUT);
+
+    it('handles context value stability on re-render', () => {
+      const TestComponent = () => {
+        const context = usePublicPageContext();
+        return <div data-testid="context">{context.appName || 'no-app'}</div>;
+      };
+
+      const { rerender } = render(
+        <PublicPageProvider appName="TestApp">
+          <TestComponent />
+        </PublicPageProvider>
+      );
+
+      const firstRender = screen.getByTestId('context');
+      expect(firstRender).toHaveTextContent('TestApp');
+
+      rerender(
+        <PublicPageProvider appName="TestApp">
+          <TestComponent />
+        </PublicPageProvider>
+      );
+
+      const secondRender = screen.getByTestId('context');
+      expect(secondRender).toHaveTextContent('TestApp');
+    }, TEST_TIMEOUT);
+
+    it('handles appName prop change', () => {
+      const TestComponent = () => {
+        const context = usePublicPageContext();
+        return <div>{context.appName || 'no-app'}</div>;
+      };
+
+      const { rerender } = render(
+        <PublicPageProvider appName="App1">
+          <TestComponent />
+        </PublicPageProvider>
+      );
+
+      expect(screen.getByText('App1')).toBeInTheDocument();
+
+      rerender(
+        <PublicPageProvider appName="App2">
+          <TestComponent />
+        </PublicPageProvider>
+      );
+
+      expect(screen.getByText('App2')).toBeInTheDocument();
+    }, TEST_TIMEOUT);
+  });
+});
+
+// === ADDITIONAL EDGE CASES AND IMPROVED COVERAGE ===
+
+describe('[component] PublicPageLayout - Additional Edge Cases', () => {
+  const mockUseEventTheme = vi.mocked(useEventTheme);
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Loading State Edge Cases', () => {
+    it('handles loading state with empty loadingMessage', () => {
+      render(
+        <PublicPageLayout eventCode="EVENT123" isLoading={true} loadingMessage="">
+          <div>Content</div>
+        </PublicPageLayout>
+      );
+
+      expect(screen.getByTestId('loading-spinner')).toBeInTheDocument();
+      // When loadingMessage is empty, it defaults to 'Loading...'
+      const loadingTexts = screen.getAllByText('Loading...');
+      expect(loadingTexts.length).toBeGreaterThan(0);
+    });
+
+    it('handles loading state with whitespace-only loadingMessage', () => {
+      const { container } = render(
+        <PublicPageLayout eventCode="EVENT123" isLoading={true} loadingMessage="   ">
+          <div>Content</div>
+        </PublicPageLayout>
+      );
+
+      expect(screen.getByTestId('loading-spinner')).toBeInTheDocument();
+      // Check that the container exists and contains the whitespace message
+      const loadingContainer = container.querySelector('.grid.place-items-center');
+      expect(loadingContainer).toBeInTheDocument();
+      expect(loadingContainer?.textContent).toContain('   ');
+    });
+
+    it('handles loading state transition from true to false with event', async () => {
+      const { rerender } = render(
+        <PublicPageLayout eventCode="EVENT123" isLoading={true}>
+          <div>Content</div>
+        </PublicPageLayout>
+      );
+
+      expect(screen.getByTestId('loading-spinner')).toBeInTheDocument();
+
+      rerender(
+        <PublicPageLayout eventCode="EVENT123" isLoading={false} event={mockEvent}>
+          <div>Content</div>
+        </PublicPageLayout>
+      );
+
+      expect(screen.queryByTestId('loading-spinner')).not.toBeInTheDocument();
+      expect(screen.getByText('Content')).toBeInTheDocument();
+    });
+  });
+
+  describe('Error State Edge Cases', () => {
+    it('handles error with empty message', () => {
+      const error = new Error('');
+      render(
+        <PublicPageLayout eventCode="EVENT123" error={error}>
+          <div>Content</div>
+        </PublicPageLayout>
+      );
+
+      expect(screen.getByText('Event Not Found')).toBeInTheDocument();
+    });
+
+    it('handles error with very long message', () => {
+      const longMessage = 'A'.repeat(1000);
+      const error = new Error(longMessage);
+      render(
+        <PublicPageLayout eventCode="EVENT123" error={error}>
+          <div>Content</div>
+        </PublicPageLayout>
+      );
+
+      expect(screen.getByText('Event Not Found')).toBeInTheDocument();
+    });
+
+    it('handles error state with custom error fallback that receives correct props', () => {
+      const mockRetry = vi.fn();
+      const ErrorFallback = ({ error, retry }: { error: Error; retry: () => void }) => {
+        // Verify props are passed correctly
+        expect(error).toBeInstanceOf(Error);
+        expect(error.message).toBe('Test error');
+        expect(typeof retry).toBe('function');
+        return <div data-testid="custom-error-fallback">Custom Error: {error.message}</div>;
+      };
+      const error = new Error('Test error');
+
+      render(
+        <PublicPageLayout 
+          eventCode="EVENT123" 
+          error={error}
+          errorFallback={ErrorFallback}
+          refetch={mockRetry}
+        >
+          <div>Content</div>
+        </PublicPageLayout>
+      );
+
+      // Custom error fallback should be rendered with correct props
+      expect(screen.getByTestId('custom-error-fallback')).toBeInTheDocument();
+      expect(screen.getByText('Custom Error: Test error')).toBeInTheDocument();
+    });
+
+    it('handles error state with refetch that throws error', async () => {
+      const user = userEvent.setup();
+      const error = new Error('Test error');
+      const mockRefetch = vi.fn().mockRejectedValue(new Error('Refetch failed'));
+
+      render(
+        <PublicPageLayout eventCode="EVENT123" error={error} refetch={mockRefetch}>
+          <div>Content</div>
+        </PublicPageLayout>
+      );
+
+      const tryAgainButton = screen.getByText('Try Again');
+      await user.click(tryAgainButton);
+
+      expect(mockRefetch).toHaveBeenCalledTimes(1);
+      // Should handle error gracefully
+    });
+  });
+
+  describe('Missing Event Edge Cases', () => {
+    it('handles missing event with showValidationErrors false and showFooter true', () => {
+      render(
+        <PublicPageLayout 
+          eventCode="EVENT123" 
+          showValidationErrors={false}
+          showFooter={true}
+        >
+          <div data-testid="content">Content</div>
+        </PublicPageLayout>
+      );
+
+      expect(screen.getByTestId('content')).toBeInTheDocument();
+      // Footer should not render when event is missing
+      expect(screen.queryByRole('contentinfo')).not.toBeInTheDocument();
+    });
+
+    it('handles missing event with custom header and footer', () => {
+      const customHeader = <div data-testid="custom-header">Custom Header</div>;
+      const customFooter = <div data-testid="custom-footer">Custom Footer</div>;
+
+      render(
+        <PublicPageLayout 
+          eventCode="EVENT123" 
+          showValidationErrors={false}
+          customHeader={customHeader}
+          customFooter={customFooter}
+          showFooter={true}
+        >
+          <div data-testid="content">Content</div>
+        </PublicPageLayout>
+      );
+
+      expect(screen.getByTestId('custom-header')).toBeInTheDocument();
+      expect(screen.getByTestId('content')).toBeInTheDocument();
+      // Custom footer should not render when event is missing
+      expect(screen.queryByTestId('custom-footer')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Custom Components Edge Cases', () => {
+    it('handles custom header that returns null', () => {
+      const CustomHeader = () => null;
+
+      render(
+        <PublicPageLayout 
+          eventCode="EVENT123" 
+          event={mockEvent}
+          customHeader={<CustomHeader />}
+        >
+          <div data-testid="content">Content</div>
+        </PublicPageLayout>
+      );
+
+      expect(screen.getByTestId('content')).toBeInTheDocument();
+      expect(screen.queryByRole('banner')).not.toBeInTheDocument();
+    });
+
+    it('handles custom footer that returns null', () => {
+      const CustomFooter = () => null;
+
+      render(
+        <PublicPageLayout 
+          eventCode="EVENT123" 
+          event={mockEvent}
+          customFooter={<CustomFooter />}
+          showFooter={true}
+        >
+          <div data-testid="content">Content</div>
+        </PublicPageLayout>
+      );
+
+      expect(screen.getByTestId('content')).toBeInTheDocument();
+      expect(screen.queryByRole('contentinfo')).not.toBeInTheDocument();
+    });
+
+    it('handles custom loading fallback that returns null', () => {
+      const CustomLoading = () => null;
+
+      render(
+        <PublicPageLayout 
+          eventCode="EVENT123" 
+          isLoading={true}
+          loadingFallback={CustomLoading}
+        >
+          <div>Content</div>
+        </PublicPageLayout>
+      );
+
+      // Should render nothing (null)
+      expect(screen.queryByTestId('loading-spinner')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Event Code Edge Cases', () => {
+    it('handles very long event code', () => {
+      const longEventCode = 'A'.repeat(1000);
+      render(
+        <PublicPageLayout eventCode={longEventCode} event={mockEvent}>
+          <div data-testid="content">Content</div>
+        </PublicPageLayout>
+      );
+
+      expect(screen.getByTestId('content')).toBeInTheDocument();
+    });
+
+    it('handles event code with special characters', () => {
+      const specialEventCode = 'EVENT-123_TEST@456';
+      render(
+        <PublicPageLayout eventCode={specialEventCode} event={mockEvent}>
+          <div data-testid="content">Content</div>
+        </PublicPageLayout>
+      );
+
+      expect(screen.getByTestId('content')).toBeInTheDocument();
+    });
+
+    it('handles event code with unicode characters', () => {
+      const unicodeEventCode = 'EVENT-测试-123';
+      render(
+        <PublicPageLayout eventCode={unicodeEventCode} event={mockEvent}>
+          <div data-testid="content">Content</div>
+        </PublicPageLayout>
+      );
+
+      expect(screen.getByTestId('content')).toBeInTheDocument();
+    });
+  });
+
+  describe('Theme Application Edge Cases', () => {
+    it('applies theme with event that has empty event_colours object', () => {
+      const eventWithEmptyColours = {
+        ...mockEvent,
+        event_colours: {}
+      } as Event;
+
+      render(
+        <PublicPageLayout eventCode="EVENT123" event={eventWithEmptyColours}>
+          <div data-testid="content">Content</div>
+        </PublicPageLayout>
+      );
+
+      expect(mockUseEventTheme).toHaveBeenCalledWith(eventWithEmptyColours);
+      expect(screen.getByTestId('content')).toBeInTheDocument();
+    });
+
+    it('applies theme with event that has partial event_colours', () => {
+      const eventWithPartialColours = {
+        ...mockEvent,
+        event_colours: {
+          main: { '500': { L: 0.5, C: 0.2, H: 0 } }
+        }
+      } as Event;
+
+      render(
+        <PublicPageLayout eventCode="EVENT123" event={eventWithPartialColours}>
+          <div data-testid="content">Content</div>
+        </PublicPageLayout>
+      );
+
+      expect(mockUseEventTheme).toHaveBeenCalledWith(eventWithPartialColours);
+      expect(screen.getByTestId('content')).toBeInTheDocument();
+    });
+  });
+
+  describe('Refetch Function Edge Cases', () => {
+    it('handles refetch that returns undefined', async () => {
+      const user = userEvent.setup();
+      const mockRefetch = vi.fn().mockReturnValue(undefined);
+      const error = new Error('Test error');
+
+      render(
+        <PublicPageLayout eventCode="EVENT123" error={error} refetch={mockRefetch}>
+          <div>Content</div>
+        </PublicPageLayout>
+      );
+
+      const tryAgainButton = screen.getByText('Try Again');
+      await user.click(tryAgainButton);
+
+      expect(mockRefetch).toHaveBeenCalledTimes(1);
+    });
+
+    it('handles refetch that returns a resolved promise', async () => {
+      const user = userEvent.setup();
+      const mockRefetch = vi.fn().mockResolvedValue(undefined);
+      const error = new Error('Test error');
+
+      render(
+        <PublicPageLayout eventCode="EVENT123" error={error} refetch={mockRefetch}>
+          <div>Content</div>
+        </PublicPageLayout>
+      );
+
+      const tryAgainButton = screen.getByText('Try Again');
+      await user.click(tryAgainButton);
+
+      await waitFor(() => {
+        expect(mockRefetch).toHaveBeenCalledTimes(1);
+      });
+    });
+  });
+});
+
+describe('[component] PublicPageHeader - Additional Edge Cases', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockUseAppConfig.mockReturnValue({
+      appName: 'Test App'
+    });
+  });
+
+  describe('Title and Description Edge Cases', () => {
+    it('handles title with empty string', () => {
+      render(
+        <PublicPageHeader 
+          event={mockEvent} 
+          eventCode="EVENT123"
+          title=""
+        />
+      );
+
+      // Empty title should still render as an h1 element
+      // When title is provided (even if empty), it overrides event name
+      const headings = screen.getAllByRole('heading', { level: 1 });
+      // Should have at least one heading (the empty title)
+      expect(headings.length).toBeGreaterThan(0);
+    });
+
+    it('handles title with only whitespace', () => {
+      render(
+        <PublicPageHeader 
+          event={mockEvent} 
+          eventCode="EVENT123"
+          title="   "
+        />
+      );
+
+      const headings = screen.getAllByRole('heading', { level: 1 });
+      expect(headings.some(h => h.textContent === '   ')).toBe(true);
+    });
+
+    it('handles description with empty string when title is provided', () => {
+      render(
+        <PublicPageHeader 
+          event={mockEvent} 
+          eventCode="EVENT123"
+          title="Page Title"
+          description=""
+        />
+      );
+
+      expect(screen.getByText('Page Title')).toBeInTheDocument();
+      // Empty description should not render a paragraph
+      // Check that there's no paragraph with empty text content
+      const paragraphs = screen.queryAllByRole('paragraph');
+      const emptyParagraphs = paragraphs.filter(p => p.textContent === '');
+      expect(emptyParagraphs.length).toBe(0);
+    });
+
+    it('handles very long title', () => {
+      const longTitle = 'A'.repeat(1000);
+      render(
+        <PublicPageHeader 
+          event={mockEvent} 
+          eventCode="EVENT123"
+          title={longTitle}
+        />
+      );
+
+      expect(screen.getByText(longTitle)).toBeInTheDocument();
+    });
+
+    it('handles very long description', () => {
+      const longDescription = 'A'.repeat(1000);
+      render(
+        <PublicPageHeader 
+          event={mockEvent} 
+          eventCode="EVENT123"
+          title="Page Title"
+          description={longDescription}
+        />
+      );
+
+      expect(screen.getByText(longDescription)).toBeInTheDocument();
+    });
+
+    it('handles title with special characters', () => {
+      const specialTitle = 'Title & Co. <Test> "Quote"';
+      render(
+        <PublicPageHeader 
+          event={mockEvent} 
+          eventCode="EVENT123"
+          title={specialTitle}
+        />
+      );
+
+      expect(screen.getByText(specialTitle)).toBeInTheDocument();
+    });
+
+    it('handles description with HTML-like content', () => {
+      const htmlLikeDescription = '<script>alert("xss")</script>Safe content';
+      render(
+        <PublicPageHeader 
+          event={mockEvent} 
+          eventCode="EVENT123"
+          title="Page Title"
+          description={htmlLikeDescription}
+        />
+      );
+
+      // Should render as text, not execute HTML
+      expect(screen.getByText(htmlLikeDescription)).toBeInTheDocument();
+    });
+  });
+
+  describe('Event Information Edge Cases', () => {
+    it('handles event with empty event_name', () => {
+      const eventWithEmptyName = {
+        ...mockEvent,
+        event_name: ''
+      };
+
+      render(
+        <PublicPageHeader event={eventWithEmptyName} eventCode="EVENT123" />
+      );
+
+      const headings = screen.getAllByRole('heading', { level: 1 });
+      expect(headings.some(h => h.textContent === '')).toBe(true);
+    });
+
+    it('handles event with very long event_name', () => {
+      const longEventName = 'A'.repeat(1000);
+      const eventWithLongName = {
+        ...mockEvent,
+        event_name: longEventName
+      };
+
+      render(
+        <PublicPageHeader event={eventWithLongName} eventCode="EVENT123" />
+      );
+
+      expect(screen.getByText(longEventName)).toBeInTheDocument();
+    });
+
+    it('handles event with very long event_venue', () => {
+      const longVenue = 'A'.repeat(1000);
+      const eventWithLongVenue = {
+        ...mockEvent,
+        event_venue: longVenue
+      };
+
+      render(
+        <PublicPageHeader event={eventWithLongVenue} eventCode="EVENT123" />
+      );
+
+      expect(screen.getByText(longVenue)).toBeInTheDocument();
+    });
+
+    it('handles event with venue containing special characters', () => {
+      const specialVenue = 'Venue & Co. <Test> "Quote"';
+      const eventWithSpecialVenue = {
+        ...mockEvent,
+        event_venue: specialVenue
+      };
+
+      render(
+        <PublicPageHeader event={eventWithSpecialVenue} eventCode="EVENT123" />
+      );
+
+      expect(screen.getByText(specialVenue)).toBeInTheDocument();
+    });
+  });
+
+  describe('Logo Display Edge Cases', () => {
+    it('handles appName with special characters in logo path', () => {
+      mockUseAppConfig.mockReturnValueOnce({
+        appName: 'Test-App_123'
+      });
+
+      render(
+        <PublicPageHeader event={mockEvent} eventCode="EVENT123" />
+      );
+
+      const appLogo = screen.getByAltText('Test-App_123');
+      expect(appLogo).toHaveAttribute('src', '/test-app_123_logo_wide.svg');
+    });
+
+    it('handles appName with unicode characters', () => {
+      mockUseAppConfig.mockReturnValueOnce({
+        appName: '测试App'
+      });
+
+      render(
+        <PublicPageHeader event={mockEvent} eventCode="EVENT123" />
+      );
+
+      const appLogo = screen.getByAltText('测试App');
+      expect(appLogo).toHaveAttribute('src', '/测试app_logo_wide.svg');
+    });
+
+    it('handles customEventLogo that returns null', () => {
+      const CustomLogo = () => null;
+
+      render(
+        <PublicPageHeader 
+          event={mockEvent} 
+          eventCode="EVENT123"
+          showEventLogo={true}
+          customEventLogo={<CustomLogo />}
+        />
+      );
+
+      // When customEventLogo is provided but returns null, 
+      // the component should not render the default event logo
+      // (customEventLogo takes precedence even if it's null)
+      expect(screen.queryByTestId('event-logo')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Children Edge Cases', () => {
+    it('handles multiple children', () => {
+      render(
+        <PublicPageHeader event={mockEvent} eventCode="EVENT123">
+          <div data-testid="child1">Child 1</div>
+          <div data-testid="child2">Child 2</div>
+          <div data-testid="child3">Child 3</div>
+        </PublicPageHeader>
+      );
+
+      expect(screen.getByTestId('child1')).toBeInTheDocument();
+      expect(screen.getByTestId('child2')).toBeInTheDocument();
+      expect(screen.getByTestId('child3')).toBeInTheDocument();
+    });
+
+    it('handles children that return null', () => {
+      const NullChild = () => null;
+
+      render(
+        <PublicPageHeader event={mockEvent} eventCode="EVENT123">
+          <NullChild />
+          <div data-testid="valid-child">Valid Child</div>
+        </PublicPageHeader>
+      );
+
+      expect(screen.getByTestId('valid-child')).toBeInTheDocument();
+    });
+
+    it('handles empty children array', () => {
+      render(
+        <PublicPageHeader event={mockEvent} eventCode="EVENT123">
+          {[]}
+        </PublicPageHeader>
+      );
+
+      expect(screen.getByRole('banner')).toBeInTheDocument();
+    });
+  });
+});
+
+describe('[component] PublicPageFooter - Additional Edge Cases', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Copyright Text Edge Cases', () => {
+    it('handles year in the past', () => {
+      render(
+        <PublicPageFooter 
+          event={mockEvent} 
+          year={2020}
+        />
+      );
+
+      expect(screen.getByText(/© Copyright 2022–2020/)).toBeInTheDocument();
+    });
+
+    it('handles year in the future', () => {
+      const futureYear = new Date().getFullYear() + 10;
+      render(
+        <PublicPageFooter 
+          event={mockEvent} 
+          year={futureYear}
+        />
+      );
+
+      expect(screen.getByText(new RegExp(`© Copyright 2022–${futureYear}`))).toBeInTheDocument();
+    });
+
+    it('handles year of 0', () => {
+      render(
+        <PublicPageFooter 
+          event={mockEvent} 
+          year={0}
+        />
+      );
+
+      expect(screen.getByText(/© Copyright 2022–0/)).toBeInTheDocument();
+    });
+
+    it('handles copyright with special characters', () => {
+      const specialCopyright = '© Copyright & Co. <Test> "Quote"';
+      render(
+        <PublicPageFooter 
+          event={mockEvent} 
+          copyright={specialCopyright}
+        />
+      );
+
+      expect(screen.getByText(specialCopyright)).toBeInTheDocument();
+    });
+
+    it('handles very long copyright text', () => {
+      const longCopyright = 'A'.repeat(1000);
+      render(
+        <PublicPageFooter 
+          event={mockEvent} 
+          copyright={longCopyright}
+        />
+      );
+
+      expect(screen.getByText(longCopyright)).toBeInTheDocument();
+    });
+  });
+
+  describe('Company Name Edge Cases', () => {
+    it('handles company name with special characters', () => {
+      const specialCompany = 'Company & Co. <Test> "Quote"';
+      render(
+        <PublicPageFooter 
+          event={mockEvent} 
+          companyName={specialCompany}
+        />
+      );
+
+      expect(screen.getByText(new RegExp(specialCompany))).toBeInTheDocument();
+    });
+
+    it('handles very long company name', () => {
+      const longCompany = 'A'.repeat(1000);
+      render(
+        <PublicPageFooter 
+          event={mockEvent} 
+          companyName={longCompany}
+        />
+      );
+
+      expect(screen.getByText(new RegExp(longCompany))).toBeInTheDocument();
+    });
+
+    it('handles empty company name', () => {
+      render(
+        <PublicPageFooter 
+          event={mockEvent} 
+          companyName=""
+        />
+      );
+
+      expect(screen.getByText(/© Copyright 2022–/)).toBeInTheDocument();
+    });
+  });
+
+  describe('Logo Edge Cases', () => {
+    it('handles logo with relative path', () => {
+      render(
+        <PublicPageFooter 
+          event={mockEvent} 
+          logo="./logo.png"
+        />
+      );
+
+      const logo = screen.getByAltText('Logo');
+      expect(logo).toHaveAttribute('src', './logo.png');
+    });
+
+    it('handles logo with absolute URL', () => {
+      render(
+        <PublicPageFooter 
+          event={mockEvent} 
+          logo="https://example.com/logo.png"
+        />
+      );
+
+      const logo = screen.getByAltText('Logo');
+      expect(logo).toHaveAttribute('src', 'https://example.com/logo.png');
+    });
+
+    it('handles logo with data URL', () => {
+      const dataUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==';
+      render(
+        <PublicPageFooter 
+          event={mockEvent} 
+          logo={dataUrl}
+        />
+      );
+
+      const logo = screen.getByAltText('Logo');
+      expect(logo).toHaveAttribute('src', dataUrl);
+    });
+  });
+
+  describe('Links Edge Cases', () => {
+    it('handles links with empty label', () => {
+      const links = [
+        { label: '', href: '/' },
+        { label: 'About', href: '/about' }
+      ];
+
+      render(
+        <PublicPageFooter 
+          event={mockEvent} 
+          links={links}
+        />
+      );
+
+      const emptyLink = screen.getByRole('link', { name: '' });
+      expect(emptyLink).toHaveAttribute('href', '/');
+      expect(screen.getByText('About')).toBeInTheDocument();
+    });
+
+    it('handles links with empty href', () => {
+      const links = [
+        { label: 'Home', href: '' },
+        { label: 'About', href: '/about' }
+      ];
+
+      render(
+        <PublicPageFooter 
+          event={mockEvent} 
+          links={links}
+        />
+      );
+
+      const homeLink = screen.getByText('Home');
+      expect(homeLink.closest('a')).toHaveAttribute('href', '');
+    });
+
+    it('handles links with external URLs', () => {
+      const links = [
+        { label: 'External', href: 'https://example.com' },
+        { label: 'Another', href: 'http://test.com' }
+      ];
+
+      render(
+        <PublicPageFooter 
+          event={mockEvent} 
+          links={links}
+        />
+      );
+
+      expect(screen.getByText('External').closest('a')).toHaveAttribute('href', 'https://example.com');
+      expect(screen.getByText('Another').closest('a')).toHaveAttribute('href', 'http://test.com');
+    });
+
+    it('handles links with special characters in label', () => {
+      const links = [
+        { label: 'Link & Co. <Test>', href: '/' }
+      ];
+
+      render(
+        <PublicPageFooter 
+          event={mockEvent} 
+          links={links}
+        />
+      );
+
+      expect(screen.getByText('Link & Co. <Test>')).toBeInTheDocument();
+    });
+
+    it('handles links with special characters in href', () => {
+      const links = [
+        { label: 'Test', href: '/path?param=value&other=test' }
+      ];
+
+      render(
+        <PublicPageFooter 
+          event={mockEvent} 
+          links={links}
+        />
+      );
+
+      const link = screen.getByText('Test').closest('a');
+      expect(link).toHaveAttribute('href', '/path?param=value&other=test');
+    });
+
+    it('handles very large number of links', () => {
+      const links = Array.from({ length: 100 }, (_, i) => ({
+        label: `Link ${i}`,
+        href: `/link-${i}`
+      }));
+
+      render(
+        <PublicPageFooter 
+          event={mockEvent} 
+          links={links}
+        />
+      );
+
+      expect(screen.getByText('Link 0')).toBeInTheDocument();
+      expect(screen.getByText('Link 99')).toBeInTheDocument();
+    });
+  });
+
+  describe('Children Edge Cases', () => {
+    it('handles multiple children', () => {
+      render(
+        <PublicPageFooter event={mockEvent}>
+          <div data-testid="child1">Child 1</div>
+          <div data-testid="child2">Child 2</div>
+        </PublicPageFooter>
+      );
+
+      expect(screen.getByTestId('child1')).toBeInTheDocument();
+      expect(screen.getByTestId('child2')).toBeInTheDocument();
+    });
+
+    it('handles children that return null', () => {
+      const NullChild = () => null;
+
+      render(
+        <PublicPageFooter event={mockEvent}>
+          <NullChild />
+          <div data-testid="valid-child">Valid Child</div>
+        </PublicPageFooter>
+      );
+
+      expect(screen.getByTestId('valid-child')).toBeInTheDocument();
+    });
+  });
+});
+
+describe('[component] PublicPageProvider - Additional Edge Cases', () => {
+  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('Environment Variable Edge Cases', () => {
+    it('handles VITE_SUPABASE_ANON_KEY as fallback', () => {
+      const originalEnv = import.meta.env;
+      const originalProcessEnv = process.env;
+
+      const mockEnv = {
+        VITE_SUPABASE_URL: 'https://test.supabase.co',
+        VITE_SUPABASE_ANON_KEY: 'anon-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: 'anon-key'
+      };
+
+      render(
+        <PublicPageProvider>
+          <div>Test</div>
+        </PublicPageProvider>
+      );
+
+      expect(mockCreateClient).toHaveBeenCalledWith('https://test.supabase.co', 'anon-key');
+
+      Object.defineProperty(import.meta, 'env', {
+        value: originalEnv,
+        writable: true,
+        configurable: true
+      });
+      process.env = originalProcessEnv;
+    });
+
+    it('handles NEXT_PUBLIC_SUPABASE_ANON_KEY as fallback', () => {
+      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-anon-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-anon-key'
+      };
+
+      render(
+        <PublicPageProvider>
+          <div>Test</div>
+        </PublicPageProvider>
+      );
+
+      expect(mockCreateClient).toHaveBeenCalledWith('https://next.supabase.co', 'next-anon-key');
+
+      Object.defineProperty(import.meta, 'env', {
+        value: originalEnv,
+        writable: true,
+        configurable: true
+      });
+      process.env = originalProcessEnv;
+    });
+
+    it('handles missing URL but present key', () => {
+      const originalEnv = import.meta.env;
+      const originalProcessEnv = process.env;
+
+      const mockEnv = {
+        VITE_SUPABASE_PUBLISHABLE_KEY: 'test-key'
+      };
+
+      Object.defineProperty(import.meta, 'env', {
+        value: mockEnv,
+        writable: true,
+        configurable: true
+      });
+
+      process.env = {
+        ...originalProcessEnv,
+        VITE_SUPABASE_PUBLISHABLE_KEY: 'test-key'
+      };
+
+      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();
+      expect(mockCreateClient).not.toHaveBeenCalled();
+
+      Object.defineProperty(import.meta, 'env', {
+        value: originalEnv,
+        writable: true,
+        configurable: true
+      });
+      process.env = originalProcessEnv;
+    });
+
+    it('handles missing key but present URL', () => {
+      const originalEnv = import.meta.env;
+      const originalProcessEnv = process.env;
+
+      const mockEnv = {
+        VITE_SUPABASE_URL: 'https://test.supabase.co'
+      };
+
+      Object.defineProperty(import.meta, 'env', {
+        value: mockEnv,
+        writable: true,
+        configurable: true
+      });
+
+      process.env = {
+        ...originalProcessEnv,
+        VITE_SUPABASE_URL: 'https://test.supabase.co'
+      };
+
+      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();
+      expect(mockCreateClient).not.toHaveBeenCalled();
+
+      Object.defineProperty(import.meta, 'env', {
+        value: originalEnv,
+        writable: true,
+        configurable: true
+      });
+      process.env = originalProcessEnv;
+    });
+
+    it('handles empty string environment variables', () => {
+      const originalEnv = import.meta.env;
+      const originalProcessEnv = process.env;
+
+      const mockEnv = {
+        VITE_SUPABASE_URL: '',
+        VITE_SUPABASE_PUBLISHABLE_KEY: ''
+      };
+
+      Object.defineProperty(import.meta, 'env', {
+        value: mockEnv,
+        writable: true,
+        configurable: true
+      });
+
+      process.env = {
+        ...originalProcessEnv,
+        VITE_SUPABASE_URL: '',
+        VITE_SUPABASE_PUBLISHABLE_KEY: ''
+      };
+
+      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();
+
+      Object.defineProperty(import.meta, 'env', {
+        value: originalEnv,
+        writable: true,
+        configurable: true
+      });
+      process.env = originalProcessEnv;
+    });
+  });
+
+  describe('Supabase Client Creation Edge Cases', () => {
+    it('creates client only once when environment variables are stable', () => {
+      const originalEnv = import.meta.env;
+      const originalProcessEnv = process.env;
+
+      const mockEnv = {
+        VITE_SUPABASE_URL: 'https://test.supabase.co',
+        VITE_SUPABASE_PUBLISHABLE_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_PUBLISHABLE_KEY: 'test-key'
+      };
+
+      mockCreateClient.mockClear();
+
+      const { rerender } = render(
+        <PublicPageProvider>
+          <div>Test</div>
+        </PublicPageProvider>
+      );
+
+      expect(mockCreateClient).toHaveBeenCalledTimes(1);
+
+      rerender(
+        <PublicPageProvider>
+          <div>Test</div>
+        </PublicPageProvider>
+      );
+
+      // Should still be called only once (memoized)
+      expect(mockCreateClient).toHaveBeenCalledTimes(1);
+
+      Object.defineProperty(import.meta, 'env', {
+        value: originalEnv,
+        writable: true,
+        configurable: true
+      });
+      process.env = originalProcessEnv;
+    });
+  });
+});
+
+describe('[hook] usePublicPageContext - Additional Edge Cases', () => {
+  it('provides stable context reference on re-render', () => {
+    const contextRefs: Array<PublicPageContextType> = [];
+
+    const TestComponent = () => {
+      const context = usePublicPageContext();
+      contextRefs.push(context);
+      return <div>{context.isPublicPage ? 'true' : 'false'}</div>;
+    };
+
+    const { rerender } = render(
+      <PublicPageProvider appName="TestApp">
+        <TestComponent />
+      </PublicPageProvider>
+    );
+
+    const firstContext = contextRefs[0];
+
+    rerender(
+      <PublicPageProvider appName="TestApp">
+        <TestComponent />
+      </PublicPageProvider>
+    );
+
+    const secondContext = contextRefs[1];
+    // Context should be stable (same reference or same values)
+    expect(secondContext.isPublicPage).toBe(firstContext.isPublicPage);
+    expect(secondContext.appName).toBe(firstContext.appName);
+  });
+});
+
+describe('[hook] useIsPublicPage - Additional Edge Cases', () => {
+  it('returns false when context is undefined (not just null)', () => {
+    const TestComponent = () => {
+      const isPublic = useIsPublicPage();
+      return <div>{isPublic ? 'true' : 'false'}</div>;
+    };
+
+    render(<TestComponent />);
+    expect(screen.getByText('false')).toBeInTheDocument();
+  });
+
+  it('returns true consistently when inside provider', () => {
+    const TestComponent = () => {
+      const isPublic = useIsPublicPage();
+      return <div data-testid="result">{isPublic ? 'true' : 'false'}</div>;
+    };
+
+    const { rerender } = render(
+      <PublicPageProvider>
+        <TestComponent />
+      </PublicPageProvider>
+    );
+
+    expect(screen.getByTestId('result')).toHaveTextContent('true');
+
+    rerender(
+      <PublicPageProvider>
+        <TestComponent />
+      </PublicPageProvider>
+    );
+
+    expect(screen.getByTestId('result')).toHaveTextContent('true');
   });
 });