# Testing Guide: Phase 1 & 2 Redux Migration

## Overview

This guide covers testing for:
- **Phase 1**: Modal state migration (8 modals)
- **Phase 2**: Session lifecycle migration (join/leave, guards, connection)

## Quick Test Commands

```bash
# Run unit tests for Redux slices
cd jam-ui
npm test -- sessionUISlice.test.js
npm test -- activeSessionSlice.test.js

# Run all tests
npm test

# Start app for manual testing
npm start
```

## Automated Tests

### Running Unit Tests

```bash
# Test modal slice
npm test -- src/store/features/__tests__/sessionUISlice.test.js

# Test active session slice
npm test -- src/store/features/__tests__/activeSessionSlice.test.js

# Test with coverage
npm test -- --coverage --watchAll=false
```

### Expected Output

All tests should pass:
```
PASS  src/store/features/__tests__/sessionUISlice.test.js
PASS  src/store/features/__tests__/activeSessionSlice.test.js

Test Suites: 2 passed, 2 total
Tests:       XX passed, XX total
```

## Manual Testing Checklist

### Prerequisites

- [ ] Application running: `npm start`
- [ ] Redux DevTools browser extension installed
- [ ] You have a valid session ID to test with
- [ ] Backend services are running (Rails API, WebSocket gateway)

---

## Phase 1: Modal State Testing

### 1. Settings Modal

**Test Steps:**
1. Navigate to session screen
2. Click "Settings" button in toolbar
3. ✅ Verify modal opens
4. Open Redux DevTools → State → `sessionUI.modals.settings`
5. ✅ Verify value is `true`
6. Click close or outside modal
7. ✅ Verify modal closes
8. Check Redux DevTools
9. ✅ Verify value is `false`

**Redux Actions to Watch:**
- `sessionUI/openModal` with payload `"settings"`
- `sessionUI/closeModal` with payload `"settings"`

**Potential Issues:**
- Modal doesn't open → Check dispatch call in button onClick
- Modal doesn't close → Check toggle/close handler

---

### 2. Invite Modal

**Test Steps:**
1. Click "Invite" button
2. ✅ Verify modal opens
3. Select friends from list
4. Click "Send Invitations"
5. ✅ Verify modal closes after success
6. Check Redux DevTools: `sessionUI.modals.invite`
7. ✅ Verify transitions `false → true → false`

**Redux Actions:**
- `sessionUI/openModal` → `"invite"`
- `sessionUI/closeModal` → `"invite"`

---

### 3. Volume Modal

**Test Steps:**
1. Click "Volume" button
2. ✅ Verify modal opens
3. Adjust volume sliders
4. Click close
5. ✅ Verify modal closes
6. Check Redux DevTools: `sessionUI.modals.volume`

**Redux Actions:**
- `sessionUI/toggleModal` → `"volume"`

---

### 4. Recording Modal

**Test Steps:**
1. Click "Record" button
2. ✅ Verify modal opens
3. Configure recording settings
4. Click "Start Recording" or "Cancel"
5. ✅ Verify modal closes
6. Check Redux DevTools: `sessionUI.modals.recording`

**Redux Actions:**
- `sessionUI/openModal` → `"recording"`
- `sessionUI/closeModal` → `"recording"`

---

### 5. Leave Modal

**Test Steps:**
1. Click "Leave Session" button (top right)
2. ✅ Verify leave confirmation modal opens
3. Rate session (thumbs up/down)
4. Add optional comment
5. Click "Leave Session"
6. ✅ Verify modal closes
7. ✅ Verify navigation to `/sessions`
8. Check Redux DevTools: `sessionUI.modals.leave`

**Redux Actions:**
- `sessionUI/openModal` → `"leave"`
- `sessionUI/closeModal` → `"leave"`

---

### 6. JamTrack Modal

**Test Steps:**
1. Click "Open" menu → "JamTrack"
2. ✅ Verify JamTrack selection modal opens
3. Browse and select a JamTrack
4. ✅ Verify modal closes
5. ✅ Verify JamTrack appears in session
6. Check Redux DevTools: `sessionUI.modals.jamTrack`

