tilbudgivern/docs/SVG_TESTING_GUIDE.md

# 🎨 SVG TESTING QUICK START

## Prerequisites
- Backend running on port 4031
- Frontend build completed
- Browser with Developer Tools (F12)

---

## Quick Test (2 minutes)

### 1. Start Application
```bash
# Terminal 1 - Backend
cd /mnt/HC_Volume_103713257/tilbudgivern/backend
npm run dev

# Terminal 2 - Serve Frontend (or use backend's static serving)
# Navigate to http://localhost:4031 in browser
```

### 2. Open Application
- **URL:** `http://localhost:4031`
- **Section:** "Avanceret Geometri Beregning" (Advanced Geometry)

### 3. Enter Test Data
- **Bredde (Width):** 11
- **Længde (Length):** 14  
- **Væghøjde (Wall Height):** 5
- **Taghældning (Roof Pitch):** 25

### 4. Open Browser Console (F12)
- Press: `F12` or Right-click → Inspect → Console tab
- You should see logs like:
  ```
  ✅ SVG validation passed
  🎨 Generating SVG for: {roofType: "sadeltag", ...}
  ⚡ SVG updated immediately for roofType: sadeltag
  ```

### 5. Test All 7 Roof Types
Click dropdown and select each type. Verify:

| Type | Should See | Color | Speed |
|------|-----------|-------|-------|
| Sadeltag | Red pitched roof | #DC143C | Instant ⚡ |
| Valmtag | Red 3D roof | #CD5C5C | Instant ⚡ |
| Københavnertag | Orange combined | #FF8C00 | Instant ⚡ |
| Fladtag | Gray flat roof | #708090 | Instant ⚡ |
| Pulttag | Turquoise single-slope | #20B2AA | Instant ⚡ |
| Tag med kviste | Purple with windows | #9932CC | Instant ⚡ |
| Mansardtag | Orange double-slope | Orange | Instant ⚡ |

---

## Detailed Test Checklist

### ✅ Visual Verification
- [ ] SVG appears in visualization box
- [ ] SVG title text matches expected type
- [ ] Dimensions display correctly
- [ ] Colors are distinct for each type
- [ ] Lines and shapes are crisp (not blurry)
- [ ] Text is readable

### ✅ Interaction Testing
- [ ] SVG updates instantly when changing roof type
- [ ] SVG updates when changing width value
- [ ] SVG updates when changing length value
- [ ] SVG updates when changing height value
- [ ] No loading delays or spinners
- [ ] No errors in browser console

### ✅ Browser Console
- [ ] See "✅ SVG validation passed" logs
- [ ] See "🎨 Generating SVG" logs
- [ ] No red error messages (❌ ERROR)
- [ ] No warnings about missing properties

### ✅ Browser DevTools Elements
- [ ] SVG element visible in DOM
- [ ] SVG has proper `<svg>` tags
- [ ] SVG children (rect, polygon, text) present
- [ ] No `display: none` on SVG container
- [ ] No CSS visibility issues

---

## Expected Console Output

### Good (✅ Working)
```javascript
✅ SVG validation passed
🎨 Generating SVG for: {
  roofType: "sadeltag",
  width: 11,
  length: 14,
  pitch: 25,
  wallHeight: 5
}
🎨 SVG dimensions calculated: {
  w: 110,
  l: 140,
  h: 25,
  scale: 10,
  validWidth: 11,
  validLength: 14,
  validPitch: 25
}
🎨 Generated gable section SVG: <svg viewBox="0 0 610...
⚡ SVG updated immediately for roofType: sadeltag
```

### Bad (❌ Not Working)
```javascript
❌ SVG string does not contain <svg tag
❌ SVG string does not contain closing </svg> tag
❌ SVG could not be parsed
❌ SVG validation error: Error message
```

---

## Troubleshooting

### SVG Not Showing?

**Step 1:** Check Console for Errors
```javascript
// Look for ❌ errors
// Check if validation passed: ✅ SVG validation passed
```

**Step 2:** Verify Inputs Are Filled
```javascript
// Width, Length, and RoofType must be selected
// Without these, visualization won't appear
```

**Step 3:** Check Network Tab
- Open DevTools → Network tab
- Refresh page
- Look for 404 errors on static files
- Verify HTML loads correctly

**Step 4:** Clear Browser Cache
- Press: `Ctrl+Shift+Delete` (Windows) or `Cmd+Shift+Delete` (Mac)
- Select "Cached images and files"
- Refresh page

### SVG Updates Slowly?

**Cause:** Usually indicates async operation running
**Solution:** Should be instant (< 5ms) - if not, check console for errors

### Colors Not Showing?

**Step 1:** Try different roof type
**Step 2:** Check if CSS is loaded (main.css should be visible in Network tab)
**Step 3:** Try different browser (Chrome, Firefox, Safari)

---

## Performance Expectations

- **Load Time:** < 1 second to initial page
- **SVG Generation:** < 5ms per roof type
- **Rendering:** Instant (no lag)
- **Interaction Response:** < 100ms

---

## Success Criteria

✅ Test is **PASSING** if:
1. SVG appears in visualization box
2. All 7 roof types render different visualizations
3. Console shows "✅ SVG validation passed"
4. No errors in console
5. SVG updates instantly when changing type
6. Browser displays properly on all browsers tested

❌ Test is **FAILING** if:
1. SVG doesn't appear at all
2. Blank space instead of visualization
3. Console shows "❌" errors
4. Delays when changing roof types
5. Same SVG shows for different types

---

## Report Results

If test passes:
```
✅ SVG Rendering: PASS
- All 7 roof types render correctly
- No console errors
- Instant updates
- Full accessibility support
```

If test fails:
```
❌ SVG Rendering: FAIL
- Issue: [Describe what's wrong]
- Console Error: [Copy exact error message]
- Browser: [Chrome/Firefox/Safari + version]
- Steps to reproduce: [List steps]
```

---

## Video Test Guide

1. **00:00-00:30** - Open application and navigate to geometry section
2. **00:30-01:00** - Enter test values (11, 14, 5)
3. **01:00-01:30** - Open browser console
4. **01:30-02:00** - Click each roof type and observe
5. **02:00-02:30** - Verify SVG updates instantly
6. **02:30-03:00** - Check for console "✅ SVG validation passed" message

---

**Questions?** Check SVG_VALIDATION_COMPLETE.md for technical details.