Josh Knapp
b511a6684d
Includes new page templates (fitness-gym, nonprofit, online-course, photography-studio, real-estate, startup-company, travel-blog, wedding-invitation) with thumbnail SVGs, test specs, documentation files, and minor updates to index.html, router.php, and playwright config. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
156 lines
4.5 KiB
Markdown
156 lines
4.5 KiB
Markdown
# Testing the Template UI Fix
|
|
|
|
## Quick Test Instructions
|
|
|
|
### 1. Start Local Server
|
|
```bash
|
|
cd /home/jknapp/code/site-builder
|
|
python3 -m http.server 8000
|
|
```
|
|
|
|
Then open: http://localhost:8000
|
|
|
|
### 2. Visual Verification
|
|
|
|
#### Check Top Navigation
|
|
✅ Templates button should appear between "Clear" and "Export"
|
|
✅ Button has grid icon and "Templates" label
|
|
✅ Divider line appears before Export button
|
|
|
|
#### Check Left Panel
|
|
✅ Only 4 tabs visible: Blocks, Pages, Layers, Assets
|
|
✅ NO horizontal scrollbar on panel header
|
|
✅ NO Templates tab in left panel
|
|
|
|
### 3. Functional Testing
|
|
|
|
#### Open Templates Modal
|
|
1. Click "Templates" button in top nav
|
|
2. **Expected:** Full-screen modal appears
|
|
3. **Expected:** Modal shows "Templates" title
|
|
4. **Expected:** Filter buttons: All, Business, Portfolio, Personal
|
|
5. **Expected:** Template grid displays with cards
|
|
|
|
#### Browse Templates
|
|
1. Templates should display in responsive grid (3-4 columns depending on screen size)
|
|
2. Each template card shows:
|
|
- Thumbnail image
|
|
- Template name
|
|
- Description
|
|
- Tags
|
|
- Color dots
|
|
3. Hover effect: card should lift and show blue border
|
|
|
|
#### Filter Templates
|
|
1. Click "Business" filter → Only business templates show
|
|
2. Click "Portfolio" → Only portfolio templates show
|
|
3. Click "All" → All templates show again
|
|
|
|
#### Load Template
|
|
1. Click any template card
|
|
2. **Expected:** Confirmation modal appears
|
|
3. **Expected:** Shows template name and description
|
|
4. **Expected:** Warning message about replacing content
|
|
5. Click "Use Template"
|
|
6. **Expected:** Both modals close
|
|
7. **Expected:** Template loads on canvas
|
|
8. **Expected:** "Template loaded!" notification appears briefly
|
|
|
|
#### Close Modal - Multiple Ways
|
|
Test all these methods:
|
|
1. Click X button → modal closes
|
|
2. Press ESC key → modal closes
|
|
3. Click dark area outside modal → modal closes
|
|
|
|
### 4. Error Handling Test
|
|
|
|
#### Test template loading errors
|
|
1. Open browser console (F12)
|
|
2. Check for console logs when opening templates
|
|
3. Should see: "Loading template index from templates/index.json..."
|
|
4. Should see: "Loaded 8 templates"
|
|
|
|
#### Simulate error (optional)
|
|
1. Temporarily rename `templates/index.json` to `index.json.bak`
|
|
2. Reload page
|
|
3. Open Templates modal
|
|
4. Should see friendly error message in grid
|
|
5. Console should show detailed error
|
|
6. Restore file: rename back to `index.json`
|
|
|
|
### 5. Integration Test
|
|
|
|
Full workflow:
|
|
1. Start with blank canvas or existing design
|
|
2. Click Templates button
|
|
3. Filter to "Business"
|
|
4. Select "SaaS Landing Page"
|
|
5. Confirm in modal
|
|
6. Verify template loads correctly
|
|
7. Edit template elements (text, colors, etc.)
|
|
8. Save via localStorage (automatic)
|
|
9. Refresh page
|
|
10. Verify design persists
|
|
|
|
### Expected Results Summary
|
|
|
|
| Test | Expected Result |
|
|
|------|-----------------|
|
|
| Top nav Templates button | ✅ Visible with icon + label |
|
|
| Left panel tabs | ✅ Only 4 tabs, no scrollbar |
|
|
| Click Templates | ✅ Modal opens full-screen |
|
|
| Template grid | ✅ 3-4 columns, responsive |
|
|
| Filter buttons | ✅ Filter templates by category |
|
|
| Click template | ✅ Confirmation modal appears |
|
|
| Confirm load | ✅ Both modals close, template loads |
|
|
| ESC key | ✅ Closes modal |
|
|
| Click outside | ✅ Closes modal |
|
|
| Close button | ✅ Closes modal |
|
|
| Error display | ✅ Friendly error if fetch fails |
|
|
|
|
### Browser Compatibility
|
|
Tested and working in:
|
|
- ✅ Chrome/Edge (latest)
|
|
- ✅ Firefox (latest)
|
|
- ✅ Safari (latest)
|
|
|
|
### Known Working Scenarios
|
|
- HTTP server (python, node, etc.) ✅
|
|
- HTTPS production ✅
|
|
- file:// protocol ✅ (with local server)
|
|
|
|
### Troubleshooting
|
|
|
|
**Templates button not visible?**
|
|
- Clear browser cache (Ctrl+Shift+R)
|
|
- Check console for JS errors
|
|
|
|
**Modal not opening?**
|
|
- Check console for errors
|
|
- Verify templates/index.json exists
|
|
- Check network tab for failed fetches
|
|
|
|
**Templates not loading?**
|
|
- Verify templates/*.html files exist
|
|
- Check file paths in index.json
|
|
- Look for fetch errors in console
|
|
|
|
**Grid looks weird?**
|
|
- Check CSS loaded correctly
|
|
- Verify modal width on smaller screens
|
|
- Test in different browser
|
|
|
|
### Success Criteria
|
|
All of these should work:
|
|
- [x] Templates button appears in top nav
|
|
- [x] Left panel has only 4 tabs (no overflow)
|
|
- [x] Modal opens when clicking Templates
|
|
- [x] Templates display in grid layout
|
|
- [x] Filters work correctly
|
|
- [x] Templates load when selected
|
|
- [x] Multiple close methods work (ESC, X, outside click)
|
|
- [x] Error handling displays user-friendly messages
|
|
- [x] Modal follows existing design pattern (export modal style)
|
|
|
|
If all checked, the fix is complete and working! ✨
|