@jmruthers/pace-core 0.5.181 → 0.5.182

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

@@ -1,393 +0,0 @@
-/**
- * @file PublicLoadingSpinner Component Tests
- * @package @jmruthers/pace-core
- * @module Components/PublicLayout/__tests__
- * @since 1.0.0
- */
-
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { 
-  PublicLoadingSpinner, 
-  PublicLoadingSpinnerFullPage, 
-  PublicLoadingSkeleton 
-} from '../PublicLoadingSpinner';
-
-describe('[component] PublicLoadingSpinner', () => {
-    describe('Rendering', () => {
-    it('renders with default props', () => {
-      render(<PublicLoadingSpinner />);
-
-      expect(screen.getByRole('status')).toBeInTheDocument();
-      expect(screen.getByText('Loading...', { selector: 'p' })).toBeInTheDocument();
-      expect(screen.getByAltText('PACE Core')).toBeInTheDocument();
-    });
-
-    it('renders with custom message', () => {
-      render(<PublicLoadingSpinner message="Custom loading message" />);
-
-      expect(screen.getByText('Custom loading message', { selector: 'p' })).toBeInTheDocument();
-    });
-
-    it('renders with custom className', () => {
-      const { container } = render(
-        <PublicLoadingSpinner className="custom-spinner-class" />
-      );
-
-      const spinner = container.querySelector('.flex.flex-col.items-center') as HTMLElement;
-      expect(spinner).toHaveClass('custom-spinner-class');
-    });
-
-    it('renders without logo when showLogo is false', () => {
-      render(<PublicLoadingSpinner showLogo={false} />);
-
-      expect(screen.queryByAltText('PACE Core')).not.toBeInTheDocument();
-    });
-
-    it('renders with custom message when customMessage is provided', () => {
-      render(
-        <PublicLoadingSpinner 
-          message="Default message" 
-          customMessage="Custom message"
-        />
-      );
-
-      expect(screen.getByText('Custom message', { selector: 'p' })).toBeInTheDocument();
-      expect(screen.queryByText('Default message')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('Size Variants', () => {
-    it('renders with small size', () => {
-      const { container } = render(<PublicLoadingSpinner size="sm" />);
-
-      const spinner = container.querySelector('[role="status"]');
-      expect(spinner).toHaveClass('h-4', 'w-4');
-    });
-
-    it('renders with medium size by default', () => {
-      const { container } = render(<PublicLoadingSpinner />);
-
-      const spinner = container.querySelector('[role="status"]');
-      expect(spinner).toHaveClass('h-8', 'w-8');
-    });
-
-    it('renders with large size', () => {
-      const { container } = render(<PublicLoadingSpinner size="lg" />);
-
-      const spinner = container.querySelector('[role="status"]');
-      expect(spinner).toHaveClass('h-12', 'w-12');
-    });
-
-    it('renders with extra large size', () => {
-      const { container } = render(<PublicLoadingSpinner size="xl" />);
-
-      const spinner = container.querySelector('[role="status"]');
-      expect(spinner).toHaveClass('h-16', 'w-16');
-    });
-  });
-
-  describe('Centering Behavior', () => {
-    it('renders centered by default', () => {
-      const { container } = render(<PublicLoadingSpinner />);
-
-      const outerContainer = container.firstChild as HTMLElement;
-      expect(outerContainer).toHaveClass('min-h-screen', 'bg-background', 'flex', 'items-center', 'justify-center');
-    });
-
-    it('renders without centering when centered is false', () => {
-      const { container } = render(
-        <PublicLoadingSpinner centered={false} />
-      );
-
-      const spinner = container.firstChild as HTMLElement;
-      expect(spinner).toHaveClass('flex', 'flex-col', 'items-center');
-      expect(spinner).not.toHaveClass('min-h-screen', 'bg-background', 'flex', 'items-center', 'justify-center');
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('has proper ARIA attributes', () => {
-      render(<PublicLoadingSpinner />);
-
-      const spinner = screen.getByRole('status');
-      expect(spinner).toHaveAttribute('aria-label', 'Loading');
-    });
-
-    it('has screen reader only text', () => {
-      render(<PublicLoadingSpinner message="Loading data" />);
-
-      const srText = screen.getByText('Loading data', { selector: '.sr-only' });
-      expect(srText).toBeInTheDocument();
-    });
-
-    it('has proper alt text for logo', () => {
-      render(<PublicLoadingSpinner />);
-
-      const logo = screen.getByAltText('PACE Core');
-      expect(logo).toBeInTheDocument();
-    });
-  });
-
-  describe('Layout Structure', () => {
-    it('has proper container structure when centered', () => {
-      const { container } = render(<PublicLoadingSpinner />);
-
-      const outerContainer = container.firstChild as HTMLElement;
-      const innerContainer = outerContainer.querySelector('div');
-      
-      expect(outerContainer).toHaveClass('min-h-screen', 'bg-background', 'flex', 'items-center', 'justify-center');
-      expect(innerContainer).toHaveClass('max-w-md', 'mx-auto', 'px-4');
-    });
-
-    it('has proper spinner structure', () => {
-      const { container } = render(<PublicLoadingSpinner />);
-
-      const spinner = container.querySelector('[role="status"]');
-      expect(spinner).toHaveClass('h-8', 'w-8', 'border-2', 'border-sec-200', 'border-t-main-600', 'rounded-full', 'animate-spin');
-    });
-
-    it('has proper message structure', () => {
-      render(<PublicLoadingSpinner message="Loading data" />);
-
-      const message = screen.getByText('Loading data', { selector: 'p' });
-      expect(message).toHaveClass('mt-4', 'text-sm', 'text-sec-600', 'text-center');
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('handles empty message', () => {
-      render(<PublicLoadingSpinner message="" />);
-
-      expect(screen.getByRole('status')).toBeInTheDocument();
-      expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
-    });
-
-    it('handles undefined message', () => {
-      render(<PublicLoadingSpinner message={undefined as any} />);
-
-      expect(screen.getByRole('status')).toBeInTheDocument();
-      expect(screen.getByText('Loading...', { selector: 'p' })).toBeInTheDocument();
-    });
-
-    it('handles null customMessage', () => {
-      render(
-        <PublicLoadingSpinner 
-          message="Default message" 
-          customMessage={null as any}
-        />
-      );
-
-      expect(screen.getByText('Default message', { selector: 'p' })).toBeInTheDocument();
-    });
-  });
-});
-
-describe('[component] PublicLoadingSpinnerFullPage', () => {
-    describe('Rendering', () => {
-    it('renders with default props', () => {
-      render(<PublicLoadingSpinnerFullPage />);
-
-      expect(screen.getByText('Loading event details...')).toBeInTheDocument();
-      expect(screen.getByAltText('PACE Core')).toBeInTheDocument();
-      expect(screen.getByRole('status')).toBeInTheDocument();
-    });
-
-    it('renders with custom message', () => {
-      render(<PublicLoadingSpinnerFullPage message="Custom loading message" />);
-
-      expect(screen.getByText('Custom loading message', { selector: 'p' })).toBeInTheDocument();
-    });
-
-    it('renders with event name', () => {
-      render(
-        <PublicLoadingSpinnerFullPage 
-          eventName="Test Event"
-          message="Loading event details"
-        />
-      );
-
-      expect(screen.getByText('Test Event')).toBeInTheDocument();
-      expect(screen.getByText('Loading event details')).toBeInTheDocument();
-    });
-
-    it('renders with custom className', () => {
-      const { container } = render(
-        <PublicLoadingSpinnerFullPage className="custom-full-page-class" />
-      );
-
-      const containerElement = container.firstChild as HTMLElement;
-      expect(containerElement).toHaveClass('custom-full-page-class');
-    });
-  });
-
-  describe('Layout Structure', () => {
-    it('has proper full page structure', () => {
-      const { container } = render(<PublicLoadingSpinnerFullPage />);
-
-      const outerContainer = container.firstChild as HTMLElement;
-      const innerContainer = outerContainer.querySelector('div');
-      
-      expect(outerContainer).toHaveClass('min-h-screen', 'bg-background', 'flex', 'items-center', 'justify-center');
-      expect(innerContainer).toHaveClass('max-w-md', 'mx-auto', 'text-center', 'px-4');
-    });
-
-    it('has proper logo structure', () => {
-      render(<PublicLoadingSpinnerFullPage />);
-
-      const logo = screen.getByAltText('PACE Core');
-      expect(logo).toHaveClass('h-12', 'w-auto', 'mx-auto');
-    });
-
-    it('has proper spinner structure', () => {
-      const { container } = render(<PublicLoadingSpinnerFullPage />);
-
-      const spinner = container.querySelector('[role="status"]');
-      expect(spinner).toHaveClass('h-12', 'w-12', 'border-4', 'border-sec-200', 'border-t-main-600', 'rounded-full', 'animate-spin', 'mx-auto');
-    });
-
-    it('has proper loading dots structure', () => {
-      const { container } = render(<PublicLoadingSpinnerFullPage />);
-
-      const dotsContainer = container.querySelector('.flex.justify-center.space-x-1');
-      expect(dotsContainer).toBeInTheDocument();
-      
-      const dots = dotsContainer?.querySelectorAll('div');
-      expect(dots).toHaveLength(3);
-    });
-  });
-
-  describe('Animation Dots', () => {
-    it('renders three animated dots', () => {
-      const { container } = render(<PublicLoadingSpinnerFullPage />);
-
-      const dots = container.querySelectorAll('.animate-bounce');
-      expect(dots).toHaveLength(3);
-    });
-
-    it('has proper animation delays', () => {
-      const { container } = render(<PublicLoadingSpinnerFullPage />);
-
-      const dots = container.querySelectorAll('.animate-bounce');
-      
-      expect(dots[0]).toHaveStyle('animation-delay: 0ms');
-      expect(dots[1]).toHaveStyle('animation-delay: 150ms');
-      expect(dots[2]).toHaveStyle('animation-delay: 300ms');
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('has proper ARIA attributes', () => {
-      render(<PublicLoadingSpinnerFullPage />);
-
-      const spinner = screen.getByRole('status');
-      expect(spinner).toHaveAttribute('aria-label', 'Loading');
-    });
-
-    it('has proper heading structure when event name is provided', () => {
-      render(
-        <PublicLoadingSpinnerFullPage 
-          eventName="Test Event"
-        />
-      );
-
-      const heading = screen.getByRole('heading', { level: 1 });
-      expect(heading).toHaveTextContent('Test Event');
-    });
-  });
-});
-
-describe('[component] PublicLoadingSkeleton', () => {
-    describe('Rendering', () => {
-    it('renders with default props', () => {
-      const { container } = render(<PublicLoadingSkeleton />);
-
-      const skeleton = container.firstChild as HTMLElement;
-      expect(skeleton).toHaveClass('animate-pulse');
-      
-      const lines = skeleton.querySelectorAll('div');
-      expect(lines).toHaveLength(3);
-    });
-
-    it('renders with custom number of lines', () => {
-      const { container } = render(<PublicLoadingSkeleton lines={5} />);
-
-      const skeleton = container.firstChild as HTMLElement;
-      const lines = skeleton.querySelectorAll('div');
-      expect(lines).toHaveLength(5);
-    });
-
-    it('renders with custom className', () => {
-      const { container } = render(
-        <PublicLoadingSkeleton className="custom-skeleton-class" />
-      );
-
-      const skeleton = container.firstChild as HTMLElement;
-      expect(skeleton).toHaveClass('custom-skeleton-class');
-    });
-  });
-
-  describe('Line Structure', () => {
-    it('renders lines with proper classes', () => {
-      const { container } = render(<PublicLoadingSkeleton lines={3} />);
-
-      const lines = container.querySelectorAll('div:not(.animate-pulse)');
-      
-      lines.forEach((line, index) => {
-        expect(line).toHaveClass('h-4', 'bg-sec-200', 'rounded', 'mb-2');
-        
-        if (index === lines.length - 1) {
-          expect(line).toHaveClass('w-3/4');
-        } else {
-          expect(line).toHaveClass('w-full');
-        }
-      });
-    });
-
-    it('renders last line with different width', () => {
-      const { container } = render(<PublicLoadingSkeleton lines={4} />);
-
-      const lines = container.querySelectorAll('div');
-      const lastLine = lines[lines.length - 1];
-      
-      expect(lastLine).toHaveClass('w-3/4');
-      expect(lastLine).not.toHaveClass('w-full');
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('handles zero lines', () => {
-      const { container } = render(<PublicLoadingSkeleton lines={0} />);
-
-      const skeleton = container.firstChild as HTMLElement;
-      const lines = skeleton.querySelectorAll('div');
-      expect(lines).toHaveLength(0);
-    });
-
-    it('handles negative lines', () => {
-      const { container } = render(<PublicLoadingSkeleton lines={-1} />);
-
-      const skeleton = container.firstChild as HTMLElement;
-      const lines = skeleton.querySelectorAll('div');
-      expect(lines).toHaveLength(0);
-    });
-
-    it('handles large number of lines', () => {
-      const { container } = render(<PublicLoadingSkeleton lines={100} />);
-
-      const skeleton = container.firstChild as HTMLElement;
-      const lines = skeleton.querySelectorAll('div');
-      expect(lines).toHaveLength(100);
-    });
-  });
-
-  describe('Animation', () => {
-    it('has pulse animation', () => {
-      const { container } = render(<PublicLoadingSkeleton />);
-
-      const skeleton = container.firstChild as HTMLElement;
-      expect(skeleton).toHaveClass('animate-pulse');
-    });
-  });
-});

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

@@ -1,192 +0,0 @@
-/**
- * @file PublicPageContextChecker Component Tests
- * @package @jmruthers/pace-core
- * @module Components/PublicLayout/__tests__
- * @since 1.0.0
- *
- * Comprehensive tests for the PublicPageContextChecker component
- */
-
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { PublicPageContextChecker } from '../PublicPageContextChecker';
-import { PublicPageProvider } from '../PublicPageProvider';
-
-describe('PublicPageContextChecker', () => {
-  const consoleGroupSpy = vi.spyOn(console, 'group');
-  const consoleGroupEndSpy = vi.spyOn(console, 'groupEnd');
-  const consoleLogSpy = vi.spyOn(console, 'log');
-  const consoleWarnSpy = vi.spyOn(console, 'warn');
-  const consoleErrorSpy = vi.spyOn(console, 'error');
-
-  beforeEach(() => {
-    // Component now automatically detects test mode via process.env.NODE_ENV === 'test'
-    // No need to manually set environment variables
-    vi.clearAllMocks();
-    consoleGroupSpy.mockImplementation(() => {});
-    consoleGroupEndSpy.mockImplementation(() => {});
-    consoleLogSpy.mockImplementation(() => {});
-    consoleWarnSpy.mockImplementation(() => {});
-    consoleErrorSpy.mockImplementation(() => {});
-  });
-
-  afterEach(() => {
-    consoleGroupSpy.mockRestore();
-    consoleGroupEndSpy.mockRestore();
-    consoleLogSpy.mockRestore();
-    consoleWarnSpy.mockRestore();
-    consoleErrorSpy.mockRestore();
-  });
-
-  describe('Rendering', () => {
-    it('renders checker UI when enabled', () => {
-      render(
-        <PublicPageProvider>
-          <PublicPageContextChecker enabled={true} />
-        </PublicPageProvider>
-      );
-
-      expect(screen.getByText('🚨 PUBLIC PAGE CONTEXT CHECK')).toBeInTheDocument();
-      expect(screen.getByText(/Check console for authentication context analysis/)).toBeInTheDocument();
-    });
-
-    it('does not render when disabled', () => {
-      render(
-        <PublicPageProvider>
-          <PublicPageContextChecker enabled={false} />
-        </PublicPageProvider>
-      );
-
-      expect(screen.queryByText('🚨 PUBLIC PAGE CONTEXT CHECK')).not.toBeInTheDocument();
-    });
-
-    it('renders with default enabled state', () => {
-      render(
-        <PublicPageProvider>
-          <PublicPageContextChecker />
-        </PublicPageProvider>
-      );
-
-      expect(screen.getByText('🚨 PUBLIC PAGE CONTEXT CHECK')).toBeInTheDocument();
-    });
-
-    it('renders with custom label', () => {
-      render(
-        <PublicPageProvider>
-          <PublicPageContextChecker label="CustomLabel" />
-        </PublicPageProvider>
-      );
-
-      expect(screen.getByText('🚨 PUBLIC PAGE CONTEXT CHECK')).toBeInTheDocument();
-    });
-  });
-
-  describe('Console Grouping', () => {
-    it('renders with console checking enabled', () => {
-      render(
-        <PublicPageProvider>
-          <PublicPageContextChecker enabled={true} label="TestLabel" />
-        </PublicPageProvider>
-      );
-
-      expect(screen.getByText('🚨 PUBLIC PAGE CONTEXT CHECK')).toBeInTheDocument();
-    });
-
-    it('renders with console checking disabled', () => {
-      render(
-        <PublicPageProvider>
-          <PublicPageContextChecker enabled={false} />
-        </PublicPageProvider>
-      );
-
-      expect(screen.queryByText('🚨 PUBLIC PAGE CONTEXT CHECK')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('Context Validation', () => {
-    it('renders within public page context', () => {
-      render(
-        <PublicPageProvider>
-          <PublicPageContextChecker enabled={true} label="TestLabel" />
-        </PublicPageProvider>
-      );
-
-      expect(screen.getByText('🚨 PUBLIC PAGE CONTEXT CHECK')).toBeInTheDocument();
-    });
-  });
-
-  describe('Visual Checker', () => {
-    it('displays checker UI', () => {
-      render(
-        <PublicPageProvider>
-          <PublicPageContextChecker enabled={true} />
-        </PublicPageProvider>
-      );
-
-      expect(screen.getByText('🚨 PUBLIC PAGE CONTEXT CHECK')).toBeInTheDocument();
-    });
-
-    it('displays warning message about checking console', () => {
-      render(
-        <PublicPageProvider>
-          <PublicPageContextChecker enabled={true} />
-        </PublicPageProvider>
-      );
-
-      expect(screen.getByText(/Check console for authentication context analysis/)).toBeInTheDocument();
-    });
-
-    it('displays warning about context issues', () => {
-      render(
-        <PublicPageProvider>
-          <PublicPageContextChecker enabled={true} />
-        </PublicPageProvider>
-      );
-
-      expect(screen.getByText(/If you see ❌ errors in console/)).toBeInTheDocument();
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('renders without crashing', () => {
-      render(
-        <PublicPageProvider>
-          <PublicPageContextChecker enabled={true} />
-        </PublicPageProvider>
-      );
-
-      expect(screen.getByText('🚨 PUBLIC PAGE CONTEXT CHECK')).toBeInTheDocument();
-    });
-
-    it('handles enable/disable state changes', () => {
-      const { rerender } = render(
-        <PublicPageProvider>
-          <PublicPageContextChecker enabled={true} />
-        </PublicPageProvider>
-      );
-
-      expect(screen.getByText('🚨 PUBLIC PAGE CONTEXT CHECK')).toBeInTheDocument();
-
-      rerender(
-        <PublicPageProvider>
-          <PublicPageContextChecker enabled={false} />
-        </PublicPageProvider>
-      );
-
-      expect(screen.queryByText('🚨 PUBLIC PAGE CONTEXT CHECK')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('Performance', () => {
-    it('renders quickly', () => {
-      const { container } = render(
-        <PublicPageProvider>
-          <PublicPageContextChecker enabled={true} label="TestLabel" />
-        </PublicPageProvider>
-      );
-
-      expect(container).toBeInTheDocument();
-    });
-  });
-});
-