@jmruthers/pace-core 0.5.181 → 0.5.183

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

@@ -1,460 +0,0 @@
-/**
- * @file PublicPageLayout Component Tests
- * @package @jmruthers/pace-core
- * @module Components/PublicLayout/__tests__
- * @since 1.0.0
- */
-
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { PublicPageLayout, usePublicPageContext } from '../PublicPageLayout';
-import { PublicPageHeader } from '../PublicPageHeader';
-import { PublicPageFooter } from '../PublicPageFooter';
-import { PublicErrorBoundary } from '../PublicErrorBoundary';
-import { PublicLoadingSpinner } from '../PublicLoadingSpinner';
-import { useEventTheme } from '../../../hooks/useEventTheme';
-import type { Event } from '../../../types/unified';
-
-// Mock the child components
-vi.mock('../PublicPageHeader', () => ({
-  PublicPageHeader: vi.fn(({ event, eventCode }) => (
-    <div data-testid="public-page-header">
-      <span data-testid="event-name">{event?.event_name}</span>
-      <span data-testid="event-code">{eventCode}</span>
-    </div>
-  ))
-}));
-
-vi.mock('../PublicPageFooter', () => ({
-  PublicPageFooter: vi.fn(({ event }) => (
-    <div data-testid="public-page-footer">
-      <span data-testid="footer-event">{event?.event_name}</span>
-    </div>
-  ))
-}));
-
-vi.mock('../PublicErrorBoundary', () => ({
-  PublicErrorBoundary: vi.fn(({ children }) => <div data-testid="error-boundary">{children}</div>)
-}));
-
-vi.mock('../PublicLoadingSpinner', () => ({
-  PublicLoadingSpinner: vi.fn(() => <div data-testid="loading-spinner">Loading...</div>)
-}));
-
-// Mock useEventTheme hook
-vi.mock('../../../hooks/useEventTheme', () => ({
-  useEventTheme: vi.fn()
-}));
-
-// Mock event data
-const mockEvent: Event = {
-  event_id: 'event-123',
-  event_name: 'Test Event',
-  event_venue: 'Test Venue',
-  organisation_id: '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'
-};
-
-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 when event changes', () => {
-      const { rerender } = render(
-        <PublicPageLayout eventCode="EVENT123" event={mockEvent}>
-          <div>Test Content</div>
-        </PublicPageLayout>
-      );
-
-      expect(mockUseEventTheme).toHaveBeenCalledWith(mockEvent);
-
-      const newEvent: Event = {
-        ...mockEvent,
-        event_id: 'event-456',
-        event_name: 'New Event'
-      };
-
-      rerender(
-        <PublicPageLayout eventCode="EVENT123" event={newEvent}>
-          <div>Test Content</div>
-        </PublicPageLayout>
-      );
-
-      expect(mockUseEventTheme).toHaveBeenCalledWith(newEvent);
-    });
-  });
-
-  describe('Rendering', () => {
-    it('renders with basic props', () => {
-      const mockEvent = {
-        id: 'event-123',
-        name: 'Test Event',
-        event_code: 'EVENT123',
-        organisation_id: 'org-123',
-        start_date: '2024-01-01',
-        end_date: '2024-01-02'
-      };
-
-      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 with custom className', () => {
-      // Note: className prop is deprecated and no longer applied
-      // The component no longer uses a wrapper div
-      render(
-        <PublicPageLayout eventCode="EVENT123" className="custom-class" event={mockEvent}>
-          <div>Test Content</div>
-        </PublicPageLayout>
-      );
-
-      // The component renders a fragment with header, main, and footer
-      // className is not applied to any element (it's deprecated)
-      // Verify the main content renders correctly
-      expect(screen.getByText('Test Content')).toBeInTheDocument();
-      // The component should render without errors even with deprecated className prop
-    });
-
-    it('renders with event data', () => {
-      render(
-        <PublicPageLayout eventCode="EVENT123" event={mockEvent}>
-          <div data-testid="content">Test Content</div>
-        </PublicPageLayout>
-      );
-
-      expect(screen.getByTestId('public-page-header')).toBeInTheDocument();
-      expect(screen.getByTestId('event-name')).toHaveTextContent('Test Event');
-      expect(screen.getByTestId('event-code')).toHaveTextContent('EVENT123');
-    });
-
-    it('renders without footer when showFooter is false', () => {
-      render(
-        <PublicPageLayout eventCode="EVENT123" event={mockEvent} showFooter={false}>
-          <div data-testid="content">Test Content</div>
-        </PublicPageLayout>
-      );
-
-      expect(screen.getByTestId('public-page-header')).toBeInTheDocument();
-      expect(screen.queryByTestId('public-page-footer')).not.toBeInTheDocument();
-    });
-
-    it('renders with custom header', () => {
-      const mockEvent = {
-        id: 'event-123',
-        name: 'Test Event',
-        event_code: 'EVENT123',
-        organisation_id: 'org-123',
-        start_date: '2024-01-01',
-        end_date: '2024-01-02'
-      };
-      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.queryByTestId('public-page-header')).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();
-      expect(screen.queryByTestId('public-page-footer')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('Error States', () => {
-    it('renders error state when no event is provided', () => {
-      render(
-        <PublicPageLayout eventCode="EVENT123">
-          <div data-testid="content">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('renders custom error fallback when provided', () => {
-      const CustomErrorFallback = ({ error, retry }: { error: Error; retry: () => void }) => (
-        <div data-testid="custom-error">
-          <span>Custom Error: {error.message}</span>
-          <button onClick={retry}>Custom Retry</button>
-        </div>
-      );
-
-      // Mock the error state by modifying the component behavior
-      const TestComponent = () => {
-        const [hasError, setHasError] = React.useState(false);
-        
-        if (hasError) {
-          return (
-            <PublicPageLayout 
-              eventCode="EVENT123" 
-              errorFallback={CustomErrorFallback}
-            >
-              <div>Content</div>
-            </PublicPageLayout>
-          );
-        }
-        
-        return (
-          <div>
-            <button onClick={() => setHasError(true)}>Trigger Error</button>
-            <PublicPageLayout eventCode="EVENT123">
-              <div>Content</div>
-            </PublicPageLayout>
-          </div>
-        );
-      };
-
-      render(<TestComponent />);
-      
-      // The component should show the "no event" state by default
-      expect(screen.getByText('Event Not Available')).toBeInTheDocument();
-    });
-
-    it('hides validation errors when showValidationErrors is false', () => {
-      render(
-        <PublicPageLayout eventCode="EVENT123" showValidationErrors={false}>
-          <div data-testid="content">Test Content</div>
-        </PublicPageLayout>
-      );
-
-      // When showValidationErrors is false, the component renders content even without event
-      expect(screen.getByTestId('content')).toBeInTheDocument();
-      expect(screen.queryByText('Event Not Available')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('Layout Structure', () => {
-    it('applies correct layout classes', () => {
-      const mockEvent = {
-        id: 'event-123',
-        name: 'Test Event',
-        event_code: 'EVENT123',
-        organisation_id: 'org-123',
-        start_date: '2024-01-01',
-        end_date: '2024-01-02'
-      };
-
-      const { container } = render(
-        <PublicPageLayout eventCode="EVENT123" event={mockEvent}>
-          <div>Test Content</div>
-        </PublicPageLayout>
-      );
-
-      // The component no longer uses a wrapper div with min-h-screen
-      // It returns a fragment with header, main, and footer
-      // Main element has the layout classes
-      const main = container.querySelector('main');
-      expect(main).toBeInTheDocument();
-      expect(main).toHaveClass('px-4', 'w-[min(var(--app-width),100%)]', 'mx-auto', 'py-8');
-    });
-
-    it('renders main content with correct structure', () => {
-      render(
-        <PublicPageLayout eventCode="EVENT123" event={mockEvent}>
-          <div data-testid="main-content">Main Content</div>
-        </PublicPageLayout>
-      );
-
-      const main = screen.getByRole('main');
-      expect(main).toBeInTheDocument();
-      expect(main).toHaveClass('px-4', 'w-[min(var(--app-width),100%)]', 'mx-auto', 'py-8');
-      expect(screen.getByTestId('main-content')).toBeInTheDocument();
-    });
-
-    it('wraps content in error boundary', () => {
-      render(
-        <PublicPageLayout eventCode="EVENT123" event={mockEvent}>
-          <div>Test Content</div>
-        </PublicPageLayout>
-      );
-
-      expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
-    });
-  });
-
-  describe('Event Handling', () => {
-    it('handles retry button click in error state', () => {
-      const mockRefetch = vi.fn();
-      
-      // Mock the refetch function
-      vi.spyOn(React, 'useMemo').mockImplementation((fn) => {
-        if (typeof fn === 'function') {
-          return fn();
-        }
-        return fn;
-      });
-
-      render(
-        <PublicPageLayout eventCode="EVENT123">
-          <div>Test Content</div>
-        </PublicPageLayout>
-      );
-
-      const retryButton = screen.getByText('Try Again');
-      fireEvent.click(retryButton);
-      
-      // The retry function should be called (though it's currently a no-op)
-      expect(retryButton).toBeInTheDocument();
-    });
-  });
-
-  describe('Props Validation', () => {
-    it('handles missing eventCode gracefully', () => {
-      // @ts-expect-error - Testing invalid props
-      render(
-        <PublicPageLayout>
-          <div>Test Content</div>
-        </PublicPageLayout>
-      );
-
-      // Should still render, but with undefined eventCode
-      expect(screen.getByText('Event Not Available')).toBeInTheDocument();
-    });
-
-    it('handles empty eventCode', () => {
-      render(
-        <PublicPageLayout eventCode="">
-          <div>Test Content</div>
-        </PublicPageLayout>
-      );
-
-      expect(screen.getByText('Event Not Available')).toBeInTheDocument();
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('has proper semantic structure', () => {
-      render(
-        <PublicPageLayout eventCode="EVENT123" event={mockEvent}>
-          <div>Test Content</div>
-        </PublicPageLayout>
-      );
-
-      expect(screen.getByRole('main')).toBeInTheDocument();
-    });
-
-    it('has accessible error messages', () => {
-      render(
-        <PublicPageLayout eventCode="EVENT123">
-          <div>Test Content</div>
-        </PublicPageLayout>
-      );
-
-      expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('Event Not Available');
-      expect(screen.getByText('This event is not available for public viewing.')).toBeInTheDocument();
-    });
-
-    it('has accessible buttons', () => {
-      render(
-        <PublicPageLayout eventCode="EVENT123">
-          <div>Test Content</div>
-        </PublicPageLayout>
-      );
-
-      const retryButton = screen.getByRole('button', { name: 'Try Again' });
-      expect(retryButton).toBeInTheDocument();
-    });
-  });
-});
-
-describe('[hook] usePublicPageContext', () => {
-  it('returns deprecated context values', () => {
-    const TestComponent = () => {
-      const context = usePublicPageContext();
-      return (
-        <div>
-          <span data-testid="event-code">{context.eventCode}</span>
-          <span data-testid="event-id">{context.eventId}</span>
-          <span data-testid="is-loading">{context.isLoading.toString()}</span>
-          <span data-testid="is-public">{context.isPublicPage.toString()}</span>
-        </div>
-      );
-    };
-
-    render(<TestComponent />);
-
-    expect(screen.getByTestId('event-code')).toHaveTextContent('');
-    expect(screen.getByTestId('event-id')).toHaveTextContent('');
-    expect(screen.getByTestId('is-loading')).toHaveTextContent('false');
-    expect(screen.getByTestId('is-public')).toHaveTextContent('true');
-  });
-
-  it('provides refetch function', () => {
-    const TestComponent = () => {
-      const { refetch } = usePublicPageContext();
-      return (
-        <button onClick={refetch} data-testid="refetch-button">
-          Refetch
-        </button>
-      );
-    };
-
-    render(<TestComponent />);
-
-    const button = screen.getByTestId('refetch-button');
-    expect(button).toBeInTheDocument();
-    
-    // Should not throw when clicked
-    expect(() => fireEvent.click(button)).not.toThrow();
-  });
-});