low-code-react-app-b/docs/testing/CONNECTION_TEST_PLAN.md

# Connection 1:1 Constraint Test Plan

## Issue Description
Two purple arrows (or multiple arrows) coming from the same connection point on an idea card. Each handle should support exactly ONE connection (1:1 constraint).

## Implementation Details

### Core Logic
The `validateAndRemoveConflicts` function enforces the 1:1 constraint:
- For any new connection, it checks all existing edges
- Removes edges that conflict with the source handle OR target handle
- Returns filtered edges, count of removed edges, and conflict descriptions

### Key Functions Modified
1. **onConnect** - Creates new connections with conflict resolution
2. **onReconnect** - Remaps existing connections with conflict resolution
3. **validateAndRemoveConflicts** - Core validation logic (new)

## Test Cases

### Test Case 1: Basic Connection Creation
**Steps:**
1. Go to Feature Idea Cloud
2. Click the 🔍 Debug button to open the debug panel
3. Drag from Idea A's right handle to Idea B's left handle
4. Verify in debug panel that:
   - Idea A's right handle shows ✓ (occupied)
   - Idea B's left handle shows ✓ (occupied)
   - Total edges increased by 1

**Expected Result:** Connection created successfully, both handles marked as occupied

### Test Case 2: Prevent Multiple Connections from Same Source Handle
**Steps:**
1. Create connection: Idea A[right] → Idea B[left]
2. Verify connection exists in debug panel
3. Try to create: Idea A[right] → Idea C[left]
4. Check debug panel and toast notification

**Expected Result:**
- Toast shows "Connection remapped! (1 old connection removed)"
- Idea A's right handle now connects to Idea C only
- Old connection to Idea B is removed
- Debug panel shows only 1 connection from Idea A's right handle

### Test Case 3: Prevent Multiple Connections to Same Target Handle
**Steps:**
1. Create connection: Idea A[right] → Idea B[left]
2. Try to create: Idea C[right] → Idea B[left]
3. Check debug panel

**Expected Result:**
- Toast shows "Connection remapped! (1 old connection removed)"
- Idea B's left handle now connects from Idea C only
- Old connection from Idea A is removed
- Debug panel shows only 1 connection to Idea B's left handle

### Test Case 4: Reconnection (Remapping) from Source
**Steps:**
1. Create connection: Idea A[right] → Idea B[left]
2. Drag the source end (at Idea A) to Idea A's bottom handle
3. Check debug panel

**Expected Result:**
- Connection now goes from Idea A[bottom] → Idea B[left]
- Idea A's right handle is now free (○)
- Idea A's bottom handle is now occupied (✓)
- Toast shows "Connection remapped!"

### Test Case 5: Reconnection (Remapping) to Different Target
**Steps:**
1. Create connection: Idea A[right] → Idea B[left]
2. Drag the target end (at Idea B) to Idea C's left handle
3. Check debug panel

**Expected Result:**
- Connection now goes from Idea A[right] → Idea C[left]
- Idea B's left handle is now free (○)
- Idea C's left handle is now occupied (✓)

### Test Case 6: Reconnection with Conflict Resolution
**Steps:**
1. Create connection 1: Idea A[right] → Idea B[left]
2. Create connection 2: Idea C[right] → Idea D[left]
3. Drag connection 2's target from Idea D to Idea B's left handle
4. Check debug panel

**Expected Result:**
- Connection 1 is removed (conflict on Idea B's left handle)
- Connection 2 now goes: Idea C[right] → Idea B[left]
- Toast shows "Connection remapped! (1 conflicting connection removed)"
- Idea B's left handle shows only 1 connection total

### Test Case 7: Database Persistence
**Steps:**
1. Create several connections with various conflict resolutions
2. Note the final state in the debug panel
3. Refresh the page (F5)
4. Open debug panel again

**Expected Result:**
- All connections persist exactly as they were
- No duplicate connections on any handle
- Debug panel shows same state as before refresh

### Test Case 8: Console Logging Verification
**Steps:**
1. Open browser DevTools console
2. Create a new connection
3. Look for log entries starting with `[Connection]`

**Expected Result:**
```
[Connection] New connection attempt: { source: "idea-X[right]", target: "idea-Y[left]" }
[Connection Validator] Conflicts detected and resolved: [...]  // (if conflicts exist)
[Connection] New edge created: edge-123456789
[Connection] Total edges after addition: N
[Connection] Edges by handle: [...]
```

### Test Case 9: Multiple Handles Per Node
**Steps:**
1. Create 4 different connections from a single idea using all 4 handles:
   - Idea A[left] ← Idea B[right]
   - Idea A[right] → Idea C[left]
   - Idea A[top] ← Idea D[bottom]
   - Idea A[bottom] → Idea E[top]
2. Check debug panel for Idea A

**Expected Result:**
- All 4 handles show ✓ (occupied)
- Total connections for Idea A: 4
- Each handle has exactly 1 connection
- No conflicts exist

### Test Case 10: Edge Case - Same Source and Target
**Steps:**
1. Create connection: Idea A[right] → Idea B[left]
2. Create connection: Idea C[right] → Idea D[left]
3. Remap connection 2 to: Idea A[right] → Idea B[left]

**Expected Result:**
- Connection 1 is removed (conflicts on BOTH source AND target)
- Connection 2 takes over both handles
- Toast shows "Connection remapped! (1 conflicting connection removed)"
- Only 1 arrow exists between Idea A and Idea B

## Visual Indicators in Debug Panel

The debug panel shows a grid for each idea card with 4 handle positions:
- `← ✓` or `← ○` (left handle - incoming)
- `→ ✓` or `→ ○` (right handle - outgoing)
- `↑ ✓` or `↑ ○` (top handle - incoming)
- `↓ ✓` or `↓ ○` (bottom handle - outgoing)

Green background = Handle is occupied (✓)
Gray background = Handle is free (○)

## Success Criteria

✅ All test cases pass
✅ No multiple arrows from/to same connection point
✅ Automatic conflict resolution works correctly
✅ Changes persist to database
✅ Console logs provide clear debugging information
✅ Toast notifications inform user of remapping
✅ Debug panel accurately reflects connection state

## How to Run Tests

1. Navigate to Feature Idea Cloud page in the app
2. Click the 🔍 debug icon in the top-right panel
3. Follow each test case step-by-step
4. Verify expected results using:
   - Visual inspection of arrows on canvas
   - Debug panel handle occupancy display
   - Toast notifications
   - Browser console logs
5. Test persistence by refreshing the page

## Notes for Developer

- The debug panel is ONLY for testing and can be removed once all tests pass
- All console.log statements with `[Connection]` and `[Reconnection]` prefixes are for debugging
- The validateAndRemoveConflicts function is the core of the 1:1 constraint
- Each handle ID is either 'left', 'right', 'top', 'bottom', or 'default'
- The logic treats missing sourceHandle/targetHandle as 'default'