create-lego-one 2.0.10 → 2.0.13

package/template/docs/framework/plans/11-testing.md

@@ -0,0 +1,935 @@
+# Testing Implementation Plan
+
+> **For AI Implementing This Plan:** This is document 11 of 13. Complete documents 01-10 first.
+
+**Goal:** Implement comprehensive testing strategy with unit tests (Vitest), component tests (React Testing Library), and E2E tests (Playwright).
+
+**Architecture:** Unit tests for utilities and hooks, component tests for UI components, E2E tests for critical user flows. Tests run in CI/CD pipeline.
+
+**Tech Stack:** Vitest, React Testing Library, Playwright, MSW (for API mocking), TypeScript
+
+---
+
+## Prerequisites
+
+- ✅ Completed all documents 01-10
+- ✅ Application is functional with all features implemented
+
+---
+
+## Task 1: Setup Testing Infrastructure
+
+**Files:**
+- Create: `vitest.workspace.ts`
+- Create: `vitest.config.ts`
+- Modify: `package.json` (root)
+
+### Step 1: Create root testing dependencies
+
+**File:** `package.json` (root)
+
+Add to devDependencies:
+
+```json
+{
+  "devDependencies": {
+    "@playwright/test": "^1.48.0",
+    "@testing-library/jest-dom": "^6.6.2",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@vitejs/plugin-react": "^4.3.2",
+    "@vitest/ui": "^2.1.2",
+    "jsdom": "^25.0.1",
+    "msw": "^2.4.0",
+    "vitest": "^2.1.2",
+    "happy-dom": "^15.7.3"
+  }
+}
+```
+
+Add test scripts:
+
+```json
+{
+  "scripts": {
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:debug": "playwright test --debug"
+  }
+}
+```
+
+### Step 2: Create Vitest workspace config
+
+**File:** `vitest.workspace.ts`
+
+```typescript
+import { defineWorkspace } from 'vitest/config';
+
+export default defineWorkspace([
+  // Host app tests
+  {
+    test: {
+      name: 'host',
+      root: './host',
+      environment: 'jsdom',
+      setupFiles: ['./src/test/setup.ts'],
+      include: ['**/__tests__/**/*.test.{ts,tsx}'],
+      globals: true,
+      coverage: {
+        provider: 'v8',
+        reporter: ['text', 'json', 'html'],
+        exclude: ['node_modules/', 'dist/', '**/*.test.{ts,tsx}'],
+      },
+    },
+  },
+  // Dashboard plugin tests
+  {
+    test: {
+      name: 'plugin-dashboard',
+      root: './packages/plugins/@lego/plugin-dashboard',
+      environment: 'jsdom',
+      setupFiles: ['./src/test/setup.ts'],
+      include: ['**/__tests__/**/*.test.{ts,tsx}'],
+      globals: true,
+    },
+  },
+  // Todo plugin tests
+  {
+    test: {
+      name: 'plugin-todo',
+      root: './packages/plugins/@lego/plugin-todo',
+      environment: 'jsdom',
+      setupFiles: ['./src/test/setup.ts'],
+      include: ['**/__tests__/**/*.test.{ts,tsx}'],
+      globals: true,
+    },
+  },
+]);
+```
+
+### Step 3: Create Vitest config for host
+
+**File:** `host/vitest.config.ts`
+
+```typescript
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+import { resolve } from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./src/test/setup.ts'],
+    include: ['**/__tests__/**/*.test.{ts,tsx}'],
+    alias: {
+      '@': resolve(__dirname, './src'),
+      '@lego/kernel': resolve(__dirname, './src/kernel'),
+    },
+  },
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src'),
+    },
+  },
+});
+```
+
+### Step 4: Create test setup files
+
+**File:** `host/src/test/setup.ts`
+
+```typescript
+import { expect, afterEach, vi } from 'vitest';
+import { cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+// Cleanup after each test
+afterEach(() => {
+  cleanup();
+});
+
+// Mock PocketBase
+vi.mock('pocketbase', () => ({
+  default: vi.fn().mockImplementation(() => ({
+    collection: vi.fn(),
+    authStore: {
+      isValid: false,
+      token: '',
+      model: null,
+      save: vi.fn(),
+      clear: vi.fn(),
+      onChange: vi.fn(),
+    },
+  })),
+}));
+
+// Mock window bridge
+global.__LEGO_KERNEL_STATE__ = {
+  useGlobalKernelState: vi.fn(),
+};
+```
+
+---
+
+## Task 2: Setup Playwright for E2E Tests
+
+**Files:**
+- Create: `playwright.config.ts`
+- Create: `e2e/playwright.config.ts`
+
+### Step 1: Create Playwright config
+
+**File:** `playwright.config.ts`
+
+```typescript
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://localhost:8080',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+    {
+      name: 'Mobile Chrome',
+      use: { ...devices['Pixel 5'] },
+    },
+    {
+      name: 'Mobile Safari',
+      use: { ...devices['iPhone 12'] },
+    },
+  ],
+
+  webServer: {
+    command: 'cd host && pnpm run dev',
+    url: 'http://localhost:8080',
+    reuseExistingServer: !process.env.CI,
+    timeout: 120 * 1000,
+  },
+});
+```
+
+### Step 2: Create E2E test helpers
+
+**File:** `e2e/helpers.ts`
+
+```typescript
+import { Page, expect } from '@playwright/test';
+
+export class DashboardPage {
+  constructor(private page: Page) {}
+
+  async goto() {
+    await this.page.goto('/dashboard');
+  }
+
+  async expectStatsVisible() {
+    await expect(this.page.getByText('Total Users')).toBeVisible();
+    await expect(this.page.getByText('Active Todos')).toBeVisible();
+    await expect(this.page.getByText('Completed Todos')).toBeVisible();
+  }
+}
+
+export class TodoPage {
+  constructor(private page: Page) {}
+
+  async goto() {
+    await this.page.goto('/todos');
+  }
+
+  async createTodo(title: string) {
+    await this.page.getByRole('button', { name: 'New Todo' }).click();
+    await this.page.getByLabel('Title').fill(title);
+    await this.page.getByRole('button', { name: 'Create Todo' }).click();
+  }
+
+  async expectTodoVisible(title: string) {
+    await expect(this.page.getByText(title)).toBeVisible();
+  }
+
+  async toggleTodo(title: string) {
+    const todo = this.page.getByText(title).locator('..').getByRole('button').first();
+    await todo.click();
+  }
+
+  async deleteTodo(title: string) {
+    const todo = this.page.getByText(title).locator('..');
+    await todo.getByRole('button', { name: /delete/i }).click();
+    await this.page.getByRole('button', { name: /confirm/i }).click();
+  }
+}
+
+export class AuthHelper {
+  constructor(private page: Page) {}
+
+  async login(email = 'admin@example.com', password = 'admin123') {
+    await this.page.goto('/login');
+    await this.page.getByLabel('Email').fill(email);
+    await this.page.getByLabel('Password').fill(password);
+    await this.page.getByRole('button', { name: 'Sign In' }).click();
+    await this.page.waitForURL('/dashboard');
+  }
+
+  async logout() {
+    await this.page.getByRole('button').filter({ hasText: /admin/i }).click();
+    await this.page.getByRole('menuitem', { name: /log out/i }).click();
+    await this.page.waitForURL('/login');
+  }
+}
+```
+
+---
+
+## Task 3: Create Unit Tests
+
+**Files:**
+- Create: `host/src/kernel/lib/__tests__/utils.test.ts`
+- Create: `host/src/kernel/shared-state/__tests__/store.test.ts`
+
+### Step 1: Test utility functions
+
+**File:** `host/src/kernel/lib/__tests__/utils.test.ts`
+
+```typescript
+import { describe, it, expect } from 'vitest';
+import { cn, getInitials, formatDate, formatRelativeTime } from '../utils';
+
+describe('cn (classnames utility)', () => {
+  it('should merge classnames correctly', () => {
+    expect(cn('foo', 'bar')).toBe('foo bar');
+  });
+
+  it('should handle conditional classes', () => {
+    expect(cn('foo', false && 'bar', 'baz')).toBe('foo baz');
+  });
+
+  it('should handle tailwind merge conflicts', () => {
+    expect(cn('p-4', 'p-2')).toBe('p-2');
+  });
+});
+
+describe('getInitials', () => {
+  it('should extract initials from name', () => {
+    expect(getInitials('John Doe')).toBe('JD');
+  });
+
+  it('should handle single word names', () => {
+    expect(getInitials('John')).toBe('J');
+  });
+
+  it('should handle multiple words', () => {
+    expect(getInitials('John Middle Doe')).toBe('JM');
+  });
+
+  it('should limit to 2 characters', () => {
+    expect(getInitials('John Middle Last Doe')).toBe('JM');
+  });
+});
+
+describe('formatDate', () => {
+  it('should format date correctly', () => {
+    const date = new Date('2024-01-15');
+    const formatted = formatDate(date);
+    expect(formatted).toMatch(/Jan/);
+    expect(formatted).toMatch(/15/);
+    expect(formatted).toMatch(/2024/);
+  });
+});
+
+describe('formatRelativeTime', () => {
+  it('should return "just now" for very recent times', () => {
+    const now = new Date();
+    expect(formatRelativeTime(now)).toBe('just now');
+  });
+
+  it('should return minutes ago', () => {
+    const twoMinutesAgo = new Date(Date.now() - 2 * 60 * 1000);
+    expect(formatRelativeTime(twoMinutesAgo)).toBe('2m ago');
+  });
+
+  it('should return hours ago', () => {
+    const twoHoursAgo = new Date(Date.now() - 2 * 60 * 60 * 1000);
+    expect(formatRelativeTime(twoHoursAgo)).toBe('2h ago');
+  });
+
+  it('should return days ago', () => {
+    const twoDaysAgo = new Date(Date.now() - 2 * 24 * 60 * 60 * 1000);
+    expect(formatRelativeTime(twoDaysAgo)).toBe('2d ago');
+  });
+});
+```
+
+### Step 2: Test shared state store
+
+**File:** `host/src/kernel/shared-state/__tests__/store.test.ts`
+
+```typescript
+import { describe, it, expect, beforeEach } from 'vitest';
+import { act, renderHook } from '@testing-library/react';
+import { useGlobalKernelState } from '../store';
+
+describe('useGlobalKernelState', () => {
+  beforeEach(() => {
+    // Reset state before each test
+    const { result } = renderHook(() => useGlobalKernelState());
+    act(() => {
+      result.current.clearAuth();
+    });
+  });
+
+  it('should initialize with default state', () => {
+    const { result } = renderHook(() => useGlobalKernelState());
+
+    expect(result.current.user).toBeNull();
+    expect(result.current.isAuthenticated).toBe(false);
+    expect(result.current.theme).toBe('system');
+    expect(result.current.sidebarOpen).toBe(true);
+  });
+
+  it('should set user', () => {
+    const { result } = renderHook(() => useGlobalKernelState());
+
+    act(() => {
+      result.current.setUser({
+        id: '123',
+        email: 'test@example.com',
+        name: 'Test User',
+      });
+    });
+
+    expect(result.current.user).toEqual({
+      id: '123',
+      email: 'test@example.com',
+      name: 'Test User',
+    });
+    expect(result.current.isAuthenticated).toBe(true);
+  });
+
+  it('should toggle sidebar', () => {
+    const { result } = renderHook(() => useGlobalKernelState());
+
+    expect(result.current.sidebarOpen).toBe(true);
+
+    act(() => {
+      result.current.toggleSidebar();
+    });
+
+    expect(result.current.sidebarOpen).toBe(false);
+
+    act(() => {
+      result.current.toggleSidebar();
+    });
+
+    expect(result.current.sidebarOpen).toBe(true);
+  });
+
+  it('should add and remove toasts', () => {
+    const { result } = renderHook(() => useGlobalKernelState());
+
+    act(() => {
+      result.current.addToast({
+        title: 'Test toast',
+        description: 'Test description',
+      });
+    });
+
+    expect(result.current.toasts).toHaveLength(1);
+    expect(result.current.toasts[0].title).toBe('Test toast');
+
+    act(() => {
+      result.current.removeToast(result.current.toasts[0].id);
+    });
+
+    expect(result.current.toasts).toHaveLength(0);
+  });
+});
+```
+
+---
+
+## Task 4: Create Component Tests
+
+**Files:**
+- Create: `host/src/kernel/components/ui/__tests__/button.test.tsx`
+- Create: `host/src/kernel/auth/__tests__/LoginForm.test.tsx`
+
+### Step 1: Test button component
+
+**File:** `host/src/kernel/components/ui/__tests__/button.test.tsx`
+
+```typescript
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Button } from '../button';
+
+describe('Button', () => {
+  it('should render children', () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByRole('button')).toHaveTextContent('Click me');
+  });
+
+  it('should call onClick when clicked', async () => {
+    const handleClick = vi.fn();
+    const user = userEvent.setup();
+
+    render(<Button onClick={handleClick}>Click me</Button>);
+
+    await user.click(screen.getByRole('button'));
+
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('should be disabled when disabled prop is true', async () => {
+    const handleClick = vi.fn();
+    const user = userEvent.setup();
+
+    render(
+      <Button onClick={handleClick} disabled>
+        Click me
+      </Button>
+    );
+
+    await user.click(screen.getByRole('button'));
+
+    expect(handleClick).not.toHaveBeenCalled();
+  });
+
+  it('should apply variant classes', () => {
+    const { rerender } = render(<Button variant="destructive">Delete</Button>);
+    expect(screen.getByRole('button')).toHaveClass('bg-destructive');
+
+    rerender(<Button variant="outline">Cancel</Button>);
+    expect(screen.getByRole('button')).toHaveClass('border');
+  });
+});
+```
+
+### Step 2: Test login form component
+
+**File:** `host/src/kernel/auth/__tests__/LoginForm.test.tsx`
+
+```typescript
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { LoginForm } from '../components/LoginForm';
+
+// Mock useAuth hook
+vi.mock('../hooks', () => ({
+  useAuth: () => ({
+    login: mockLogin,
+    isLoading: false,
+    error: null,
+  }),
+}));
+
+const mockLogin = vi.fn();
+
+// Mock navigate
+vi.mock('@modern-js/runtime/router', () => ({
+  useNavigate: () => mockNavigate,
+}));
+
+const mockNavigate = vi.fn();
+
+describe('LoginForm', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should render form fields', () => {
+    render(<LoginForm />);
+
+    expect(screen.getByLabelText('Email')).toBeInTheDocument();
+    expect(screen.getByLabelText('Password')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /sign in/i })).toBeInTheDocument();
+  });
+
+  it('should show 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);
+
+    expect(await screen.findByText('Invalid email address')).toBeInTheDocument();
+    expect(screen.getByText(/password must be at least/i)).toBeInTheDocument();
+  });
+
+  it('should call login with form data', async () => {
+    const user = userEvent.setup();
+    render(<LoginForm />);
+
+    await user.type(screen.getByLabelText('Email'), 'admin@example.com');
+    await user.type(screen.getByLabelText('Password'), 'admin123');
+    await user.click(screen.getByRole('button', { name: /sign in/i }));
+
+    await waitFor(() => {
+      expect(mockLogin).toHaveBeenCalledWith({
+        email: 'admin@example.com',
+        password: 'admin123',
+      });
+    });
+  });
+
+  it('should navigate to dashboard on successful login', async () => {
+    const user = userEvent.setup();
+    mockLogin.mockResolvedValueOnce({});
+
+    render(<LoginForm />);
+
+    await user.type(screen.getByLabelText('Email'), 'admin@example.com');
+    await user.type(screen.getByLabelText('Password'), 'admin123');
+    await user.click(screen.getByRole('button', { name: /sign in/i }));
+
+    await waitFor(() => {
+      expect(mockNavigate).toHaveBeenCalledWith('/dashboard');
+    });
+  });
+});
+```
+
+---
+
+## Task 5: Create E2E Tests
+
+**Files:**
+- Create: `e2e/auth.spec.ts`
+- Create: `e2e/dashboard.spec.ts`
+- Create: `e2e/todo.spec.ts`
+
+### Step 1: Test authentication flow
+
+**File:** `e2e/auth.spec.ts`
+
+```typescript
+import { test, expect } from '@playwright/test';
+import { AuthHelper } from './helpers';
+
+test.describe('Authentication', () => {
+  let auth: AuthHelper;
+
+  test.beforeEach(async ({ page }) => {
+    auth = new AuthHelper(page);
+  });
+
+  test('should login with valid credentials', async ({ page }) => {
+    await auth.login();
+
+    await expect(page).toHaveURL('/dashboard');
+    await expect(page.getByText('Welcome to your organization dashboard')).toBeVisible();
+  });
+
+  test('should show error with invalid credentials', async ({ page }) => {
+    await page.goto('/login');
+    await page.getByLabel('Email').fill('invalid@example.com');
+    await page.getByLabel('Password').fill('wrongpassword');
+    await page.getByRole('button', { name: 'Sign In' }).click();
+
+    await expect(page.getByText(/login failed/i)).toBeVisible();
+  });
+
+  test('should logout and redirect to login', async ({ page }) => {
+    await auth.login();
+    await auth.logout();
+
+    await expect(page).toHaveURL('/login');
+    await expect(page.getByText('Sign In')).toBeVisible();
+  });
+
+  test('should protect authenticated routes', async ({ page }) => {
+    await page.goto('/dashboard');
+
+    await expect(page).toHaveURL('/login');
+  });
+});
+```
+
+### Step 2: Test dashboard functionality
+
+**File:** `e2e/dashboard.spec.ts`
+
+```typescript
+import { test, expect } from '@playwright/test';
+import { AuthHelper } from './helpers';
+
+test.describe('Dashboard', () => {
+  test.beforeEach(async ({ page }) => {
+    const auth = new AuthHelper(page);
+    await auth.login();
+  });
+
+  test('should display dashboard stats', async ({ page }) => {
+    await page.goto('/dashboard');
+
+    await expect(page.getByText('Total Users')).toBeVisible();
+    await expect(page.getByText('Active Todos')).toBeVisible();
+    await expect(page.getByText('Completed Todos')).toBeVisible();
+  });
+
+  test('should display recent activity', async ({ page }) => {
+    await page.goto('/dashboard');
+
+    await expect(page.getByText('Recent Activity')).toBeVisible();
+  });
+
+  test('should display quick actions', async ({ page }) => {
+    await page.goto('/dashboard');
+
+    await expect(page.getByText('Quick Actions')).toBeVisible();
+    await expect(page.getByText('New Todo')).toBeVisible();
+    await expect(page.getByText('Invite User')).toBeVisible();
+  });
+});
+```
+
+### Step 3: Test todo CRUD functionality
+
+**File:** `e2e/todo.spec.ts`
+
+```typescript
+import { test, expect } from '@playwright/test';
+import { AuthHelper, TodoPage } from './helpers';
+
+test.describe('Todos', () => {
+  let auth: AuthHelper;
+  let todoPage: TodoPage;
+
+  test.beforeEach(async ({ page }) => {
+    auth = new AuthHelper(page);
+    todoPage = new TodoPage(page);
+    await auth.login();
+  });
+
+  test('should display todos page', async ({ page }) => {
+    await todoPage.goto();
+
+    await expect(page.getByText('Manage your tasks and stay organized')).toBeVisible();
+    await expect(page.getByRole('button', { name: 'New Todo' })).toBeVisible();
+  });
+
+  test('should create a new todo', async ({ page }) => {
+    await todoPage.goto();
+    await todoPage.createTodo('Test E2E Todo');
+
+    await todoPage.expectTodoVisible('Test E2E Todo');
+  });
+
+  test('should toggle todo completion', async ({ page }) => {
+    await todoPage.goto();
+    await todoPage.createTodo('Toggle Test');
+
+    const todoItem = page.getByText('Toggle Test').locator('..');
+
+    // Get initial state
+    const checkbox = todoItem.getByRole('button').first();
+    await expect(checkbox).toHaveAttribute('aria-checked', 'false');
+
+    // Toggle to complete
+    await todoPage.toggleTodo('Toggle Test');
+    await expect(todoItem).toHaveClass(/opacity-60/);
+
+    // Toggle back
+    await todoPage.toggleTodo('Toggle Test');
+    await expect(todoItem).not.toHaveClass(/opacity-60/);
+  });
+
+  test('should delete a todo', async ({ page }) => {
+    await todoPage.goto();
+    await todoPage.createTodo('Delete Test');
+
+    await todoPage.expectTodoVisible('Delete Test');
+
+    await todoPage.deleteTodo('Delete Test');
+
+    await expect(page.getByText('Delete Test')).not.toBeVisible();
+  });
+
+  test('should filter todos by status', async ({ page }) => {
+    await todoPage.goto();
+    await todoPage.createTodo('Active Todo');
+    await todoPage.createTodo('Completed Todo');
+
+    // Mark one as completed
+    await todoPage.toggleTodo('Completed Todo');
+
+    // Filter to active only
+    await page.getByRole('combobox', { name: 'Status' }).click();
+    await page.getByRole('option', { name: 'Active' }).click();
+
+    await expect(page.getByText('Active Todo')).toBeVisible();
+    await expect(page.getByText('Completed Todo')).not.toBeVisible();
+  });
+});
+```
+
+---
+
+## Task 6: Create Test Scripts
+
+**Files:**
+- Modify: `package.json` (root)
+
+### Step 1: Add test scripts to root package.json
+
+**File:** `package.json`
+
+```json
+{
+  "scripts": {
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:watch": "vitest watch",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:debug": "playwright test --debug",
+    "test:all": "pnpm run test:run && pnpm run test:e2e"
+  }
+}
+```
+
+### Step 2: Update host package.json
+
+**File:** `host/package.json`
+
+```json
+{
+  "scripts": {
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest run --coverage"
+  }
+}
+```
+
+---
+
+## Verification
+
+### Step 1: Install test dependencies
+
+**Run:**
+
+```bash
+pnpm install
+```
+
+Expected: All test dependencies installed.
+
+### Step 2: Run unit tests
+
+**Run:**
+
+```bash
+pnpm test:run
+```
+
+Expected: Unit tests pass.
+
+### Step 3: Run component tests with UI
+
+**Run:**
+
+```bash
+pnpm test:ui
+```
+
+Expected: Vitest UI opens in browser.
+
+### Step 4: Install Playwright browsers
+
+**Run:**
+
+```bash
+npx playwright install
+```
+
+Expected: Playwright browsers downloaded.
+
+### Step 5: Run E2E tests
+
+**Run:**
+
+```bash
+pnpm test:e2e
+```
+
+Expected: E2E tests run and pass (requires dev server running).
+
+---
+
+## Summary
+
+After completing this document, you will have:
+
+1. ✅ Vitest configured for unit and component tests
+2. ✅ Playwright configured for E2E tests
+3. ✅ Unit tests for utilities and hooks
+4. ✅ Component tests for UI components
+5. ✅ E2E tests for critical user flows (auth, dashboard, todos)
+6. ✅ Test helpers and fixtures
+7. ✅ Coverage reporting configured
+8. ✅ Test scripts in package.json
+
+**Next:** `12-deployment.md` - Implement build configuration, deployment scripts, and CI/CD pipeline.
+
+---
+
+## Files Created
+
+```
+root/
+├── vitest.workspace.ts
+├── vitest.config.ts
+├── playwright.config.ts
+└── e2e/
+    ├── auth.spec.ts
+    ├── dashboard.spec.ts
+    ├── todo.spec.ts
+    └── helpers.ts
+
+host/
+├── vitest.config.ts
+└── src/
+    ├── test/
+    │   └── setup.ts
+    └── kernel/
+        ├── lib/__tests__/
+        │   └── utils.test.ts
+        ├── shared-state/__tests__/
+        │   └── store.test.ts
+        ├── components/ui/__tests__/
+        │   └── button.test.tsx
+        └── auth/__tests__/
+            └── LoginForm.test.tsx
+```