190 lines
4.3 KiB
Markdown
190 lines
4.3 KiB
Markdown
# 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
|