Variant Management System - Testing Guide

Target Environment: un-test-space
Base URL: http://localhost:5200/space/un-test-space/widgets
Date: November 17, 2025

🎯 Overview

This guide provides step-by-step instructions to test all features of the newly implemented Variant Management System. Use the un-test-space space for all tests.

📋 Pre-Testing Checklist

Before starting tests, ensure:

• ✅ Development server is running on port 5200
• ✅ Backend API is running on port 3000
• ✅ You're logged into GoGrab Space
• ✅ Browser console is open for debugging (F12)
• ✅ Clear browser cache if you encounter issues

🧪 Test Suite 1: Widget Hub Navigation

Test 1.1: Access Widget Hub

Route: http://localhost:5200/space/un-test-space/widgets

Steps:

1. Navigate to the widget hub URL
2. Verify you see the landing page with:
   • Hero section with title "Widget System Hub"
   • Statistics cards showing widget counts
   • Tool cards for Widget Builder, Core UI Library, My Widgets

Expected Result:

• ✅ Page loads without errors
• ✅ All sections render correctly
• ✅ Statistics display (even if 0)
• ✅ Tool cards are clickable

Screenshot Location: Check that the design matches the Ferrari-level UI

🧪 Test Suite 2: Core UI Library

Test 2.1: Browse Core UI Components

Route: http://localhost:5200/space/un-test-space/widgets/guide

Steps:

1. Click "Core UI Library" from Widget Hub
2. Verify you see a grid of core components:
   • Button
   • Input
   • Card
   • Select
   • Checkbox
   • Text
   • Image
   • Container

Expected Result:

• ✅ Grid layout displays all components
• ✅ Each card shows icon, name, description
• ✅ Hover effects work
• ✅ Click any component navigates to detail page

Test 2.2: View Component Details (Button)

Route: http://localhost:5200/space/un-test-space/widgets/guide/button

Steps:

1. Click the "Button" component card
2. Verify the component detail page shows:
   • Component description
   • Usage examples
   • Code snippets
   • Variant tabs (if pre-loaded)
   • Properties table
   • Best practices
   • "Open in Widget Builder" button

Expected Result:

• ✅ Detail page loads
• ✅ All sections render
• ✅ Code snippets are formatted
• ✅ Variant tabs work (if variants exist)
• ✅ "Open in Widget Builder" navigates correctly

Test Data: Button should have multiple pre-loaded variants:

• Primary Button
• Secondary Button
• Outline Button
• Ghost Button
• Icon Button

Test 2.3: Navigate Between Components

Route: Navigate through http://localhost:5200/space/un-test-space/widgets/guide/{componentId}

Steps:

1. From Button detail, go back to Core UI Library
2. Click "Input" component
3. Verify Input detail page loads
4. Repeat for Card, Select, Checkbox

Expected Result:

• ✅ Navigation works smoothly
• ✅ No console errors
• ✅ Each component shows unique content
• ✅ Browser back/forward buttons work

🧪 Test Suite 3: Variant Storage & Loading

Test 3.1: Load Global Variants

Route: http://localhost:5200/space/un-test-space/widgets/guide/button

Steps:

1. Open browser console
2. Navigate to Button component detail
3. Check console for logs: [VariantStorage] or [VariantModuleRegistry]
4. Verify global variants load

Expected Result:

• ✅ Console shows: "Loaded X variants for button"
• ✅ Variant tabs appear in UI (Primary, Secondary, etc.)
• ✅ Each variant tab is clickable
• ✅ Clicking a variant updates the preview

Debug: If no variants appear:

// In browser console:
localStorage.getItem('gg-storage:variants:global:button')
// Should return JSON with variant array

Test 3.2: Verify Flash Persistence

Route: http://localhost:5200/space/un-test-space/widgets/guide/button

Steps:

1. Click a variant (e.g., "Primary Button")
2. Note which variant is active
3. Refresh the page (F5)
4. Check if the same variant is still active

Expected Result:

• ✅ Selected variant persists across refresh
• ✅ No flash of unstyled content
• ✅ Variant loads < 100ms

🧪 Test Suite 4: Variant Creator Modal