**Redux Actions:**
- `sessionUI/openModal` → `"jamTrack"`
- `sessionUI/toggleModal` → `"jamTrack"`

---

### 7. Backing Track Popup

**Test Steps:**
1. Click "Open" menu → "Backing Track"
2. Select a backing track file
3. ✅ Verify popup window opens
4. ✅ Verify backing track player controls visible
5. Click close on popup
6. ✅ Verify popup closes
7. Check Redux DevTools: `sessionUI.modals.backingTrack`

**Redux Actions:**
- `sessionUI/openModal` → `"backingTrack"`
- `sessionUI/closeModal` → `"backingTrack"`

---

### 8. Media Controls Popup

**Test Steps:**
1. Trigger media controls popup (if applicable)
2. ✅ Verify popup opens
3. Close popup
4. ✅ Verify popup closes
5. Check Redux DevTools: `sessionUI.modals.mediaControls`

**Redux Actions:**
- `sessionUI/openModal` → `"mediaControls"`
- `sessionUI/closeModal` → `"mediaControls"`

---

### Phase 1 Summary Check

Open Redux DevTools and verify final state:
```javascript
sessionUI: {
  modals: {
    settings: false,
    invite: false,
    volume: false,
    recording: false,
    leave: false,
    jamTrack: false,
    backingTrack: false,
    mediaControls: false
  }
}
```

All modals should be `false` when closed.

---

## Phase 2: Session Lifecycle Testing

### 9. Session Fetch on Mount

**Test Steps:**
1. Navigate to session URL: `/client/sessions/:sessionId`
2. Open Redux DevTools immediately
3. Watch for actions:
   - ✅ `activeSession/fetch/pending`
   - ✅ `activeSession/fetch/fulfilled`
4. Check State → `activeSession.sessionData`
5. ✅ Verify session data populated
6. ✅ Verify `sessionId` matches URL parameter

**Expected Redux State:**
```javascript
activeSession: {
  sessionId: "123", // from URL
  sessionData: { /* session object from API */ },
  loading: false,
  error: null
}
```

**Potential Issues:**
- No fetch action → Check useEffect dependency array
- Fetch fails → Check API endpoint and authentication

---

### 10. User Tracks Retrieval

**Test Steps:**
1. Wait for session guards to run
2. Watch Redux DevTools for:
   - ✅ `activeSession/setUserTracks`
3. Check State → `activeSession.userTracks`
4. ✅ Verify array of track objects
5. ✅ Verify tracks match your audio configuration

**Expected Redux State:**
```javascript
activeSession: {
  userTracks: [
    { id: 1, name: "Track 1", ... },
    { id: 2, name: "Track 2", ... }
  ]
}
```

**Console Output to Watch:**
```
userTracks: [...]
```

---

### 11. Session Guards Validation

**Test Steps:**
1. After tracks retrieved, watch for:
   - ✅ `activeSession/setGuardsPassed`
2. Check console logs:
   - ✅ "user has passed all session guards"
3. Check Redux State → `activeSession.guardsPassed`
4. ✅ Verify value is `true`

**Expected Redux State:**
```javascript
activeSession: {
  guardsPassed: true
}
```

**Potential Issues:**
- Guards don't pass → Check audio configuration
- No tracks found → Check gear configuration in app

---

### 12. Session Join

**Test Steps:**
1. After guards pass, watch for:
   - ✅ `activeSession/join/fulfilled` (or manual fulfilled dispatch)
2. Check console logs:
   - ✅ "join session response xxx"
3. Check Redux State:
   - ✅ `activeSession.hasJoined` = `true`
   - ✅ `activeSession.joinStatus` = `'joined'`
4. ✅ Verify you can see/hear other participants (if any)

**Expected Redux State:**
```javascript
activeSession: {
  hasJoined: true,
  joinStatus: 'joined',
  sessionData: { /* updated with join info */ }
}
```

