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

# 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)

✅ 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)

❌ 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

// Look for ❌ errors
// Check if validation passed: ✅ SVG validation passed

Step 2: Verify Inputs Are Filled

// 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.