Test 4.1: Open Variant Creator

Route: Start from any widget page

Steps:

1. Navigate to Widget Hub or Core UI Library
2. Look for "Create New Variant" or similar button
3. Click to open Variant Creator modal

Expected Result:

• ✅ Modal opens with smooth animation
• ✅ Modal has three tabs: Metadata, Configuration, Preview
• ✅ Form fields are empty (for new variant)
• ✅ Category cards are visible

Note: If button is not visible yet, we'll add it in the next implementation phase.

Test 4.2: Fill Variant Metadata

Route: Variant Creator Modal

Steps:

1. Open Variant Creator modal
2. Fill in the Metadata tab:
   • Name: "Test Primary Button"
   • Description: "A custom primary button with rounded corners and shadow"
   • Category: Click "Style" card
   • Tags: "primary, rounded, shadow"
   • Icon: "smart_button"
   • Is Public: Check the checkbox

Expected Result:

• ✅ All fields accept input
• ✅ Category card highlights when selected
• ✅ Form validation shows errors for empty required fields
• ✅ Tab switches to Configuration

Test 4.3: Configure Variant Properties

Route: Variant Creator Modal → Configuration Tab

Steps:

1. Switch to "Configuration" tab
2. In Properties section, enter:

{
  "size": "large",
  "variant": "primary",
  "rounded": true
}

3. In Styles section, enter:

{
  "backgroundColor": "#007bff",
  "color": "#ffffff",
  "padding": "12px 24px",
  "borderRadius": "8px",
  "boxShadow": "0 4px 6px rgba(0,0,0,0.1)"
}

4. In Layout section, enter:

{
  "display": "inline-flex",
  "alignItems": "center",
  "gap": "8px"
}

Expected Result:

• ✅ JSON editors accept input
• ✅ No syntax errors in console
• ✅ JSON formatting is preserved
• ✅ Invalid JSON shows error (test by entering {invalid})

Test 4.4: Save Variant

Route: Variant Creator Modal

Steps:

1. After filling all fields, click "Save Variant"
2. Check browser console for logs
3. Verify modal closes
4. Check if variant appears in any lists

Expected Result:

• ✅ Console shows: [VariantStorage] Created variant: test-primary-button-xxx
• ✅ Console shows: [VariantModuleRegistry] Registered module: variant:test-primary-button-xxx
• ✅ Modal closes smoothly
• ✅ Success message appears (if implemented)
• ✅ No errors in console

Verify Storage:

// In browser console:
localStorage.getItem('gg-storage:variants:space:un-test-space:button')
// Should include your new variant

Test 4.5: Edit Existing Variant

Route: Variant Creator Modal (Edit Mode)

Steps:

1. Find a way to edit the variant you just created
2. Change the name to "Test Primary Button v2"
3. Update description
4. Save changes

Expected Result:

• ✅ Modal opens in edit mode
• ✅ Form pre-filled with variant data
• ✅ Changes save successfully
• ✅ Module re-registers automatically

🧪 Test Suite 5: Variant Picker Component

Test 5.1: Access Widget Builder

Route: http://localhost:5200/space/un-test-space/widgets/builder/workspace

Steps:

1. Navigate to widget builder
2. Look for Variant Picker section (sidebar or panel)
3. Verify it shows available variants

Expected Result:

• ✅ Variant picker renders
• ✅ Shows list of variants for current widget type
• ✅ Search box is functional
• ✅ Filter dropdowns work

Test 5.2: Search Variants

Route: Widget Builder with Variant Picker

Steps:

1. In variant picker search box, type "primary"
2. Verify results filter in real-time
3. Clear search
4. Type "secondary"
5. Verify different results

Expected Result:

• ✅ Search filters variants instantly
• ✅ Results match search term (name, description, tags)
• ✅ Empty search shows all variants
• ✅ No results shows empty state

Test 5.3: Filter by Category

Route: Widget Builder with Variant Picker

Steps:

1. Select "Style" from category dropdown
2. Verify only style variants appear
3. Select "Functional" category
4. Verify different variants appear

Expected Result:

