Theme Persistence Test Script

🎯 Goal

Verify that themes are:

1. ✅ Saved to global themes collection
2. ✅ Space document updated with themeSystem.activeThemeId
3. ✅ Theme persists after page refresh

📋 Test Steps

Step 1: Open Theme Designer

1. Navigate to: http://localhost:5701/space/chrome-space-1/theme-designer
2. Open Browser DevTools Console (F12)
3. Clear console (Ctrl+L or Cmd+K)

Step 2: Create and Save New Theme

1. In Theme Editor:

   • Name: "Test Persistence Theme"
   • Description: "Testing space document update"
   • Primary Color: #FF6B6B (red)
   • Secondary Color: #4ECDC4 (teal)

2. Click "💾 Save & Apply (Override)"

3. Watch console for these messages:

   💾 [SimpleThemeStorage] saveTheme() called!
      - Theme: Test Persistence Theme
      - Theme ID: theme-xxx
      - Mode: override
      - Set as active: true
      - Space ID: 69067c087ebb621cd9ff8c3f
   
   ✅ Theme saved locally: theme-xxx
   
   🔄 Syncing theme to MongoDB themes collection...
   
   ✅ Theme synced to MongoDB: theme-xxx
   
   ⚡ Setting as active theme...
   
   🎯 [SimpleThemeStorage] setActiveThemeId() called!
      - Theme ID: theme-xxx
      - Space ID: 69067c087ebb621cd9ff8c3f
   
   🎯 Calling spaceApi.updateSpace()...
      - MongoDB space ID: 69067c087ebb621cd9ff8c3f
      - Theme ID: theme-xxx
      - Update payload: { themeSystem: { activeThemeId, updatedAt } }
   
   ✅ Space document updated successfully!
      - Theme system: { activeThemeId: "theme-xxx", updatedAt: "..." }
   

4. If you DON'T see these logs, the save button is NOT working!

Step 3: Verify in MongoDB

1. Open MongoDB Compass

2. Navigate to: GoGrabSpace > spaces collection

3. Find your space document (spaceSlug: "chrome-space-1")

4. Verify themeSystem property exists:

   {
     "_id": "69067c087ebb621cd9ff8c3f",
     "name": "Xxb7jayp",
     "spaceSlug": "chrome-space-1",
     "themeSystem": {
       "activeThemeId": "theme-xxx",
       "updatedAt": "2025-11-21T17:02:39.681Z"
     },
     ...
   }
   

5. Navigate to: GoGrabSpace > themes collection

6. Verify theme document exists with matching _id

Step 4: Test Persistence (Page Refresh)

1. Refresh the page (F5 or Cmd+R)

2. Clear console and watch for:

   🌌 [SimpleThemeStorage] Space changed to: 69067c087ebb621cd9ff8c3f
   ✅ Loaded 3 themes for space 69067c087ebb621cd9ff8c3f
   🔍 BOOTSTRAP: Found active theme ID: theme-xxx
   🎯 ThemeStateManager: Active theme loaded: Test Persistence Theme
   

3. Verify the theme is applied - check if the red/teal colors are visible

🚨 Expected Issues

Issue 1: No save logs appear

Problem: Button click not triggering saveTheme() Solution: Check theme-editor.component.ts - verify button click handler

Issue 2: Save logs appear but no space update logs

Problem: setActiveThemeId() failing or not being called Solution: Check if setAsActive option is being passed correctly

Issue 3: Space update logs appear but MongoDB not updated

Problem: Backend not persisting themeSystem Solution: Check backend logs for errors in spaces.service.ts

Issue 4: Theme loads on refresh but wrong theme

Problem: activeThemeId in space document doesn't match loaded theme Solution: Space document out of sync - manually update in MongoDB

🔧 Quick Fixes

Fix 1: Manually Update Space Document

// Run in MongoDB Compass query:
db.spaces.updateOne(
  { _id: "69067c087ebb621cd9ff8c3f" },
  {
    $set: {
      "themeSystem.activeThemeId": "theme-testtheme1-1763734768627",
      "themeSystem.updatedAt": new Date().toISOString()
    }
  }
)

Fix 2: Verify Backend is Running

# Check if backend API is responding
curl http://localhost:3000/api/spaces/69067c087ebb621cd9ff8c3f

Fix 3: Check Backend Logs

# In backend terminal, watch for:
[SpacesService] 🎨 Updating themeSystem: {...}
[SpacesService] ✅ Updated space.themeSystem to: {...}
[SpacesService] ✅ Space saved to MongoDB: 69067c087ebb621cd9ff8c3f

✅ Success Criteria

1. ✅ Console shows complete save flow (all logs present)
2. ✅ MongoDB spaces collection has themeSystem property
3. ✅ MongoDB themes collection has theme document
4. ✅ After refresh, theme persists and is applied automatically
5. ✅ Backend logs show successful space update

📝 Notes

• Theme ID format: theme-{name}-{timestamp} (e.g., theme-testpersistencetheme-1763744563627)
• Space ID: Always use the MongoDB _id, not the slug
• Collection names:
  • themes (global themes library)
  • spaces (user spaces with themeSystem property)
• Sync interval: 3 seconds for themes collection

🐛 Debug Commands

Run in browser console:

// 1. Check current space
console.log('Space:', window.__themeService__.spaceService.currentSpace());

// 2. Check loaded themes
console.log('Themes:', window.__themeStateManager__._availableThemes());

// 3. Check active theme ID
window.__themeStorage__.getActiveThemeId().then(id => console.log('Active ID:', id));

// 4. Force save test theme
const testTheme = {
  id: 'theme-debug-test-' + Date.now(),
  name: 'Debug Test Theme',
  mode: 'dark',
  metadata: {
    id: 'theme-debug-test-' + Date.now(),
    name: 'Debug Test Theme',
    description: 'Debug test',
    mode: 'dark',
    created: new Date().toISOString(),
    updated: new Date().toISOString()
  },
  colors: {
    primary: '#FF0000',
    secondary: '#00FF00',
    tertiary: '#0000FF',
    background: '#ffffff',
    surface: '#f5f5f5',
    success: '#4CAF50',
    warning: '#FF9800',
    error: '#F44336',
    info: '#2196F3'
  },
  cssVariables: {},
  gradients: {}
};

window.__themeStorage__.saveTheme(testTheme, { mode: 'add', setAsActive: true })
  .then(success => console.log('Save result:', success));