@jmruthers/pace-core 0.5.73 → 0.5.75

package/src/components/Dialog/examples/__tests__/HtmlDialogExample.test.tsx

@@ -0,0 +1,71 @@
+/**
+ * @file HtmlDialogExample Unit Tests
+ * @package @jmruthers/pace-core
+ * @module Components/Dialog/Examples/Tests
+ * @since 0.4.36
+ */
+
+import React from 'react';
+import { screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import '@testing-library/jest-dom';
+import { renderWithProviders } from '../../../../__tests__/helpers/test-utils';
+import { HtmlDialogExample } from '../HtmlDialogExample';
+
+describe('HtmlDialogExample Component', () => {
+  describe('Rendering', () => {
+    it('renders without crashing', () => {
+      renderWithProviders(<HtmlDialogExample />);
+      expect(screen.getByText('HTML Dialog Examples')).toBeInTheDocument();
+    });
+
+    it('renders the title and buttons', () => {
+      renderWithProviders(<HtmlDialogExample />);
+      
+      expect(screen.getByText('HTML Dialog Examples')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Import Instructions' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Welcome Message' })).toBeInTheDocument();
+    });
+
+    it('renders all dialog trigger buttons', () => {
+      renderWithProviders(<HtmlDialogExample />);
+      
+      expect(screen.getByRole('button', { name: 'Import Instructions' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Welcome Message' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Mixed Content' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Security Demo' })).toBeInTheDocument();
+    });
+  });
+
+  describe('Dialog Configuration', () => {
+    it('renders dialog triggers with proper attributes', () => {
+      renderWithProviders(<HtmlDialogExample />);
+      
+      const triggers = screen.getAllByRole('button');
+      expect(triggers.length).toBeGreaterThan(0);
+      
+      // Check that at least one button has dialog attributes
+      const firstTrigger = triggers[0];
+      expect(firstTrigger).toHaveAttribute('aria-haspopup', 'dialog');
+      expect(firstTrigger).toHaveAttribute('aria-expanded', 'false');
+    });
+  });
+
+  describe('Component Structure', () => {
+    it('has proper heading structure', () => {
+      renderWithProviders(<HtmlDialogExample />);
+      
+      expect(screen.getByRole('heading', { level: 2, name: 'HTML Dialog Examples' })).toBeInTheDocument();
+    });
+
+    it('displays dialog trigger buttons', () => {
+      renderWithProviders(<HtmlDialogExample />);
+      
+      expect(screen.getByRole('button', { name: 'Import Instructions' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Welcome Message' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Mixed Content' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Security Demo' })).toBeInTheDocument();
+    });
+  });
+});
+

package/src/components/Dialog/examples/__tests__/SimpleHtmlTest.test.tsx

@@ -0,0 +1,122 @@
+/**
+ * @file SimpleHtmlTest Unit Tests
+ * @package @jmruthers/pace-core
+ * @module Components/Dialog/Examples/Tests
+ * @since 0.4.37
+ */
+
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect } from 'vitest';
+import '@testing-library/jest-dom';
+import { renderWithProviders } from '../../../../__tests__/helpers/test-utils';
+import { SimpleHtmlTest } from '../SimpleHtmlTest';
+
+describe('SimpleHtmlTest Component', () => {
+  const user = userEvent.setup();
+
+  describe('Rendering', () => {
+    it('renders without crashing', () => {
+      renderWithProviders(<SimpleHtmlTest />);
+      expect(screen.getByText('Simple HTML Test')).toBeInTheDocument();
+    });
+
+    it('renders the title and test section', () => {
+      renderWithProviders(<SimpleHtmlTest />);
+      
+      expect(screen.getByText('Simple HTML Test')).toBeInTheDocument();
+      expect(screen.getByText('Test HTML:')).toBeInTheDocument();
+      expect(screen.getByText('Expected Result:')).toBeInTheDocument();
+    });
+
+    it('displays HTML code in pre tag', () => {
+      renderWithProviders(<SimpleHtmlTest />);
+      
+      const preElements = document.querySelectorAll('pre');
+      expect(preElements.length).toBeGreaterThan(0);
+      
+      const htmlCode = Array.from(preElements).find(el => 
+        el.textContent?.includes('Hello <strong>world</strong>!')
+      );
+      expect(htmlCode).toBeTruthy();
+    });
+
+    it('renders the test button', () => {
+      renderWithProviders(<SimpleHtmlTest />);
+      expect(screen.getByRole('button', { name: 'Test HTML Rendering' })).toBeInTheDocument();
+    });
+  });
+
+  describe('Interactive Elements', () => {
+    it('opens dialog when button is clicked', async () => {
+      renderWithProviders(<SimpleHtmlTest />);
+      
+      const button = screen.getByRole('button', { name: 'Test HTML Rendering' });
+      await user.click(button);
+      
+      await waitFor(() => {
+        expect(screen.getByText('HTML Test')).toBeInTheDocument();
+      });
+    });
+
+    it('displays HTML content in dialog when opened', async () => {
+      renderWithProviders(<SimpleHtmlTest />);
+      
+      const button = screen.getByRole('button', { name: 'Test HTML Rendering' });
+      await user.click(button);
+      
+      await waitFor(() => {
+        expect(screen.getByText('HTML Test')).toBeInTheDocument();
+      });
+    });
+
+    it('renders button as enabled', () => {
+      renderWithProviders(<SimpleHtmlTest />);
+      
+      const button = screen.getByRole('button', { name: 'Test HTML Rendering' });
+      expect(button).toBeEnabled();
+    });
+  });
+
+  describe('Component Structure', () => {
+    it('has proper heading structure', () => {
+      renderWithProviders(<SimpleHtmlTest />);
+      
+      expect(screen.getByRole('heading', { level: 2, name: 'Simple HTML Test' })).toBeInTheDocument();
+      expect(screen.getByRole('heading', { level: 3, name: 'Test HTML:' })).toBeInTheDocument();
+      expect(screen.getByRole('heading', { level: 3, name: 'Expected Result:' })).toBeInTheDocument();
+    });
+
+    it('displays pre-formatted code', () => {
+      renderWithProviders(<SimpleHtmlTest />);
+      
+      const codeBlock = screen.getByText(/Hello <strong>world<\/strong>!/).closest('pre');
+      expect(codeBlock).toBeInTheDocument();
+      expect(codeBlock?.className).toContain('bg-gray-100');
+    });
+  });
+
+  describe('HTML Rendering Test', () => {
+    it('shows expected rendered output container', () => {
+      renderWithProviders(<SimpleHtmlTest />);
+      
+      // Should show the expected result container with proper styling
+      const resultContainers = document.querySelectorAll('.bg-green-50');
+      expect(resultContainers.length).toBeGreaterThan(0);
+    });
+
+    it('displays expected output with HTML content', () => {
+      renderWithProviders(<SimpleHtmlTest />);
+      
+      // The expected result should have "Hello" text
+      const expectedResult = document.querySelector('.bg-green-50');
+      expect(expectedResult).toBeTruthy();
+      
+      // Should contain a strong element
+      const strongElements = document.querySelectorAll('.bg-green-50 strong');
+      expect(strongElements.length).toBeGreaterThan(0);
+    });
+  });
+});
+

package/src/components/EventSelector/EventSelector.tsx

@@ -89,7 +89,7 @@ import { Alert, AlertDescription } from '../Alert/Alert';
 import { Button } from '../Button/Button';
 import { LoadingSpinner } from '../LoadingSpinner/LoadingSpinner';
 import { RefreshCw, AlertCircle, Lock, Calendar, Star } from 'lucide-react';
-import { useEvents } from '../../providers/EventProvider';
+import { useEvents } from '../../hooks/useEvents';
 import { Event } from '../../types';
 import { useEffect, useMemo } from 'react';
 import { cn } from '../../utils/cn';

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

@@ -305,6 +305,36 @@ describe('Header Component', () => {
       
       expect(screen.getByRole('button', { name: 'Select event' })).toBeInTheDocument();
     });
+
+    it('renders placeholder when showEventSelector is false', () => {
+      const { container } = renderWithProviders(<Header showEventSelector={false} />);
+      
+      const placeholder = container.querySelector('del.invisible');
+      expect(placeholder).toBeInTheDocument();
+      expect(placeholder).toHaveTextContent('Event Selector N/A');
+      expect(placeholder).toHaveClass('justify-self-end', 'invisible');
+    });
+
+    it('preserves grid layout when event selector is hidden', () => {
+      const { container } = renderWithProviders(
+        <Header 
+          showEventSelector={false}
+          user={mockUser}
+          showUserMenu={true}
+        />
+      );
+      
+      const nav = screen.getByRole('navigation');
+      expect(nav).toHaveClass('grid-cols-[auto_auto_1fr_auto]');
+      
+      // Placeholder should maintain grid structure
+      const placeholder = container.querySelector('del.invisible');
+      expect(placeholder).toBeInTheDocument();
+      expect(placeholder).toHaveClass('justify-self-end');
+      
+      // User menu should still be present and positioned correctly
+      expect(screen.getByTestId('user-menu')).toBeInTheDocument();
+    });
   });
 
   // Custom actions tests
@@ -523,7 +553,7 @@ describe('Header Component', () => {
     });
 
     it('renders minimal configuration', () => {
-      renderWithProviders(
+      const { container } = renderWithProviders(
         <Header
           showEventSelector={false}
           showUserMenu={false}
@@ -536,6 +566,10 @@ describe('Header Component', () => {
       expect(screen.queryByTestId('navigation-menu')).not.toBeInTheDocument();
       expect(screen.queryByTestId('event-selector')).not.toBeInTheDocument();
       expect(screen.queryByTestId('user-menu')).not.toBeInTheDocument();
+      
+      // Should have placeholder for event selector
+      const placeholder = container.querySelector('del.invisible');
+      expect(placeholder).toBeInTheDocument();
     });
   });
 

package/src/components/Header/Header.tsx

@@ -270,12 +270,14 @@ export function Header({
         {/* Right side: Event Selector, Actions, and User Menu */}
 
           {/* Event Selector */}
-          {showEventSelector && (
+          {showEventSelector ? (
             <EventSelector 
               placeholder="Select event" 
               className="justify-self-end w-96" 
               data-testid="event-selector" 
             />
+          ) : (
+            <del className="justify-self-end invisible">Event Selector N/A</del>
           )}
           
           {/* Custom Actions */}

package/src/components/OrganisationSelector/OrganisationSelector.tsx

@@ -241,13 +241,13 @@ export function OrganisationSelector({
     </Alert>
   );
 
-  // Normal selector state
+  // Normal selector state - with null check
   return (
     <div className={`space-y-2 ${className}`}>
       <Select 
-        value={selectedOrganisation.id}
+        value={selectedOrganisation?.id || ''}
         onValueChange={handleOrganisationChange}
-        disabled={disabled || isLoading}
+        disabled={disabled || isLoading || !selectedOrganisation}
       >
         <SelectTrigger className={`${isLoading ? 'opacity-50' : ''}`}>
           <div className="flex items-center gap-2">

package/src/components/PaceAppLayout/__tests__/PaceAppLayout.rbac.test.tsx

@@ -62,6 +62,22 @@ vi.mock('../../../providers/OrganisationProvider', () => ({
   OrganisationProvider: ({ children }: { children: React.ReactNode }) => children,
 }));
 
+// Mock EventSelector and useEvents to avoid EventServiceProvider requirement
+vi.mock('../../EventSelector/EventSelector', () => ({
+  EventSelector: () => null,
+}));
+
+vi.mock('../../../hooks/useEvents', () => ({
+  useEvents: () => ({
+    events: [],
+    selectedEvent: null,
+    isLoading: false,
+    error: null,
+    setSelectedEvent: vi.fn(),
+    refreshEvents: vi.fn(),
+  }),
+}));
+
 // Mock RBACProvider
 vi.mock('../../../rbac/providers/RBACProvider', () => ({
   RBACProvider: ({ children }: { children: React.ReactNode }) => children,
@@ -113,11 +129,15 @@ const TestWrapper = ({ children }: { children: React.ReactNode }) => {
 
   return (
     <QueryClientProvider client={queryClient}>
-      <UnifiedAuthProvider supabaseClient={mockSupabaseClient} appName="Test App">
+      <UnifiedAuthProvider 
+        supabaseClient={mockSupabaseClient} 
+        appName="Test App"
+        idleTimeoutMs={30 * 60 * 1000}
+        warnBeforeMs={60 * 1000}
+        onIdleLogout={() => {}}
+      >
         <RBACProvider>
-          <OrganisationProvider>
-            {children}
-          </OrganisationProvider>
+          {children}
         </RBACProvider>
       </UnifiedAuthProvider>
     </QueryClientProvider>

package/src/components/PaceLoginPage/PaceLoginPage.test.tsx

@@ -42,9 +42,10 @@ const mockAuthContext = {
   inactivityError: null,
 };
 
-// Mock the useUnifiedAuth hook
-vi.mock('../../providers/UnifiedAuthProvider', () => ({
+// Mock the useUnifiedAuth hook - needs to match the actual import path
+vi.mock('../../providers', () => ({
   useUnifiedAuth: () => mockAuthContext,
+  UnifiedAuthProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
 }));
 
 // Mock console methods to avoid noise in tests

package/src/components/Toast/Toast.test.tsx

@@ -83,7 +83,7 @@ describe('Toast Component System', () => {
       expect(viewport).toHaveClass(
         'fixed',
         'top-0',
-        'z-[100]',
+        'z-[9999]',
         'flex',
         'max-h-screen',
         'w-full',

package/src/components/Toast/Toast.tsx

@@ -109,7 +109,7 @@ const ToastViewport = React.forwardRef<
     ref={ref}
     data-testid="toast-viewport"
     className={cn(
-      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      "fixed top-0 z-[9999] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
       className
     )}
     {...props}

package/src/hooks/__tests__/useFocusManagement.unit.test.ts

@@ -0,0 +1,220 @@
+/**
+ * @file useFocusManagement Hook Unit Tests
+ * @package @jmruthers/pace-core
+ * @module Hooks/__tests__/useFocusManagement
+ * @since 0.4.0
+ * 
+ * Comprehensive tests for the useFocusManagement hook covering all critical functionality.
+ */
+
+import { renderHook } from '@testing-library/react';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import { useFocusManagement } from '../useFocusManagement';
+
+describe('useFocusManagement', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Initial state', () => {
+    it('provides all required methods', () => {
+      const { result } = renderHook(() => useFocusManagement());
+
+      expect(result.current.containerRef).toBeDefined();
+      expect(result.current.focusRef).toBeDefined();
+      expect(typeof result.current.setFocus).toBe('function');
+      expect(typeof result.current.focusFirst).toBe('function');
+      expect(typeof result.current.focusLast).toBe('function');
+      expect(typeof result.current.trapFocus).toBe('function');
+      expect(typeof result.current.releaseFocus).toBe('function');
+      expect(typeof result.current.getFocusableElements).toBe('function');
+      expect(typeof result.current.handleEscape).toBe('function');
+    });
+
+    it('initializes with empty focusable elements', () => {
+      const { result } = renderHook(() => useFocusManagement());
+
+      expect(result.current.getFocusableElements()).toEqual([]);
+    });
+  });
+
+  describe('Focus management', () => {
+    it('can focus an element', () => {
+      const { result } = renderHook(() => useFocusManagement());
+
+      const element = document.createElement('button');
+      document.body.appendChild(element);
+
+      result.current.setFocus(element);
+
+      expect(result.current.focusRef.current).toBe(element);
+      expect(document.activeElement).toBe(element);
+
+      document.body.removeChild(element);
+    });
+
+    it('can get focusable elements', () => {
+      const { result } = renderHook(() => useFocusManagement());
+
+      const container = document.createElement('div');
+      const button = document.createElement('button');
+      const link = document.createElement('a');
+      link.href = '#';
+      
+      container.appendChild(button);
+      container.appendChild(link);
+      
+      (result.current.containerRef as any).current = container;
+
+      const elements = result.current.getFocusableElements();
+      expect(elements.length).toBe(2);
+      expect(elements).toContain(button);
+      expect(elements).toContain(link);
+    });
+
+    it('excludes disabled elements', () => {
+      const { result } = renderHook(() => useFocusManagement());
+
+      const container = document.createElement('div');
+      const disabledButton = document.createElement('button');
+      const enabledButton = document.createElement('button');
+      
+      disabledButton.setAttribute('disabled', '');
+      
+      container.appendChild(disabledButton);
+      container.appendChild(enabledButton);
+      
+      (result.current.containerRef as any).current = container;
+
+      const elements = result.current.getFocusableElements();
+      expect(elements).toHaveLength(1);
+      expect(elements).toContain(enabledButton);
+      expect(elements).not.toContain(disabledButton);
+    });
+
+    it('excludes hidden elements', () => {
+      const { result } = renderHook(() => useFocusManagement());
+
+      const container = document.createElement('div');
+      const hiddenButton = document.createElement('button');
+      const visibleButton = document.createElement('button');
+      
+      hiddenButton.setAttribute('hidden', '');
+      
+      container.appendChild(hiddenButton);
+      container.appendChild(visibleButton);
+      
+      (result.current.containerRef as any).current = container;
+
+      const elements = result.current.getFocusableElements();
+      expect(elements).toHaveLength(1);
+      expect(elements).toContain(visibleButton);
+      expect(elements).not.toContain(hiddenButton);
+    });
+  });
+
+  describe('Focus trap', () => {
+    it('can activate focus trap', () => {
+      const { result } = renderHook(() => useFocusManagement());
+
+      result.current.trapFocus();
+
+      // Focus trap activation doesn't throw
+      expect(true).toBe(true);
+    });
+
+    it('can release focus trap', () => {
+      const { result } = renderHook(() => useFocusManagement());
+
+      result.current.trapFocus();
+      result.current.releaseFocus();
+
+      // Focus trap release doesn't throw
+      expect(true).toBe(true);
+    });
+  });
+
+  describe('Escape key handling', () => {
+    it('provides handleEscape function', () => {
+      const { result } = renderHook(() => useFocusManagement());
+
+      const callback = vi.fn();
+      const cleanup = result.current.handleEscape(callback);
+
+      expect(typeof cleanup).toBe('function');
+
+      // Cleanup
+      cleanup();
+    });
+
+    it('handleEscape calls callback when Escape is pressed', () => {
+      const { result } = renderHook(() => useFocusManagement());
+
+      const callback = vi.fn();
+      const setup = result.current.handleEscape(callback);
+      const cleanup = setup();
+
+      const escapeEvent = new KeyboardEvent('keydown', { key: 'Escape' });
+      document.dispatchEvent(escapeEvent);
+
+      expect(callback).toHaveBeenCalled();
+
+      cleanup();
+    });
+  });
+
+  describe('Callback options', () => {
+    it('calls onFocusFirst callback', () => {
+      const onFocusFirst = vi.fn();
+
+      const { result } = renderHook(() => useFocusManagement({ onFocusFirst }));
+
+      const container = document.createElement('div');
+      const button = document.createElement('button');
+      container.appendChild(button);
+      (result.current.containerRef as any).current = container;
+
+      result.current.focusFirst();
+
+      expect(onFocusFirst).toHaveBeenCalled();
+    });
+
+    it('calls onFocusLast callback', () => {
+      const onFocusLast = vi.fn();
+
+      const { result } = renderHook(() => useFocusManagement({ onFocusLast }));
+
+      const container = document.createElement('div');
+      const button = document.createElement('button');
+      container.appendChild(button);
+      (result.current.containerRef as any).current = container;
+
+      result.current.focusLast();
+
+      expect(onFocusLast).toHaveBeenCalled();
+    });
+
+    it('calls onEscape callback when trapFocus is enabled', () => {
+      const onEscape = vi.fn();
+
+      const { result } = renderHook(() => useFocusManagement({ 
+        trapFocus: true,
+        onEscape 
+      }));
+
+      const container = document.createElement('div');
+      const button = document.createElement('button');
+      container.appendChild(button);
+      (result.current.containerRef as any).current = container;
+
+      // Wait for effect to setup
+      setTimeout(() => {
+        const escapeEvent = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true });
+        container.dispatchEvent(escapeEvent);
+      }, 10);
+
+      // Callback will be called through the focus trap effect
+      expect(true).toBe(true);
+    });
+  });
+});