@jmruthers/pace-core 0.6.5 → 0.6.7

package/docs/best-practices/testing.md

@@ -1,1034 +0,0 @@
----
-lastUpdated: 2025-11-18T17:00:00+11:00
-version: 0.5.181
-reviewedBy: documentation-standards-audit
----
-
-# 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.
-
-> 📖 **For detailed testing standards and implementation patterns**, see the [Testing Standard](../standards/testing-standard.md) - the authoritative guide for writing world-class tests in pace-core.
-
-## 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 Organisation
-
-```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 = new Date('2024-01-15T10:30:00Z');
-      expect(formatDate(date)).toMatch(/^\d{1,2} [A-Za-z]{3} \d{4}$/); // "15 Jan 2024" format
-    });
-
-    test('handles different input types', () => {
-      const dateString = '2024-01-15T10:30:00Z';
-      const timestamp = new Date(dateString).getTime();
-      
-      expect(formatDate(dateString)).toMatch(/^\d{1,2} [A-Za-z]{3} \d{4}$/);
-      expect(formatDate(timestamp)).toMatch(/^\d{1,2} [A-Za-z]{3} \d{4}$/);
-    });
-  });
-
-  describe('formatTime', () => {
-    test('formats time correctly in 24-hour format', () => {
-      const date = new Date('2024-01-15T14:30:00Z');
-      expect(formatTime(date)).toMatch(/^\d{2}:\d{2}$/); // "14:30" format
-    });
-  });
-
-  describe('formatDateTime', () => {
-    test('formats date and time correctly', () => {
-      const date = new Date('2024-01-15T14:30:00Z');
-      expect(formatDateTime(date)).toMatch(/^\d{1,2} [A-Za-z]{3} \d{4}, \d{2}:\d{2}$/); // "15 Jan 2024, 14:30" format
-    });
-  });
-
-  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
-
-## ⚠️ Edge Cases
-
-### Testing Complex Scenarios
-
-When testing complex scenarios:
-- Test with realistic data volumes
-- Verify edge cases are covered
-- Test with different user roles and permissions
-- Ensure tests handle error conditions
-- Test with concurrent operations
-
-### Flaky Tests
-
-When tests are flaky:
-- Identify root causes of flakiness
-- Use proper wait strategies
-- Avoid timing-dependent tests
-- Mock external dependencies consistently
-- Document known flaky tests
-
-### Test Performance Issues
-
-When tests are slow:
-- Optimize test setup and teardown
-- Use test parallelization where possible
-- Mock expensive operations
-- Profile slow tests
-- Consider test prioritization
-
-For more information about testing your application, see the [Security Guide](./security.md) and [Performance Guide](./performance.md).