@jmruthers/pace-core 0.2.7 → 0.5.1

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

@@ -1,586 +0,0 @@
-import React from 'react';
-import { screen, waitFor, fireEvent, act } from '@testing-library/react';
-import { MemoryRouter, Routes, Route } from 'react-router-dom';
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import '@testing-library/jest-dom';
-import userEvent from '@testing-library/user-event';
-import { PaceLoginPage } from '../PaceLoginPage';
-import { UnifiedAuthProvider } from '../../../providers/UnifiedAuthProvider';
-import { LoginForm } from '../../LoginForm/LoginForm';
-import { renderWithProviders, createMockSupabaseClient, testDataGenerators } from '../../../__tests__/shared';
-
-// Mock Supabase client
-const mockSupabaseClient = createMockSupabaseClient();
-
-// Test wrapper with routing
-const TestWrapper = ({ 
-  children, 
-  appName = 'Test App',
-  initialEntries = ['/login']
-}: { 
-  children: React.ReactNode; 
-  appName?: string;
-  initialEntries?: string[];
-}) => (
-  <MemoryRouter initialEntries={initialEntries}>
-    <UnifiedAuthProvider supabaseClient={mockSupabaseClient as any} appName={appName}>
-      <Routes>
-        <Route path="/login" element={children} />
-        <Route path="/dashboard" element={<div data-testid="dashboard">Dashboard</div>} />
-        <Route path="/admin" element={<div data-testid="admin">Admin Panel</div>} />
-        <Route path="/" element={<div data-testid="home">Home</div>} />
-      </Routes>
-    </UnifiedAuthProvider>
-  </MemoryRouter>
-);
-
-describe('PaceLoginPage Integration', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    
-    // Setup default mock implementations
-    if (mockSupabaseClient.auth.getUser) {
-      vi.spyOn(mockSupabaseClient.auth, 'getUser').mockResolvedValue({ data: { user: null }, error: null });
-    } else {
-      (mockSupabaseClient.auth as any).getUser = vi.fn().mockResolvedValue({ data: { user: null }, error: null });
-    }
-    
-    if (mockSupabaseClient.auth.getSession) {
-      vi.spyOn(mockSupabaseClient.auth, 'getSession').mockResolvedValue({ data: { session: null }, error: null });
-    } else {
-      (mockSupabaseClient.auth as any).getSession = vi.fn().mockResolvedValue({ data: { session: null }, error: null });
-    }
-    
-    if (mockSupabaseClient.auth.onAuthStateChange) {
-      vi.spyOn(mockSupabaseClient.auth, 'onAuthStateChange').mockReturnValue({
-        data: { subscription: { unsubscribe: vi.fn() } }
-      });
-    } else {
-      (mockSupabaseClient.auth as any).onAuthStateChange = vi.fn().mockReturnValue({
-        data: { subscription: { unsubscribe: vi.fn() } }
-      });
-    }
-    
-    if (mockSupabaseClient.auth.signInWithPassword) {
-      vi.spyOn(mockSupabaseClient.auth, 'signInWithPassword').mockResolvedValue({ 
-        data: { user: null, session: null }, 
-        error: null 
-      });
-    } else {
-      (mockSupabaseClient.auth as any).signInWithPassword = vi.fn().mockResolvedValue({ 
-        data: { user: null, session: null }, 
-        error: null 
-      });
-    }
-    
-    if (mockSupabaseClient.rpc) {
-      vi.spyOn(mockSupabaseClient, 'rpc').mockResolvedValue({ 
-        data: [
-          { page_name: 'dashboard', can_create: false, can_read: true, can_update: false, can_delete: false, user_access_level: 'viewer' }
-        ], 
-        error: null 
-      });
-    } else {
-      (mockSupabaseClient as any).rpc = vi.fn().mockResolvedValue({ 
-        data: [
-          { page_name: 'dashboard', can_create: false, can_read: true, can_update: false, can_delete: false, user_access_level: 'viewer' }
-        ], 
-        error: null 
-      });
-    }
-    
-    // Ensure from method returns a proper query builder
-    if (mockSupabaseClient.from) {
-      vi.spyOn(mockSupabaseClient, 'from').mockReturnValue({
-        select: vi.fn().mockReturnThis(),
-        eq: vi.fn().mockReturnThis(),
-        single: vi.fn().mockResolvedValue({ data: null, error: null }),
-        insert: vi.fn().mockReturnThis(),
-        update: vi.fn().mockReturnThis(),
-        delete: vi.fn().mockReturnThis(),
-      });
-    } else {
-      (mockSupabaseClient as any).from = vi.fn().mockReturnValue({
-        select: vi.fn().mockReturnThis(),
-        eq: vi.fn().mockReturnThis(),
-        single: vi.fn().mockResolvedValue({ data: null, error: null }),
-        insert: vi.fn().mockReturnThis(),
-        update: vi.fn().mockReturnThis(),
-        delete: vi.fn().mockReturnThis(),
-      });
-    }
-  });
-
-  afterEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe('Full Authentication Flow', () => {
-    it('should handle complete sign-in flow with success', async () => {
-      const user = userEvent.setup();
-      
-      // Mock successful authentication
-      const mockUser = {
-        id: 'user-1',
-        email: 'test@example.com',
-        user_metadata: { globalRole: 'super_admin' }
-      };
-      
-      mockSupabaseClient.auth.signInWithPassword.mockResolvedValue({
-        data: { user: mockUser, session: { user: mockUser } },
-        error: null
-      });
-
-      // Mock auth state change to trigger redirect
-      let authStateCallback: ((event: string, session: any) => void) | null = null;
-      mockSupabaseClient.auth.onAuthStateChange.mockImplementation((callback) => {
-        authStateCallback = callback as (event: string, session: any) => void;
-        return { data: { subscription: { unsubscribe: vi.fn() } } };
-      });
-
-      renderWithProviders(
-        <TestWrapper appName="Integration Test App">
-          <PaceLoginPage appName="Integration Test App" onSuccessRedirectPath="/dashboard" />
-        </TestWrapper>
-      );
-
-      // Fill out the form
-      const emailInput = screen.getByPlaceholderText('Enter your email');
-      const passwordInput = screen.getByPlaceholderText('Enter your password');
-      const signInButton = screen.getByRole('button', { name: /sign in/i });
-
-      await user.type(emailInput, 'test@example.com');
-      await user.type(passwordInput, 'password123');
-      await user.click(signInButton);
-
-      // Verify sign-in was called
-      await waitFor(() => {
-        expect(mockSupabaseClient.auth.signInWithPassword).toHaveBeenCalledWith({
-          email: 'test@example.com',
-          password: 'password123'
-        });
-      });
-
-      // Simulate auth state change
-      if (authStateCallback) {
-        act(() => {
-          authStateCallback!('SIGNED_IN', { user: mockUser });
-        });
-      }
-
-      // Should redirect to dashboard
-      await waitFor(() => {
-        expect(screen.getByTestId('dashboard')).toBeInTheDocument();
-      });
-    });
-
-    it('should handle sign-in flow with error', async () => {
-      const user = userEvent.setup();
-      
-      // Mock authentication error
-      const mockError = new Error('Invalid credentials');
-      mockSupabaseClient.auth.signInWithPassword.mockResolvedValue({
-        data: { user: null, session: null },
-        error: mockError
-      });
-
-      renderWithProviders(
-        <TestWrapper appName="Error Integration App">
-          <PaceLoginPage appName="Error Integration App" />
-        </TestWrapper>
-      );
-
-      // Fill out the form
-      const emailInput = screen.getByPlaceholderText('Enter your email');
-      const passwordInput = screen.getByPlaceholderText('Enter your password');
-      const signInButton = screen.getByRole('button', { name: /sign in/i });
-
-      await user.type(emailInput, 'wrong@example.com');
-      await user.type(passwordInput, 'wrongpassword');
-      await user.click(signInButton);
-
-      // Verify sign-in was called
-      await waitFor(() => {
-        expect(mockSupabaseClient.auth.signInWithPassword).toHaveBeenCalledWith({
-          email: 'wrong@example.com',
-          password: 'wrongpassword'
-        });
-      });
-
-      // Should show error message
-      await waitFor(() => {
-        expect(screen.getByText('Invalid credentials')).toBeInTheDocument();
-      });
-
-      // Should still be on login page
-      expect(screen.getByTestId('login-form')).toBeInTheDocument();
-    });
-  });
-
-  describe('Navigation and Redirects', () => {
-    it('should redirect authenticated admin users immediately', async () => {
-      // Mock an already authenticated admin user
-      const mockAdminUser = {
-        id: 'admin-user',
-        email: 'admin@example.com',
-        user_metadata: { globalRole: 'super_admin' }
-      };
-
-      mockSupabaseClient.auth.getUser.mockResolvedValue({ 
-        data: { user: mockAdminUser }, 
-        error: null 
-      });
-      mockSupabaseClient.auth.getSession.mockResolvedValue({ 
-        data: { session: { user: mockAdminUser } }, 
-        error: null 
-      });
-
-      renderWithProviders(
-        <TestWrapper appName="Redirect Integration App" initialEntries={['/login']}>
-          <PaceLoginPage appName="Redirect Integration App" onSuccessRedirectPath="/admin" />
-        </TestWrapper>
-      );
-
-      // Should redirect to admin panel
-      await waitFor(() => {
-        expect(screen.getByTestId('admin')).toBeInTheDocument();
-      });
-    });
-
-    it('should use default redirect path for authenticated users', async () => {
-      // Mock an already authenticated admin user
-      const mockAdminUser = {
-        id: 'admin-user',
-        email: 'admin@example.com',
-        user_metadata: { globalRole: 'super_admin' }
-      };
-
-      mockSupabaseClient.auth.getUser.mockResolvedValue({ 
-        data: { user: mockAdminUser }, 
-        error: null 
-      });
-      mockSupabaseClient.auth.getSession.mockResolvedValue({ 
-        data: { session: { user: mockAdminUser } }, 
-        error: null 
-      });
-
-      renderWithProviders(
-        <TestWrapper appName="Default Redirect App" initialEntries={['/login']}>
-          <PaceLoginPage appName="Default Redirect App" />
-        </TestWrapper>
-      );
-
-      // Should redirect to home (default path)
-      await waitFor(() => {
-        expect(screen.getByTestId('home')).toBeInTheDocument();
-      });
-    });
-
-    it('should not redirect non-admin authenticated users', async () => {
-      // Mock an authenticated non-admin user
-      const mockUser = {
-        id: 'regular-user',
-        email: 'user@example.com',
-        user_metadata: {}
-      };
-
-      mockSupabaseClient.auth.getUser.mockResolvedValue({ 
-        data: { user: mockUser }, 
-        error: null 
-      });
-      mockSupabaseClient.auth.getSession.mockResolvedValue({ 
-        data: { session: { user: mockUser } }, 
-        error: null 
-      });
-
-      renderWithProviders(
-        <TestWrapper appName="No Redirect App" initialEntries={['/login']}>
-          <PaceLoginPage appName="No Redirect App" />
-        </TestWrapper>
-      );
-
-      // Should stay on login page
-      await waitFor(() => {
-        expect(screen.getByTestId('login-form')).toBeInTheDocument();
-      });
-
-      // Should not redirect
-      expect(screen.queryByTestId('home')).not.toBeInTheDocument();
-      expect(screen.queryByTestId('admin')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('Form Validation and User Interaction', () => {
-    it('should validate form inputs before submission', async () => {
-      const user = userEvent.setup();
-
-      renderWithProviders(
-        <TestWrapper appName="Validation App">
-          <PaceLoginPage appName="Validation App" />
-        </TestWrapper>
-      );
-
-      const signInButton = screen.getByRole('button', { name: /sign in/i });
-
-      // Initially button should be disabled
-      expect(signInButton).toBeDisabled();
-
-      // Fill only email
-      const emailInput = screen.getByPlaceholderText('Enter your email');
-      await user.type(emailInput, 'test@example.com');
-
-      // Button should still be disabled
-      expect(signInButton).toBeDisabled();
-
-      // Fill password
-      const passwordInput = screen.getByPlaceholderText('Enter your password');
-      await user.type(passwordInput, 'password123');
-
-      // Button should now be enabled
-      expect(signInButton).not.toBeDisabled();
-    });
-
-    it('should handle form submission with loading state', async () => {
-      const user = userEvent.setup();
-      
-      // Mock a slow sign-in response
-      mockSupabaseClient.auth.signInWithPassword.mockImplementation(() => 
-        new Promise(resolve => {
-          setTimeout(() => {
-            resolve({ data: { user: null, session: null }, error: null });
-          }, 100);
-        })
-      );
-
-      renderWithProviders(
-        <TestWrapper appName="Loading App">
-          <PaceLoginPage appName="Loading App" />
-        </TestWrapper>
-      );
-
-      // Fill out the form
-      const emailInput = screen.getByPlaceholderText('Enter your email');
-      const passwordInput = screen.getByPlaceholderText('Enter your password');
-      const signInButton = screen.getByRole('button', { name: /sign in/i });
-
-      await user.type(emailInput, 'test@example.com');
-      await user.type(passwordInput, 'password123');
-      await user.click(signInButton);
-
-      // Check that sign-in was called
-      await waitFor(() => {
-        expect(mockSupabaseClient.auth.signInWithPassword).toHaveBeenCalled();
-      });
-
-      // Button should remain present and functional
-      expect(signInButton).toBeInTheDocument();
-    });
-
-    it('should support keyboard navigation', async () => {
-      const user = userEvent.setup();
-
-      renderWithProviders(
-        <TestWrapper appName="Keyboard App">
-          <PaceLoginPage appName="Keyboard App" />
-        </TestWrapper>
-      );
-
-      const emailInput = screen.getByPlaceholderText('Enter your email');
-      const passwordInput = screen.getByPlaceholderText('Enter your password');
-      const signInButton = screen.getByRole('button', { name: /sign in/i });
-
-      // Focus should start on email input
-      emailInput.focus();
-      expect(emailInput).toHaveFocus();
-
-      // Tab to password input
-      await user.tab();
-      expect(passwordInput).toHaveFocus();
-
-      // Tab to sign in button (may be disabled initially)
-      await user.tab();
-      // If the button is disabled, it may not receive focus; focus may move to body or stay on password
-      const buttonEl = signInButton as HTMLButtonElement;
-      if (buttonEl.disabled) {
-        expect(document.activeElement === passwordInput || document.activeElement === document.body).toBe(true);
-      } else {
-        expect(signInButton).toHaveFocus();
-      }
-
-      // Fill the form to enable the button
-      await user.type(emailInput, 'test@example.com');
-      await user.type(passwordInput, 'password123');
-
-      // Now tab to the enabled button
-      await user.tab();
-      expect(signInButton).toHaveFocus();
-
-      // Enter should submit the form
-      await user.keyboard('{Enter}');
-
-      await waitFor(() => {
-        expect(mockSupabaseClient.auth.signInWithPassword).toHaveBeenCalled();
-      });
-    });
-  });
-
-  describe('Error Handling and Recovery', () => {
-    it('should handle network errors gracefully', async () => {
-      const user = userEvent.setup();
-      
-      // Mock network error
-      mockSupabaseClient.auth.signInWithPassword.mockRejectedValue(
-        new Error('Network error')
-      );
-
-      renderWithProviders(
-        <TestWrapper appName="Network Error App">
-          <PaceLoginPage appName="Network Error App" />
-        </TestWrapper>
-      );
-
-      // Fill out the form
-      const emailInput = screen.getByPlaceholderText('Enter your email');
-      const passwordInput = screen.getByPlaceholderText('Enter your password');
-      const signInButton = screen.getByRole('button', { name: /sign in/i });
-
-      await user.type(emailInput, 'test@example.com');
-      await user.type(passwordInput, 'password123');
-      await user.click(signInButton);
-
-      // Should show error message
-      await waitFor(() => {
-        expect(screen.getByText('Network error')).toBeInTheDocument();
-      });
-
-      // Form should still be functional
-      expect(screen.getByPlaceholderText('Enter your email')).toBeInTheDocument();
-      expect(screen.getByPlaceholderText('Enter your password')).toBeInTheDocument();
-    });
-
-    it('should allow retry after error', async () => {
-      const user = userEvent.setup();
-      
-      // Mock first attempt fails, second succeeds
-      let attemptCount = 0;
-      mockSupabaseClient.auth.signInWithPassword.mockImplementation(() => {
-        attemptCount++;
-        if (attemptCount === 1) {
-          return Promise.resolve({
-            data: { user: null, session: null },
-            error: new Error('First attempt failed')
-          });
-        } else {
-          return Promise.resolve({
-            data: { user: { id: 'user-1', email: 'test@example.com' }, session: {} },
-            error: null
-          });
-        }
-      });
-
-      renderWithProviders(
-        <TestWrapper appName="Retry App">
-          <PaceLoginPage appName="Retry App" />
-        </TestWrapper>
-      );
-
-      // First attempt
-      const emailInput = screen.getByPlaceholderText('Enter your email');
-      const passwordInput = screen.getByPlaceholderText('Enter your password');
-      const signInButton = screen.getByRole('button', { name: /sign in/i });
-
-      await user.type(emailInput, 'test@example.com');
-      await user.type(passwordInput, 'password123');
-      await user.click(signInButton);
-
-      // Should show error
-      await waitFor(() => {
-        expect(screen.getByText('First attempt failed')).toBeInTheDocument();
-      });
-
-      // Clear form and retry
-      await user.clear(emailInput);
-      await user.clear(passwordInput);
-      await user.type(emailInput, 'test@example.com');
-      await user.type(passwordInput, 'password123');
-      await user.click(signInButton);
-
-      // Second attempt should succeed
-      await waitFor(() => {
-        expect(mockSupabaseClient.auth.signInWithPassword).toHaveBeenCalledTimes(2);
-      });
-    });
-  });
-
-  describe('Accessibility and UX', () => {
-    it('should have proper form labels and associations', () => {
-      renderWithProviders(
-        <TestWrapper appName="Accessibility App">
-          <PaceLoginPage appName="Accessibility App" />
-        </TestWrapper>
-      );
-
-      const emailInput = screen.getByPlaceholderText('Enter your email');
-      const passwordInput = screen.getByPlaceholderText('Enter your password');
-
-      // Check that inputs have proper labels
-      expect(screen.getByLabelText('Email')).toBe(emailInput);
-      expect(screen.getByLabelText('Password')).toBe(passwordInput);
-
-      // Check that inputs have proper types
-      expect(emailInput).toHaveAttribute('type', 'email');
-      expect(passwordInput).toHaveAttribute('type', 'password');
-    });
-  });
-
-  describe('Performance and Memory', () => {
-    it('should not cause memory leaks with auth state changes', async () => {
-      // Mock auth state change subscription
-      let unsubscribeCalled = false;
-      const mockUnsubscribe = vi.fn(() => {
-        unsubscribeCalled = true;
-      });
-
-      mockSupabaseClient.auth.onAuthStateChange.mockReturnValue({
-        data: { subscription: { unsubscribe: mockUnsubscribe } }
-      });
-
-      const { unmount } = renderWithProviders(
-        <TestWrapper appName="Memory App">
-          <PaceLoginPage appName="Memory App" />
-        </TestWrapper>
-      );
-
-      // Unmount component
-      unmount();
-
-      // Subscription should be cleaned up
-      expect(unsubscribeCalled).toBe(true);
-    });
-
-    it('should handle rapid prop changes gracefully', async () => {
-      const { rerender } = renderWithProviders(
-        <TestWrapper appName="Rapid Change App">
-          <PaceLoginPage appName="Rapid Change App" />
-        </TestWrapper>
-      );
-
-      // Rapidly change props
-      rerender(
-        <TestWrapper appName="Rapid Change App">
-          <PaceLoginPage appName="New App Name" onSuccessRedirectPath="/new-path" />
-        </TestWrapper>
-      );
-
-      rerender(
-        <TestWrapper appName="Rapid Change App">
-          <PaceLoginPage appName="Another App Name" onSuccessRedirectPath="/another-path" />
-        </TestWrapper>
-      );
-
-      // Component should still render correctly  
-      expect(screen.getByText('Sign in to Another App Name')).toBeInTheDocument();
-      expect(screen.getByTestId('login-form')).toBeInTheDocument();
-    });
-  });
-});