# Mobile Menu Testing Guide

## Service Information
- **URL**: `http://localhost:8080`
- **Status**: Running (rebuilt with latest changes)
- **Port**: 8080

## Testing Instructions

### Step 1: Access the Application
1. Open your browser
2. Navigate to: `http://localhost:8080`
3. Log in with your credentials

### Step 2: Set Up Test Data
1. Create at least 2 test bands (if not already created)
2. Add some songs to each band (optional, for Player testing)
3. Note the band IDs from the URLs

### Step 3: Open Developer Tools
1. Press **F12** or **Ctrl+Shift+I** (Windows/Linux) / **Cmd+Opt+I** (Mac)
2. Go to the **Console** tab
3. Clear existing logs (optional)

### Step 4: Test Band Display Format
**Objective**: Verify band is displayed as circle only (no text)

**Steps**:
1. Resize browser window to **mobile size** (<768px width)
2. Observe the **TopBar** in the top right corner
3. Click the band switcher to open the dropdown

**Expected Results**:
✅ Only circular band initials visible (no text)
✅ Perfect circle shape (borderRadius: 50%)
✅ Dropdown items also show circles
✅ Size: 32×32px for main, 24×24px for dropdown

**Visual Check**:
- Before: ▢ AB + "Band Name"
- After: ⚪ AB (circle only)

### Step 5: Test Library Navigation (Debug Black Screen)
**Objective**: Identify and fix black screen issue

**Steps**:
1. Navigate directly to a band's library: `/bands/your-band-id`
2. Click **"Settings"** in bottom navigation
3. Click **"Library"** in bottom navigation
4. Observe console output and page behavior

**Expected Console Logs**:
```
BottomNavBar - Current band ID: "your-band-id" Path: "/bands/your-band-id"
BottomNavBar - Current band ID: "your-band-id" Path: "/bands/your-band-id/settings/members"
Library click - Navigating to band: "your-band-id"
```

**Expected Page Behavior**:
✅ Band library content loads
✅ No black screen
✅ Correct band context preserved
✅ URL shows: `/bands/your-band-id`

### Step 6: Test Error Handling
**Objective**: Verify graceful handling when no band context

**Steps**:
1. Navigate to settings page: `/settings`
2. Click **"Library"** in bottom navigation
3. Observe console warnings

**Expected Results**:
✅ Console shows: `Library click - No current band ID found!`
✅ Navigates to `/bands` (graceful fallback)
✅ No JavaScript errors
✅ App doesn't crash

### Step 7: Test Band Context Preservation
**Objective**: Verify context is preserved across navigation

**Steps**:
1. Navigate to Band A's library
2. Click **"Settings"** → back to **"Library"**
3. Click **"Player"** (if enabled) → back to **"Library"**
4. Click **"Members"** → back to **"Library"**
5. Repeat with Band B

**Expected Results**:
✅ Always returns to correct band's library
✅ URL shows correct band ID
✅ Content loads properly (no black screens)
✅ Band context never lost

### Step 8: Test Responsive Layout
**Objective**: Verify mobile/desktop switching

**Steps**:
1. Start with **desktop size** (≥768px)
2. Verify Sidebar shows band properly
3. Resize to **mobile size** (<768px)
4. Verify TopBar shows circle band display
5. Resize back to desktop
6. Verify Sidebar returns

**Expected Results**:
✅ Smooth transition between layouts
✅ Band context preserved during resizing
✅ No layout glitches
✅ Consistent band display format

## Debugging Black Screen Issue

### If Black Screen Occurs:

1. **Check Console Output**
   - Look for `currentBandId: null` or `undefined`
   - Note any JavaScript errors
   - Capture warnings and debug logs

2. **Check Network Requests**
   - Go to **Network** tab
   - Filter for `/bands/*` requests
   - Verify 200 OK responses
   - Check response payloads

3. **Test Direct Navigation**
   - Manually enter: `/bands/your-band-id`
   - Verify page loads correctly
   - Compare with bottom nav behavior

4. **Examine React Query Cache**
   - In console: `window.queryClient.getQueryData(['band', 'your-band-id'])`
   - Check if band data exists
   - Verify data structure

### Common Issues & Fixes:

| Issue | Console Output | Solution |
|-------|---------------|----------|
| Context loss | `currentBandId: null` | Improve context preservation |
| URL parsing fail | `currentBandId: undefined` | Debug matchPath logic |
| No data | Empty cache | Check API responses |
| Race condition | Intermittent failures | Add loading states |

## Test Results Template

```markdown
## Test Results - Mobile Menu Refinement

**Tester**: [Your Name]
**Date**: [YYYY-MM-DD]
**Browser**: [Chrome/Firefox/Safari] [Version]
**Device**: [Desktop/Mobile] [OS]

### Test 1: Band Display Format
- [ ] Pass
- [ ] Fail
**Notes**: [Observations]

### Test 2: Library Navigation
- [ ] Pass
- [ ] Fail
**Console Output**:
```
[Paste relevant logs here]
```
**Notes**: [Observations]

### Test 3: Error Handling
- [ ] Pass
- [ ] Fail
**Console Output**:
```
[Paste relevant logs here]
```
**Notes**: [Observations]

### Test 4: Band Context Preservation
- [ ] Pass
- [ ] Fail
**Notes**: [Observations]

### Test 5: Responsive Layout
- [ ] Pass
- [ ] Fail
**Notes**: [Observations]

### Additional Observations:
- [Issue 1]: [Description]
- [Issue 2]: [Description]

### Overall Result:
- [ ] ✅ All Tests Pass
- [ ] ⚠️ Some Issues Found
- [ ] ❌ Critical Issues

### Next Steps:
1. [Action Item 1]
2. [Action Item 2]
```

## Support Information

**Debug Logs Location**: Browser console (F12 → Console)
**Network Monitoring**: Browser dev tools (F12 → Network)
**React Query Cache**: `window.queryClient.getQueryData(['band', 'id'])`

**Need Help?**
1. Share console output
2. Describe reproduction steps
3. Note browser/version
4. Include screenshots

**Contact**: Development team
**Priority**: High (user-facing mobile issue)

## Quick Reference

- **URL**: `http://localhost:8080`
- **Mobile Breakpoint**: <768px
- **Desktop Breakpoint**: ≥768px
- **Expected Band Display**: Circle only (no text)
- **Debug Logs**: Check console for band ID values
- **Fallback**: `/bands` when no context

**Happy Testing!** 🎯