**Redux Actions:**
- Manual dispatch of `joinActiveSession.fulfilled()`

---

### 13. Connection Status Monitoring

**Test Steps:**

**Test A: Normal Connection**
1. Check Redux State → `activeSession.connectionStatus`
2. ✅ Verify value is `'connected'`
3. ✅ Verify no connection alert shown

**Test B: Disconnect Scenario**
1. Disconnect from network (turn off WiFi/unplug ethernet)
2. Wait 5-10 seconds
3. Watch for action: `activeSession/setConnectionStatus`
4. Check Redux State:
   - ✅ `connectionStatus` = `'disconnected'`
   - ✅ `showConnectionAlert` = `true`
5. ✅ Verify connection alert banner appears on screen

**Test C: Reconnect Scenario**
1. Reconnect to network
2. Watch for action: `activeSession/setConnectionStatus`
3. Check Redux State:
   - ✅ `connectionStatus` = `'connected'`
   - ✅ `showConnectionAlert` = `false`
4. ✅ Verify connection alert disappears

**Expected Redux State (Connected):**
```javascript
activeSession: {
  connectionStatus: 'connected',
  showConnectionAlert: false
}
```

**Expected Redux State (Disconnected):**
```javascript
activeSession: {
  connectionStatus: 'disconnected',
  showConnectionAlert: true
}
```

---

### 14. Leave Session

**Test Steps:**
1. Click "Leave Session" button
2. ✅ Verify leave modal opens (Phase 1 test)
3. Provide rating and comments
4. Click "Leave Session" in modal
5. Watch Redux DevTools for:
   - ✅ `activeSession/clearSession`
   - ✅ `sessionUI/closeModal` with `"leave"`
6. ✅ Verify navigation to `/sessions`
7. Check Redux State → `activeSession`
8. ✅ Verify state is reset to initial:

**Expected Redux State (After Leave):**
```javascript
activeSession: {
  sessionId: null,
  sessionData: null,
  joinStatus: 'idle',
  guardsPassed: false,
  hasJoined: false,
  userTracks: [],
  connectionStatus: 'disconnected',
  showConnectionAlert: false,
  loading: false,
  error: null
}
```

**Console Output:**
```
Closing metronome before leaving session
Thank you for your feedback!
```

---

### 15. Cleanup on Unmount

**Test Steps:**
1. Join a session (follow steps 9-12)
2. Navigate away using browser back button or clicking Dashboard
3. Watch Redux DevTools for:
   - ✅ `activeSession/clearSession`
4. Navigate back to Redux DevTools → State tab
5. Check `activeSession`
6. ✅ Verify state is reset to initial

**Expected Behavior:**
- Redux state cleared even if user doesn't explicitly leave
- No memory leaks
- Clean slate for next session

---

## Phase 2 Summary Check

After completing a full session lifecycle (join → leave), verify Redux state:

```javascript
// Active session
activeSession: {
  sessionId: null,
  sessionData: null,
  joinStatus: 'idle',
  guardsPassed: false,
  hasJoined: false,
  userTracks: [],
  participants: [],
  connectionStatus: 'disconnected',
  showConnectionAlert: false,
  loading: false,
  error: null
}

// All modals closed
sessionUI: {
  modals: {
    // all false
  }
}
```

---

## Redux DevTools Tips

### Viewing Actions

1. Open Redux DevTools
2. Click "Actions" tab (left side)
3. See chronological list of all actions
4. Click any action to see:
   - Action type
   - Payload
   - State before/after (Diff tab)

### Time-Travel Debugging

1. In Actions tab, click any previous action
2. App state jumps back to that point
3. Scrub through actions like a timeline
4. Jump back to present with "Jump to Present" button

### State Inspection

1. Click "State" tab
2. Expand `activeSession` or `sessionUI`
3. See current values
4. Values update in real-time as actions dispatch

### Action Filtering

1. Click filter icon in Actions tab
2. Type action name to filter (e.g., "activeSession")
3. Only see relevant actions

---

## Common Issues & Debugging

