Phase 7 - Add comprehensive test suites for authentication components and services

- Implement test coverage for AuthErrorDisplay, AuthLoadingIndicator, and SignInForm components
- Create test suite for useAuthOperations hook with detailed scenario testing
- Add comprehensive tests for CognitoAuthService covering various authentication methods
- Enhance test mocking for translations, hooks, and external services
- Improve error handling and loading state validation in test scenarios

Author: jkestering-modus

frontend/src/common/components/Auth/__tests__/AuthErrorDisplay.test.tsx

@@ -0,0 +1,91 @@
+import { render, screen } from '@testing-library/react';
+import { vi, expect } from 'vitest';
+import AuthErrorDisplay from '../AuthErrorDisplay';
+import { AuthError } from 'common/models/auth';
+
+// Mock translations
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => {
+      // Return the key as the translation for testing
+      if (key === 'error.details') return 'Error details';
+      return key;
+    }
+  })
+}));
+
+describe('AuthErrorDisplay', () => {
+  it('should not render when error is null', () => {
+    const { container } = render(<AuthErrorDisplay error={null} />);
+    expect(container.firstChild).toEqual(null);
+  });
+
+  it('should not render when error is undefined', () => {
+    const { container } = render(<AuthErrorDisplay error={undefined} />);
+    expect(container.firstChild).toEqual(null);
+  });
+
+  it('should render string error message', () => {
+    const errorMessage = 'Test error message';
+    render(<AuthErrorDisplay error={errorMessage} />);
+    
+    const element = screen.getByText(errorMessage);
+    expect(element).toBeDefined();
+  });
+
+  it('should render AuthError object with message', () => {
+    const error: AuthError = {
+      code: 'TestError',
+      message: 'Test error object message',
+      name: 'TestError'
+    };
+    
+    render(<AuthErrorDisplay error={error} />);
+    
+    const element = screen.getByText(error.message);
+    expect(element).toBeDefined();
+    
+    // Should not show error details by default
+    const details = screen.queryByText(/Error details/);
+    expect(details).toEqual(null);
+  });
+
+  it('should render error details when showDetails is true', () => {
+    const error: AuthError = {
+      code: 'DetailedError',
+      message: 'Error with details',
+      name: 'DetailedError'
+    };
+    
+    render(<AuthErrorDisplay error={error} showDetails={true} />);
+    
+    const messageElement = screen.getByText(error.message);
+    expect(messageElement).toBeDefined();
+    
+    const detailsLabel = screen.getByText(/Error details/);
+    expect(detailsLabel).toBeDefined();
+    
+    const errorCode = screen.getByText(/DetailedError/);
+    expect(errorCode).toBeDefined();
+  });
+
+  it('should apply custom className', () => {
+    const error = 'Test error';
+    const customClass = 'custom-class';
+    
+    render(<AuthErrorDisplay error={error} className={customClass} />);
+    
+    const errorElement = screen.getByTestId('auth-error-display');
+    expect(errorElement.className).toContain(customClass);
+  });
+
+  it('should use custom testid', () => {
+    const error = 'Test error';
+    const customTestId = 'custom-error-display';
+    
+    render(<AuthErrorDisplay error={error} testid={customTestId} />);
+    
+    const element = screen.getByTestId(customTestId);
+    expect(element).toBeDefined();
+  });
+}); 

frontend/src/common/components/Auth/__tests__/AuthLoadingIndicator.test.tsx

@@ -0,0 +1,57 @@
+import { render, screen } from '@testing-library/react';
+import { vi, expect } from 'vitest';
+import AuthLoadingIndicator from '../AuthLoadingIndicator';
+
+// Mock translations
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key // Return the key as the translation for testing
+  })
+}));
+
+describe('AuthLoadingIndicator', () => {
+  it('should not render when loading is false', () => {
+    const { container } = render(<AuthLoadingIndicator isLoading={false} />);
+    expect(container.firstChild).toEqual(null);
+  });
+
+  it('should render spinner and default message when loading is true', () => {
+    render(<AuthLoadingIndicator isLoading={true} />);
+    
+    // Check that the component is rendered
+    const loadingElement = screen.getByTestId('auth-loading-indicator');
+    expect(loadingElement).toBeDefined();
+    
+    // Check that the spinner is rendered
+    const spinner = screen.getByTestId('loading-spinner');
+    expect(spinner).toBeDefined();
+    
+    // Check that the default message is displayed
+    const message = screen.getByText('auth.processing');
+    expect(message).toBeDefined();
+  });
+
+  it('should render with custom message', () => {
+    const customMessage = 'Custom loading message';
+    render(<AuthLoadingIndicator isLoading={true} message={customMessage} />);
+    
+    const message = screen.getByText(customMessage);
+    expect(message).toBeDefined();
+  });
+
+  it('should apply custom className', () => {
+    const customClass = 'custom-class';
+    render(<AuthLoadingIndicator isLoading={true} className={customClass} />);
+    
+    const loadingElement = screen.getByTestId('auth-loading-indicator');
+    expect(loadingElement.className).toContain(customClass);
+  });
+
+  it('should use custom testid', () => {
+    const customTestId = 'custom-loading-indicator';
+    render(<AuthLoadingIndicator isLoading={true} testid={customTestId} />);
+    
+    const element = screen.getByTestId(customTestId);
+    expect(element).toBeDefined();
+  });
+}); 

