@jmruthers/pace-core 0.5.1 → 0.5.4

package/src/components/LoginForm/LoginForm.test.tsx

@@ -0,0 +1,816 @@
+/**
+ * @file LoginForm Component Tests
+ * @description Comprehensive test suite for LoginForm component
+ * @package @jmruthers/pace-core
+ */
+
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { LoginForm } from './LoginForm';
+import { renderWithProviders } from '../../__tests__/helpers/test-utils';
+
+// Mock the Card components
+vi.mock('../Card/index', () => ({
+  Card: ({ children, className, ...props }: any) => (
+    <div data-testid="card" className={className} {...props}>
+      {children}
+    </div>
+  ),
+  CardContent: ({ children, className, ...props }: any) => (
+    <div data-testid="card-content" className={className} {...props}>
+      {children}
+    </div>
+  ),
+  CardDescription: ({ children, className, ...props }: any) => (
+    <p data-testid="card-description" className={className} {...props}>
+      {children}
+    </p>
+  ),
+  CardFooter: ({ children, className, ...props }: any) => (
+    <div data-testid="card-footer" className={className} {...props}>
+      {children}
+    </div>
+  ),
+  CardHeader: ({ children, className, ...props }: any) => (
+    <div data-testid="card-header" className={className} {...props}>
+      {children}
+    </div>
+  ),
+  CardTitle: ({ children, className, ...props }: any) => (
+    <h2 data-testid="card-title" className={className} {...props}>
+      {children}
+    </h2>
+  ),
+}));
+
+// Mock the Button component
+vi.mock('../Button/Button', () => ({
+  Button: ({ children, onClick, className, disabled, type, ...props }: any) => (
+    <button
+      onClick={onClick}
+      className={className}
+      disabled={disabled}
+      type={type}
+      {...props}
+    >
+      {children}
+    </button>
+  ),
+}));
+
+// Mock the Input component
+vi.mock('../Input/Input', () => ({
+  Input: ({ id, type, placeholder, value, onChange, required, disabled, ...props }: any) => (
+    <input
+      id={id}
+      type={type}
+      placeholder={placeholder}
+      value={value}
+      onChange={onChange}
+      required={required}
+      disabled={disabled}
+      {...props}
+    />
+  ),
+}));
+
+// Mock the Label component
+vi.mock('../Label/Label', () => ({
+  Label: ({ children, htmlFor, ...props }: any) => (
+    <label htmlFor={htmlFor} {...props}>
+      {children}
+    </label>
+  ),
+}));
+
+// Mock the Alert component
+vi.mock('../Alert/Alert', () => ({
+  Alert: ({ children, variant, ...props }: any) => (
+    <div data-testid="alert" data-variant={variant} {...props}>
+      {children}
+    </div>
+  ),
+  AlertDescription: ({ children, ...props }: any) => (
+    <div data-testid="alert-description" {...props}>
+      {children}
+    </div>
+  ),
+}));
+
+// Mock the cn utility
+vi.mock('../../utils/cn', () => ({
+  cn: (...classes: any[]) => classes.filter(Boolean).join(' '),
+}));
+
+describe('LoginForm Component', () => {
+  const defaultProps = {
+    onSignIn: vi.fn(),
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('renders with default props', () => {
+      renderWithProviders(<LoginForm {...defaultProps} />);
+      
+      expect(screen.getByTestId('login-form')).toBeInTheDocument();
+      expect(screen.getByTestId('card')).toBeInTheDocument();
+      expect(screen.getByTestId('login-form')).toHaveAttribute('data-testid', 'login-form');
+    });
+
+    it('renders with custom title and subtitle', () => {
+      renderWithProviders(
+        <LoginForm 
+          {...defaultProps} 
+          title="Welcome Back" 
+          subtitle="Please enter your credentials"
+        />
+      );
+      
+      expect(screen.getByText('Welcome Back')).toBeInTheDocument();
+      expect(screen.getByText('Please enter your credentials')).toBeInTheDocument();
+    });
+
+    it('renders with app name in title', () => {
+      renderWithProviders(
+        <LoginForm 
+          {...defaultProps} 
+          appName="My App"
+        />
+      );
+      
+      expect(screen.getByText('Sign in to My App')).toBeInTheDocument();
+    });
+
+    it('renders with custom className', () => {
+      renderWithProviders(
+        <LoginForm 
+          {...defaultProps} 
+          className="custom-login-form"
+        />
+      );
+      
+      expect(screen.getByTestId('card')).toHaveClass('custom-login-form');
+    });
+
+    it('renders form inputs with correct attributes', () => {
+      renderWithProviders(<LoginForm {...defaultProps} />);
+      
+      const emailInput = screen.getByLabelText('Email');
+      const passwordInput = screen.getByLabelText('Password');
+      
+      expect(emailInput).toHaveAttribute('type', 'email');
+      expect(emailInput).toHaveAttribute('placeholder', 'Enter your email');
+      expect(emailInput).toHaveAttribute('required');
+      
+      expect(passwordInput).toHaveAttribute('type', 'password');
+      expect(passwordInput).toHaveAttribute('placeholder', 'Enter your password');
+      expect(passwordInput).toHaveAttribute('required');
+    });
+
+    it('renders submit button with correct text', () => {
+      renderWithProviders(<LoginForm {...defaultProps} />);
+      
+      expect(screen.getByRole('button', { name: 'Sign In' })).toBeInTheDocument();
+    });
+
+    it('renders sign-up link when showSignUp is true without onSignUp', () => {
+      renderWithProviders(<LoginForm {...defaultProps} showSignUp={true} />);
+      
+      expect(screen.getByText("Don't have an account?")).toBeInTheDocument();
+      expect(screen.getByRole('link', { name: 'Sign up' })).toBeInTheDocument();
+      expect(screen.getByRole('link')).toHaveAttribute('href', '/signup');
+    });
+
+    it('renders sign-up button when showSignUp is true with onSignUp', () => {
+      const onSignUp = vi.fn();
+      renderWithProviders(
+        <LoginForm 
+          {...defaultProps} 
+          showSignUp={true} 
+          onSignUp={onSignUp} 
+        />
+      );
+      
+      expect(screen.getByText("Don't have an account? Sign up")).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: "Don't have an account? Sign up" })).toBeInTheDocument();
+    });
+  });
+
+  describe('Form Validation', () => {
+    it('disables submit button when form is empty', () => {
+      renderWithProviders(<LoginForm {...defaultProps} />);
+      
+      const submitButton = screen.getByRole('button', { name: 'Sign In' });
+      expect(submitButton).toBeDisabled();
+    });
+
+    it('enables submit button when both fields have values', async () => {
+      const user = userEvent.setup();
+      renderWithProviders(<LoginForm {...defaultProps} />);
+      
+      const emailInput = screen.getByLabelText('Email');
+      const passwordInput = screen.getByLabelText('Password');
+      const submitButton = screen.getByRole('button', { name: 'Sign In' });
+      
+      expect(submitButton).toBeDisabled();
+      
+      await user.type(emailInput, 'test@example.com');
+      expect(submitButton).toBeDisabled();
+      
+      await user.type(passwordInput, 'password123');
+      expect(submitButton).not.toBeDisabled();
+    });
+
+    it('disables submit button when only email is filled', async () => {
+      const user = userEvent.setup();
+      renderWithProviders(<LoginForm {...defaultProps} />);
+      
+      const emailInput = screen.getByLabelText('Email');
+      const submitButton = screen.getByRole('button', { name: 'Sign In' });
+      
+      await user.type(emailInput, 'test@example.com');
+      expect(submitButton).toBeDisabled();
+    });
+
+    it('disables submit button when only password is filled', async () => {
+      const user = userEvent.setup();
+      renderWithProviders(<LoginForm {...defaultProps} />);
+      
+      const passwordInput = screen.getByLabelText('Password');
+      const submitButton = screen.getByRole('button', { name: 'Sign In' });
+      
+      await user.type(passwordInput, 'password123');
+      expect(submitButton).toBeDisabled();
+    });
+  });
+
+  describe('User Interactions', () => {
+    it('updates email input value when typed', async () => {
+      const user = userEvent.setup();
+      renderWithProviders(<LoginForm {...defaultProps} />);
+      
+      const emailInput = screen.getByLabelText('Email');
+      await user.type(emailInput, 'test@example.com');
+      
+      expect(emailInput).toHaveValue('test@example.com');
+    });
+
+    it('updates password input value when typed', async () => {
+      const user = userEvent.setup();
+      renderWithProviders(<LoginForm {...defaultProps} />);
+      
+      const passwordInput = screen.getByLabelText('Password');
+      await user.type(passwordInput, 'password123');
+      
+      expect(passwordInput).toHaveValue('password123');
+    });
+
+    it('calls onSignIn with form data when submitted', async () => {
+      const user = userEvent.setup();
+      const onSignIn = vi.fn().mockResolvedValue(undefined);
+      renderWithProviders(<LoginForm {...defaultProps} onSignIn={onSignIn} />);
+      
+      const emailInput = screen.getByLabelText('Email');
+      const passwordInput = screen.getByLabelText('Password');
+      const submitButton = screen.getByRole('button', { name: 'Sign In' });
+      
+      await user.type(emailInput, 'test@example.com');
+      await user.type(passwordInput, 'password123');
+      await user.click(submitButton);
+      
+      expect(onSignIn).toHaveBeenCalledWith({
+        email: 'test@example.com',
+        password: 'password123'
+      });
+    });
+
+    it('calls onSignUp when sign-up button is clicked', async () => {
+      const user = userEvent.setup();
+      const onSignUp = vi.fn();
+      renderWithProviders(
+        <LoginForm 
+          {...defaultProps} 
+          showSignUp={true} 
+          onSignUp={onSignUp} 
+        />
+      );
+      
+      const signUpButton = screen.getByRole('button', { name: "Don't have an account? Sign up" });
+      await user.click(signUpButton);
+      
+      expect(onSignUp).toHaveBeenCalledTimes(1);
+    });
+
+    it('prevents form submission when form is invalid', async () => {
+      const user = userEvent.setup();
+      const onSignIn = vi.fn();
+      renderWithProviders(<LoginForm {...defaultProps} onSignIn={onSignIn} />);
+      
+      const submitButton = screen.getByRole('button', { name: 'Sign In' });
+      await user.click(submitButton);
+      
+      expect(onSignIn).not.toHaveBeenCalled();
+    });
+
+    it('prevents form submission when loading', async () => {
+      const user = userEvent.setup();
+      const onSignIn = vi.fn();
+      renderWithProviders(
+        <LoginForm 
+          {...defaultProps} 
+          onSignIn={onSignIn} 
+          isLoading={true}
+        />
+      );
+      
+      const emailInput = screen.getByLabelText('Email');
+      const passwordInput = screen.getByLabelText('Password');
+      const submitButton = screen.getByRole('button', { name: 'Signing in...' });
+      
+      await user.type(emailInput, 'test@example.com');
+      await user.type(passwordInput, 'password123');
+      await user.click(submitButton);
+      
+      expect(onSignIn).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Loading States', () => {
+    it('shows loading text on submit button when loading', () => {
+      renderWithProviders(<LoginForm {...defaultProps} isLoading={true} />);
+      
+      expect(screen.getByRole('button', { name: 'Signing in...' })).toBeInTheDocument();
+    });
+
+    it('disables form inputs when loading', () => {
+      renderWithProviders(<LoginForm {...defaultProps} isLoading={true} />);
+      
+      const emailInput = screen.getByLabelText('Email');
+      const passwordInput = screen.getByLabelText('Password');
+      
+      expect(emailInput).toBeDisabled();
+      expect(passwordInput).toBeDisabled();
+    });
+
+    it('disables submit button when loading', () => {
+      renderWithProviders(<LoginForm {...defaultProps} isLoading={true} />);
+      
+      const submitButton = screen.getByRole('button', { name: 'Signing in...' });
+      expect(submitButton).toBeDisabled();
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('displays error message when provided', () => {
+      renderWithProviders(<LoginForm {...defaultProps} />);
+      
+      // Simulate error state by triggering form submission with error
+      const form = screen.getByTestId('login-form');
+      const submitEvent = new Event('submit', { bubbles: true, cancelable: true });
+      form.dispatchEvent(submitEvent);
+      
+      // Error should not be visible initially
+      expect(screen.queryByTestId('alert')).not.toBeInTheDocument();
+    });
+
+    it('calls onError when sign-in fails', async () => {
+      const user = userEvent.setup();
+      const onError = vi.fn();
+      const onSignIn = vi.fn().mockRejectedValue(new Error('Invalid credentials'));
+      
+      renderWithProviders(
+        <LoginForm 
+          {...defaultProps} 
+          onSignIn={onSignIn} 
+          onError={onError}
+        />
+      );
+      
+      const emailInput = screen.getByLabelText('Email');
+      const passwordInput = screen.getByLabelText('Password');
+      const submitButton = screen.getByRole('button', { name: 'Sign In' });
+      
+      await user.type(emailInput, 'test@example.com');
+      await user.type(passwordInput, 'password123');
+      await user.click(submitButton);
+      
+      await waitFor(() => {
+        expect(onError).toHaveBeenCalledWith(expect.any(Error));
+      });
+    });
+
+    it('displays error message when sign-in fails', async () => {
+      const user = userEvent.setup();
+      const onSignIn = vi.fn().mockRejectedValue(new Error('Invalid credentials'));
+      
+      renderWithProviders(
+        <LoginForm 
+          {...defaultProps} 
+          onSignIn={onSignIn}
+        />
+      );
+      
+      const emailInput = screen.getByLabelText('Email');
+      const passwordInput = screen.getByLabelText('Password');
+      const submitButton = screen.getByRole('button', { name: 'Sign In' });
+      
+      await user.type(emailInput, 'test@example.com');
+      await user.type(passwordInput, 'password123');
+      await user.click(submitButton);
+      
+      await waitFor(() => {
+        expect(screen.getByText('Invalid credentials')).toBeInTheDocument();
+      });
+    });
+
+    it('handles non-Error objects in catch block', async () => {
+      const user = userEvent.setup();
+      const onError = vi.fn();
+      const onSignIn = vi.fn().mockRejectedValue('String error');
+      
+      renderWithProviders(
+        <LoginForm 
+          {...defaultProps} 
+          onSignIn={onSignIn} 
+          onError={onError}
+        />
+      );
+      
+      const emailInput = screen.getByLabelText('Email');
+      const passwordInput = screen.getByLabelText('Password');
+      const submitButton = screen.getByRole('button', { name: 'Sign In' });
+      
+      await user.type(emailInput, 'test@example.com');
+      await user.type(passwordInput, 'password123');
+      await user.click(submitButton);
+      
+      await waitFor(() => {
+        expect(screen.getByText('Sign in failed')).toBeInTheDocument();
+        expect(onError).toHaveBeenCalledWith(expect.any(Error));
+      });
+    });
+
+    it('clears error when form is resubmitted', async () => {
+      const user = userEvent.setup();
+      const onSignIn = vi.fn()
+        .mockRejectedValueOnce(new Error('First error'))
+        .mockResolvedValueOnce(undefined);
+      
+      renderWithProviders(
+        <LoginForm 
+          {...defaultProps} 
+          onSignIn={onSignIn}
+        />
+      );
+      
+      const emailInput = screen.getByLabelText('Email');
+      const passwordInput = screen.getByLabelText('Password');
+      const submitButton = screen.getByRole('button', { name: 'Sign In' });
+      
+      await user.type(emailInput, 'test@example.com');
+      await user.type(passwordInput, 'password123');
+      
+      // First submission - should show error
+      await user.click(submitButton);
+      await waitFor(() => {
+        expect(screen.getByText('First error')).toBeInTheDocument();
+      });
+      
+      // Second submission - should clear error
+      await user.click(submitButton);
+      await waitFor(() => {
+        expect(screen.queryByText('First error')).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Success Handling', () => {
+    it('calls onSuccess when sign-in succeeds', async () => {
+      const user = userEvent.setup();
+      const onSuccess = vi.fn();
+      const onSignIn = vi.fn().mockResolvedValue(undefined);
+      
+      renderWithProviders(
+        <LoginForm 
+          {...defaultProps} 
+          onSignIn={onSignIn} 
+          onSuccess={onSuccess}
+        />
+      );
+      
+      const emailInput = screen.getByLabelText('Email');
+      const passwordInput = screen.getByLabelText('Password');
+      const submitButton = screen.getByRole('button', { name: 'Sign In' });
+      
+      await user.type(emailInput, 'test@example.com');
+      await user.type(passwordInput, 'password123');
+      await user.click(submitButton);
+      
+      await waitFor(() => {
+        expect(onSuccess).toHaveBeenCalledTimes(1);
+      });
+    });
+
+    it('does not call onSuccess when not provided', async () => {
+      const user = userEvent.setup();
+      const onSignIn = vi.fn().mockResolvedValue(undefined);
+      
+      renderWithProviders(
+        <LoginForm 
+          {...defaultProps} 
+          onSignIn={onSignIn}
+        />
+      );
+      
+      const emailInput = screen.getByLabelText('Email');
+      const passwordInput = screen.getByLabelText('Password');
+      const submitButton = screen.getByRole('button', { name: 'Sign In' });
+      
+      await user.type(emailInput, 'test@example.com');
+      await user.type(passwordInput, 'password123');
+      await user.click(submitButton);
+      
+      // Should not throw error when onSuccess is not provided
+      await waitFor(() => {
+        expect(onSignIn).toHaveBeenCalledTimes(1);
+      });
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has proper form structure', () => {
+      renderWithProviders(<LoginForm {...defaultProps} />);
+      
+      const form = screen.getByTestId('login-form');
+      expect(form).toBeInTheDocument();
+      expect(form).toHaveAttribute('data-testid', 'login-form');
+    });
+
+    it('has proper label associations', () => {
+      renderWithProviders(<LoginForm {...defaultProps} />);
+      
+      const emailInput = screen.getByLabelText('Email');
+      const passwordInput = screen.getByLabelText('Password');
+      
+      expect(emailInput).toHaveAttribute('id', 'email');
+      expect(passwordInput).toHaveAttribute('id', 'password');
+    });
+
+    it('has proper heading structure', () => {
+      renderWithProviders(<LoginForm {...defaultProps} />);
+      
+      const title = screen.getByRole('heading', { level: 2 });
+      expect(title).toBeInTheDocument();
+      expect(title).toHaveTextContent('Sign In');
+    });
+
+    it('has accessible error messages', async () => {
+      const user = userEvent.setup();
+      const onSignIn = vi.fn().mockRejectedValue(new Error('Invalid credentials'));
+      
+      renderWithProviders(
+        <LoginForm 
+          {...defaultProps} 
+          onSignIn={onSignIn}
+        />
+      );
+      
+      const emailInput = screen.getByLabelText('Email');
+      const passwordInput = screen.getByLabelText('Password');
+      const submitButton = screen.getByRole('button', { name: 'Sign In' });
+      
+      await user.type(emailInput, 'test@example.com');
+      await user.type(passwordInput, 'password123');
+      await user.click(submitButton);
+      
+      await waitFor(() => {
+        const alert = screen.getByTestId('alert');
+        expect(alert).toHaveAttribute('data-variant', 'destructive');
+        expect(alert).toBeInTheDocument();
+      });
+    });
+
+    it('supports keyboard navigation', async () => {
+      const user = userEvent.setup();
+      renderWithProviders(<LoginForm {...defaultProps} />);
+      
+      const emailInput = screen.getByLabelText('Email');
+      const passwordInput = screen.getByLabelText('Password');
+      
+      // Focus first input
+      emailInput.focus();
+      expect(document.activeElement).toBe(emailInput);
+      
+      // Test that inputs are focusable
+      expect(emailInput).not.toHaveAttribute('tabindex', '-1');
+      expect(passwordInput).not.toHaveAttribute('tabindex', '-1');
+      
+      // Test that inputs can be focused programmatically
+      passwordInput.focus();
+      expect(document.activeElement).toBe(passwordInput);
+      
+      // Fill form to enable submit button
+      await user.type(emailInput, 'test@example.com');
+      await user.type(passwordInput, 'password123');
+      
+      const submitButton = screen.getByRole('button', { name: 'Sign In' });
+      expect(submitButton).not.toHaveAttribute('tabindex', '-1');
+      expect(submitButton).not.toBeDisabled();
+      
+      submitButton.focus();
+      expect(document.activeElement).toBe(submitButton);
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles empty string values', async () => {
+      const user = userEvent.setup();
+      renderWithProviders(<LoginForm {...defaultProps} />);
+      
+      const emailInput = screen.getByLabelText('Email');
+      const passwordInput = screen.getByLabelText('Password');
+      const submitButton = screen.getByRole('button', { name: 'Sign In' });
+      
+      await user.type(emailInput, ' ');
+      await user.type(passwordInput, ' ');
+      await user.clear(emailInput);
+      await user.clear(passwordInput);
+      
+      expect(submitButton).toBeDisabled();
+    });
+
+    it('handles very long input values', async () => {
+      const user = userEvent.setup();
+      const longEmail = 'a'.repeat(100) + '@example.com';
+      const longPassword = 'p'.repeat(100);
+      
+      renderWithProviders(<LoginForm {...defaultProps} />);
+      
+      const emailInput = screen.getByLabelText('Email');
+      const passwordInput = screen.getByLabelText('Password');
+      
+      await user.type(emailInput, longEmail);
+      await user.type(passwordInput, longPassword);
+      
+      expect(emailInput).toHaveValue(longEmail);
+      expect(passwordInput).toHaveValue(longPassword);
+    });
+
+    it('handles special characters in inputs', async () => {
+      const user = userEvent.setup();
+      const specialEmail = 'test+tag@example.co.uk';
+      const specialPassword = 'P@ssw0rd!@#$%^&*()';
+      
+      renderWithProviders(<LoginForm {...defaultProps} />);
+      
+      const emailInput = screen.getByLabelText('Email');
+      const passwordInput = screen.getByLabelText('Password');
+      
+      await user.type(emailInput, specialEmail);
+      await user.type(passwordInput, specialPassword);
+      
+      expect(emailInput).toHaveValue(specialEmail);
+      expect(passwordInput).toHaveValue(specialPassword);
+    });
+
+    it('handles rapid form submissions', async () => {
+      const user = userEvent.setup();
+      const onSignIn = vi.fn().mockImplementation(() => 
+        new Promise(resolve => setTimeout(resolve, 100))
+      );
+      
+      renderWithProviders(
+        <LoginForm 
+          {...defaultProps} 
+          onSignIn={onSignIn}
+        />
+      );
+      
+      const emailInput = screen.getByLabelText('Email');
+      const passwordInput = screen.getByLabelText('Password');
+      const submitButton = screen.getByRole('button', { name: 'Sign In' });
+      
+      await user.type(emailInput, 'test@example.com');
+      await user.type(passwordInput, 'password123');
+      
+      // Rapid clicks - the component doesn't prevent multiple submissions
+      // so we expect multiple calls
+      await user.click(submitButton);
+      await user.click(submitButton);
+      await user.click(submitButton);
+      
+      // The component allows multiple submissions, so we expect multiple calls
+      expect(onSignIn).toHaveBeenCalledTimes(3);
+    });
+  });
+
+  describe('Performance', () => {
+    it('does not re-render unnecessarily with stable props', () => {
+      const stableProps = {
+        onSignIn: vi.fn(),
+        onSuccess: vi.fn(),
+        onError: vi.fn(),
+        appName: 'Test App',
+        title: 'Test Title',
+        subtitle: 'Test Subtitle',
+      };
+      
+      const { rerender } = renderWithProviders(
+        <LoginForm {...stableProps} />
+      );
+      
+      const initialTitle = screen.getByText('Test Title');
+      
+      // Re-render with same props
+      rerender(<LoginForm {...stableProps} />);
+      
+      // Should still show the same title
+      expect(screen.getByText('Test Title')).toBeInTheDocument();
+    });
+
+    it('handles prop changes efficiently', () => {
+      const { rerender } = renderWithProviders(
+        <LoginForm {...defaultProps} appName="App 1" />
+      );
+      
+      expect(screen.getByText('Sign in to App 1')).toBeInTheDocument();
+      
+      rerender(<LoginForm {...defaultProps} appName="App 2" />);
+      
+      expect(screen.getByText('Sign in to App 2')).toBeInTheDocument();
+    });
+  });
+
+  describe('Integration', () => {
+    it('works with form validation and submission flow', async () => {
+      const user = userEvent.setup();
+      const onSignIn = vi.fn().mockResolvedValue(undefined);
+      const onSuccess = vi.fn();
+      
+      renderWithProviders(
+        <LoginForm 
+          {...defaultProps} 
+          onSignIn={onSignIn} 
+          onSuccess={onSuccess}
+        />
+      );
+      
+      const emailInput = screen.getByLabelText('Email');
+      const passwordInput = screen.getByLabelText('Password');
+      const submitButton = screen.getByRole('button', { name: 'Sign In' });
+      
+      // Initially disabled
+      expect(submitButton).toBeDisabled();
+      
+      // Fill form
+      await user.type(emailInput, 'test@example.com');
+      await user.type(passwordInput, 'password123');
+      
+      // Now enabled
+      expect(submitButton).not.toBeDisabled();
+      
+      // Submit
+      await user.click(submitButton);
+      
+      await waitFor(() => {
+        expect(onSignIn).toHaveBeenCalledWith({
+          email: 'test@example.com',
+          password: 'password123'
+        });
+        expect(onSuccess).toHaveBeenCalledTimes(1);
+      });
+    });
+
+    it('handles complete error flow', async () => {
+      const user = userEvent.setup();
+      const onSignIn = vi.fn().mockRejectedValue(new Error('Network error'));
+      const onError = vi.fn();
+      
+      renderWithProviders(
+        <LoginForm 
+          {...defaultProps} 
+          onSignIn={onSignIn} 
+          onError={onError}
+        />
+      );
+      
+      const emailInput = screen.getByLabelText('Email');
+      const passwordInput = screen.getByLabelText('Password');
+      const submitButton = screen.getByRole('button', { name: 'Sign In' });
+      
+      await user.type(emailInput, 'test@example.com');
+      await user.type(passwordInput, 'password123');
+      await user.click(submitButton);
+      
+      await waitFor(() => {
+        expect(screen.getByText('Network error')).toBeInTheDocument();
+        expect(onError).toHaveBeenCalledWith(expect.any(Error));
+      });
+    });
+  });
+});