@jmruthers/pace-core 0.5.181 → 0.5.182

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

@@ -7,9 +7,12 @@ 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 type { AuthError } from '@supabase/supabase-js';
 import { PaceLoginPage } from './PaceLoginPage';
 import { renderWithProviders } from '../../__tests__/helpers/test-utils';
 import { Logger, LogLevel } from '../../utils/core/logger';
+import { clearPalette } from '../../theming/runtime';
+import { EventServiceContext } from '../../providers/services/EventServiceProvider';
 
 // Mock React Router
 const mockNavigate = vi.fn();
@@ -73,6 +76,10 @@ vi.mock('../../providers', () => ({
   UnifiedAuthProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
 }));
 
+vi.mock('../../theming/runtime', () => ({
+  clearPalette: vi.fn(),
+}));
+
 // Mock isSuperAdmin from RBAC API
 vi.mock('../../rbac/api', () => ({
   isSuperAdmin: vi.fn().mockResolvedValue(false)
@@ -83,14 +90,31 @@ import { isSuperAdmin } from '../../rbac/api';
 // Mock console methods to avoid noise in tests
 const originalConsoleError = console.error;
 
+const resetAuthContext = () => {
+  mockAuthContext.user = null;
+  mockAuthContext.isAuthenticated = false;
+  mockAuthContext.isLoading = false;
+  mockAuthContext.authError = null;
+  mockAuthContext.hasRole = vi.fn();
+  mockAuthContext.getUserRole = vi.fn();
+  mockAuthContext.signIn = vi.fn();
+  mockAuthContext.signOut = vi.fn();
+  mockAuthContext.refreshSession = vi.fn();
+  mockAuthContext.supabase = mockSupabase;
+};
+
 describe('PaceLoginPage Component', () => {
   let originalMode: string | undefined;
 
   beforeEach(() => {
+    resetAuthContext();
+    mockNavigate.mockReset();
+    vi.mocked(clearPalette).mockClear();
+    vi.mocked(isSuperAdmin).mockClear();
     // Ensure logger is enabled by setting MODE to development
     originalMode = import.meta.env.MODE;
     (import.meta.env as any).MODE = 'development';
-    
+
     // Configure logger to ensure it logs in test environment
     Logger.configure({
       level: LogLevel.DEBUG,
@@ -109,16 +133,39 @@ describe('PaceLoginPage Component', () => {
     }
   });
 
+  describe('Side Effects', () => {
+    it('clears theme palette on mount and when login route is active', () => {
+      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
+
+      expect(clearPalette).toHaveBeenCalled();
+    });
+
+    it('restores persisted events when event service context is provided', async () => {
+      const restorePersistedEvent = vi.fn().mockResolvedValue(undefined);
+      window.history.pushState({}, '', '/login');
+
+      renderWithProviders(
+        <EventServiceContext.Provider value={{ eventService: { restorePersistedEvent } as any }}>
+          <PaceLoginPage appName="Test App" />
+        </EventServiceContext.Provider>
+      );
+
+      await waitFor(() => {
+        expect(restorePersistedEvent).toHaveBeenCalled();
+      }, { timeout: 2000 });
+    });
+  });
+
   // Basic rendering tests
   describe('Rendering', () => {
     it('renders with default props', () => {
-      renderWithProviders(<PaceLoginPage appName="Test App" />);
+      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       expect(screen.getByLabelText('Test App Login Page')).toBeInTheDocument();
     });
 
     it('renders with custom app name', () => {
-      renderWithProviders(<PaceLoginPage appName="My Application" />);
+      renderWithProviders(<PaceLoginPage appName="My Application" />, { withRouter: false });
       
       expect(screen.getByLabelText('My Application Login Page')).toBeInTheDocument();
     });
@@ -135,7 +182,7 @@ describe('PaceLoginPage Component', () => {
     });
 
     it('renders app logo with correct attributes', () => {
-      renderWithProviders(<PaceLoginPage appName="TestApp" />);
+      renderWithProviders(<PaceLoginPage appName="TestApp" />, { withRouter: false });
       
       const logo = screen.getByAltText('TestApp logo');
       expect(logo).toBeInTheDocument();
@@ -144,13 +191,13 @@ describe('PaceLoginPage Component', () => {
     });
 
     it('renders LoginForm component', () => {
-      renderWithProviders(<PaceLoginPage appName="Test App" />);
+      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       expect(screen.getByTestId('login-form')).toBeInTheDocument();
     });
 
     it('passes correct props to LoginForm', () => {
-      renderWithProviders(<PaceLoginPage appName="Test App" />);
+      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       // Check that LoginForm receives the app name
       expect(screen.getByText('Sign in to Test App')).toBeInTheDocument();
@@ -162,7 +209,7 @@ describe('PaceLoginPage Component', () => {
     it('handles loading state', () => {
       mockAuthContext.isLoading = true;
       
-      renderWithProviders(<PaceLoginPage appName="Test App" />);
+      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       expect(screen.getByLabelText('Test App Login Page')).toBeInTheDocument();
     });
@@ -172,7 +219,7 @@ describe('PaceLoginPage Component', () => {
       mockAuthContext.isLoading = false;
       mockAuthContext.hasRole.mockReturnValue(false);
       
-      renderWithProviders(<PaceLoginPage appName="Test App" />);
+      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       expect(screen.getByLabelText('Test App Login Page')).toBeInTheDocument();
     });
@@ -180,7 +227,7 @@ describe('PaceLoginPage Component', () => {
     it('handles authentication error', () => {
       mockAuthContext.authError = new Error('Authentication failed');
       
-      renderWithProviders(<PaceLoginPage appName="Test App" />);
+      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       expect(screen.getByText('Authentication failed')).toBeInTheDocument();
       expect(screen.getByText('Authentication failed')).toHaveClass('text-destructive');
@@ -190,7 +237,7 @@ describe('PaceLoginPage Component', () => {
       const errorMessage = 'Invalid credentials';
       mockAuthContext.authError = new Error(errorMessage);
       
-      renderWithProviders(<PaceLoginPage appName="Test App" />);
+      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       const errorElement = screen.getByText(errorMessage);
       expect(errorElement).toBeInTheDocument();
@@ -199,11 +246,14 @@ describe('PaceLoginPage Component', () => {
     });
 
     it('does not show benign AuthSessionMissingError on login page', () => {
-      const authErr = new Error('Auth session missing!');
-      authErr.name = 'AuthSessionMissingError';
-      mockAuthContext.authError = authErr as any;
+      const authErr: AuthError = {
+        name: 'AuthSessionMissingError',
+        message: 'Auth session missing!',
+        status: 400
+      };
+      mockAuthContext.authError = authErr;
 
-      renderWithProviders(<PaceLoginPage appName="Test App" />);
+      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
 
       expect(screen.queryByText(/Auth session missing/i)).toBeNull();
     });
@@ -238,7 +288,7 @@ describe('PaceLoginPage Component', () => {
       mockAuthContext.isLoading = false;
       mockAuthContext.hasRole.mockReturnValue(false);
       
-      renderWithProviders(<PaceLoginPage appName="Test App" />);
+      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       await waitFor(() => {
         expect(mockNavigate).not.toHaveBeenCalled();
@@ -312,7 +362,7 @@ describe('PaceLoginPage Component', () => {
       const signInError = new Error('Invalid credentials');
       mockAuthContext.signIn.mockResolvedValue({ error: signInError });
       
-      renderWithProviders(<PaceLoginPage appName="Test App" />);
+      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       const emailInput = screen.getByLabelText('Email');
       const passwordInput = screen.getByLabelText('Password');
@@ -340,7 +390,7 @@ describe('PaceLoginPage Component', () => {
         throw new Error('Navigation failed');
       });
       
-      renderWithProviders(<PaceLoginPage appName="Test App" />);
+      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       const emailInput = screen.getByLabelText('Email');
       const passwordInput = screen.getByLabelText('Password');
@@ -361,13 +411,13 @@ describe('PaceLoginPage Component', () => {
 
     it('manages loading state during form submission', async () => {
       const user = userEvent.setup();
-      let resolveSignIn: (value: any) => void;
-      const signInPromise = new Promise((resolve) => {
+      let resolveSignIn: (value: { error: AuthError | null }) => void;
+      const signInPromise = new Promise<{ error: AuthError | null }>((resolve) => {
         resolveSignIn = resolve;
       });
       mockAuthContext.signIn.mockReturnValue(signInPromise);
       
-      renderWithProviders(<PaceLoginPage appName="Test App" />);
+      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       const emailInput = screen.getByLabelText('Email');
       const passwordInput = screen.getByLabelText('Password');
@@ -396,14 +446,14 @@ describe('PaceLoginPage Component', () => {
   // Error handling tests
   describe('Error Handling', () => {
     it('handles missing app name gracefully', () => {
-      renderWithProviders(<PaceLoginPage appName="" />);
+      renderWithProviders(<PaceLoginPage appName="" />, { withRouter: false });
       
       // Check that the component renders even with empty app name
       expect(screen.getByTestId('login-form')).toBeInTheDocument();
     });
 
     it('handles undefined redirect path', () => {
-      renderWithProviders(<PaceLoginPage appName="Test App" onSuccessRedirectPath={undefined} />);
+      renderWithProviders(<PaceLoginPage appName="Test App" onSuccessRedirectPath={undefined} />, { withRouter: false });
       
       expect(screen.getByLabelText('Test App Login Page')).toBeInTheDocument();
     });
@@ -415,7 +465,7 @@ describe('PaceLoginPage Component', () => {
       // Mock console.error to catch the error
       console.error = vi.fn();
       
-      renderWithProviders(<PaceLoginPage appName="Test App" />);
+      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       const emailInput = screen.getByLabelText('Email');
       const passwordInput = screen.getByLabelText('Password');
@@ -438,14 +488,14 @@ describe('PaceLoginPage Component', () => {
   // Accessibility tests
   describe('Accessibility', () => {
     it('has proper ARIA attributes', () => {
-      renderWithProviders(<PaceLoginPage appName="Test App" />);
+      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       const main = screen.getByLabelText('Test App Login Page');
       expect(main).toHaveAttribute('aria-label', 'Test App Login Page');
     });
 
     it('has proper semantic structure', () => {
-      renderWithProviders(<PaceLoginPage appName="Test App" />);
+      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       expect(screen.getByLabelText('Test App Login Page')).toBeInTheDocument();
       expect(screen.getByRole('img')).toBeInTheDocument();
@@ -453,7 +503,7 @@ describe('PaceLoginPage Component', () => {
     });
 
     it('has accessible form elements', () => {
-      renderWithProviders(<PaceLoginPage appName="Test App" />);
+      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       expect(screen.getByLabelText('Email')).toBeInTheDocument();
       expect(screen.getByLabelText('Password')).toBeInTheDocument();
@@ -463,7 +513,7 @@ describe('PaceLoginPage Component', () => {
     it('announces errors to screen readers', () => {
       mockAuthContext.authError = new Error('Authentication failed');
       
-      renderWithProviders(<PaceLoginPage appName="Test App" />);
+      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       const errorElement = screen.getByText('Authentication failed');
       expect(errorElement).toBeInTheDocument();
@@ -473,7 +523,7 @@ describe('PaceLoginPage Component', () => {
   // Integration tests
   describe('Integration', () => {
     it('integrates with LoginForm component', () => {
-      renderWithProviders(<PaceLoginPage appName="Test App" />);
+      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       // Check that LoginForm is rendered with correct props
       expect(screen.getByTestId('login-form')).toBeInTheDocument();
@@ -482,13 +532,13 @@ describe('PaceLoginPage Component', () => {
 
     it('passes loading state to LoginForm', async () => {
       const user = userEvent.setup();
-      let resolveSignIn: (value: any) => void;
-      const signInPromise = new Promise((resolve) => {
+      let resolveSignIn: (value: { error: AuthError | null }) => void;
+      const signInPromise = new Promise<{ error: AuthError | null }>((resolve) => {
         resolveSignIn = resolve;
       });
       mockAuthContext.signIn.mockReturnValue(signInPromise);
       
-      renderWithProviders(<PaceLoginPage appName="Test App" />);
+      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       const emailInput = screen.getByLabelText('Email');
       const passwordInput = screen.getByLabelText('Password');
@@ -510,21 +560,21 @@ describe('PaceLoginPage Component', () => {
   // Layout and styling tests
   describe('Layout and Styling', () => {
     it('has correct main container classes', () => {
-      renderWithProviders(<PaceLoginPage appName="Test App" />);
+      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       const main = screen.getByLabelText('Test App Login Page');
       expect(main).toHaveClass('min-h-screen', 'grid', 'mx-auto', 'w-fit', 'content-center', 'justify-items-center', 'gap-y-8');
     });
 
     it('renders logo with correct styling', () => {
-      renderWithProviders(<PaceLoginPage appName="TestApp" />);
+      renderWithProviders(<PaceLoginPage appName="TestApp" />, { withRouter: false });
       
       const logo = screen.getByAltText('TestApp logo');
       expect(logo).toHaveClass('h-48');
     });
 
     it('renders LoginForm with correct width class', () => {
-      renderWithProviders(<PaceLoginPage appName="Test App" />);
+      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       const form = screen.getByTestId('login-form');
       expect(form.closest('.w-md')).toBeInTheDocument();
@@ -536,7 +586,7 @@ describe('PaceLoginPage Component', () => {
     it('handles empty form submission', async () => {
       const user = userEvent.setup();
       
-      renderWithProviders(<PaceLoginPage appName="Test App" />);
+      renderWithProviders(<PaceLoginPage appName="Test App" />, { withRouter: false });
       
       const submitButton = screen.getByRole('button', { name: /sign in/i });
       await user.click(submitButton);
@@ -548,17 +598,121 @@ describe('PaceLoginPage Component', () => {
     it('handles very long app names', () => {
       const longAppName = 'A'.repeat(100);
       
-      renderWithProviders(<PaceLoginPage appName={longAppName} />);
+      renderWithProviders(<PaceLoginPage appName={longAppName} />, { withRouter: false });
       
       expect(screen.getByLabelText(`${longAppName} Login Page`)).toBeInTheDocument();
     });
 
     it('handles special characters in app name', () => {
       const specialAppName = 'Test & Co. (Ltd.)';
-      
-      renderWithProviders(<PaceLoginPage appName={specialAppName} />);
-      
+
+      renderWithProviders(<PaceLoginPage appName={specialAppName} />, { withRouter: false });
+
       expect(screen.getByLabelText(`${specialAppName} Login Page`)).toBeInTheDocument();
     });
+
+    it('shows access error when required app configuration is missing', async () => {
+      mockAuthContext.isAuthenticated = true;
+      mockAuthContext.user = { id: 'user-1' };
+      const missingAppSupabase = {
+        from: vi.fn((table: string) => {
+          if (table === 'rbac_apps') {
+            return {
+              select: vi.fn(() => ({
+                eq: vi.fn(() => ({
+                  eq: vi.fn(() => ({
+                    single: vi.fn(() => Promise.resolve({ data: null, error: new Error('missing') })),
+                  })),
+                })),
+              })),
+            };
+          }
+          return {
+            select: vi.fn(() => ({
+              eq: vi.fn(() => ({
+                eq: vi.fn(() => ({
+                  single: vi.fn(() => Promise.resolve({ data: null, error: null })),
+                })),
+              })),
+            })),
+          };
+        }),
+        rpc: vi.fn(() => Promise.resolve({ data: false, error: null })),
+      };
+      mockAuthContext.supabase = missingAppSupabase as any;
+
+      renderWithProviders(
+        <PaceLoginPage appName="Test App" requireAppAccess />
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText(/is not configured/i)).toBeInTheDocument();
+      });
+    });
+
+    it('shows organisation access error when user lacks active organisations', async () => {
+      mockAuthContext.isAuthenticated = true;
+      mockAuthContext.user = { id: 'user-2' };
+      const supabaseWithNoOrg = {
+        from: vi.fn((table: string) => {
+          if (table === 'rbac_apps') {
+            return {
+              select: vi.fn(() => ({
+                eq: vi.fn(() => ({
+                  eq: vi.fn(() => ({
+                    single: vi.fn(() => Promise.resolve({ data: { id: 'app-1', name: 'Test App' }, error: null })),
+                  })),
+                })),
+              })),
+            };
+          }
+
+          if (table === 'rbac_app_pages') {
+            return {
+              select: vi.fn(() => ({
+                eq: vi.fn(() => Promise.resolve({ data: [{ id: 'page-1', page_name: 'dashboard' }], error: null })),
+              })),
+            };
+          }
+
+          if (table === 'rbac_organisation_roles') {
+            return {
+              select: vi.fn(() => ({
+                eq: vi.fn(() => ({
+                  eq: vi.fn(() => ({
+                    is: vi.fn(() => ({
+                      limit: vi.fn(() => ({
+                        single: vi.fn(() => Promise.resolve({ data: null, error: null })),
+                      })),
+                    })),
+                  })),
+                })),
+              })),
+            };
+          }
+
+          return {
+            select: vi.fn(() => ({
+              eq: vi.fn(() => ({
+                eq: vi.fn(() => ({
+                  single: vi.fn(() => Promise.resolve({ data: null, error: null })),
+                })),
+              })),
+            })),
+          };
+        }),
+        rpc: vi.fn(() => Promise.resolve({ data: false, error: null })),
+      };
+
+      mockAuthContext.supabase = supabaseWithNoOrg as any;
+
+      renderWithProviders(
+        <PaceLoginPage appName="Test App" requireAppAccess />
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText(/not assigned to any organisation/i)).toBeInTheDocument();
+      });
+    });
   });
 });

package/src/components/{PasswordReset → PasswordChange}/PasswordChangeForm.test.tsx

@@ -1,7 +1,7 @@
 /**
  * @file PasswordChangeForm Component Tests
  * @package @jmruthers/pace-core
- * @module Components/PasswordReset
+ * @module Components/PasswordChange
  * @since 0.1.0
  *
  * Comprehensive test suite for the PasswordChangeForm component.
@@ -404,7 +404,7 @@ describe('PasswordChangeForm', () => {
       await user.click(submitButton);
 
       await waitFor(() => {
-        expect(screen.getByText('An unexpected error occurred.')).toBeInTheDocument();
+        expect(screen.getByText('An unexpected error occurred')).toBeInTheDocument();
       });
     });
 

package/src/components/{PasswordReset → PasswordChange}/PasswordChangeForm.tsx

@@ -1,7 +1,7 @@
 /**
  * @file Password Change Form Component
  * @package @jmruthers/pace-core
- * @module Components/PasswordReset
+ * @module Components/PasswordChange
  * @since 0.1.0
  *
  * A secure password change form component with validation, confirmation matching,
@@ -108,8 +108,13 @@ export interface PasswordChangeFormValues {
   confirmPassword: string;
 }
 
+export interface PasswordChangeFormError {
+  message?: string;
+  code?: string;
+}
+
 export interface PasswordChangeFormProps {
-  onSubmit: (values: PasswordChangeFormValues) => Promise<{ error?: any }>;
+  onSubmit: (values: PasswordChangeFormValues) => Promise<{ error?: PasswordChangeFormError }>;
   className?: string;
 }
 
@@ -138,8 +143,9 @@ export function PasswordChangeForm({ onSubmit, className }: PasswordChangeFormPr
       if (result && result.error) {
         setError(result.error.message || 'Failed to change password.');
       }
-    } catch (err: any) {
-      setError(err?.message || 'An unexpected error occurred.');
+    } catch (err) {
+      const errorObj = err instanceof Error ? err : new Error('An unexpected error occurred');
+      setError(errorObj.message);
     } finally {
       setIsSubmitting(false);
     }

package/src/components/PasswordChange/index.ts

@@ -0,0 +1,2 @@
+export { PasswordChangeForm } from './PasswordChangeForm';
+export type { PasswordChangeFormProps, PasswordChangeFormValues, PasswordChangeFormError } from './PasswordChangeForm';

package/src/components/Progress/Progress.test.tsx

@@ -28,6 +28,17 @@ describe('[component] Progress', () => {
     expect(indicator.style.transform).toContain('translateX(-20%)');
   });
 
+  it('calculates transform correctly with custom max value', () => {
+    const { rerender } = renderWithProviders(<Progress value={40} max={200} />);
+    // 40/200 = 20%, so transform should be translateX(-80%)
+    const indicator = screen.getByRole('progressbar').firstElementChild as HTMLElement;
+    expect(indicator.style.transform).toContain('translateX(-80%)');
+
+    rerender(<Progress value={150} max={200} />);
+    // 150/200 = 75%, so transform should be translateX(-25%)
+    expect(indicator.style.transform).toContain('translateX(-25%)');
+  });
+
   it('supports indeterminate state when no value is provided (no aria-valuenow)', () => {
     renderWithProviders(<Progress />);
     const progressbar = screen.getByRole('progressbar');

package/src/components/Progress/Progress.tsx

@@ -106,7 +106,7 @@ const Progress = React.forwardRef<
   >
     <ProgressPrimitive.Indicator
       className="h-full w-full flex-1 bg-primary transition-all"
-      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      style={{ transform: `translateX(-${100 - ((value || 0) / max * 100)}%)` }}
     />
   </ProgressPrimitive.Root>
 ));

package/src/components/Progress/index.ts

@@ -0,0 +1,10 @@
+/**
+ * @file Progress component exports
+ * @package @jmruthers/pace-core
+ * @module Progress
+ * @since 0.1.0
+ */
+
+export { Progress } from './Progress';
+export type { ProgressProps } from './Progress';
+

package/src/components/ProtectedRoute/ProtectedRoute.test.tsx

@@ -458,7 +458,8 @@ describe('ProtectedRoute Component', () => {
     it('handles null events array', () => {
       mockUseEvents.mockReturnValue({
         selectedEvent: null,
-        events: null as any,
+        // @ts-expect-error - Testing runtime null case that component handles
+        events: null,
         isLoading: false,
       });