rehearshalhub/testing_guide.md

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

## 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! 🎯