glam/TEST_EDGE_DIRECTIONALITY.md

Edge Directionality Testing Checklist

Status: Ready for testing
Build: ✅ TypeScript compiles
Docs: ✅ Complete

---

Quick Start Testing

1. Start Dev Server

cd /Users/kempersc/apps/glam/frontend
npm run dev
# Opens at http://localhost:5173

2. Navigate to UML Viewer

Open: http://localhost:5173/uml-viewer

3. Load Test Diagram

Choose one from schemas/20251121/uml/mermaid/:

• Small: NetworkOrganisation_20251123_225712.mmd (33 lines)
• Large: full_schema_20251123_174151.mmd (264 lines)

---

Test Cases

✅ Test 1: Hover Effects

Steps:

1. Hover over any edge
2. Observe edge, arrow, and label

Expected:

• Edge opacity: 0.7 → 1.0
• Edge width: 2px → 3px
• Arrow switches to highlight marker (30% larger)
• Label becomes bold and fully visible

Pass Criteria: All visual changes occur smoothly

---

✅ Test 2: Click to Reverse (Bidirectional Edges)

Steps:

1. Find an association edge (filled triangle arrow)
2. Hover over the edge
3. Verify cursor changes to pointer
4. Click the edge

Expected:

• Flash effect (edge pulses)
• Arrow reverses direction
• Source and target swap
• Label updates if it shows direction

Pass Criteria: Edge reverses with visual feedback

---

✅ Test 3: Click on Non-Bidirectional Edge

Steps:

1. Find an inheritance edge (hollow triangle)
2. Hover over the edge
3. Verify cursor stays default (not pointer)
4. Click the edge

Expected:

• No effect (inheritance is not reversible)
• No flash animation
• Direction stays the same

Pass Criteria: Edge ignores click (correct behavior)

---

✅ Test 4: Tooltips

Steps:

1. Hover over a bidirectional edge (association/aggregation)
2. Wait 1 second

Expected:

• Tooltip appears: "Click to reverse direction"

Steps:

1. Hover over a non-bidirectional edge (inheritance/composition)

Expected:

• No tooltip (or generic tooltip without "click to reverse")

Pass Criteria: Tooltips only show on reversible edges

---

✅ Test 5: Layout Compatibility

Steps:

1. Load a diagram with Force layout
2. Test hover and click on edges
3. Switch to Dagre layout
4. Test hover and click again

Expected:

• All interactions work in both layouts
• No errors in browser console

Pass Criteria: Edge interactions work across all 5 layouts

---

✅ Test 6: Performance (Large Diagrams)

Steps:

1. Load full_schema_20251123_174151.mmd (264 lines, ~100+ edges)
2. Pan and zoom around the diagram
3. Hover over multiple edges rapidly
4. Click several bidirectional edges

Expected:

• No lag or stuttering
• Hover effects trigger smoothly (<100ms)
• Flash animations complete without frame drops

Pass Criteria: Smooth performance even with many edges

---

Edge Types Reference

Edge Type	Arrow Shape	Bidirectional?	Reversible?
Association	Filled Triangle	✅ Yes	✅ Yes
Aggregation	Hollow Diamond	✅ Yes	✅ Yes
Inheritance	Hollow Triangle	❌ No	❌ No
Composition	Filled Diamond	❌ No	❌ No

---

Browser Console Checks

No Errors Expected

Open DevTools Console (F12) and check for:

• ❌ TypeScript errors
• ❌ D3.js errors
• ❌ Marker reference errors

Expected Console Output

✅ UML diagram loaded successfully
✅ X nodes, Y edges rendered
✅ Layout algorithm: [force/dagre]

---

Bug Reporting Template

If you find issues, document:

**Bug**: [Brief description]
**Test Case**: Test #[number]
**Steps to Reproduce**:
1. ...
2. ...

**Expected**: [What should happen]
**Actual**: [What actually happened]
**Browser**: [Chrome/Firefox/Safari version]
**Console Errors**: [Copy error messages]
**Screenshot**: [If applicable]

---

Success Criteria

Feature is production-ready if:

• ✅ All 6 test cases pass
• ✅ No console errors
• ✅ Smooth performance on large diagrams
• ✅ User finds interactions intuitive

---

Next: After testing, either:

1. If bugs found: Create bug report, fix issues
2. If all pass: Mark feature complete, move to Phase 2
3. If user feedback needed: Share with GLAM project users

Documentation: See EDGE_DIRECTIONALITY_QUICK_GUIDE.md for user reference