🧪 DRAG & DROP TESTING CHECKLIST

Date: November 10, 2025
Feature: Module Drag & Drop from Library to Canvas

✅ Code Verification - COMPLETE

Module Library Browser ✅

• ✅ draggable="true" on module type cards
• ✅ onModuleTypeDragStart() sets drag data
• ✅ JSON data includes { type: 'module-type', moduleType: string }
• ✅ Both application/json and text/plain data set
• ✅ Console logging for debugging

Universal Canvas ✅

• ✅ onCanvasDragOver() prevents default & sets dropEffect
• ✅ onCanvasDrop() reads JSON data and calls createModuleAtPosition()
• ✅ createModuleAtPosition() uses moduleService.install()
• ✅ Module position saved to storage
• ✅ Drag handlers on both container and canvas-content

Template Bindings ✅

• ✅ (dragover)="onCanvasDragOver($event)" on container
• ✅ (drop)="onCanvasDrop($event)" on container
• ✅ (dragleave)="onCanvasDragLeave($event)" on container
• ✅ Same handlers duplicated on .canvas-content

🧪 Manual Testing Steps

Test 1: Basic Drag & Drop

1. ✅ Open universe: http://localhost:4200/space/{space-slug}/universe-map
2. ⏳ Verify module library sidebar is visible on the left
3. ⏳ Drag a "Galaxy" module type card
4. ⏳ Drop it onto the canvas
5. ⏳ Expected: New galaxy module appears at drop position
6. ⏳ Check console for logs: 📦 Setting drag data, 🎯 Canvas Drop Event, ✅ Module created

Test 2: Multiple Module Types

1. ⏳ Drag "World" module → drop on canvas
2. ⏳ Drag "Widget" module → drop on canvas
3. ⏳ Drag "Navigation" module → drop on canvas
4. ⏳ Expected: All modules created and visible

Test 3: Module Positioning

1. ⏳ Drop module at different canvas positions
2. ⏳ Expected: Module appears where dropped (accounting for card centering)
3. ⏳ Refresh page
4. ⏳ Expected: Module positions persist (flash storage)

Test 4: Visual Feedback

1. ⏳ Drag module over canvas
2. ⏳ Expected: Canvas highlights (.drag-over class adds purple border)
3. ⏳ Drop module
4. ⏳ Expected: Highlight disappears, module appears

Test 5: Move Mode

1. ⏳ Toggle "Move Mode" OFF (default)
2. ⏳ Try to drag existing module card
3. ⏳ Expected: Module doesn't move (move mode disabled)
4. ⏳ Toggle "Move Mode" ON
5. ⏳ Drag existing module card
6. ⏳ Expected: Module moves smoothly

Test 6: Layout Zones (if layout module exists)

1. ⏳ Create a "Layout" module first
2. ⏳ Expected: Canvas switches to zone mode (zones visible)
3. ⏳ Drag module over a zone
4. ⏳ Expected: Zone highlights purple
5. ⏳ Drop module in zone
6. ⏳ Expected: Module created with config.layoutZone set

🐛 Known Issues to Check

Issue 1: No Universe Context

• Symptom: Console shows "Cannot create module: no universe ID"
• Fix: Ensure you're in a valid universe route
• URL Format: /space/{space-slug}/universe-map

Issue 2: CORS / Backend Connection

• Symptom: Module creation fails with network error
• Fix: Verify backend is running on correct port
• Check: Backend API should be accessible at configured URL

Issue 3: Module Service Not Found

• Symptom: TypeScript error or null reference
• Fix: Verify UniversalModuleService is properly injected
• Check: Service should be provided in root or component

Issue 4: Drag Data Not Set

• Symptom: Drop event has no data
• Fix: Check browser console for "Setting drag data" log
• Check: Ensure dataTransfer object exists

Issue 5: Canvas Not Receiving Drops

• Symptom: Drop event never fires
• Fix: Ensure dragover prevents default
• Check: event.preventDefault() in onCanvasDragOver()

📊 Console Log Markers

Look for these console logs during testing:

Drag Start (Module Library):

📦 Setting drag data: { type: 'module-type', moduleType: 'galaxy' }
📄 JSON string: {"type":"module-type","moduleType":"galaxy"}
✅ Drag data set successfully!

Drag Over (Canvas):

📦 Drag over canvas: { types: [...], clientX: X, clientY: Y }

Drop (Canvas):

🎯 Canvas Drop Event: DragEvent { ... }
📦 DataTransfer types: ['application/json', 'text/plain']
📄 JSON Data: {"type":"module-type","moduleType":"galaxy"}
📍 Creating module at position: { x: 123, y: 456 }

Module Creation:

✅ Module created: { id: 'mod_...', name: 'galaxy-1234567890', type: 'galaxy' }
📍 Module positioned at: { x: 123, y: 456, isManuallyPositioned: true }

🚨 If Drag & Drop Still Not Working

Debugging Steps:

1. Open Browser DevTools (F12)

2. Go to Console tab

3. Try dragging a module

4. Check for:

   • ✅ "Setting drag data" log (library component)
   • ✅ "Drag over canvas" log (canvas component)
   • ✅ "Canvas Drop Event" log (drop handler)
   • ❌ Any error messages

5. If no logs appear:

   • Check if module library is rendering
   • Check if canvas is rendering
   • Inspect DOM to verify event handlers are bound

6. If logs appear but module doesn't create:

   • Check "Cannot create module" warnings
   • Verify universeId is set
   • Check backend API response
   • Verify module service is working

🎯 Success Criteria

✅ Drag & drop is working when:

1. Module card follows cursor during drag
2. Canvas highlights when dragging over it
3. Module appears on canvas at drop position
4. Console shows all expected logs
5. New module visible in DOM
6. Page refresh preserves module position

🔧 Quick Fixes

If nothing works:

# Clear browser cache (Hard Refresh)
Ctrl + Shift + R (or Cmd + Shift + R on Mac)

# Clear NX cache
nx reset

# Restart dev server
# Kill process (Ctrl+C) then:
nx serve gograb-space

If module library not visible:

• Check universe-management.component.html
• Verify lib-module-library-browser is in template
• Check CSS for display: none or visibility: hidden

If canvas not accepting drops:

• Verify .universal-canvas-container has drag handlers
• Check if parent element is blocking events
• Ensure z-index is correct

📝 Test Results (Fill in during testing)

Ready to test! Open the app and start dragging modules! 🚀