# Testing Quick Reference - Phase 1 & 2

## Quick Start

```bash
# Run all automated tests
./run-phase-tests.sh

# OR run individual tests
npm test -- sessionUISlice.test.js --watchAll=false
npm test -- activeSessionSlice.test.js --watchAll=false

# Start app for manual testing
npm start
```

## Test Status Checklist

### Automated Tests (Unit)
```
[ ] sessionUISlice - All modal actions
[ ] activeSessionSlice - Session lifecycle
[ ] Test coverage > 80%
```

### Manual Tests (Phase 1 - Modals)
```
[ ] Settings modal opens/closes
[ ] Invite modal opens/closes
[ ] Volume modal opens/closes
[ ] Recording modal opens/closes
[ ] Leave modal opens/closes
[ ] JamTrack modal opens/closes
[ ] Backing Track popup opens/closes
[ ] Media Controls popup opens/closes
```

### Manual Tests (Phase 2 - Lifecycle)
```
[ ] Session fetches on mount
[ ] User tracks retrieved
[ ] Guards pass successfully
[ ] Session join completes
[ ] Connection status updates
[ ] Connection alert shows/hides
[ ] Leave session works
[ ] State clears on unmount
```

## Redux DevTools Checklist

Open Redux DevTools and verify:

### Phase 1 Actions to Watch:
```
✓ sessionUI/openModal
✓ sessionUI/closeModal
✓ sessionUI/toggleModal
✓ sessionUI/closeAllModals
```

### Phase 2 Actions to Watch:
```
✓ activeSession/fetch/pending
✓ activeSession/fetch/fulfilled
✓ activeSession/setUserTracks
✓ activeSession/setGuardsPassed
✓ activeSession/join/fulfilled
✓ activeSession/setConnectionStatus
✓ activeSession/clearSession
```

## Expected State Shape

### sessionUI State:
```javascript
{
  modals: {
    settings: false,
    invite: false,
    volume: false,
    // ... all false when closed
  },
  panels: { /* ... */ },
  view: { /* ... */ }
}
```

### activeSession State:
```javascript
{
  sessionId: "123",
  sessionData: { /* session object */ },
  joinStatus: "joined",  // idle | joining | joined | leaving
  guardsPassed: true,
  hasJoined: true,
  userTracks: [ /* tracks */ ],
  participants: [ /* participants */ ],
  connectionStatus: "connected",  // connected | disconnected | reconnecting
  showConnectionAlert: false,
  recordingState: {
    isRecording: false,
    recordingId: null
  },
  loading: false,
  error: null
}
```

## Common Test Commands

```bash
# Run tests in watch mode
npm test

# Run specific test file
npm test -- sessionUISlice.test.js

# Run tests with coverage
npm test -- --coverage --watchAll=false

# View coverage report
open coverage/lcov-report/index.html

# Run tests verbosely
npm test -- --verbose --watchAll=false
```

## Debugging Failed Tests

### Test fails with "Cannot find module"
```bash
# Make sure you're in jam-ui directory
cd jam-ui
npm install
```

### Test fails with "unexpected token"
```bash
# Clear Jest cache
npm test -- --clearCache
```

### Test fails with Redux errors
```bash
# Check if mocks are set up correctly
# See __tests__/ files for mock examples
```

## Manual Testing Flow

### Complete Flow Test (15 minutes):

1. **Start App** (1 min)
   ```bash
   npm start
   ```
   Open http://beta.jamkazam.local:4000

2. **Test Modals** (5 min)
   - Open each modal from toolbar
   - Verify Redux state updates
   - Close each modal
   - Verify state resets

3. **Test Session Lifecycle** (9 min)
   - Navigate to session: `/client/sessions/:id`
   - Watch Redux DevTools for actions
   - Verify guards pass
   - Verify join completes
   - Test connection monitoring
   - Leave session
   - Verify state clears

## Success Criteria

✅ **All automated tests pass**
✅ **All modals work correctly**
✅ **Session lifecycle completes**
✅ **Redux state updates correctly**
✅ **No console errors**
✅ **Memory doesn't leak**

## Next Steps After Testing

1. ✅ Commit changes:
   ```bash
   git add .
   git commit -m "feat: Phase 1 & 2 Redux migration complete"
   ```

2. ✅ Review documentation:
   - PHASE1_MIGRATION_SUMMARY.md
   - PHASE2_MIGRATION_SUMMARY.md

3. ✅ Decide on Phase 3:
   - Migrate entity collections
   - Add WebSocket integration
   - Clean up remaining contexts

## Troubleshooting

### Issue: Tests won't run
**Solution:**
```bash
cd jam-ui
rm -rf node_modules
npm install
npm test
```

### Issue: Coverage report not generated
**Solution:**
```bash
npm test -- --coverage --watchAll=false --collectCoverageFrom='src/store/features/*.js'
```

### Issue: Redux state not updating in browser
**Solution:**
1. Check Redux DevTools is installed
2. Refresh page
3. Clear browser cache
4. Check console for errors

### Issue: Modal opens but doesn't close
**Solution:**
1. Check dispatch(closeModal) is called
2. Check Redux DevTools for action
3. Verify modal prop is using selector
4. Check toggle handler syntax

---

## Resources

- **Full Testing Guide**: `TESTING_GUIDE_PHASE1_AND_2.md`
- **Phase 1 Summary**: `PHASE1_MIGRATION_SUMMARY.md`
- **Phase 2 Summary**: `PHASE2_MIGRATION_SUMMARY.md`
- **Redux Migration Guide**: `REDUX_MIGRATION_GUIDE.md`

---

**Questions?** Check the full testing guide or documentation files above.
