Skip to content

FEATURE_TESTING_GUIDE.md

Latest commit

 

History

History
274 lines (226 loc) · 7.83 KB

FEATURE_TESTING_GUIDE.md

File metadata and controls

274 lines (226 loc) · 7.83 KB
Raw

Editor Feature Testing Guide

🎯 Complete Feature Coverage

This enhanced test app now covers ALL editor features with interactive UI controls.

✨ New Features Added

1. Line Height Control ⭐ NEW

  • Location: Controls Panel → Line Height section
  • Range: 1.0 to 3.0 (step 0.1)
  • Test: Adjust the slider to see line spacing change in real-time
  • Props tested: lineHeight

2. Editor Height Control ⭐ NEW

  • Location: Controls Panel → Editor Height section
  • Range: 200px to 800px (step 50px)
  • Test: Adjust to make the editor taller or shorter
  • Props tested: height (dynamic)

3. Paste Event Detection ⭐ NEW

  • Location: Paste Events panel (appears when you paste)
  • Test: Copy text and paste it into the editor
  • Shows: Line number where content was pasted
  • Props tested: onDidPaste
  • Clear button: Remove paste event history

4. Schema Document Support ⭐ NEW

  • Location: Controls Panel → Options → Enable Schema Doc checkbox
  • Works with: N1QL and SQL++ languages only
  • Test:
    1. Select N1QL or SqlPlusPlus language
    2. Enable "Enable Schema Doc" checkbox
    3. Start typing to see autocomplete suggestions for tables/fields
  • Props tested: schemaDoc
  • Sample data: travel-sample database schema with airlines, hotels, routes

5. Change Counter ⭐ NEW

  • Location: Editor Preview header (top right)
  • Shows: Number of times content has changed
  • Test: Type in the editor and watch the counter increment
  • Resets: When you change language
  • Props tested: onChange (enhanced tracking)

6. Editor Statistics ⭐ NEW

  • Location: Editor Preview header (top right)
  • Shows:
    • Changes: Total edits made
    • Lines: Current line count
    • Chars: Total character count
  • Updates: Real-time as you type

7. Activity Log ⭐ NEW

  • Location: Activity Log panel (below editor)
  • Tracks:
    • Language changes
    • Code executions
    • Paste events
    • Output clearing
  • Features:
    • Timestamp for each action
    • Last 10 actions shown
    • Clear button to reset log

8. Clear Buttons ⭐ NEW

  • Output section: Clear execution results
  • Paste Events: Clear paste history
  • Activity Log: Clear action history

📋 Complete Feature List

Previously Implemented Features ✅

  1. Language Switching

    • 9 languages supported
    • Sample code for each
    • Props: language

  2. Theme Switching

    • Dark theme (vs-dark)
    • Light theme (vs-light)
    • Props: theme

  3. Font Size Control

    • Range: 10px to 30px
    • Props: fontSize

  4. Word Wrap Toggle

    • On/Off switch
    • Props: wordWrap

  5. Read-Only Mode

    • Checkbox to enable/disable editing
    • Props: readOnly

  6. Run Button

    • Toggle visibility
    • Execute code action
    • Props: onRun

  7. Content Changes

    • Real-time updates
    • Props: onChange

  8. Editor ID

    • Unique identifier
    • Props: editorId (set to "demo-editor")

  9. Initial Value

    • Sample code loading
    • Props: value

🧪 Testing Checklist

Use this checklist to test all features:

Basic Features

  • Switch between all 9 languages
  • Toggle between dark and light themes
  • Adjust font size from 10px to 30px
  • Change line height from 1.0 to 3.0
  • Adjust editor height from 200px to 800px
  • Enable/disable read-only mode
  • Toggle word wrap on and off
  • Show/hide run button

Interactive Features

  • Type in the editor and watch change counter
  • Copy and paste text to trigger paste event
  • Check editor statistics (lines, chars)
  • View activity log for all actions
  • Click run button to execute code
  • Clear output after execution
  • Clear paste events
  • Clear activity log

