@jmruthers/pace-core 0.2.4

package/docs/best-practices/testing.md

@@ -0,0 +1,981 @@
+# Testing Best Practices
+
+Comprehensive testing is essential for maintaining code quality and preventing regressions. This guide provides testing strategies and patterns for `@jmruthers/pace-core` applications.
+
+## Overview
+
+Testing in `@jmruthers/pace-core` covers multiple layers:
+
+- **Unit Testing**: Individual components and functions
+- **Integration Testing**: Component interactions and hooks
+- **E2E Testing**: Complete user workflows
+- **Accessibility Testing**: Screen reader and keyboard navigation
+- **Performance Testing**: Component rendering and memory usage
+- **Security Testing**: Authentication and authorization
+
+## Testing Strategy
+
+### 1. Testing Pyramid
+
+```typescript
+// Base: Unit Tests (70%)
+// - Individual components
+// - Utility functions
+// - Hooks
+// - Form validation
+
+// Middle: Integration Tests (20%)
+// - Component interactions
+// - Hook combinations
+// - API integration
+
+// Top: E2E Tests (10%)
+// - Complete user workflows
+// - Critical user journeys
+```
+
+### 2. Test Organization
+
+```typescript
+// File structure
+src/
+├── components/
+│   ├── Button/
+│   │   ├── Button.tsx
+│   │   ├── Button.test.tsx
+│   │   └── __snapshots__/
+│   └── DataTable/
+│       ├── DataTable.tsx
+│       ├── DataTable.test.tsx
+│       └── __snapshots__/
+├── hooks/
+│   ├── useEvents.ts
+│   ├── useEvents.test.ts
+│   └── __mocks__/
+└── utils/
+    ├── validation.ts
+    ├── validation.test.ts
+    └── __mocks__/
+```
+
+## Unit Testing
+
+### 1. Component Testing
+
+```typescript
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Button } from '@jmruthers/pace-core';
+
+describe('Button', () => {
+  test('renders with correct text', () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByText('Click me')).toBeInTheDocument();
+  });
+
+  test('calls onClick when clicked', () => {
+    const handleClick = jest.fn();
+    render(<Button onClick={handleClick}>Click me</Button>);
+    
+    fireEvent.click(screen.getByText('Click me'));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  test('is disabled when disabled prop is true', () => {
+    render(<Button disabled>Click me</Button>);
+    expect(screen.getByText('Click me')).toBeDisabled();
+  });
+
+  test('shows loading state', () => {
+    render(<Button loading>Click me</Button>);
+    expect(screen.getByText('Click me')).toHaveClass('loading');
+  });
+
+  test('applies variant classes correctly', () => {
+    const { rerender } = render(<Button variant="primary">Button</Button>);
+    expect(screen.getByText('Button')).toHaveClass('btn-primary');
+
+    rerender(<Button variant="secondary">Button</Button>);
+    expect(screen.getByText('Button')).toHaveClass('btn-secondary');
+  });
+});
+```
+
+### 2. Hook Testing
+
+```typescript
+import { renderHook, act } from '@testing-library/react';
+import { useEvents } from '@jmruthers/pace-core';
+
+// Mock the Supabase client
+jest.mock('@jmruthers/pace-core', () => ({
+  ...jest.requireActual('@jmruthers/pace-core'),
+  useSupabase: () => ({
+    supabase: {
+      from: jest.fn().mockReturnThis(),
+      select: jest.fn().mockReturnThis(),
+      eq: jest.fn().mockReturnThis(),
+    },
+  }),
+}));
+
+describe('useEvents', () => {
+  test('returns initial state', () => {
+    const { result } = renderHook(() => useEvents());
+
+    expect(result.current.events).toEqual([]);
+    expect(result.current.loading).toBe(true);
+    expect(result.current.error).toBeNull();
+  });
+
+  test('fetches events successfully', async () => {
+    const mockEvents = [
+      { id: '1', name: 'Event 1', start_date: '2024-01-01' },
+      { id: '2', name: 'Event 2', start_date: '2024-01-02' },
+    ];
+
+    // Mock successful API response
+    const mockSupabase = {
+      from: jest.fn().mockReturnThis(),
+      select: jest.fn().mockReturnThis(),
+      eq: jest.fn().mockResolvedValue({ data: mockEvents, error: null }),
+    };
+
+    const { result } = renderHook(() => useEvents());
+
+    await act(async () => {
+      // Wait for the hook to complete its async operation
+      await new Promise(resolve => setTimeout(resolve, 0));
+    });
+
+    expect(result.current.events).toEqual(mockEvents);
+    expect(result.current.loading).toBe(false);
+    expect(result.current.error).toBeNull();
+  });
+
+  test('handles API errors', async () => {
+    const mockError = new Error('Failed to fetch events');
+
+    // Mock failed API response
+    const mockSupabase = {
+      from: jest.fn().mockReturnThis(),
+      select: jest.fn().mockReturnThis(),
+      eq: jest.fn().mockResolvedValue({ data: null, error: mockError }),
+    };
+
+    const { result } = renderHook(() => useEvents());
+
+    await act(async () => {
+      await new Promise(resolve => setTimeout(resolve, 0));
+    });
+
+    expect(result.current.events).toEqual([]);
+    expect(result.current.loading).toBe(false);
+    expect(result.current.error).toBe(mockError.message);
+  });
+});
+```
+
+### 3. Utility Function Testing
+
+```typescript
+import { validateEmail, formatDate, calculateEventDuration } from '@jmruthers/pace-core';
+
+describe('validation utilities', () => {
+  describe('validateEmail', () => {
+    test('returns true for valid emails', () => {
+      expect(validateEmail('test@example.com')).toBe(true);
+      expect(validateEmail('user.name@domain.co.uk')).toBe(true);
+      expect(validateEmail('user+tag@example.com')).toBe(true);
+    });
+
+    test('returns false for invalid emails', () => {
+      expect(validateEmail('invalid-email')).toBe(false);
+      expect(validateEmail('test@')).toBe(false);
+      expect(validateEmail('@example.com')).toBe(false);
+      expect(validateEmail('')).toBe(false);
+    });
+  });
+
+  describe('formatDate', () => {
+    test('formats date correctly', () => {
+      const date = '2024-01-15T10:30:00Z';
+      expect(formatDate(date, { format: 'short' })).toBe('Jan 15, 2024');
+      expect(formatDate(date, { format: 'long' })).toBe('January 15, 2024 at 10:30 AM');
+    });
+
+    test('handles different timezones', () => {
+      const date = '2024-01-15T10:30:00Z';
+      expect(formatDate(date, { timezone: 'Australia/Sydney' })).toContain('Sydney');
+    });
+  });
+
+  describe('calculateEventDuration', () => {
+    test('calculates duration in hours', () => {
+      const startDate = '2024-01-15T09:00:00Z';
+      const endDate = '2024-01-15T17:00:00Z';
+      expect(calculateEventDuration(startDate, endDate, 'hours')).toBe(8);
+    });
+
+    test('calculates duration in days', () => {
+      const startDate = '2024-01-15T09:00:00Z';
+      const endDate = '2024-01-17T09:00:00Z';
+      expect(calculateEventDuration(startDate, endDate, 'days')).toBe(2);
+    });
+  });
+});
+```
+
+## Integration Testing
+
+### 1. Component Integration
+
+```typescript
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { useEvents, useUnifiedAuth } from '@jmruthers/pace-core';
+
+// Mock the hooks
+jest.mock('@jmruthers/pace-core', () => ({
+  useEvents: jest.fn(),
+  useUnifiedAuth: jest.fn(),
+}));
+
+describe('EventList Integration', () => {
+  beforeEach(() => {
+    // Setup default mocks
+    (useUnifiedAuth as jest.Mock).mockReturnValue({
+      user: { id: '1', email: 'test@example.com' },
+      loading: false,
+    });
+
+    (useEvents as jest.Mock).mockReturnValue({
+      events: [],
+      loading: false,
+      error: null,
+    });
+  });
+
+  test('displays events when user is authenticated', async () => {
+    const mockEvents = [
+      { id: '1', name: 'Event 1', start_date: '2024-01-01' },
+      { id: '2', name: 'Event 2', start_date: '2024-01-02' },
+    ];
+
+    (useEvents as jest.Mock).mockReturnValue({
+      events: mockEvents,
+      loading: false,
+      error: null,
+    });
+
+    render(<EventList />);
+
+    await waitFor(() => {
+      expect(screen.getByText('Event 1')).toBeInTheDocument();
+      expect(screen.getByText('Event 2')).toBeInTheDocument();
+    });
+  });
+
+  test('shows loading state', () => {
+    (useEvents as jest.Mock).mockReturnValue({
+      events: [],
+      loading: true,
+      error: null,
+    });
+
+    render(<EventList />);
+    expect(screen.getByText('Loading events...')).toBeInTheDocument();
+  });
+
+  test('shows error state', () => {
+    (useEvents as jest.Mock).mockReturnValue({
+      events: [],
+      loading: false,
+      error: 'Failed to load events',
+    });
+
+    render(<EventList />);
+    expect(screen.getByText('Error: Failed to load events')).toBeInTheDocument();
+  });
+});
+```
+
+### 2. Form Integration Testing
+
+```typescript
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { useZodForm } from '@jmruthers/pace-core';
+
+describe('UserForm Integration', () => {
+  test('submits form with valid data', async () => {
+    const mockSubmit = jest.fn();
+    
+    render(
+      <UserForm onSubmit={mockSubmit} />
+    );
+
+    // Fill out the form
+    fireEvent.change(screen.getByLabelText('Name'), {
+      target: { value: 'John Doe' },
+    });
+    fireEvent.change(screen.getByLabelText('Email'), {
+      target: { value: 'john@example.com' },
+    });
+
+    // Submit the form
+    fireEvent.click(screen.getByText('Submit'));
+
+    await waitFor(() => {
+      expect(mockSubmit).toHaveBeenCalledWith({
+        name: 'John Doe',
+        email: 'john@example.com',
+      });
+    });
+  });
+
+  test('shows validation errors for invalid data', async () => {
+    render(<UserForm onSubmit={jest.fn()} />);
+
+    // Submit without filling required fields
+    fireEvent.click(screen.getByText('Submit'));
+
+    await waitFor(() => {
+      expect(screen.getByText('Name is required')).toBeInTheDocument();
+      expect(screen.getByText('Invalid email')).toBeInTheDocument();
+    });
+  });
+
+  test('clears form after successful submission', async () => {
+    const mockSubmit = jest.fn().mockResolvedValue(undefined);
+    
+    render(<UserForm onSubmit={mockSubmit} />);
+
+    // Fill and submit form
+    fireEvent.change(screen.getByLabelText('Name'), {
+      target: { value: 'John Doe' },
+    });
+    fireEvent.change(screen.getByLabelText('Email'), {
+      target: { value: 'john@example.com' },
+    });
+    fireEvent.click(screen.getByText('Submit'));
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Name')).toHaveValue('');
+      expect(screen.getByLabelText('Email')).toHaveValue('');
+    });
+  });
+});
+```
+
+## Authentication Testing
+
+### 1. Auth Hook Testing
+
+```typescript
+import { renderHook, act } from '@testing-library/react';
+import { useUnifiedAuth } from '@jmruthers/pace-core';
+
+// Mock Supabase auth
+const mockSupabase = {
+  auth: {
+    signIn: jest.fn(),
+    signUp: jest.fn(),
+    signOut: jest.fn(),
+    getSession: jest.fn(),
+  },
+};
+
+jest.mock('@supabase/supabase-js', () => ({
+  createClient: () => mockSupabase,
+}));
+
+describe('useUnifiedAuth', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('signs in successfully', async () => {
+    const mockUser = { id: '1', email: 'test@example.com' };
+    const mockSession = { user: mockUser, access_token: 'token' };
+
+    mockSupabase.auth.signIn.mockResolvedValue({
+      data: { user: mockUser, session: mockSession },
+      error: null,
+    });
+
+    const { result } = renderHook(() => useUnifiedAuth());
+
+    await act(async () => {
+      await result.current.signIn({
+        email: 'test@example.com',
+        password: 'password123',
+      });
+    });
+
+    expect(mockSupabase.auth.signIn).toHaveBeenCalledWith({
+      email: 'test@example.com',
+      password: 'password123',
+    });
+    expect(result.current.user).toEqual(mockUser);
+  });
+
+  test('handles sign in errors', async () => {
+    const mockError = { message: 'Invalid credentials' };
+
+    mockSupabase.auth.signIn.mockResolvedValue({
+      data: { user: null, session: null },
+      error: mockError,
+    });
+
+    const { result } = renderHook(() => useUnifiedAuth());
+
+    await act(async () => {
+      await result.current.signIn({
+        email: 'test@example.com',
+        password: 'wrongpassword',
+      });
+    });
+
+    expect(result.current.error).toEqual(mockError);
+  });
+
+  test('signs out successfully', async () => {
+    mockSupabase.auth.signOut.mockResolvedValue({ error: null });
+
+    const { result } = renderHook(() => useUnifiedAuth());
+
+    await act(async () => {
+      await result.current.signOut();
+    });
+
+    expect(mockSupabase.auth.signOut).toHaveBeenCalled();
+    expect(result.current.user).toBeNull();
+  });
+});
+```
+
+### 2. Protected Route Testing
+
+```typescript
+import { render, screen } from '@testing-library/react';
+import { useUnifiedAuth, useRBAC } from '@jmruthers/pace-core';
+
+jest.mock('@jmruthers/pace-core', () => ({
+  useUnifiedAuth: jest.fn(),
+  useRBAC: jest.fn(),
+}));
+
+describe('ProtectedRoute', () => {
+  test('renders children when user is authenticated and has permission', () => {
+    (useUnifiedAuth as jest.Mock).mockReturnValue({
+      user: { id: '1', email: 'test@example.com' },
+      loading: false,
+    });
+
+    (useRBAC as jest.Mock).mockReturnValue({
+      hasPermission: jest.fn().mockReturnValue(true),
+    });
+
+    render(
+      <ProtectedRoute permission="read:users">
+        <div>Protected Content</div>
+      </ProtectedRoute>
+    );
+
+    expect(screen.getByText('Protected Content')).toBeInTheDocument();
+  });
+
+  test('shows loading when auth is loading', () => {
+    (useUnifiedAuth as jest.Mock).mockReturnValue({
+      user: null,
+      loading: true,
+    });
+
+    render(
+      <ProtectedRoute permission="read:users">
+        <div>Protected Content</div>
+      </ProtectedRoute>
+    );
+
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+  });
+
+  test('redirects when user is not authenticated', () => {
+    (useUnifiedAuth as jest.Mock).mockReturnValue({
+      user: null,
+      loading: false,
+    });
+
+    render(
+      <ProtectedRoute permission="read:users">
+        <div>Protected Content</div>
+      </ProtectedRoute>
+    );
+
+    expect(screen.getByText('Access denied')).toBeInTheDocument();
+  });
+
+  test('shows access denied when user lacks permission', () => {
+    (useUnifiedAuth as jest.Mock).mockReturnValue({
+      user: { id: '1', email: 'test@example.com' },
+      loading: false,
+    });
+
+    (useRBAC as jest.Mock).mockReturnValue({
+      hasPermission: jest.fn().mockReturnValue(false),
+    });
+
+    render(
+      <ProtectedRoute permission="read:users">
+        <div>Protected Content</div>
+      </ProtectedRoute>
+    );
+
+    expect(screen.getByText('Access denied')).toBeInTheDocument();
+  });
+});
+```
+
+## Accessibility Testing
+
+### 1. Screen Reader Testing
+
+```typescript
+import { render, screen } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+
+expect.extend(toHaveNoViolations);
+
+describe('Accessibility', () => {
+  test('Button has no accessibility violations', async () => {
+    const { container } = render(
+      <Button aria-label="Submit form">Submit</Button>
+    );
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  test('DataTable has proper ARIA attributes', () => {
+    const columns = [
+      { accessorKey: 'name', header: 'Name' },
+      { accessorKey: 'email', header: 'Email' },
+    ];
+
+    const data = [
+      { id: '1', name: 'John Doe', email: 'john@example.com' },
+      { id: '2', name: 'Jane Smith', email: 'jane@example.com' },
+    ];
+
+    render(<DataTable data={data} columns={columns} />);
+
+    // Check for table role
+    expect(screen.getByRole('table')).toBeInTheDocument();
+
+    // Check for table headers
+    expect(screen.getByRole('columnheader', { name: 'Name' })).toBeInTheDocument();
+    expect(screen.getByRole('columnheader', { name: 'Email' })).toBeInTheDocument();
+
+    // Check for table rows
+    expect(screen.getAllByRole('row')).toHaveLength(3); // Header + 2 data rows
+  });
+
+  test('Form has proper labels and associations', () => {
+    render(
+      <form>
+        <label htmlFor="name">Name</label>
+        <input id="name" type="text" />
+        <label htmlFor="email">Email</label>
+        <input id="email" type="email" />
+      </form>
+    );
+
+    // Check that labels are properly associated
+    expect(screen.getByLabelText('Name')).toBeInTheDocument();
+    expect(screen.getByLabelText('Email')).toBeInTheDocument();
+  });
+});
+```
+
+### 2. Keyboard Navigation Testing
+
+```typescript
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+describe('Keyboard Navigation', () => {
+  test('supports tab navigation', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <div>
+        <button>First Button</button>
+        <input type="text" placeholder="Input field" />
+        <button>Second Button</button>
+      </div>
+    );
+
+    // Focus first element
+    await user.tab();
+    expect(screen.getByText('First Button')).toHaveFocus();
+
+    // Tab to next element
+    await user.tab();
+    expect(screen.getByPlaceholderText('Input field')).toHaveFocus();
+
+    // Tab to next element
+    await user.tab();
+    expect(screen.getByText('Second Button')).toHaveFocus();
+
+    // Tab should wrap around
+    await user.tab();
+    expect(screen.getByText('First Button')).toHaveFocus();
+  });
+
+  test('supports Enter key activation', async () => {
+    const user = userEvent.setup();
+    const handleClick = jest.fn();
+
+    render(<Button onClick={handleClick}>Click me</Button>);
+
+    await user.tab();
+    expect(screen.getByText('Click me')).toHaveFocus();
+
+    await user.keyboard('{Enter}');
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  test('supports Escape key for modal closing', async () => {
+    const user = userEvent.setup();
+    const onClose = jest.fn();
+
+    render(
+      <Modal isOpen={true} onClose={onClose}>
+        <div>Modal content</div>
+      </Modal>
+    );
+
+    await user.keyboard('{Escape}');
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+});
+```
+
+## Performance Testing
+
+### 1. Component Performance Testing
+
+```typescript
+import { render } from '@testing-library/react';
+import { useComponentPerformance } from '@jmruthers/pace-core';
+
+describe('Component Performance', () => {
+  test('renders within performance budget', () => {
+    const startTime = performance.now();
+    
+    render(<DataTable data={largeDataset} columns={columns} />);
+    
+    const endTime = performance.now();
+    const renderTime = endTime - startTime;
+    
+    // Should render within 100ms
+    expect(renderTime).toBeLessThan(100);
+  });
+
+  test('does not cause memory leaks', () => {
+    const initialMemory = performance.memory?.usedJSHeapSize || 0;
+    
+    // Render and unmount component multiple times
+    for (let i = 0; i < 100; i++) {
+      const { unmount } = render(<EventList />);
+      unmount();
+    }
+    
+    const finalMemory = performance.memory?.usedJSHeapSize || 0;
+    const memoryIncrease = finalMemory - initialMemory;
+    
+    // Memory increase should be minimal (less than 1MB)
+    expect(memoryIncrease).toBeLessThan(1024 * 1024);
+  });
+});
+```
+
+### 2. Hook Performance Testing
+
+```typescript
+import { renderHook } from '@testing-library/react';
+import { useEvents } from '@jmruthers/pace-core';
+
+describe('Hook Performance', () => {
+  test('useEvents renders efficiently', () => {
+    const startTime = performance.now();
+    
+    renderHook(() => useEvents());
+    
+    const endTime = performance.now();
+    const renderTime = endTime - startTime;
+    
+    // Hook should initialize within 50ms
+    expect(renderTime).toBeLessThan(50);
+  });
+
+  test('useEvents handles large datasets efficiently', () => {
+    const largeDataset = Array.from({ length: 1000 }, (_, i) => ({
+      id: i.toString(),
+      name: `Event ${i}`,
+      start_date: '2024-01-01',
+    }));
+
+    const { result } = renderHook(() => useEvents());
+    
+    // Simulate large dataset
+    act(() => {
+      result.current.setEvents(largeDataset);
+    });
+
+    expect(result.current.events).toHaveLength(1000);
+    expect(result.current.loading).toBe(false);
+  });
+});
+```
+
+## E2E Testing
+
+### 1. User Workflow Testing
+
+```typescript
+import { test, expect } from '@playwright/test';
+
+test('complete user registration and event creation workflow', async ({ page }) => {
+  // Navigate to the app
+  await page.goto('http://localhost:3000');
+
+  // Register new user
+  await page.click('text=Sign Up');
+  await page.fill('[data-testid="email-input"]', 'test@example.com');
+  await page.fill('[data-testid="password-input"]', 'password123');
+  await page.click('[data-testid="signup-button"]');
+
+  // Wait for registration to complete
+  await page.waitForSelector('[data-testid="dashboard"]');
+
+  // Create an event
+  await page.click('[data-testid="create-event-button"]');
+  await page.fill('[data-testid="event-name-input"]', 'Test Event');
+  await page.fill('[data-testid="event-description-input"]', 'Test Description');
+  await page.fill('[data-testid="event-date-input"]', '2024-12-31');
+  await page.click('[data-testid="save-event-button"]');
+
+  // Verify event was created
+  await page.waitForSelector('text=Test Event');
+  expect(await page.isVisible('text=Test Event')).toBeTruthy();
+});
+
+test('user authentication and permission-based access', async ({ page }) => {
+  await page.goto('http://localhost:3000');
+
+  // Sign in as admin user
+  await page.fill('[data-testid="email-input"]', 'admin@example.com');
+  await page.fill('[data-testid="password-input"]', 'adminpass');
+  await page.click('[data-testid="signin-button"]');
+
+  await page.waitForSelector('[data-testid="dashboard"]');
+
+  // Verify admin features are available
+  expect(await page.isVisible('[data-testid="admin-panel"]')).toBeTruthy();
+  expect(await page.isVisible('[data-testid="user-management"]')).toBeTruthy();
+
+  // Sign in as regular user
+  await page.click('[data-testid="signout-button"]');
+  await page.fill('[data-testid="email-input"]', 'user@example.com');
+  await page.fill('[data-testid="password-input"]', 'userpass');
+  await page.click('[data-testid="signin-button"]');
+
+  await page.waitForSelector('[data-testid="dashboard"]');
+
+  // Verify admin features are not available
+  expect(await page.isVisible('[data-testid="admin-panel"]')).toBeFalsy();
+  expect(await page.isVisible('[data-testid="user-management"]')).toBeFalsy();
+});
+```
+
+### 2. Critical Path Testing
+
+```typescript
+test('event management critical path', async ({ page }) => {
+  await page.goto('http://localhost:3000');
+  
+  // Sign in
+  await page.fill('[data-testid="email-input"]', 'test@example.com');
+  await page.fill('[data-testid="password-input"]', 'password123');
+  await page.click('[data-testid="signin-button"]');
+  
+  await page.waitForSelector('[data-testid="dashboard"]');
+
+  // Create event
+  await page.click('[data-testid="create-event"]');
+  await page.fill('[data-testid="event-name"]', 'Critical Test Event');
+  await page.fill('[data-testid="event-date"]', '2024-12-31');
+  await page.click('[data-testid="save-event"]');
+
+  // Verify event appears in list
+  await page.waitForSelector('text=Critical Test Event');
+
+  // Edit event
+  await page.click('[data-testid="edit-event-Critical Test Event"]');
+  await page.fill('[data-testid="event-name"]', 'Updated Critical Test Event');
+  await page.click('[data-testid="save-event"]');
+
+  // Verify event was updated
+  await page.waitForSelector('text=Updated Critical Test Event');
+
+  // Delete event
+  await page.click('[data-testid="delete-event-Updated Critical Test Event"]');
+  await page.click('[data-testid="confirm-delete"]');
+
+  // Verify event was deleted
+  await page.waitForSelector('text=Updated Critical Test Event', { state: 'hidden' });
+});
+```
+
+## Test Utilities
+
+### 1. Custom Test Helpers
+
+```typescript
+// test-utils.tsx
+import { render, RenderOptions } from '@testing-library/react';
+import { UnifiedAuthProvider, OrganisationProvider } from '@jmruthers/pace-core';
+
+const AllTheProviders = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <UnifiedAuthProvider>
+      <OrganisationProvider>
+        {children}
+      </OrganisationProvider>
+    </UnifiedAuthProvider>
+  );
+};
+
+const customRender = (
+  ui: React.ReactElement,
+  options?: Omit<RenderOptions, 'wrapper'>
+) => render(ui, { wrapper: AllTheProviders, ...options });
+
+export * from '@testing-library/react';
+export { customRender as render };
+```
+
+### 2. Mock Data Factories
+
+```typescript
+// test-factories.ts
+export const createMockUser = (overrides = {}) => ({
+  id: '1',
+  email: 'test@example.com',
+  role: 'user',
+  created_at: '2024-01-01T00:00:00Z',
+  ...overrides,
+});
+
+export const createMockEvent = (overrides = {}) => ({
+  id: '1',
+  name: 'Test Event',
+  description: 'Test Description',
+  start_date: '2024-12-31T10:00:00Z',
+  end_date: '2024-12-31T18:00:00Z',
+  organisation_id: '1',
+  created_at: '2024-01-01T00:00:00Z',
+  ...overrides,
+});
+
+export const createMockOrganisation = (overrides = {}) => ({
+  id: '1',
+  name: 'Test Organisation',
+  slug: 'test-organisation',
+  created_at: '2024-01-01T00:00:00Z',
+  ...overrides,
+});
+```
+
+### 3. Test Setup and Teardown
+
+```typescript
+// setupTests.ts
+import '@testing-library/jest-dom';
+import { server } from './mocks/server';
+
+beforeAll(() => server.listen());
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
+
+// Mock IntersectionObserver
+global.IntersectionObserver = class IntersectionObserver {
+  constructor() {}
+  disconnect() {}
+  observe() {}
+  unobserve() {}
+};
+
+// Mock ResizeObserver
+global.ResizeObserver = class ResizeObserver {
+  constructor() {}
+  disconnect() {}
+  observe() {}
+  unobserve() {}
+};
+```
+
+## Testing Best Practices Checklist
+
+### Unit Testing Checklist
+
+- [ ] Test component rendering
+- [ ] Test user interactions
+- [ ] Test prop variations
+- [ ] Test error states
+- [ ] Test loading states
+- [ ] Test accessibility features
+- [ ] Test edge cases
+- [ ] Mock external dependencies
+- [ ] Use descriptive test names
+- [ ] Keep tests focused and simple
+
+### Integration Testing Checklist
+
+- [ ] Test component interactions
+- [ ] Test hook combinations
+- [ ] Test form submissions
+- [ ] Test API integrations
+- [ ] Test authentication flows
+- [ ] Test permission checks
+- [ ] Test error handling
+- [ ] Test loading states
+- [ ] Test data flow
+- [ ] Test user workflows
+
+### E2E Testing Checklist
+
+- [ ] Test critical user journeys
+- [ ] Test authentication flows
+- [ ] Test permission-based access
+- [ ] Test form submissions
+- [ ] Test data persistence
+- [ ] Test error scenarios
+- [ ] Test responsive design
+- [ ] Test cross-browser compatibility
+- [ ] Test performance under load
+- [ ] Test accessibility compliance
+
+### Accessibility Testing Checklist
+
+- [ ] Test screen reader compatibility
+- [ ] Test keyboard navigation
+- [ ] Test focus management
+- [ ] Test ARIA attributes
+- [ ] Test color contrast
+- [ ] Test semantic HTML
+- [ ] Test alternative text
+- [ ] Test form labels
+- [ ] Test error announcements
+- [ ] Test skip links
+
+For more information about testing your application, see the [Security Guide](./security.md) and [Performance Guide](./performance.md).