MyClub/DOCS/TEST_MYUIBRIX_NOW.md

Test MyUIbrix Editor - Quick Guide

After applying the DOM manipulation fix

🔄 First: Rebuild Frontend

The changes are in TypeScript/React, so you need to rebuild:

cd /home/tdvorak/Desktop/PROG+HTML/Fotbal/fotbal-club/frontend
npm run build

Or for development:

npm start

Then hard refresh your browser: Ctrl + Shift + R (Linux/Windows) or Cmd + Shift + R (Mac)

---

✅ Test Checklist

1. Delete Button Test

1. Open homepage as admin
2. Click edit mode (MyUIbrix toolbar appears)
3. Hover over ANY section (hero, matches, gallery, videos, etc.)
4. Click the 🗑️ delete button
5. Expected: Section disappears immediately, NO console errors
6. Old behavior: Crash with "removeChild: not a child" error

---

2. Style Changes Test

1. In edit mode, click the ⚙️ button on ANY section
2. Change padding, margin, or background color
3. Expected: Styles apply instantly to that section
4. Old behavior: Only worked on hero section, others didn't change

Try these sections specifically:

• ✅ Hero section
• ✅ Matches section
• ✅ Gallery section
• ✅ Videos section
• ✅ Merch section
• ✅ Newsletter section
• ✅ Sponsors section

---

3. Reordering Test

1. Drag a section (hold and drag the overlay)
2. Drop it on another section
3. Expected: Sections reorder smoothly, NO console errors
4. Old behavior: Console errors, sections jump around

Or use the arrow buttons:

• Click ⬆️ to move section up
• Click ⬇️ to move section down

---

4. Console Check

Open browser DevTools (F12) → Console tab

Good signs:

Visual reorder applied via CSS order

Bad signs (should NOT see):

❌ DOMException: Node.removeChild
❌ Failed to execute 'removeChild'
❌ Node.insertBefore: The node to be inserted is not a child

---

🎯 What Should Work Now

Feature	Status	Notes
Delete any section	✅ Working	Uses React state
Style any section	✅ Working	All have position:relative
Reorder sections	✅ Working	CSS order property
Move up/down	✅ Working	CSS order property
Drag & drop	✅ Working	No DOM manipulation
Multiple edits	✅ Working	No race conditions
Save changes	✅ Working	State persisted to DB

---

🐛 Troubleshooting

Still seeing "removeChild" errors?

1. Hard refresh: Ctrl + Shift + R
2. Clear cache: Browser settings → Clear site data
3. Check build: Ensure npm run build completed successfully
4. Check file timestamps: Modified files should be recent

Styles not applying to some sections?

1. Verify data-element: Section must have data-element="name" attribute
2. Check position: Section should have style={{ position: 'relative', ... }}
3. Console errors: Look for overlay attachment errors

Overlays not showing?

1. Hover test: Move mouse slowly over sections
2. Z-index: Check toolbar is visible (z-index: 9999)
3. Container: Verify viewport wrapper is created

---

📊 Expected Console Output

When working correctly, you should see:

// On reorder
Visual reorder applied via CSS order

// On style change (from hook)
Style change event received for: hero

// On delete (no errors!)
(nothing - silence is golden!)

---

🎉 Success Criteria

All these should work WITHOUT errors:

1. ✅ Delete 3 different sections
2. ✅ Change styles on 5 different sections
3. ✅ Reorder sections by dragging
4. ✅ Move sections with ⬆️⬇️ buttons
5. ✅ Close editor (X button)
6. ✅ Reopen editor - changes persisted
7. ✅ No console errors throughout

---

🔬 Advanced Testing

Test React DevTools

1. Install React DevTools extension
2. Open DevTools → Components tab
3. Find HomePage component
4. Check state:
   • visibleElements Set should reflect deleted items
   • elementOrder array should reflect reordering

Test Error Boundary

1. Artificially cause an error (if you want)
2. ErrorBoundary should catch it
3. Should show error message
4. Auto-recovery in 3 seconds

Test Persistence

1. Make changes in editor
2. Click "Publikovat" (Publish) button
3. Close editor
4. Refresh page
5. Changes should be visible in normal view

---

📝 Report Results

If everything works:

✅ WORKING - No removeChild errors
✅ Delete, style, reorder all functional
✅ All sections editable

If issues persist:

❌ ERROR: [paste console error here]
❌ SECTION: [which section has problem]
❌ ACTION: [what you were doing]

---

🚀 What Changed

Technical summary:

• ❌ Removed: Direct DOM manipulation (removeChild, appendChild)
• ✅ Added: React state-driven updates
• ✅ Added: CSS order property for reordering
• ✅ Added: position: relative to all sections
• ✅ Fixed: Style propagation to all elements

Result: MyUIbrix now works WITH React instead of fighting it.