# Edge Directionality Testing Checklist

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

---

## Quick Start Testing

### 1. Start Dev Server
```bash
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:

```markdown
**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