🧪 Canvas Template Integration - Test Plan

📋 Overview

This document outlines the step-by-step testing plan to verify that our template module system works end-to-end in the Modular Universe Builder.

✅ Phase 1: Build & Registration (READY TO TEST)

Step 1: Build All Template Modules

# Build all 6 template modules
nx build @canvas-templates/split-sidebar
nx build @canvas-templates/two-column-equal
nx build @canvas-templates/three-column-equal
nx build @canvas-templates/header-content-footer
nx build @canvas-templates/dashboard
nx build @canvas-templates/custom

Expected Output:

• ✅ All 6 builds succeed without errors
• ✅ Each module outputs to dist/modules/canvas-templates/{template-name}/
• ✅ Each has index.d.ts at root level (not nested under /src/)

Step 2: Verify Module Registration

# Start the dev server
nx serve gograb-space

Expected Console Output:

🔍 [MAIN] Module bootstrap starting...
  🧩 Registering platform modules...
  🎨 Registering canvas template modules...
  ✅ Registered 15 modules (including 6 canvas templates)

Browser Console Check:

// Open DevTools Console and run:
const registry = window['__moduleRegistry__'] || 
  (await import('@libs-core/module-base')).inject(ModuleRegistryService);

// Get template modules
const templates = registry.getAllModules().filter(m => m.category === 'layout-template');
console.log('Template Modules:', templates.map(t => ({ id: t.id, name: t.name })));

// Expected Output:
// [
//   { id: 'template-split-sidebar', name: 'Split Sidebar Template' },
//   { id: 'template-two-column-equal', name: 'Two Column Equal Template' },
//   { id: 'template-three-column-equal', name: 'Three Column Equal Template' },
//   { id: 'template-header-content-footer', name: 'Header Content Footer Template' },
//   { id: 'template-dashboard', name: 'Dashboard Template' },
//   { id: 'template-custom', name: 'Custom Template' }
// ]

✅ Phase 2: UI Integration Test

Step 3: Navigate to Modular Universe Builder

1. Login/Create Guest User (if not already authenticated)
2. Navigate to:

   http://localhost:5200/space/demo-space/modular-universe
   

Expected UI:

• ✅ Canvas builder loads
• ✅ Toolbar visible at top
• ✅ Left sidebar (mode selector) visible
• ✅ Right sidebar (config panel) visible
• ✅ Center canvas area ready

Step 4: Open Layout Selector

1. Click "Select Layout" button (or similar UI control)
2. Observe the layout template cards

Expected Result:

• ✅ Layout selector modal/panel opens
• ✅ 6 template cards displayed:
  1. Split Sidebar Template (📐)
  2. Two Column Equal Template (📏)
  3. Three Column Equal Template (🎯)
  4. Header Content Footer Template (🌐)
  5. Dashboard Template (📊)
  6. Custom Template (⚡)
• ✅ Each card shows:
  • Icon
  • Name
  • Description
  • Preview SVG
  • Responsive badge (if applicable)
  • Complexity indicator (if applicable)

Step 5: Select a Template

1. Click on "Split Sidebar Template"
2. Observe the canvas

Expected Result:

• ✅ Canvas updates to show split sidebar layout (visual representation)
• ✅ Layout selector closes
• ✅ Root section structure updates to use template-split-sidebar
• ✅ TWO REGIONS visible:
  • Sidebar region (300px fixed width)
  • Main region (flexible, takes remaining space)

✅ Phase 3: Persistence Test

Step 6: Verify State Persistence

1. Select "Split Sidebar Template"
2. Refresh the page (Cmd+R or Ctrl+R)
3. Observe the canvas after reload

Expected Result:

• ✅ Canvas restores with split sidebar layout intact
• ✅ No need to re-select template
• ✅ All state persisted via GgStorage (IndexedDB)

Browser Console Check:

// Check storage directly
const storage = window['__ggStorageInstance__'];
const canvasState = await storage.get('universe-canvas-v3-state');
console.log('Canvas State:', canvasState);

