Modular Universe Builder - Testing Guide

🎯 Quick Test Checklist

Use this guide to verify all features are working correctly after the session 11.25.1.2 updates.

🧪 Test Scenarios

Test 1: Module Creation

Goal: Verify that modules can be created and immediately appear in the palette.

Steps:

1. Navigate to Modular Universe Builder
2. Click "Create Module" button in the Structure tab
3. Complete the wizard:
   • Step 1: Select module type (e.g., "Feature Module")
   • Step 2: Enter name (e.g., "My Test Module"), description, icon
   • Step 3: Select pages/widgets/flows (optional for this test)
   • Step 4: Configure settings (use defaults)
   • Step 5: Click "Generate Module"
4. Wait for success message

Expected Results:

• ✅ Module creation completes without errors
• ✅ Success message appears
• ✅ New module appears in Module Palette > Modules tab
• ✅ No page refresh required

Troubleshooting:

• If module doesn't appear: Check browser console for errors
• If wizard fails: Verify backend API is running (port 3000)

Test 2: Drag Module into Empty Section

Goal: Verify modules can be dragged from palette into empty canvas sections.

Steps:

1. Open Module Palette (left sidebar > "Add" tab)
2. Switch to "Modules" tab if not already there
3. Find any module (e.g., "Top Navigation", "Singularity Core", or your test module)
4. Drag the module card
5. Drop it into an empty section on the canvas

Expected Results:

• ✅ Visual feedback during drag (cursor changes, preview follows mouse)
• ✅ Drop zones highlight on hover (light purple background, dashed border)
• ✅ On drop: Section updates to show "Module: {moduleId}"
• ✅ Section header shows module name
• ✅ Section type badge changes from "EMPTY" to "MODULE"

Visual Indicators:

Before Drop:
┌─────────────────────────┐
│ Section 1    [EMPTY]    │
├─────────────────────────┤
│   🧱 Empty Section      │
│   Drag a module here    │
└─────────────────────────┘

During Hover:
┌═════════════════════════┐  ← Purple dashed border
║ Section 1    [EMPTY]    ║
╠═════════════════════════╣
║   🧱 Empty Section      ║  ← Light purple background
║   Drag a module here    ║
╚═════════════════════════╝

After Drop:
┌─────────────────────────┐
│ Top Navigation [MODULE] │
├─────────────────────────┤
│   🧱 Module: top-nav    │
└─────────────────────────┘

Test 3: Drag Module into Filled Section (Nesting)

Goal: Verify nested module support - dropping a module into a section that already has content.

Steps:

1. Find a section that already has a module assigned (from Test 2)
2. Drag a DIFFERENT module from the palette
3. Drop it into the filled section's content area

Expected Results:

• ✅ Drop zone still activates (purple highlight)
• ✅ On drop: A nested child section is created
• ✅ Original module remains in parent section
• ✅ New module appears as a child with:
  • Left border indicator (blue/purple)
  • Depth badge ("Level 1")
  • Slight indentation
  • Light background tint

Visual Indicators:

After First Drop:
┌─────────────────────────┐
│ Section 1    [MODULE]   │
├─────────────────────────┤
│   🧱 Module: top-nav    │
└─────────────────────────┘

After Second Drop (Nested):
┌─────────────────────────┐
│ Section 1    [MODULE]   │
├─────────────────────────┤
│   🧱 Module: top-nav    │
│   1 nested item(s)      │
│ ┌─────────────────────┐ │
│ │ Product Card │Lv 1│ │ │ ← Nested child
│ ├─────────────────────┤ │
│ │ 🧩 Module: product  │ │
│ └─────────────────────┘ │
└─────────────────────────┘

Test 4: Multiple Levels of Nesting

Goal: Verify infinite nesting depth support.

Steps:

1. Create a section with a module (Level 0)
2. Drop another module into it (Level 1)
3. Drop a third module into the Level 1 section
4. Continue nesting as desired

Expected Results:

• ✅ Each level shows increasing depth badges ("Level 1", "Level 2", "Level 3", etc.)
• ✅ Indentation increases with depth
• ✅ Left border indicators stack
• ✅ All levels remain draggable and configurable

Visual Indicators:

