Set up comprehensive frontend testing infrastructure

- Install Jest for unit testing with React Testing Library
- Install Playwright for end-to-end testing
- Configure Jest with proper TypeScript support and module mapping
- Create test setup files and utilities for both unit and e2e tests

Components:
* Jest configuration with coverage thresholds
* Playwright configuration with browser automation
* Unit tests for LoginForm, AuthContext, and useSocketIO hook
* E2E tests for authentication, dashboard, and agents workflows
* GitHub Actions workflow for automated testing
* Mock data and API utilities for consistent testing
* Test documentation with best practices

Testing features:
- Unit tests with 70% coverage threshold
- E2E tests with API mocking and user journey testing
- CI/CD integration for automated test runs
- Cross-browser testing support with Playwright
- Authentication system testing end-to-end

🚀 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/src/components/auth/__tests__/LoginForm.test.tsx

@@ -0,0 +1,140 @@
+import { screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { render, mockApiResponses } from '../../../test/utils';
+import LoginForm from '../LoginForm';
+import * as authApi from '../../../api/auth';
+
+// Mock the auth API
+jest.mock('../../../api/auth');
+const mockAuthApi = authApi as jest.Mocked<typeof authApi>;
+
+// Mock react-router-dom
+const mockNavigate = jest.fn();
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => mockNavigate,
+}));
+
+describe('LoginForm', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders login form with email and password fields', () => {
+    render(<LoginForm />);
+    
+    expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/password/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /sign in/i })).toBeInTheDocument();
+  });
+
+  it('shows validation errors for empty fields', async () => {
+    const user = userEvent.setup();
+    render(<LoginForm />);
+    
+    const submitButton = screen.getByRole('button', { name: /sign in/i });
+    await user.click(submitButton);
+    
+    await waitFor(() => {
+      expect(screen.getByText(/email is required/i)).toBeInTheDocument();
+      expect(screen.getByText(/password is required/i)).toBeInTheDocument();
+    });
+  });
+
+  it('shows validation error for invalid email format', async () => {
+    const user = userEvent.setup();
+    render(<LoginForm />);
+    
+    const emailInput = screen.getByLabelText(/email/i);
+    const submitButton = screen.getByRole('button', { name: /sign in/i });
+    
+    await user.type(emailInput, 'invalid-email');
+    await user.click(submitButton);
+    
+    await waitFor(() => {
+      expect(screen.getByText(/invalid email format/i)).toBeInTheDocument();
+    });
+  });
+
+  it('submits form with valid credentials', async () => {
+    const user = userEvent.setup();
+    mockAuthApi.login.mockResolvedValue(mockApiResponses.auth.login);
+    
+    render(<LoginForm />);
+    
+    const emailInput = screen.getByLabelText(/email/i);
+    const passwordInput = screen.getByLabelText(/password/i);
+    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(mockAuthApi.login).toHaveBeenCalledWith({
+        email: 'test@example.com',
+        password: 'password123',
+      });
+    });
+  });
+
+  it('shows error message on login failure', async () => {
+    const user = userEvent.setup();
+    mockAuthApi.login.mockRejectedValue(new Error('Invalid credentials'));
+    
+    render(<LoginForm />);
+    
+    const emailInput = screen.getByLabelText(/email/i);
+    const passwordInput = screen.getByLabelText(/password/i);
+    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(screen.getByText(/invalid credentials/i)).toBeInTheDocument();
+    });
+  });
+
+  it('disables submit button while loading', async () => {
+    const user = userEvent.setup();
+    // Mock a slow API response
+    mockAuthApi.login.mockImplementation(
+      () => new Promise((resolve) => setTimeout(() => resolve(mockApiResponses.auth.login), 1000))
+    );
+    
+    render(<LoginForm />);
+    
+    const emailInput = screen.getByLabelText(/email/i);
+    const passwordInput = screen.getByLabelText(/password/i);
+    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);
+    
+    // Check that button is disabled during loading
+    expect(submitButton).toBeDisabled();
+    expect(screen.getByText(/signing in/i)).toBeInTheDocument();
+  });
+
+  it('toggles password visibility', async () => {
+    const user = userEvent.setup();
+    render(<LoginForm />);
+    
+    const passwordInput = screen.getByLabelText(/password/i) as HTMLInputElement;
+    const toggleButton = screen.getByRole('button', { name: /toggle password visibility/i });
+    
+    // Initially password should be hidden
+    expect(passwordInput.type).toBe('password');
+    
+    // Click toggle to show password
+    await user.click(toggleButton);
+    expect(passwordInput.type).toBe('text');
+    
+    // Click toggle again to hide password
+    await user.click(toggleButton);
+    expect(passwordInput.type).toBe('password');
+  });
+});