@jmruthers/pace-core 0.5.1 → 0.5.4

package/src/components/Header/Header.test.tsx

@@ -0,0 +1,582 @@
+/**
+ * @file Header Component Tests
+ * @package @jmruthers/pace-core
+ * @module Components/Header
+ * @since 0.1.0
+ *
+ * Comprehensive test suite for the Header component covering all functionality,
+ * edge cases, and user interactions.
+ */
+
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { User } from '@supabase/supabase-js';
+import { Header, HeaderProps } from './Header';
+import { renderWithProviders } from '../../__tests__/helpers/test-utils';
+import type { NavigationItem } from '../NavigationMenu';
+
+// Mock the child components
+vi.mock('../NavigationMenu', () => ({
+  NavigationMenu: ({ items, onNavigate, currentPath, buttonText, className }: any) => (
+    <div data-testid="navigation-menu" className={className}>
+      <button data-testid="navigation-menu-trigger">{buttonText}</button>
+      {items?.map((item: any) => (
+        <div key={item.id} data-testid={`nav-item-${item.id}`}>
+          {item.label}
+        </div>
+      ))}
+    </div>
+  ),
+}));
+
+vi.mock('../UserMenu', () => ({
+  UserMenu: ({ user, onSignOut, onChangePassword, className }: any) => (
+    <div data-testid="user-menu" className={className}>
+      <button data-testid="user-menu-trigger">
+        {user ? user.email : 'Sign In'}
+      </button>
+      {user && (
+        <div data-testid="user-actions">
+          <button data-testid="sign-out-btn" onClick={onSignOut}>
+            Sign Out
+          </button>
+          <button data-testid="change-password-btn" onClick={() => onChangePassword?.('new', 'new')}>
+            Change Password
+          </button>
+        </div>
+      )}
+    </div>
+  ),
+}));
+
+vi.mock('../EventSelector', () => ({
+  EventSelector: ({ placeholder, className, 'data-testid': testId }: any) => (
+    <div data-testid={testId || 'event-selector'} className={className}>
+      <button>{placeholder}</button>
+    </div>
+  ),
+}));
+
+// Test data
+const mockUser: User = {
+  id: '123',
+  email: 'test@example.com',
+  created_at: '2023-01-01T00:00:00Z',
+  updated_at: '2023-01-01T00:00:00Z',
+  aud: 'authenticated',
+  role: 'authenticated',
+  app_metadata: {},
+  user_metadata: {},
+} as User;
+
+const mockNavItems: NavigationItem[] = [
+  { id: 'dashboard', label: 'Dashboard', href: '/dashboard' },
+  { id: 'users', label: 'Users', href: '/users' },
+  { id: 'settings', label: 'Settings', href: '/settings' },
+];
+
+const mockProps: HeaderProps = {
+  logoUrl: '/test-logo.svg',
+  logoAlt: 'Test Logo',
+  navItems: mockNavItems,
+  user: mockUser,
+  onSignOut: vi.fn(),
+  onChangePassword: vi.fn(),
+  currentPath: '/dashboard',
+  onNavigate: vi.fn(),
+};
+
+describe('Header Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // Basic rendering tests
+  describe('Rendering', () => {
+    it('renders with default props', () => {
+      renderWithProviders(<Header />);
+      
+      const header = screen.getByRole('banner');
+      expect(header).toBeInTheDocument();
+      expect(header).toHaveClass('w-full', 'border-b', 'border-main-200', 'h-16');
+    });
+
+    it('renders with custom className', () => {
+      renderWithProviders(<Header className="custom-header" />);
+      
+      const header = screen.getByRole('banner');
+      expect(header).toHaveClass('custom-header');
+    });
+
+    it('renders with proper semantic structure', () => {
+      renderWithProviders(<Header />);
+      
+      const header = screen.getByRole('banner');
+      const nav = screen.getByRole('navigation');
+      
+      expect(header).toBeInTheDocument();
+      expect(nav).toBeInTheDocument();
+      expect(nav).toHaveClass('px-4', 'w-[min(var(--app-width),100%)]', 'mx-auto');
+    });
+  });
+
+  // Logo rendering tests
+  describe('Logo Rendering', () => {
+    it('renders logo from URL when provided', () => {
+      renderWithProviders(<Header logoUrl="/test-logo.svg" logoAlt="Test Logo" />);
+      
+      const logo = screen.getByRole('img', { name: 'Test Logo' });
+      expect(logo).toBeInTheDocument();
+      expect(logo).toHaveAttribute('src', '/test-logo.svg');
+      expect(logo).toHaveAttribute('alt', 'Test Logo');
+      expect(logo).toHaveClass('h-[2.15rem]', 'w-auto', 'max-w-[200px]');
+    });
+
+    it('renders custom logo component when provided', () => {
+      const CustomLogo = () => <div data-testid="custom-logo">Custom Logo</div>;
+      
+      renderWithProviders(<Header logo={<CustomLogo />} />);
+      
+      expect(screen.getByTestId('custom-logo')).toBeInTheDocument();
+      expect(screen.queryByRole('img')).not.toBeInTheDocument();
+    });
+
+    it('renders default logo when no logo props provided', () => {
+      renderWithProviders(<Header />);
+      
+      const logo = screen.getByRole('img', { name: 'Logo' });
+      expect(logo).toBeInTheDocument();
+      expect(logo).toHaveAttribute('src', expect.stringContaining('data:image/svg+xml'));
+      expect(logo).toHaveClass('h-8', 'w-8');
+    });
+
+    it('uses logoAlt as fallback when logoUrl provided without logoAlt', () => {
+      renderWithProviders(<Header logoUrl="/test-logo.svg" />);
+      
+      const logo = screen.getByRole('img', { name: 'Logo' });
+      expect(logo).toHaveAttribute('alt', 'Logo');
+    });
+
+    it('prioritizes custom logo over logoUrl', () => {
+      const CustomLogo = () => <div data-testid="custom-logo">Custom Logo</div>;
+      
+      renderWithProviders(
+        <Header 
+          logo={<CustomLogo />} 
+          logoUrl="/test-logo.svg" 
+          logoAlt="Test Logo" 
+        />
+      );
+      
+      expect(screen.getByTestId('custom-logo')).toBeInTheDocument();
+      expect(screen.queryByRole('img')).not.toBeInTheDocument();
+    });
+  });
+
+  // Navigation menu tests
+  describe('Navigation Menu', () => {
+    it('renders navigation menu when navItems provided', () => {
+      renderWithProviders(<Header navItems={mockNavItems} />);
+      
+      expect(screen.getByTestId('navigation-menu')).toBeInTheDocument();
+      expect(screen.getByTestId('navigation-menu-trigger')).toHaveTextContent('Menu');
+    });
+
+    it('does not render navigation menu when navItems empty', () => {
+      renderWithProviders(<Header navItems={[]} />);
+      
+      expect(screen.queryByTestId('navigation-menu')).not.toBeInTheDocument();
+    });
+
+    it('does not render navigation menu when navItems undefined', () => {
+      renderWithProviders(<Header />);
+      
+      expect(screen.queryByTestId('navigation-menu')).not.toBeInTheDocument();
+    });
+
+    it('passes correct props to NavigationMenu', () => {
+      const onNavigate = vi.fn();
+      
+      renderWithProviders(
+        <Header 
+          navItems={mockNavItems}
+          currentPath="/dashboard"
+          onNavigate={onNavigate}
+        />
+      );
+      
+      expect(screen.getByTestId('navigation-menu')).toBeInTheDocument();
+      // NavigationMenu component should receive the props
+    });
+
+    it('renders all navigation items', () => {
+      renderWithProviders(<Header navItems={mockNavItems} />);
+      
+      mockNavItems.forEach(item => {
+        expect(screen.getByTestId(`nav-item-${item.id}`)).toHaveTextContent(item.label);
+      });
+    });
+  });
+
+  // User menu tests
+  describe('User Menu', () => {
+    it('renders user menu when showUserMenu is true', () => {
+      renderWithProviders(<Header user={mockUser} showUserMenu={true} />);
+      
+      expect(screen.getByTestId('user-menu')).toBeInTheDocument();
+    });
+
+    it('does not render user menu when showUserMenu is false', () => {
+      renderWithProviders(<Header user={mockUser} showUserMenu={false} />);
+      
+      expect(screen.queryByTestId('user-menu')).not.toBeInTheDocument();
+    });
+
+    it('renders user menu by default when user provided', () => {
+      renderWithProviders(<Header user={mockUser} />);
+      
+      expect(screen.getByTestId('user-menu')).toBeInTheDocument();
+    });
+
+    it('displays user email in user menu trigger', () => {
+      renderWithProviders(<Header user={mockUser} />);
+      
+      expect(screen.getByTestId('user-menu-trigger')).toHaveTextContent('test@example.com');
+    });
+
+    it('displays sign in text when no user provided', () => {
+      renderWithProviders(<Header user={null} />);
+      
+      expect(screen.getByTestId('user-menu-trigger')).toHaveTextContent('Sign In');
+    });
+
+    it('renders custom user menu when provided', () => {
+      const CustomUserMenu = () => <div data-testid="custom-user-menu">Custom Menu</div>;
+      
+      renderWithProviders(<Header user={mockUser} userMenu={<CustomUserMenu />} />);
+      
+      expect(screen.getByTestId('custom-user-menu')).toBeInTheDocument();
+      expect(screen.queryByTestId('user-menu')).not.toBeInTheDocument();
+    });
+
+    it('passes user and handlers to UserMenu', () => {
+      const onSignOut = vi.fn();
+      const onChangePassword = vi.fn();
+      
+      renderWithProviders(
+        <Header 
+          user={mockUser}
+          onSignOut={onSignOut}
+          onChangePassword={onChangePassword}
+        />
+      );
+      
+      expect(screen.getByTestId('user-menu')).toBeInTheDocument();
+    });
+  });
+
+  // Event selector tests
+  describe('Event Selector', () => {
+    it('renders event selector when showEventSelector is true', () => {
+      renderWithProviders(<Header showEventSelector={true} />);
+      
+      expect(screen.getByTestId('event-selector')).toBeInTheDocument();
+    });
+
+    it('does not render event selector when showEventSelector is false', () => {
+      renderWithProviders(<Header showEventSelector={false} />);
+      
+      expect(screen.queryByTestId('event-selector')).not.toBeInTheDocument();
+    });
+
+    it('renders event selector by default', () => {
+      renderWithProviders(<Header />);
+      
+      expect(screen.getByTestId('event-selector')).toBeInTheDocument();
+    });
+
+    it('applies correct className to event selector', () => {
+      renderWithProviders(<Header showEventSelector={true} />);
+      
+      const eventSelector = screen.getByTestId('event-selector');
+      expect(eventSelector).toHaveClass('justify-self-end', 'w-96');
+    });
+
+    it('shows correct placeholder text', () => {
+      renderWithProviders(<Header showEventSelector={true} />);
+      
+      expect(screen.getByRole('button', { name: 'Select event' })).toBeInTheDocument();
+    });
+  });
+
+  // Custom actions tests
+  describe('Custom Actions', () => {
+    it('renders custom actions when provided', () => {
+      const customActions = (
+        <div data-testid="custom-actions">
+          <button>Export</button>
+          <button>New Item</button>
+        </div>
+      );
+      
+      renderWithProviders(<Header actions={customActions} />);
+      
+      expect(screen.getByTestId('custom-actions')).toBeInTheDocument();
+    });
+
+    it('does not render actions section when actions not provided', () => {
+      renderWithProviders(<Header />);
+      
+      expect(screen.queryByTestId('custom-actions')).not.toBeInTheDocument();
+    });
+
+    it('renders multiple action buttons', () => {
+      const customActions = (
+        <div data-testid="custom-actions">
+          <button data-testid="export-btn">Export</button>
+          <button data-testid="new-btn">New Item</button>
+        </div>
+      );
+      
+      renderWithProviders(<Header actions={customActions} />);
+      
+      expect(screen.getByTestId('export-btn')).toBeInTheDocument();
+      expect(screen.getByTestId('new-btn')).toBeInTheDocument();
+    });
+  });
+
+  // Event handling tests
+  describe('Event Handling', () => {
+    it('handles navigation events', async () => {
+      const user = userEvent.setup();
+      const onNavigate = vi.fn();
+      
+      renderWithProviders(
+        <Header 
+          navItems={mockNavItems}
+          onNavigate={onNavigate}
+        />
+      );
+      
+      // This would trigger navigation in real implementation
+      expect(screen.getByTestId('navigation-menu')).toBeInTheDocument();
+    });
+
+    it('handles sign out events', async () => {
+      const user = userEvent.setup();
+      const onSignOut = vi.fn().mockResolvedValue(undefined);
+      
+      renderWithProviders(
+        <Header 
+          user={mockUser}
+          onSignOut={onSignOut}
+        />
+      );
+      
+      await user.click(screen.getByTestId('sign-out-btn'));
+      
+      expect(onSignOut).toHaveBeenCalledTimes(1);
+    });
+
+    it('handles password change events', async () => {
+      const user = userEvent.setup();
+      const onChangePassword = vi.fn().mockResolvedValue({ error: null });
+      
+      renderWithProviders(
+        <Header 
+          user={mockUser}
+          onChangePassword={onChangePassword}
+        />
+      );
+      
+      await user.click(screen.getByTestId('change-password-btn'));
+      
+      expect(onChangePassword).toHaveBeenCalledWith('new', 'new');
+    });
+  });
+
+  // Layout and responsive tests
+  describe('Layout and Responsive Design', () => {
+    it('applies correct grid layout classes', () => {
+      renderWithProviders(<Header />);
+      
+      const nav = screen.getByRole('navigation');
+      expect(nav).toHaveClass('grid', 'grid-cols-[auto_auto_1fr_auto]', 'gap-4', 'h-full', 'items-center');
+    });
+
+    it('applies correct container classes', () => {
+      renderWithProviders(<Header />);
+      
+      const nav = screen.getByRole('navigation');
+      expect(nav).toHaveClass('px-4', 'w-[min(var(--app-width),100%)]', 'mx-auto');
+    });
+
+    it('maintains proper header height', () => {
+      renderWithProviders(<Header />);
+      
+      const header = screen.getByRole('banner');
+      expect(header).toHaveClass('h-16');
+    });
+  });
+
+  // Accessibility tests
+  describe('Accessibility', () => {
+    it('has proper banner role', () => {
+      renderWithProviders(<Header />);
+      
+      const header = screen.getByRole('banner');
+      expect(header).toBeInTheDocument();
+    });
+
+    it('has proper navigation role', () => {
+      renderWithProviders(<Header />);
+      
+      const nav = screen.getByRole('navigation');
+      expect(nav).toBeInTheDocument();
+    });
+
+    it('provides proper alt text for logo', () => {
+      renderWithProviders(<Header logoUrl="/test-logo.svg" logoAlt="Test Logo" />);
+      
+      const logo = screen.getByRole('img', { name: 'Test Logo' });
+      expect(logo).toHaveAttribute('alt', 'Test Logo');
+    });
+
+    it('provides fallback alt text for default logo', () => {
+      renderWithProviders(<Header />);
+      
+      const logo = screen.getByRole('img', { name: 'Logo' });
+      expect(logo).toHaveAttribute('alt', 'Logo');
+    });
+  });
+
+  // Edge cases and error handling
+  describe('Edge Cases and Error Handling', () => {
+    it('handles null user gracefully', () => {
+      renderWithProviders(<Header user={null} />);
+      
+      expect(screen.getByTestId('user-menu-trigger')).toHaveTextContent('Sign In');
+    });
+
+    it('handles undefined user gracefully', () => {
+      renderWithProviders(<Header user={undefined} />);
+      
+      expect(screen.getByTestId('user-menu-trigger')).toHaveTextContent('Sign In');
+    });
+
+    it('handles empty navItems array', () => {
+      renderWithProviders(<Header navItems={[]} />);
+      
+      expect(screen.queryByTestId('navigation-menu')).not.toBeInTheDocument();
+    });
+
+    it('handles undefined navItems', () => {
+      renderWithProviders(<Header navItems={undefined} />);
+      
+      expect(screen.queryByTestId('navigation-menu')).not.toBeInTheDocument();
+    });
+
+    it('handles missing logoUrl gracefully', () => {
+      renderWithProviders(<Header logoAlt="Test Logo" />);
+      
+      const logo = screen.getByRole('img', { name: 'Test Logo' });
+      expect(logo).toHaveAttribute('src', expect.stringContaining('data:image/svg+xml'));
+    });
+
+    it('handles missing logoAlt gracefully', () => {
+      renderWithProviders(<Header logoUrl="/test-logo.svg" />);
+      
+      const logo = screen.getByRole('img', { name: 'Logo' });
+      expect(logo).toHaveAttribute('alt', 'Logo');
+    });
+  });
+
+  // Integration tests
+  describe('Component Integration', () => {
+    it('renders all components together', () => {
+      const customActions = <div data-testid="custom-actions">Actions</div>;
+      
+      renderWithProviders(
+        <Header
+          logoUrl="/test-logo.svg"
+          logoAlt="Test Logo"
+          navItems={mockNavItems}
+          user={mockUser}
+          actions={customActions}
+          showEventSelector={true}
+          showUserMenu={true}
+        />
+      );
+      
+      // Logo
+      expect(screen.getByRole('img', { name: 'Test Logo' })).toBeInTheDocument();
+      
+      // Navigation
+      expect(screen.getByTestId('navigation-menu')).toBeInTheDocument();
+      
+      // Event Selector
+      expect(screen.getByTestId('event-selector')).toBeInTheDocument();
+      
+      // Custom Actions
+      expect(screen.getByTestId('custom-actions')).toBeInTheDocument();
+      
+      // User Menu
+      expect(screen.getByTestId('user-menu')).toBeInTheDocument();
+    });
+
+    it('renders minimal configuration', () => {
+      renderWithProviders(
+        <Header
+          showEventSelector={false}
+          showUserMenu={false}
+        />
+      );
+      
+      // Should only have logo and basic structure
+      expect(screen.getByRole('banner')).toBeInTheDocument();
+      expect(screen.getByRole('img', { name: 'Logo' })).toBeInTheDocument();
+      expect(screen.queryByTestId('navigation-menu')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('event-selector')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('user-menu')).not.toBeInTheDocument();
+    });
+  });
+
+  // Performance tests
+  describe('Performance', () => {
+    it('renders quickly with all props', () => {
+      const startTime = performance.now();
+      
+      renderWithProviders(
+        <Header
+          logoUrl="/test-logo.svg"
+          logoAlt="Test Logo"
+          navItems={mockNavItems}
+          user={mockUser}
+          actions={<div>Actions</div>}
+          showEventSelector={true}
+          showUserMenu={true}
+        />
+      );
+      
+      const endTime = performance.now();
+      expect(endTime - startTime).toBeLessThan(100); // Should render in under 100ms
+    });
+
+    it('handles rapid re-renders', () => {
+      const { rerender } = renderWithProviders(<Header user={mockUser} />);
+      
+      // Rapid re-renders with different props
+      for (let i = 0; i < 10; i++) {
+        rerender(<Header user={mockUser} currentPath={`/path-${i}`} />);
+      }
+      
+      expect(screen.getByTestId('user-menu')).toBeInTheDocument();
+    });
+  });
+});

package/src/components/Header/Header.tsx

@@ -273,7 +273,7 @@ export function Header({
           {showEventSelector && (
             <EventSelector 
               placeholder="Select event" 
-              className="justify-self-end hidden sm:block w-96" 
+              className="justify-self-end w-96" 
               data-testid="event-selector" 
             />
           )}