monaco-e2e-testing

Monaco Editor E2E Testing

Use this guide when writing Playwright E2E tests for Monaco editor integration in React applications.

---

Critical Constraint: Monaco Event System

Monaco's setValue() does NOT trigger onChange events.

This means:

• Programmatically setting editor content will NOT fire validation handlers
• Debounced validation that depends on onChange will NOT run
• E2E tests CANNOT reliably test validation logic

Rule: E2E tests for Monaco should focus on workflow and integration, not validation.

---

What to Test Where

✅ E2E Tests (Playwright E2E)

Test user workflows and integration:

• Opening/closing the editor
• Navigation between editor and other UI
• Initial content display (generated from form data)
• Editor initialization (Monaco loaded, visible, interactive)
• UI controls (buttons, panels, toggles)
• Modal confirmations (discard changes, etc.)

✅ Component Tests (Playwright CT)

Test validation and editor behavior:

• Validation error display
• Schema violations
• Format errors (YAML syntax, CIDR validation, etc.)
• Error markers in Monaco
• Error banner updates
• Mock Monaco events directly to trigger validation

✅ Unit Tests (Jest)

Test validation logic in isolation:

• Schema validation functions
• Custom format validators
• Error message formatting
• YAML parsing

---

Exposing Monaco for E2E Testing

Add a global window reference when the editor mounts (development/test mode only):

const handleEditorDidMount: EditorDidMount = useCallback(
  (editor, monaco) => {
    editorRef.current = editor;
    
    // Expose editor for E2E testing
    if (import.meta.env.DEV) {
      (window as typeof window & { monacoEditor?: typeof editor }).monacoEditor = editor;
    }
    
    // ... rest of editor setup
  },
  []
);

Why import.meta.env.DEV?

• Only exposes in development/test builds
• Not included in production bundle
• Works with Vite dev server for E2E tests

---

Accessing Monaco Content