@jmruthers/pace-core 0.5.68 → 0.5.69

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

@@ -0,0 +1,393 @@
+/**
+ * @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-white', '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-white', '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-white', '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-gray-200', 'border-t-blue-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-gray-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-white', '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-gray-200', 'border-t-blue-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-gray-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');
+    });
+  });
+});