• ✅ Filter updates results immediately
• ✅ Count updates (e.g., "5 variants")
• ✅ "All" category shows all variants

Test 5.4: Filter by Scope

Route: Widget Builder with Variant Picker

Steps:

1. Select "Global" from scope dropdown
2. Verify only global variants appear (31 pre-built)
3. Select "Space" scope
4. Verify only space-specific variants appear

Expected Result:

• ✅ Scope filter works correctly
• ✅ Global variants are read-only (indicated visually)
• ✅ Space variants are editable
• ✅ Scope badges have correct colors

Test 5.5: Apply Variant to Widget

Route: Widget Builder

Steps:

1. Select a variant from the picker
2. Click or drag to apply to widget
3. Verify widget updates with variant configuration

Expected Result:

• ✅ Widget updates immediately
• ✅ Properties panel reflects variant config
• ✅ Live preview updates
• ✅ Console shows: [VariantAction:Apply] Applied variant: xxx

Test 5.6: Favorite a Variant

Route: Widget Builder with Variant Picker

Steps:

1. Find a variant card
2. Click the star icon (outline)
3. Verify star fills
4. Click again to unfavorite
5. Verify star becomes outline again

Expected Result:

• ✅ Star icon toggles on/off
• ✅ Console shows: [VariantStorage] Toggled favorite: xxx
• ✅ Favorite persists across refresh
• ✅ Stats update to reflect favorite count

🧪 Test Suite 6: Variant Module Registry

Test 6.1: Verify Auto-Registration

Route: Any page with variants

Steps:

1. Open browser console
2. Navigate to a page that loads variants
3. Check console for registry logs
4. Run in console:

// Get registry service (if exposed to window for debugging)
// Or check localStorage
Object.keys(localStorage).filter(k => k.includes('variant'))

Expected Result:

• ✅ Console shows: [VariantModuleRegistry] Initialized
• ✅ Console shows: [VariantModuleRegistry] Registered X modules
• ✅ Each variant is a module with ID variant:xxx

Test 6.2: Verify Module Lifecycle

Route: Any page with variants

Steps:

1. Open console
2. Load a page with variants
3. Check for lifecycle logs:
   • [VariantModule:variant:xxx] Initialized
   • [VariantModule:variant:xxx] Started
4. Navigate away
5. Check for:
   • [VariantModule:variant:xxx] Stopped

Expected Result:

• ✅ Modules initialize on load
• ✅ Modules start successfully
• ✅ Modules stop on navigation
• ✅ No memory leaks

🧪 Test Suite 7: Performance & Flash Persistence

Test 7.1: Measure Load Time

Route: http://localhost:5200/space/un-test-space/widgets/guide/button

Steps:

1. Open DevTools → Network tab
2. Clear cache and hard reload
3. Measure time to interactive
4. Check "Flash persistence" timing

Expected Result:

• ✅ Page loads < 2 seconds
• ✅ Variants load from cache < 100ms
• ✅ No layout shift
• ✅ Smooth animations

Test 7.2: Test Cross-Tab Sync

Route: Same page in two tabs

Steps:

1. Open un-test-space/widgets in Tab 1
2. Open same URL in Tab 2
3. In Tab 1, create or edit a variant
4. Switch to Tab 2
5. Refresh or wait for auto-update

Expected Result:

• ✅ Changes appear in Tab 2
• ✅ Flash persistence syncs across tabs
• ✅ < 1 second sync time

Test 7.3: Test Offline Behavior

Route: Any page with variants

Steps:

1. Load a page with variants
2. Open DevTools → Network → Offline
3. Interact with variants
4. Go back online
5. Verify sync

Expected Result:

• ✅ Cached variants work offline
• ✅ Changes queue for sync
• ✅ Sync happens when online
• ✅ No data loss

🧪 Test Suite 8: Error Handling

Test 8.1: Invalid JSON in Creator

Route: Variant Creator Modal

Steps:

1. Open variant creator
2. Go to Configuration tab
3. Enter invalid JSON: {invalid: json}
4. Try to save

Expected Result:

• ✅ Error message appears
• ✅ Console shows: Invalid JSON for properties
• ✅ Save button is disabled or shows error
• ✅ User can correct and try again

