🎵 432 Player Affiliation System Testing

Comprehensive test suite for the affiliation system including invitation UI, standalone layouts, and complete referral flows.

Current URL:

🔗 Test 1: Basic Referral Link Formats

Test different referral link formats to ensure they're detected and stored properly.

Query Parameter: ?ref=testuser123 Affiliate + Campaign: ?affiliate=testuser123&campaign=social Route-based: /affiliate/testuser123
Expected Behavior:
  1. Click any link above (opens in new tab)
  2. Open DevTools Console and check for referral parameter detection
  3. Try to sign up - you should see the invitation banner
  4. Banner should show "🎉 You've Been Invited!" with affiliate info

🎨 Test 2: Invitation UI Display

Test the invitation banner appearance and styling in the signup modal.

Test Invitation UI (John Smith) Test with Full Parameters
Testing Steps:
  1. Click link above to open with referral parameters
  2. Click "Sign Up" to open the auth modal
  3. Verify the purple gradient invitation banner appears
  4. Check that "INVITED BY: [username]" is displayed
  5. Verify benefits section shows welcome bonus and community info
  6. Test responsive design on mobile

🏗️ Test 3: Standalone Layout (New Tab)

Test that affiliation pages open in new tabs without main app header/footer.

Open Dashboard (New Tab) Open Toolkit (New Tab) Open Onboarding (New Tab)
Expected Behavior:
  1. Links should open in new tabs (not replace current page)
  2. Pages should use StandaloneLayout (no main app nav)
  3. Should show minimal header with 432 Player logo
  4. "Open Player" button should open main app in another new tab
  5. Footer should show privacy/terms links

🔄 Test 4: Complete Affiliation Flow

End-to-end testing of the complete affiliation process.

Start Complete Flow Test
Complete Testing Flow:
  1. Click referral link (above) - opens main app
  2. Open DevTools Console - check for parameter detection logs
  3. Click "Sign Up" - auth modal should open
  4. Verify invitation banner - purple gradient with affiliate info
  5. Fill signup form - use test email like test@example.com
  6. Submit signup - should create affiliate relationship
  7. Check Network tab - look for createAffiliateRelationship call
  8. Verify success - should show registration complete message

🐛 Test 5: Console Debugging

Use browser DevTools to debug and verify affiliation functionality.

// Open DevTools Console and run these commands: // 1. Check if referral parameters were detected console.log('Current URL:', window.location.href); console.log('URL Params:', new URLSearchParams(window.location.search)); // 2. Check localStorage for stored referral data console.log('Stored referral data:', localStorage.getItem('referralParams')); // 3. Check if affiliation store is working (if in Vue app) // (Open Vue DevTools to inspect affiliation store state) // 4. Monitor network requests for affiliation calls // Go to Network tab and filter by "createAffiliateRelationship"
Debug Checklist:
  1. Console shows no JavaScript errors
  2. Referral parameters are properly parsed and stored
  3. Invitation UI renders without layout issues
  4. Network requests to server are successful
  5. Standalone layout works without main app CSS conflicts

📱 Test 6: Mobile Responsiveness

Test the affiliation system on mobile devices and small screens.

Mobile Testing Steps:
  1. Open DevTools - Toggle device simulation (F12 → mobile icon)
  2. Test iPhone/Android views - Try different screen sizes
  3. Test invitation banner - Should be readable and well-spaced
  4. Test standalone layout - Header should stack properly
  5. Test touch interactions - Buttons should have proper touch targets
  6. Test signup flow - Form should be easy to use on mobile

✅ Test Results Checklist

Mark off each item as you test:
  1. □ Referral links properly detect and store parameters
  2. □ Invitation banner appears with correct styling
  3. □ Affiliate username displays in invitation UI
  4. □ Affiliation pages open in new tabs
  5. □ Standalone layout works without main app nav
  6. □ Signup creates affiliate relationship via cloud function
  7. □ Mobile responsiveness works properly
  8. □ No console errors during testing
  9. □ Network requests complete successfully
  10. □ Complete flow from link click to registration works