// Expected Output:
// {
//   rootSection: {
//     id: '...',
//     moduleId: 'template-split-sidebar', // ✅ Template module ID
//     layout: { type: 'grid' },
//     regions: [
//       { name: 'sidebar', width: '300px' },
//       { name: 'main', flex: true }
//     ]
//   }
// }

✅ Phase 4: Multi-Template Test

Step 7: Switch Between Templates

1. Select "Dashboard Template"
2. Observe canvas updates (should show 4 regions: header, sidebar, main, footer)
3. Select "Two Column Equal Template"
4. Observe canvas updates (should show 2 equal-width columns)
5. Select "Custom Template"
6. Observe (should allow custom grid configuration)

Expected Result:

• ✅ Each template switches cleanly
• ✅ No errors in console
• ✅ Visual updates match template structure
• ✅ Persistence works for all templates

✅ Phase 5: Module Drop Test (Future - PENDING)

Step 8: Drop Modules into Regions

Note: This step is PENDING until "regions as module containers" is implemented.

1. Select "Split Sidebar Template"
2. Open Module Palette (drag-drop panel)
3. Drag a widget module (e.g., button-widget) into the sidebar region
4. Observe

Expected Result (when implemented):

• ✅ Widget module drops into sidebar region
• ✅ Region highlights during drag
• ✅ Module renders inside region
• ✅ State persists after refresh

🚨 Known Issues / Limitations

Current Limitations:

1. ❌ Regions are not yet module containers - can't drop modules into them
2. ❌ No visual rendering of regions - canvas shows structure but not actual grid/flex layout
3. ❌ No module palette integration - can't drag/drop widgets yet

Next Steps to Complete:

1. 🔄 Implement RegionContainerComponent (renders a region that accepts module drops)
2. 🔄 Update CanvasSectionComponent to render regions using template's renderer component
3. 🔄 Integrate module palette with drag-drop system
4. 🔄 Add visual grid/flex rendering for templates

📝 Test Checklist

Use this checklist to track your testing progress:

• All 6 template modules build successfully
• Modules register in app.config.ts without errors
• Browser console shows "Registered 15 modules (including 6 canvas templates)"
• Layout selector displays 6 template cards
• Selecting a template updates the canvas visually
• Template selection persists after page refresh
• Can switch between different templates without errors
• Module registry reports correct template count
• No TypeScript errors in browser console
• No build errors during nx serve

🐛 Debugging Tips

If templates don't appear in layout selector:

// Check module registry
const registry = window['__moduleRegistry__'];
const allModules = registry?.getAllModules() || [];
console.log('All Modules:', allModules);

// Filter by category
const templates = allModules.filter(m => m.category === 'layout-template');
console.log('Templates:', templates);

// If empty, check for errors in module registration

If templates appear but selection doesn't work:

// Check if selectLayout event is emitted
// Add console.log in layout-selector.component.ts:
selectLayout.emit(template.id);
console.log('Selected template:', template.id);

If persistence doesn't work:

// Check storage
const storage = window['__ggStorageInstance__'];
const state = await storage.get('universe-canvas-v3-state');
console.log('Persisted State:', state);

// Force save
await storage.set('universe-canvas-v3-state', { test: 'data' });
const retrieved = await storage.get('universe-canvas-v3-state');
console.log('Retrieved:', retrieved); // Should show { test: 'data' }

✅ Success Criteria

The integration is considered successful when:

1. ✅ All 6 template modules build without errors
2. ✅ Modules register and appear in browser console
3. ✅ Layout selector shows 6 templates with correct names/icons
4. ✅ Selecting a template updates the canvas (even if visual rendering is basic)
5. ✅ Template selection persists across page reloads
6. ✅ No console errors during normal operations
7. ✅ Can switch between templates smoothly

Status: 🟡 READY FOR TESTING
Blocker: Need to build template modules and verify imports work
Next Action: Run build commands for all 6 templates

Last Updated: November 24, 2025
Test Environment: Local development (port 5200)
Target Route: /space/demo-space/modular-universe