@jmruthers/pace-core 0.5.1 → 0.5.3

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

@@ -0,0 +1,475 @@
+/**
+ * @file PaceLoginPage Component Tests
+ * @description Comprehensive tests for PaceLoginPage component
+ */
+
+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 { PaceLoginPage } from './PaceLoginPage';
+import { renderWithProviders } from '../../__tests__/helpers/test-utils';
+
+// Mock React Router
+const mockNavigate = vi.fn();
+vi.mock('react-router-dom', () => ({
+  useNavigate: () => mockNavigate,
+}));
+
+// Mock the UnifiedAuthProvider
+const mockAuthContext = {
+  user: null,
+  isAuthenticated: false,
+  isLoading: false,
+  authError: null,
+  hasRole: vi.fn(),
+  signIn: vi.fn(),
+  signOut: vi.fn(),
+  refreshSession: vi.fn(),
+  appName: 'Test App',
+  hasErrors: false,
+  // RBAC context
+  globalRole: null,
+  organisationRole: null,
+  eventAppRole: null,
+  rbacLoading: false,
+  rbacError: null,
+  // Inactivity context
+  isIdle: false,
+  timeUntilIdle: 0,
+  resetInactivityTimer: vi.fn(),
+  inactivityLoading: false,
+  inactivityError: null,
+};
+
+// Mock the useUnifiedAuth hook
+vi.mock('../../providers/UnifiedAuthProvider', () => ({
+  useUnifiedAuth: () => mockAuthContext,
+}));
+
+// Mock console methods to avoid noise in tests
+const originalConsoleError = console.error;
+
+describe('PaceLoginPage Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Reset console mocks
+    console.error = vi.fn();
+  });
+
+  afterEach(() => {
+    // Restore console methods
+    console.error = originalConsoleError;
+  });
+
+  // Basic rendering tests
+  describe('Rendering', () => {
+    it('renders with default props', () => {
+      renderWithProviders(<PaceLoginPage appName="Test App" />);
+      
+      expect(screen.getByLabelText('Test App Login Page')).toBeInTheDocument();
+    });
+
+    it('renders with custom app name', () => {
+      renderWithProviders(<PaceLoginPage appName="My Application" />);
+      
+      expect(screen.getByLabelText('My Application Login Page')).toBeInTheDocument();
+    });
+
+    it('renders with custom redirect path', () => {
+      renderWithProviders(
+        <PaceLoginPage 
+          appName="Test App" 
+          onSuccessRedirectPath="/dashboard" 
+        />
+      );
+      
+      expect(screen.getByLabelText('Test App Login Page')).toBeInTheDocument();
+    });
+
+    it('renders app logo with correct attributes', () => {
+      renderWithProviders(<PaceLoginPage appName="TestApp" />);
+      
+      const logo = screen.getByAltText('TestApp logo');
+      expect(logo).toBeInTheDocument();
+      expect(logo).toHaveAttribute('src', '/testapp_logo_square.svg');
+      expect(logo).toHaveClass('h-48');
+    });
+
+    it('renders LoginForm component', () => {
+      renderWithProviders(<PaceLoginPage appName="Test App" />);
+      
+      expect(screen.getByTestId('login-form')).toBeInTheDocument();
+    });
+
+    it('passes correct props to LoginForm', () => {
+      renderWithProviders(<PaceLoginPage appName="Test App" />);
+      
+      // Check that LoginForm receives the app name
+      expect(screen.getByText('Sign in to Test App')).toBeInTheDocument();
+    });
+  });
+
+  // Authentication state tests
+  describe('Authentication State', () => {
+    it('handles loading state', () => {
+      mockAuthContext.isLoading = true;
+      
+      renderWithProviders(<PaceLoginPage appName="Test App" />);
+      
+      expect(screen.getByLabelText('Test App Login Page')).toBeInTheDocument();
+    });
+
+    it('handles authenticated state', () => {
+      mockAuthContext.isAuthenticated = true;
+      mockAuthContext.isLoading = false;
+      mockAuthContext.hasRole.mockReturnValue(false);
+      
+      renderWithProviders(<PaceLoginPage appName="Test App" />);
+      
+      expect(screen.getByLabelText('Test App Login Page')).toBeInTheDocument();
+    });
+
+    it('handles authentication error', () => {
+      mockAuthContext.authError = new Error('Authentication failed');
+      
+      renderWithProviders(<PaceLoginPage appName="Test App" />);
+      
+      expect(screen.getByText('Authentication failed')).toBeInTheDocument();
+      expect(screen.getByText('Authentication failed')).toHaveClass('text-destructive');
+    });
+
+    it('displays auth error with proper styling', () => {
+      const errorMessage = 'Invalid credentials';
+      mockAuthContext.authError = new Error(errorMessage);
+      
+      renderWithProviders(<PaceLoginPage appName="Test App" />);
+      
+      const errorElement = screen.getByText(errorMessage);
+      expect(errorElement).toBeInTheDocument();
+      expect(errorElement).toHaveClass('mt-4', 'text-destructive', 'text-center');
+      expect(errorElement.tagName).toBe('EM');
+    });
+  });
+
+  // Role-based redirection tests
+  describe('Role-Based Redirection', () => {
+    it('redirects super admin users automatically', async () => {
+      mockAuthContext.isAuthenticated = true;
+      mockAuthContext.isLoading = false;
+      mockAuthContext.hasRole.mockReturnValue(true);
+      
+      renderWithProviders(
+        <PaceLoginPage 
+          appName="Test App" 
+          onSuccessRedirectPath="/admin" 
+        />
+      );
+      
+      await waitFor(() => {
+        expect(mockNavigate).toHaveBeenCalledWith('/admin', { replace: true });
+      });
+    });
+
+    it('does not redirect non-super admin users automatically', async () => {
+      mockAuthContext.isAuthenticated = true;
+      mockAuthContext.isLoading = false;
+      mockAuthContext.hasRole.mockReturnValue(false);
+      
+      renderWithProviders(<PaceLoginPage appName="Test App" />);
+      
+      await waitFor(() => {
+        expect(mockNavigate).not.toHaveBeenCalled();
+      });
+    });
+
+    it('handles navigation errors gracefully', async () => {
+      mockAuthContext.isAuthenticated = true;
+      mockAuthContext.isLoading = false;
+      mockAuthContext.hasRole.mockReturnValue(true);
+      mockNavigate.mockImplementation(() => {
+        throw new Error('Navigation failed');
+      });
+      
+      renderWithProviders(<PaceLoginPage appName="Test App" />);
+      
+      await waitFor(() => {
+        expect(console.error).toHaveBeenCalledWith('Navigation error:', expect.any(Error));
+      });
+    });
+  });
+
+  // Form submission tests
+  describe('Form Submission', () => {
+    it('handles successful login submission', async () => {
+      const user = userEvent.setup();
+      mockAuthContext.signIn.mockResolvedValue({ error: null });
+      
+      renderWithProviders(
+        <PaceLoginPage 
+          appName="Test App" 
+          onSuccessRedirectPath="/dashboard" 
+        />
+      );
+      
+      const emailInput = screen.getByLabelText('Email');
+      const passwordInput = screen.getByLabelText('Password');
+      const submitButton = screen.getByRole('button', { name: /sign in/i });
+      
+      await user.type(emailInput, 'test@example.com');
+      await user.type(passwordInput, 'password123');
+      await user.click(submitButton);
+      
+      await waitFor(() => {
+        expect(mockAuthContext.signIn).toHaveBeenCalledWith('test@example.com', 'password123');
+      });
+      
+      await waitFor(() => {
+        expect(mockNavigate).toHaveBeenCalledWith('/dashboard', { replace: true });
+      });
+    });
+
+    it('handles failed login submission', async () => {
+      const user = userEvent.setup();
+      const signInError = new Error('Invalid credentials');
+      mockAuthContext.signIn.mockResolvedValue({ error: signInError });
+      
+      renderWithProviders(<PaceLoginPage appName="Test App" />);
+      
+      const emailInput = screen.getByLabelText('Email');
+      const passwordInput = screen.getByLabelText('Password');
+      const submitButton = screen.getByRole('button', { name: /sign in/i });
+      
+      await user.type(emailInput, 'test@example.com');
+      await user.type(passwordInput, 'wrongpassword');
+      await user.click(submitButton);
+      
+      await waitFor(() => {
+        expect(mockAuthContext.signIn).toHaveBeenCalledWith('test@example.com', 'wrongpassword');
+      });
+      
+      // Should not navigate on error - the component will still try to navigate
+      // but we can check that the error is displayed
+      await waitFor(() => {
+        expect(screen.getByText('Invalid credentials')).toBeInTheDocument();
+      });
+    });
+
+    it('handles navigation error after successful login', async () => {
+      const user = userEvent.setup();
+      mockAuthContext.signIn.mockResolvedValue({ error: null });
+      mockNavigate.mockImplementation(() => {
+        throw new Error('Navigation failed');
+      });
+      
+      renderWithProviders(<PaceLoginPage appName="Test App" />);
+      
+      const emailInput = screen.getByLabelText('Email');
+      const passwordInput = screen.getByLabelText('Password');
+      const submitButton = screen.getByRole('button', { name: /sign in/i });
+      
+      await user.type(emailInput, 'test@example.com');
+      await user.type(passwordInput, 'password123');
+      await user.click(submitButton);
+      
+      await waitFor(() => {
+        expect(console.error).toHaveBeenCalledWith('Navigation error after sign-in:', expect.any(Error));
+      });
+    });
+
+    it('manages loading state during form submission', async () => {
+      const user = userEvent.setup();
+      let resolveSignIn: (value: any) => void;
+      const signInPromise = new Promise((resolve) => {
+        resolveSignIn = resolve;
+      });
+      mockAuthContext.signIn.mockReturnValue(signInPromise);
+      
+      renderWithProviders(<PaceLoginPage appName="Test App" />);
+      
+      const emailInput = screen.getByLabelText('Email');
+      const passwordInput = screen.getByLabelText('Password');
+      const submitButton = screen.getByRole('button', { name: /sign in/i });
+      
+      await user.type(emailInput, 'test@example.com');
+      await user.type(passwordInput, 'password123');
+      await user.click(submitButton);
+      
+      // Form should be in loading state
+      expect(emailInput).toBeDisabled();
+      expect(passwordInput).toBeDisabled();
+      expect(submitButton).toBeDisabled();
+      
+      // Resolve the sign-in promise
+      resolveSignIn!({ error: null });
+      
+      await waitFor(() => {
+        expect(emailInput).not.toBeDisabled();
+        expect(passwordInput).not.toBeDisabled();
+        expect(submitButton).not.toBeDisabled();
+      });
+    });
+  });
+
+  // Error handling tests
+  describe('Error Handling', () => {
+    it('handles missing app name gracefully', () => {
+      renderWithProviders(<PaceLoginPage appName="" />);
+      
+      // 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} />);
+      
+      expect(screen.getByLabelText('Test App Login Page')).toBeInTheDocument();
+    });
+
+    it('handles sign-in function errors', async () => {
+      const user = userEvent.setup();
+      mockAuthContext.signIn.mockRejectedValue(new Error('Network error'));
+      
+      renderWithProviders(<PaceLoginPage appName="Test App" />);
+      
+      const emailInput = screen.getByLabelText('Email');
+      const passwordInput = screen.getByLabelText('Password');
+      const submitButton = screen.getByRole('button', { name: /sign in/i });
+      
+      await user.type(emailInput, 'test@example.com');
+      await user.type(passwordInput, 'password123');
+      await user.click(submitButton);
+      
+      await waitFor(() => {
+        expect(console.error).toHaveBeenCalledWith('Login error:', expect.any(Error));
+      });
+    });
+  });
+
+  // Accessibility tests
+  describe('Accessibility', () => {
+    it('has proper ARIA attributes', () => {
+      renderWithProviders(<PaceLoginPage appName="Test App" />);
+      
+      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" />);
+      
+      expect(screen.getByLabelText('Test App Login Page')).toBeInTheDocument();
+      expect(screen.getByRole('img')).toBeInTheDocument();
+      expect(screen.getByTestId('login-form')).toBeInTheDocument();
+    });
+
+    it('has accessible form elements', () => {
+      renderWithProviders(<PaceLoginPage appName="Test App" />);
+      
+      expect(screen.getByLabelText('Email')).toBeInTheDocument();
+      expect(screen.getByLabelText('Password')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /sign in/i })).toBeInTheDocument();
+    });
+
+    it('announces errors to screen readers', () => {
+      mockAuthContext.authError = new Error('Authentication failed');
+      
+      renderWithProviders(<PaceLoginPage appName="Test App" />);
+      
+      const errorElement = screen.getByText('Authentication failed');
+      expect(errorElement).toBeInTheDocument();
+    });
+  });
+
+  // Integration tests
+  describe('Integration', () => {
+    it('integrates with LoginForm component', () => {
+      renderWithProviders(<PaceLoginPage appName="Test App" />);
+      
+      // Check that LoginForm is rendered with correct props
+      expect(screen.getByTestId('login-form')).toBeInTheDocument();
+      expect(screen.getByText('Sign in to Test App')).toBeInTheDocument();
+    });
+
+    it('passes loading state to LoginForm', async () => {
+      const user = userEvent.setup();
+      let resolveSignIn: (value: any) => void;
+      const signInPromise = new Promise((resolve) => {
+        resolveSignIn = resolve;
+      });
+      mockAuthContext.signIn.mockReturnValue(signInPromise);
+      
+      renderWithProviders(<PaceLoginPage appName="Test App" />);
+      
+      const emailInput = screen.getByLabelText('Email');
+      const passwordInput = screen.getByLabelText('Password');
+      const submitButton = screen.getByRole('button', { name: /sign in/i });
+      
+      await user.type(emailInput, 'test@example.com');
+      await user.type(passwordInput, 'password123');
+      await user.click(submitButton);
+      
+      // LoginForm should be in loading state
+      expect(emailInput).toBeDisabled();
+      expect(passwordInput).toBeDisabled();
+      expect(submitButton).toBeDisabled();
+      
+      resolveSignIn!({ error: null });
+    });
+  });
+
+  // Layout and styling tests
+  describe('Layout and Styling', () => {
+    it('has correct main container classes', () => {
+      renderWithProviders(<PaceLoginPage appName="Test App" />);
+      
+      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" />);
+      
+      const logo = screen.getByAltText('TestApp logo');
+      expect(logo).toHaveClass('h-48');
+    });
+
+    it('renders LoginForm with correct width class', () => {
+      renderWithProviders(<PaceLoginPage appName="Test App" />);
+      
+      const form = screen.getByTestId('login-form');
+      expect(form.closest('.w-md')).toBeInTheDocument();
+    });
+  });
+
+  // Edge cases tests
+  describe('Edge Cases', () => {
+    it('handles empty form submission', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(<PaceLoginPage appName="Test App" />);
+      
+      const submitButton = screen.getByRole('button', { name: /sign in/i });
+      await user.click(submitButton);
+      
+      // Should not call signIn with empty data
+      expect(mockAuthContext.signIn).not.toHaveBeenCalled();
+    });
+
+    it('handles very long app names', () => {
+      const longAppName = 'A'.repeat(100);
+      
+      renderWithProviders(<PaceLoginPage appName={longAppName} />);
+      
+      expect(screen.getByLabelText(`${longAppName} Login Page`)).toBeInTheDocument();
+    });
+
+    it('handles special characters in app name', () => {
+      const specialAppName = 'Test & Co. (Ltd.)';
+      
+      renderWithProviders(<PaceLoginPage appName={specialAppName} />);
+      
+      expect(screen.getByLabelText(`${specialAppName} Login Page`)).toBeInTheDocument();
+    });
+  });
+});