Multi-Level Nesting:
┌─────────────────────────────┐
│ Container [MODULE]          │
├─────────────────────────────┤
│ 🧱 Module: container        │
│ 2 nested items              │
│ ┌─────────────────────────┐ │
│ │ Header │Lv 1│           │ │ ← Level 1
│ ├─────────────────────────┤ │
│ │ 🧱 Module: header       │ │
│ │ ┌─────────────────────┐ │ │
│ │ │ Logo │Lv 2│         │ │ │ ← Level 2
│ │ ├─────────────────────┤ │ │
│ │ │ 🖼️ Module: logo      │ │ │
│ │ └─────────────────────┘ │ │
│ └─────────────────────────┘ │
│ ┌─────────────────────────┐ │
│ │ Navigation │Lv 1│       │ │ ← Level 1
│ ├─────────────────────────┤ │
│ │ 🧱 Module: nav-menu     │ │
│ └─────────────────────────┘ │
└─────────────────────────────┘

Test 5: Widget Drag-and-Drop

Goal: Verify widgets can also be dragged and dropped.

Steps:

1. Open Module Palette
2. Switch to "Widgets" tab
3. Drag a widget (if any are available)
4. Drop into a section

Expected Results:

• ✅ Widget drop works same as module drop
• ✅ Section type badge shows "WIDGET"
• ✅ Icon changes to puzzle piece (🧩)
• ✅ Content shows "Widget: {widgetId}"

Note: If no widgets appear, they need to be created first in the Widget Builder.

Test 6: Section Configuration

Goal: Verify section config panel updates correctly.

Steps:

1. Click on any section
2. Observe the Section Config Panel (right sidebar)
3. Change contentType dropdown
4. Change moduleId field
5. Adjust styling (padding, margin, etc.)

Expected Results:

• ✅ Panel shows current section properties
• ✅ Changes save automatically (flash persistence)
• ✅ Canvas updates in real-time
• ✅ Changes persist after page refresh

Test 7: Module Palette Filtering

Goal: Verify system modules are hidden and user modules appear.

Steps:

1. Open Module Palette > Modules tab
2. Check visible modules

Expected Results:

• ✅ User-facing modules visible:
  • Top Navigation
  • Hero Section
  • Product Card
  • Contact Form
  • Any user-created modules
• ✅ System modules NOT visible:
  • Singularity (might show if not tagged as system)
  • Space Map (might show if not tagged as system)
  • Editor
  • Modularity
  • Widgets Manager
  • Launch Station

Note: Some structural modules may appear if they're not tagged as "system" modules. This is expected behavior - they're available for use.

Test 8: Persistence and Sync

Goal: Verify data persists and syncs correctly.

Steps:

1. Create a layout with modules
2. Open browser DevTools > Application > IndexedDB
3. Find gg-storage database
4. Verify entries for:
   • modularity/generated-modules/... (user modules)
   • Layout configuration
5. Refresh the page
6. Verify layout is preserved

Expected Results:

• ✅ All changes appear in IndexedDB immediately
• ✅ Layout persists after refresh
• ✅ Module assignments remain intact
• ✅ Nested structures preserve depth

Advanced:

• Open the same universe in a different tab
• Changes should sync across tabs (if real-time sync is enabled)

Test 9: Undo/Redo (If Implemented)

Goal: Verify canvas history management.

Steps:

1. Make several changes (add sections, assign modules)
2. Press Ctrl+Z (or Cmd+Z on Mac) to undo
3. Press Ctrl+Shift+Z to redo

Expected Results:

• If implemented: Changes undo/redo correctly
• If not implemented: Keyboard shortcuts have no effect (this is OK for now)

🐛 Known Limitations (Out of Scope)

These are expected behaviors and not bugs:

1. Placeholder Rendering

   • Modules show as "Module: {moduleId}" placeholders
   • Not rendering actual module content yet
   • This is intentional - dynamic rendering is a future enhancement

2. Widget Availability

   • Widget tab may be empty if no widgets created
   • This is expected - widgets must be created in Widget Builder first

3. Module Preview

   • No live preview of module content in builder
   • Future enhancement: render actual components

4. Drag-and-Drop Edge Cases

   • Dropping a section into itself → should be prevented (might not be)
   • Circular nesting → not yet validated

✅ Success Criteria

Your testing is successful if:

• ✅ All Test 1-8 scenarios work as described
• ✅ No console errors during normal operation
• ✅ Data persists after page refresh
• ✅ UI remains responsive during drag-and-drop
• ✅ Visual feedback is clear and helpful

🚨 Reporting Issues

If you encounter issues:

1. Check the console (F12 > Console tab)
2. Note the steps that led to the issue
3. Capture screenshots if visual bugs occur
4. Report the error message from console
5. Mention which test scenario failed

🎉 Happy Testing!

The Modular Universe Builder is now at Ferrari level. Enjoy building the most powerful platforms in the universe! 🚀