### Issue: Modal doesn't open
**Symptoms:** Button click does nothing
**Debug Steps:**
1. Check console for errors
2. Verify dispatch call: `dispatch(openModal('modalName'))`
3. Check Redux DevTools → Actions for `sessionUI/openModal`
4. Verify modal name matches slice definition

### Issue: Session doesn't join
**Symptoms:** Guards pass but nothing happens
**Debug Steps:**
1. Check console logs for "joining session"
2. Verify `hasJoined` dependency in useEffect
3. Check for API errors in Network tab
4. Verify WebSocket connection

### Issue: Connection alert doesn't show
**Symptoms:** Disconnect but no alert
**Debug Steps:**
1. Check Redux state: `activeSession.showConnectionAlert`
2. Verify action dispatched: `activeSession/setConnectionStatus`
3. Check component render for `showConnectionAlert` usage

### Issue: State not clearing on leave
**Symptoms:** Old session data remains
**Debug Steps:**
1. Verify `clearSession` action dispatched
2. Check Redux DevTools → Action for `activeSession/clearSession`
3. Verify reducer handles `clearSession` correctly

---

## Performance Testing

### Check Re-renders

1. Install React DevTools
2. Enable "Highlight updates" in Components tab
3. Open/close modals → Should only re-render modal component
4. Join session → Should not cause unnecessary re-renders

### Memory Leaks

1. Join and leave multiple sessions
2. Open Chrome Task Manager (Shift+Esc)
3. Monitor memory usage
4. Should not continuously increase

---

## Test Coverage Goals

- ✅ All 8 modals open/close correctly
- ✅ Redux state updates match UI state
- ✅ Session lifecycle completes successfully
- ✅ Connection monitoring works
- ✅ Leave operation clears state
- ✅ Cleanup on unmount works
- ✅ No console errors during normal flow
- ✅ Redux DevTools shows expected actions

---

## Quick Checklist

Copy this for quick testing:

```
Phase 1 - Modals:
[ ] Settings modal
[ ] Invite modal
[ ] Volume modal
[ ] Recording modal
[ ] Leave modal
[ ] JamTrack modal
[ ] Backing Track popup
[ ] Media Controls popup

Phase 2 - Lifecycle:
[ ] Session fetch on mount
[ ] User tracks retrieved
[ ] Guards pass
[ ] Session join success
[ ] Connection monitoring works
[ ] Leave session clears state
[ ] Unmount clears state

Redux DevTools:
[ ] All actions logged correctly
[ ] State updates match expectations
[ ] No errors in actions
[ ] Time-travel works
```

---

## Reporting Issues

If you find issues, report with:

1. **What you did**: Step-by-step actions
2. **What you expected**: Expected behavior
3. **What happened**: Actual behavior
4. **Redux state**: Copy from DevTools
5. **Console errors**: Any error messages
6. **Screenshots**: If applicable

Example:
```
Issue: Settings modal doesn't close

Steps:
1. Clicked Settings button
2. Modal opened correctly
3. Clicked X to close
4. Modal remained open

Expected: Modal should close
Actual: Modal stays open

Redux State:
sessionUI.modals.settings: true (should be false)

Console: No errors

Action in DevTools: sessionUI/closeModal not fired
```

---

## Success Criteria

✅ **Phase 1 Complete** when:
- All 8 modals open and close correctly
- Redux state matches UI state
- No console errors
- Redux DevTools shows all actions

✅ **Phase 2 Complete** when:
- Session lifecycle completes (fetch → join → leave)
- Connection monitoring works
- State clears on leave/unmount
- No memory leaks
- Redux DevTools shows all lifecycle actions

---

## Next Steps After Testing

Once all tests pass:
1. Commit changes: `git add . && git commit -m "feat: migrate modal and lifecycle state to Redux"`
2. Review `PHASE1_MIGRATION_SUMMARY.md` and `PHASE2_MIGRATION_SUMMARY.md`
3. Consider starting Phase 3 (entity collections)
4. Or deploy to staging for QA testing

---

**Happy Testing! 🧪**