Advanced Features

  • Enable schema doc for N1QL
  • Enable schema doc for SQL++
  • Type to see autocomplete suggestions
  • Test schema-aware code completion
  • Verify schema doc doesn't affect other languages

Edge Cases

  • Very small font size (10px)
  • Very large font size (30px)
  • Minimal line height (1.0)
  • Maximum line height (3.0)
  • Small editor height (200px)
  • Large editor height (800px)
  • Read-only mode prevents editing
  • Word wrap with long lines

🎮 How to Test Each Feature

1. Line Height

1. Set font size to 16px
2. Move line height slider from 1.0 to 3.0
3. Observe line spacing increases
4. Try 1.0 (compact) vs 3.0 (spacious)

2. Editor Height

1. Move height slider to 200px (minimum)
2. Notice editor becomes compact
3. Move to 800px (maximum)
4. Observe editor takes more screen space

3. Paste Detection

1. Copy any text (Ctrl/Cmd + C)
2. Paste into editor (Ctrl/Cmd + V)
3. Check "Paste Events" panel appears
4. Shows line number where pasted
5. Click Clear to remove events

4. Schema Doc

1. Select "N1QL" language
2. Enable "Enable Schema Doc" checkbox
3. Clear editor and start typing: "SELECT * FROM "
4. Should see autocomplete for: travel-sample tables
5. Try typing field names like "name", "city"
6. Switch to JavaScript - schema doc disabled

5. Change Counter

1. Note current change count (0)
2. Type a character
3. Count increases to 1
4. Delete character
5. Count increases to 2
6. Change language - resets to 0

6. Activity Log

1. Change language - see log entry
2. Click run button - see execution log
3. Paste text - see paste log
4. Each entry has timestamp
5. Shows last 10 actions
6. Click Clear to reset

📊 Props Coverage

Prop Tested Control Location Status
editorId ✅ Hard-coded Fixed value
language ✅ Language Selection 9 languages
value ✅ Sample code + editing Dynamic
theme ✅ Theme section 2 themes
onRun ✅ Show Run Button Optional
readOnly ✅ Options checkbox Toggle
schemaDoc ✅ Options checkbox N1QL/SQL++
fontSize ✅ Font Size slider 10-30px
lineHeight ✅ Line Height slider 1.0-3.0
wordWrap ✅ Options checkbox on/off
onChange ✅ Change counter Real-time
onDidPaste ✅ Paste Events panel Tracked
height ✅ Editor Height slider 200-800px

🎯 Coverage: 13/13 Props = 100% ✅

💡 Tips for Testing

  1. Start Simple: Test basic features first (language, theme, font)
  2. Go Advanced: Then try line height, height, paste events
  3. Test Schema: Enable schema doc for N1QL/SQL++ to see autocomplete
  4. Watch Logs: Keep an eye on activity log to track all actions
  5. Clear Often: Use clear buttons to reset and retest
  6. Try Edge Cases: Test extreme values (min/max font, height, line height)
  7. Mobile Test: Resize browser to test responsive design

🚀 Quick Test Sequence

5-Minute Full Test:

1. Switch language: JavaScript → Python → N1QL
2. Change theme: Dark → Light → Dark
3. Adjust font: 10px → 20px → 30px
4. Adjust line height: 1.0 → 2.0 → 3.0
5. Adjust height: 300px → 600px
6. Enable read-only → Try to type → Disable
7. Paste some text → Check paste event
8. Toggle word wrap
9. Enable schema doc for N1QL → Type "SELECT "
10. Click run button → Check output
11. Review activity log
12. Clear all panels

📸 What You Should See

  • Controls Panel: All sliders and checkboxes working
  • Editor: Responding to all changes in real-time
  • Statistics: Live updates as you type
  • Paste Events: Appearing when you paste
  • Activity Log: Recording all actions with timestamps
  • Output: Showing execution results
  • Schema Doc: Autocomplete for N1QL/SQL++ when enabled

🎉 Result

ALL editor features are now fully testable from the UI!

No need to modify code - everything is controllable through the interface.