Test 8.2: Missing Required Fields

Route: Variant Creator Modal

Steps:

1. Open variant creator
2. Leave Name field empty
3. Try to save

Expected Result:

• ✅ Form validation triggers
• ✅ Error message: "This field is required"
• ✅ Save button disabled
• ✅ Field highlighted in red

Test 8.3: Edit Global Variant (Should Fail)

Route: Variant Creator in Edit Mode

Steps:

1. Try to edit a global variant
2. Attempt to save

Expected Result:

• ✅ Error message: "Cannot edit global variants"
• ✅ Save is prevented
• ✅ User can duplicate instead

🧪 Test Suite 9: Integration Tests

Test 9.1: End-to-End Variant Creation

Route: Full workflow

Steps:

1. Start at Widget Hub: http://localhost:5200/space/un-test-space/widgets
2. Navigate to Core UI Library
3. Click Button component
4. Click "Create New Variant" (if available, or use creator)
5. Fill all fields
6. Save variant
7. Navigate to Widget Builder
8. Find your new variant in picker
9. Apply to a widget
10. Verify it works

Expected Result:

• ✅ All steps complete without errors
• ✅ Variant is usable immediately
• ✅ No console errors throughout
• ✅ Data persists across navigation

Test 9.2: Multi-Scope Variant Access

Route: Test scope hierarchy

Steps:

1. View global variants (31 pre-built)
2. Create a universe-scoped variant (if universe context available)
3. Create a space-scoped variant in un-test-space
4. Verify all three tiers are accessible
5. Verify correct precedence (space > universe > global)

Expected Result:

• ✅ Global variants always visible
• ✅ Universe variants visible in that universe
• ✅ Space variants only in that space
• ✅ No conflicts between tiers

🐛 Common Issues & Troubleshooting

Issue 1: Variants Not Loading

Symptoms: Variant picker is empty

Debug Steps:

// Check localStorage
localStorage.getItem('gg-storage:variants:global:button')

// Check if registry initialized
console.log('Registry initialized:', /* check logs */)

Fix: Clear cache, reload, or check backend API connection

Issue 2: Modal Not Opening

Symptoms: Click button, nothing happens

Debug Steps:

• Check console for errors
• Verify component is imported
• Check if isOpen signal updates

Fix: Ensure component is properly integrated in parent

Issue 3: Flash Persistence Not Working

Symptoms: Changes don't persist

Debug Steps:

// Check storage writes
localStorage.setItem('test-key', 'test-value')
localStorage.getItem('test-key') // Should return 'test-value'

Fix: Check browser storage permissions, quota limits

📊 Success Metrics

After completing all tests, verify:

• ✅ 31 global variants loaded for core widgets
• ✅ Variant creation works end-to-end
• ✅ Flash persistence saves/loads < 100ms
• ✅ Module registration auto-registers all variants
• ✅ Search & filters work in variant picker
• ✅ No console errors during normal usage
• ✅ Smooth UX with Ferrari-level design
• ✅ Accessibility basics covered

🚀 Next Steps

After testing:

1. Report Issues: Document any bugs found
2. Performance Analysis: Use Lighthouse for metrics
3. User Feedback: Test with actual space builders
4. Iterate: Implement fixes and enhancements
5. Document Findings: Update this guide with learnings

📝 Test Results Template

Use this template to record test results:

Test Date: ___________
Tester: ___________
Browser: ___________
Environment: un-test-space

Test Suite 1: Widget Hub Navigation
- Test 1.1: ☐ Pass ☐ Fail - Notes: _______
- Test 1.2: ☐ Pass ☐ Fail - Notes: _______

Test Suite 2: Core UI Library
- Test 2.1: ☐ Pass ☐ Fail - Notes: _______
- Test 2.2: ☐ Pass ☐ Fail - Notes: _______
- Test 2.3: ☐ Pass ☐ Fail - Notes: _______

[Continue for all suites...]

Overall Status: ☐ All Pass ☐ Minor Issues ☐ Major Issues

Testing Guide Version 1.0 | November 17, 2025