frontend/src/common/components/Auth/__tests__/SignInForm.test.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { vi, expect } from 'vitest';
+import SignInForm from 'pages/Auth/SignIn/components/SignInForm';
+
+// Mock the useTranslation hook
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key
+  })
+}));
+
+// Mock the useAuthOperations hook
+const mockSignIn = vi.fn();
+vi.mock('common/hooks/useAuthOperations', () => ({
+  useAuthOperations: () => ({
+    signIn: mockSignIn,
+    error: null,
+    isLoading: false
+  })
+}));
+
+// Mock the useProgress hook
+vi.mock('common/hooks/useProgress', () => ({
+  useProgress: () => ({
+    start: vi.fn(),
+    done: vi.fn(),
+    active: false,
+    progress: 0,
+    animation: 'ease',
+    className: '',
+    startPosition: 0.3,
+    initialPosition: 0.1
+  })
+}));
+
+describe('SignInForm', () => {
+  beforeEach(() => {
+    mockSignIn.mockReset();
+  });
+
+  it('renders the form', () => {
+    render(<SignInForm />);
+    
+    const emailInput = screen.getByLabelText(/auth.email/i);
+    const passwordInput = screen.getByLabelText(/auth.password/i);
+    const submitButton = screen.getByRole('button', { name: /auth.signIn/i });
+    
+    expect(emailInput).toBeDefined();
+    expect(passwordInput).toBeDefined();
+    expect(submitButton).toBeDefined();
+  });
+
+  it('validates email and password inputs', async () => {
+    render(<SignInForm />);
+    
+    const emailInput = screen.getByLabelText(/auth.email/i);
+    const passwordInput = screen.getByLabelText(/auth.password/i);
+    const submitButton = screen.getByRole('button', { name: /auth.signIn/i });
+    
+    // Submit with empty fields
+    fireEvent.click(submitButton);
+    
+    await waitFor(() => {
+      // Should show validation errors
+      expect(screen.getByText(/auth.validation.emailRequired/i)).toBeDefined();
+      expect(screen.getByText(/auth.validation.passwordRequired/i)).toBeDefined();
+    });
+    
+    // Enter invalid email format
+    fireEvent.change(emailInput, { target: { value: 'invalid-email' } });
+    fireEvent.click(submitButton);
+    
+    await waitFor(() => {
+      expect(screen.getByText(/auth.validation.emailFormat/i)).toBeDefined();
+    });
+    
+    // Enter valid email but short password
+    fireEvent.change(emailInput, { target: { value: '[email protected]' } });
+    fireEvent.change(passwordInput, { target: { value: '123' } });
+    fireEvent.click(submitButton);
+    
+    await waitFor(() => {
+      expect(screen.getByText(/auth.validation.passwordLength/i)).toBeDefined();
+    });
+  });
+
+  it('submits the form with valid data', async () => {
+    render(<SignInForm />);
+    
+    const emailInput = screen.getByLabelText(/auth.email/i);
+    const passwordInput = screen.getByLabelText(/auth.password/i);
+    const submitButton = screen.getByRole('button', { name: /auth.signIn/i });
+    
+    // Enter valid credentials
+    fireEvent.change(emailInput, { target: { value: '[email protected]' } });
+    fireEvent.change(passwordInput, { target: { value: 'Password123' } });
+    fireEvent.click(submitButton);
+    
+    await waitFor(() => {
+      expect(mockSignIn).toHaveBeenCalledWith('[email protected]', 'Password123');
+    });
+  });
+
+  it('applies custom className', () => {
+    const customClass = 'custom-form-class';
+    render(<SignInForm className={customClass} />);
+    
+    const form = screen.getByTestId('sign-in-form');
+    expect(form.className).toContain(customClass);
+  });
+
+  it('accepts custom testid', () => {
+    const customTestId = 'custom-sign-in-form';
+    render(<SignInForm testid={customTestId} />);
+    
+    const form = screen.getByTestId(customTestId);
+    expect(form).toBeDefined();
+  });
+});