@jmruthers/pace-core 0.2.7 → 0.5.1

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

@@ -1,335 +0,0 @@
-import React from 'react';
-import { screen, fireEvent, waitFor } from '@testing-library/react';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { User } from '@supabase/supabase-js';
-import { renderWithProviders, testDataGenerators } from '../../../__tests__/shared';
-
-// Mock dependencies at the correct import paths
-vi.mock('../../NavigationMenu', () => ({
-  NavigationMenu: vi.fn()
-}));
-vi.mock('../../UserMenu', () => ({
-  UserMenu: vi.fn()
-}));
-vi.mock('../../EventSelector', () => ({
-  EventSelector: vi.fn()
-}));
-
-import { Header } from '../Header';
-import { NavigationMenu } from '../../NavigationMenu';
-import { UserMenu } from '../../UserMenu';
-import { EventSelector } from '../../EventSelector';
-
-// Get mocked functions
-const mockNavigationMenu = vi.mocked(NavigationMenu);
-const mockUserMenu = vi.mocked(UserMenu);
-const mockEventSelector = vi.mocked(EventSelector);
-
-// Test data using shared generators
-const createMockUser = (overrides: Partial<User> = {}): User => ({
-  ...testDataGenerators.createUser(1, {
-    id: 'test-user-id',
-    email: 'test@example.com',
-    created_at: '2023-01-01T00:00:00Z',
-    updated_at: '2023-01-01T00:00:00Z',
-    aud: 'authenticated',
-    role: 'authenticated',
-  }),
-  ...overrides
-});
-
-describe('Header Component - Unit Tests', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    
-    // Setup default mock implementations
-    mockNavigationMenu.mockImplementation(({ items, currentPath, onNavigate, buttonText }) => (
-      <nav data-testid="mock-navigation-menu" data-items={items?.length || 0} data-current-path={currentPath}>
-        <button onClick={() => onNavigate?.(items?.[0])}>{buttonText}</button>
-      </nav>
-    ));
-    
-    mockUserMenu.mockImplementation(({ user, onSignOut, onChangePassword }) => (
-      <div data-testid="mock-user-menu" data-user-id={user?.id}>
-        <button onClick={onSignOut}>Sign Out</button>
-        <button onClick={() => onChangePassword?.('new', 'confirm')}>Change Password</button>
-      </div>
-    ));
-    
-    mockEventSelector.mockImplementation(({ placeholder, className, 'data-testid': testId }) => (
-      <div data-testid={testId} className={className} data-placeholder={placeholder}>
-        Event Selector
-      </div>
-    ));
-  });
-
-  describe('Basic Functionality', () => {
-    it('renders without crashing', () => {
-      renderWithProviders(<Header />);
-      expect(screen.getByRole('banner')).toBeInTheDocument();
-    });
-
-    it('renders with proper semantic structure', () => {
-      renderWithProviders(<Header />);
-      
-      const header = screen.getByRole('banner');
-      expect(header).toBeInTheDocument();
-      expect(header.tagName).toBe('HEADER');
-    });
-
-    it('applies custom className', () => {
-      renderWithProviders(<Header className="custom-class" />);
-      const header = screen.getByRole('banner');
-      expect(header).toHaveClass('custom-class');
-    });
-  });
-
-  describe('Logo Rendering Logic', () => {
-    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();
-    });
-
-    it('renders logo image when logoUrl is provided', () => {
-      renderWithProviders(<Header logoUrl="/test-logo.svg" logoAlt="Test Logo" />);
-      
-      const logoImg = screen.getByAltText('Test Logo');
-      expect(logoImg).toBeInTheDocument();
-      expect(logoImg).toHaveAttribute('src', '/test-logo.svg');
-    });
-
-    it('renders fallback logo when no logo props provided', () => {
-      renderWithProviders(<Header />);
-      
-      const logoImg = screen.getByAltText('Logo');
-      expect(logoImg).toBeInTheDocument();
-      expect(logoImg).toHaveAttribute('src', expect.stringContaining('data:image/svg+xml'));
-    });
-
-    it('prioritizes custom logo over logoUrl', () => {
-      const CustomLogo = () => <div data-testid="custom-logo">Custom Logo</div>;
-      renderWithProviders(<Header logo={<CustomLogo />} logoUrl="/test-logo.svg" />);
-      
-      expect(screen.getByTestId('custom-logo')).toBeInTheDocument();
-      expect(screen.queryByAltText('Logo')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('Conditional Rendering', () => {
-    it('renders navigation menu when navItems provided', () => {
-      const navItems = [
-        { id: 'dashboard', label: 'Dashboard', href: '/dashboard' }
-      ];
-      renderWithProviders(<Header navItems={navItems} />);
-      
-      expect(mockNavigationMenu).toHaveBeenCalledWith(
-        expect.objectContaining({ items: navItems }),
-        expect.anything()
-      );
-    });
-
-    it('does not render navigation menu when navItems empty', () => {
-      renderWithProviders(<Header navItems={[]} />);
-      expect(mockNavigationMenu).not.toHaveBeenCalled();
-    });
-
-    it('renders event selector by default', () => {
-      renderWithProviders(<Header />);
-      expect(mockEventSelector).toHaveBeenCalled();
-    });
-
-    it('does not render event selector when showEventSelector is false', () => {
-      renderWithProviders(<Header showEventSelector={false} />);
-      expect(mockEventSelector).not.toHaveBeenCalled();
-    });
-
-    it('renders user menu by default', () => {
-      renderWithProviders(<Header />);
-      expect(mockUserMenu).toHaveBeenCalled();
-    });
-
-    it('does not render user menu when showUserMenu is false', () => {
-      renderWithProviders(<Header showUserMenu={false} />);
-      expect(mockUserMenu).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('Props Passing', () => {
-    it('passes user props to UserMenu', () => {
-      const user = createMockUser();
-      const onSignOut = vi.fn();
-      const onChangePassword = vi.fn();
-      
-      renderWithProviders(
-        <Header
-          user={user}
-          onSignOut={onSignOut}
-          onChangePassword={onChangePassword}
-        />
-      );
-      
-      expect(mockUserMenu).toHaveBeenCalledWith(
-        expect.objectContaining({
-          user,
-          onSignOut,
-          onChangePassword
-        }),
-        expect.anything()
-      );
-    });
-
-    it('passes navigation props to NavigationMenu', () => {
-      const navItems = [{ id: 'test', label: 'Test', href: '/test' }];
-      const currentPath = '/test';
-      const onNavigate = vi.fn();
-      
-      renderWithProviders(
-        <Header
-          navItems={navItems}
-          currentPath={currentPath}
-          onNavigate={onNavigate}
-        />
-      );
-      
-      expect(mockNavigationMenu).toHaveBeenCalledWith(
-        expect.objectContaining({
-          items: navItems,
-          currentPath,
-          onNavigate
-        }),
-        expect.anything()
-      );
-    });
-
-    it('passes event selector props correctly', () => {
-      renderWithProviders(<Header />);
-      
-      expect(mockEventSelector).toHaveBeenCalledWith(
-        {
-          placeholder: 'Select event',
-          className: 'justify-self-end hidden sm:block w-96',
-          'data-testid': 'event-selector'
-        },
-        expect.anything()
-      );
-    });
-  });
-
-  describe('Custom Components', () => {
-    it('renders custom user menu when provided', () => {
-      const customUserMenu = <div data-testid="custom-user-menu">Custom Menu</div>;
-      renderWithProviders(<Header userMenu={customUserMenu} />);
-      
-      expect(screen.getByTestId('custom-user-menu')).toBeInTheDocument();
-      expect(mockUserMenu).not.toHaveBeenCalled();
-    });
-
-    it('renders custom actions when provided', () => {
-      const customActions = <div data-testid="custom-actions">Custom Actions</div>;
-      renderWithProviders(<Header actions={customActions} />);
-      
-      expect(screen.getByTestId('custom-actions')).toBeInTheDocument();
-    });
-  });
-
-  describe('Event Handling', () => {
-    it('handles navigation events', () => {
-      const navItems = [{ id: 'test', label: 'Test', href: '/test' }];
-      const onNavigate = vi.fn();
-      
-      renderWithProviders(<Header navItems={navItems} onNavigate={onNavigate} />);
-      
-      const menuButton = screen.getByText('Menu');
-      fireEvent.click(menuButton);
-      
-      expect(onNavigate).toHaveBeenCalledWith(navItems[0]);
-    });
-
-    it('handles sign out events', async () => {
-      const user = createMockUser();
-      const onSignOut = vi.fn().mockResolvedValue(undefined);
-      
-      renderWithProviders(<Header user={user} onSignOut={onSignOut} />);
-      
-      const signOutButton = screen.getByText('Sign Out');
-      fireEvent.click(signOutButton);
-      
-      await waitFor(() => {
-        expect(onSignOut).toHaveBeenCalled();
-      });
-    });
-
-    it('handles password change events', async () => {
-      const user = createMockUser();
-      const onChangePassword = vi.fn().mockResolvedValue({ error: null });
-      
-      renderWithProviders(<Header user={user} onChangePassword={onChangePassword} />);
-      
-      const changePasswordButton = screen.getByText('Change Password');
-      fireEvent.click(changePasswordButton);
-      
-      await waitFor(() => {
-        expect(onChangePassword).toHaveBeenCalledWith('new', 'confirm');
-      });
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('handles null user gracefully', () => {
-      renderWithProviders(<Header user={null} />);
-      
-      expect(mockUserMenu).toHaveBeenCalledWith(
-        expect.objectContaining({ user: null }),
-        expect.anything()
-      );
-    });
-
-    it('handles undefined user gracefully', () => {
-      renderWithProviders(<Header user={undefined} />);
-      
-      expect(mockUserMenu).toHaveBeenCalledWith(
-        expect.objectContaining({ user: null }),
-        expect.anything()
-      );
-    });
-
-    it('handles empty logoUrl gracefully', () => {
-      renderWithProviders(<Header logoUrl="" />);
-      
-      const logoImg = screen.getByAltText('Logo');
-      expect(logoImg).toHaveAttribute('src', expect.stringContaining('data:image/svg+xml'));
-    });
-
-    it('handles null logoUrl gracefully', () => {
-      renderWithProviders(<Header logoUrl={null as any} />);
-      
-      const logoImg = screen.getByAltText('Logo');
-      expect(logoImg).toHaveAttribute('src', expect.stringContaining('data:image/svg+xml'));
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('has proper banner role', () => {
-      renderWithProviders(<Header />);
-      
-      const header = screen.getByRole('banner');
-      expect(header).toBeInTheDocument();
-    });
-
-    it('provides proper alt text for logo', () => {
-      renderWithProviders(<Header logoUrl="/logo.svg" logoAlt="App Logo" />);
-      
-      const logoImg = screen.getByAltText('App Logo');
-      expect(logoImg).toBeInTheDocument();
-    });
-
-    it('uses default alt text when not provided', () => {
-      renderWithProviders(<Header logoUrl="/logo.svg" />);
-      
-      const logoImg = screen.getByAltText('Logo');
-      expect(logoImg).toBeInTheDocument();
-    });
-  });
-}); 

package/src/components/InactivityWarningModal/InactivityWarningModal.test.tsx

@@ -1,196 +0,0 @@
-/**
- * @file InactivityWarningModal Tests
- * @package @jmruthers/pace-core
- * @module Components/InactivityWarningModal
- * @since 0.1.0
- */
-
-import React from 'react';
-import { screen, fireEvent, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { vi } from 'vitest';
-import { InactivityWarningModal } from './InactivityWarningModal';
-import { renderWithProviders } from '../../__tests__/shared';
-
-// Mock the Dialog components
-vi.mock('../Dialog/Dialog', () => ({
-  Dialog: ({ children, open, onOpenChange }: any) => {
-    const handleKeyDown = (e: React.KeyboardEvent) => {
-      if (e.key === 'Escape' && onOpenChange) {
-        onOpenChange();
-      }
-    };
-    
-    return open ? (
-      <div data-testid="dialog" onKeyDown={handleKeyDown}>
-        {children}
-      </div>
-    ) : null;
-  },
-  DialogContent: ({ children, onKeyDown, ...props }: any) => (
-    <div data-testid="dialog-content" onKeyDown={onKeyDown} {...props}>
-      {children}
-    </div>
-  ),
-  DialogHeader: ({ children }: any) => (
-    <div data-testid="dialog-header">{children}</div>
-  ),
-  DialogTitle: ({ children }: any) => (
-    <h2 data-testid="dialog-title">{children}</h2>
-  ),
-  DialogDescription: ({ children }: any) => (
-    <p data-testid="dialog-description">{children}</p>
-  ),
-}));
-
-// Mock the Button component
-vi.mock('../Button/Button', () => ({
-  Button: ({ children, onClick, ...props }: any) => (
-    <button onClick={onClick} {...props}>
-      {children}
-    </button>
-  ),
-}));
-
-// Mock lucide-react icons
-vi.mock('lucide-react', () => ({
-  Clock: () => <div data-testid="clock-icon" />,
-  AlertTriangle: () => <div data-testid="alert-triangle-icon" />,
-}));
-
-describe('InactivityWarningModal', () => {
-  const defaultProps = {
-    isOpen: true,
-    timeRemaining: 45,
-    onStaySignedIn: vi.fn(),
-    onSignOutNow: vi.fn(),
-  };
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it('renders when open', () => {
-    renderWithProviders(<InactivityWarningModal {...defaultProps} />);
-    
-    expect(screen.getByTestId('dialog')).toBeInTheDocument();
-    expect(screen.getByTestId('inactivity-warning-modal')).toBeInTheDocument();
-  });
-
-  it('does not render when closed', () => {
-    renderWithProviders(<InactivityWarningModal {...defaultProps} isOpen={false} />);
-    
-    expect(screen.queryByTestId('dialog')).not.toBeInTheDocument();
-  });
-
-  it('displays the correct title and description', () => {
-    renderWithProviders(<InactivityWarningModal {...defaultProps} />);
-    
-    expect(screen.getByText('Session Timeout Warning')).toBeInTheDocument();
-    expect(screen.getByText("You've been inactive for a while. Your session will expire soon for security reasons.")).toBeInTheDocument();
-  });
-
-  it('displays custom title and description', () => {
-    const customProps = {
-      ...defaultProps,
-      title: 'Custom Warning',
-      description: 'Custom description text',
-    };
-    
-    renderWithProviders(<InactivityWarningModal {...customProps} />);
-    
-    expect(screen.getByText('Custom Warning')).toBeInTheDocument();
-    expect(screen.getByText('Custom description text')).toBeInTheDocument();
-  });
-
-  it('displays the countdown timer correctly', () => {
-    renderWithProviders(<InactivityWarningModal {...defaultProps} timeRemaining={125} />);
-    
-    expect(screen.getByText('02:05')).toBeInTheDocument();
-    expect(screen.getByText('Time remaining before automatic logout')).toBeInTheDocument();
-  });
-
-  it('formats time correctly for different values', () => {
-    const { rerender } = renderWithProviders(<InactivityWarningModal {...defaultProps} timeRemaining={0} />);
-    expect(screen.getByText('00:00')).toBeInTheDocument();
-    
-    rerender(<InactivityWarningModal {...defaultProps} timeRemaining={59} />);
-    expect(screen.getByText('00:59')).toBeInTheDocument();
-    
-    rerender(<InactivityWarningModal {...defaultProps} timeRemaining={60} />);
-    expect(screen.getByText('01:00')).toBeInTheDocument();
-    
-    rerender(<InactivityWarningModal {...defaultProps} timeRemaining={3661} />);
-    expect(screen.getByText('61:01')).toBeInTheDocument();
-  });
-
-  it('calls onStaySignedIn when Stay Signed In button is clicked', () => {
-    renderWithProviders(<InactivityWarningModal {...defaultProps} />);
-    
-    const stayButton = screen.getByText('Stay Signed In');
-    fireEvent.click(stayButton);
-    
-    expect(defaultProps.onStaySignedIn).toHaveBeenCalledTimes(1);
-  });
-
-  it('calls onSignOutNow when Sign Out Now button is clicked', () => {
-    renderWithProviders(<InactivityWarningModal {...defaultProps} />);
-    
-    const signOutButton = screen.getByText('Sign Out Now');
-    fireEvent.click(signOutButton);
-    
-    expect(defaultProps.onSignOutNow).toHaveBeenCalledTimes(1);
-  });
-
-  it('handles escape key to stay signed in', () => {
-    renderWithProviders(<InactivityWarningModal {...defaultProps} />);
-    
-    // Fire escape key on the dialog element to trigger the mock's escape handler
-    const dialog = screen.getByTestId('dialog');
-    fireEvent.keyDown(dialog, { key: 'Escape' });
-    
-    expect(defaultProps.onStaySignedIn).toHaveBeenCalledTimes(1);
-  });
-
-  it('does not handle other keys', () => {
-    renderWithProviders(<InactivityWarningModal {...defaultProps} />);
-    
-    const dialogContent = screen.getByTestId('inactivity-warning-modal');
-    fireEvent.keyDown(dialogContent, { key: 'Enter' });
-    fireEvent.keyDown(dialogContent, { key: 'Space' });
-    fireEvent.keyDown(dialogContent, { key: 'Tab' });
-    
-    expect(defaultProps.onStaySignedIn).not.toHaveBeenCalled();
-    expect(defaultProps.onSignOutNow).not.toHaveBeenCalled();
-  });
-
-  it('displays security information', () => {
-    renderWithProviders(<InactivityWarningModal {...defaultProps} />);
-    
-    expect(screen.getByText("For security reasons, you'll be automatically signed out after 30 minutes of inactivity.")).toBeInTheDocument();
-  });
-
-  it('applies custom className', () => {
-    renderWithProviders(<InactivityWarningModal {...defaultProps} className="custom-class" />);
-    
-    const dialogContent = screen.getByTestId('inactivity-warning-modal');
-    expect(dialogContent).toHaveClass('custom-class');
-  });
-
-  it('renders with proper accessibility attributes', () => {
-    renderWithProviders(<InactivityWarningModal {...defaultProps} />);
-    
-    expect(screen.getByTestId('dialog-title')).toBeInTheDocument();
-    expect(screen.getByTestId('dialog-description')).toBeInTheDocument();
-    expect(screen.getByTestId('clock-icon')).toBeInTheDocument();
-    expect(screen.getByTestId('alert-triangle-icon')).toBeInTheDocument();
-  });
-
-  it('updates time remaining when prop changes', () => {
-    const { rerender } = renderWithProviders(<InactivityWarningModal {...defaultProps} timeRemaining={60} />);
-    expect(screen.getByText('01:00')).toBeInTheDocument();
-    
-    rerender(<InactivityWarningModal {...defaultProps} timeRemaining={30} />);
-    expect(screen.getByText('00:30')).toBeInTheDocument();
-  });
-});