Testing & Local Development Guide

Quick Links

• Testing New User Signup
• Console Commands for Development
• Testing Routes
• Component Testing with Storybook

---

Testing New User Signup

Starting the Signup Flow

Option 1: Direct URL Navigation (Easiest)

Open your browser's address bar and navigate to:

http://localhost:5173/#/signup

Or manually change the hash in your current URL to #/signup.

Option 2: Browser Console

Open DevTools (F12 or Cmd+Option+I) and run:

window.location.hash = '#/signup'

Signup Flow Steps

1. Age Verification

   • Enter a birth date (must be 18+)
   • Example: 2000-01-15 (24 years old in 2024)
   • Click "Continue"

2. Passphrase Creation

   • Create a strong passphrase meeting ALL requirements:
     • At least 12 characters
     • Contains uppercase letter (A-Z)
     • Contains lowercase letter (a-z)
     • Contains number (0-9)
     • Contains special character (!@#$%^&*)
   • Example: MyPassword123!
   • Confirm the passphrase
   • Click "Continue"

3. Zero-Knowledge Encryption Confirmation

   • Read the explanation of how encryption works
   • Check "I understand..." checkbox
   • Click "Create My Account"
   • ✅ Account is created!

4. Profile Creation (Optional)

   • After signup, you'll see the "Create Your Profile" screen
   • Select a mood (required to proceed)
   • Add interests (optional, up to 10)
   • Toggle location tracking preference
   • Click "Complete Profile" or "Skip for now"
   • ✅ You're now a new user with a Lantern Name!

---

Console Commands for Development

Quick Navigation

// Go to signup
window.location.hash = '#/signup'

// Go to dashboard (home)
window.location.hash = '#/'

// Go to profile settings
window.location.hash = '#/profile'

// Go to onboarding profile (after signup)
window.location.hash = '#/onboarding/profile'

// Go to merchant dashboard
window.location.hash = '#/merchant'

// Create new merchant offer
window.location.hash = '#/merchant/new'

Reset State

// Full page refresh (clears component state)
window.location.reload()

// Refresh and go to signup
window.location.reload()
window.location.hash = '#/signup'

Account Info (After Signup)

After completing signup, check the console logs for account details:

// Look for console output like:
// "Signup complete: { userId: 'user-abc123', lanternName: 'Amber Beacon', ... }"
// "New profile created: { lanternName: 'Amber Beacon', interests: [...], mood: '...' }"

---

Testing Routes

Route	Component	Purpose
#/	Dashboard	Main app view with venues and Lanterns
#/signup	SignupFlow	New user account creation (age + passphrase)
#/onboarding/profile	CreateNewProfile	New user profile setup (interests + mood)
#/profile	ProfileSettings	Edit existing profile
#/merchant	MerchantDashboard	Merchant offers management (hidden for now)
#/merchant/new	OfferForm	Create new merchant offer

---

Component Testing with Storybook

Launch Storybook

npm run storybook

Opens at http://localhost:6006

Available Stories

Auth Components:

• Auth/SignupFlow - Signup flow with all steps
  • Default: Full signup experience
  • InteractiveDemo: With sample output

Onboarding Components:

• Components/CreateNewProfile - Profile creation
  • Default: Optional profile setup
  • RequiredOnboarding: Must-complete mode
  • Mobile: Mobile view test

Core Components:

• Components/Dashboard - Main app view
• Components/ProfileSettings - Profile editor
• Components/UserProfile - Profile display

---

Testing Checklist: New User Signup

Use this checklist to validate the full signup experience:

Signup Flow

• [ ] Can navigate to #/signup
• [ ] Age validation works (under 18 blocked)
• [ ] Passphrase strength requirements enforced
• [ ] Passphrase confirmation validation works
• [ ] Zero-knowledge encryption info displayed correctly
• [ ] Account creation completes successfully

Profile Creation (Post-Signup)

• [ ] Redirects to #/onboarding/profile after signup
• [ ] Can select a mood
• [ ] Can add interests from suggestions
• [ ] Can add custom interests
• [ ] Can remove interests
• [ ] Interest limit (10 max) enforced
• [ ] Can toggle location tracking
• [ ] "Complete Profile" navigates to dashboard
• [ ] "Skip for now" navigates to dashboard

Account Data

• [ ] User ID is generated
• [ ] Lantern name is auto-generated
• [ ] Console logs show encrypted birth date
• [ ] Salt is properly base64 encoded
• [ ] Profile data includes interests and mood

---

Browser LocalStorage (Future)

Once Firebase is wired up, account data will be persisted. For now:

• State is in-memory only
• Refresh clears all data
• To test persistent login, check the Firebase integration docs

---

Troubleshooting

"I don't see the signup screen"

1. Check the URL: http://localhost:5173/#/signup
2. Make sure dev server is running: npm run dev
3. Open DevTools console to see any errors
4. Try refreshing: Ctrl+Shift+R or Cmd+Shift+R

"Passphrase is rejected"

Check that your passphrase has:

• ✅ At least 12 characters
• ✅ At least 1 uppercase (A-Z)
• ✅ At least 1 lowercase (a-z)
• ✅ At least 1 number (0-9)
• ✅ At least 1 special character (!@#$%^&*)

Example valid passphrases:

• Coffee&Vibes2024
• Lantern!App123
• MySecurePass@2024

"Birth date validation fails"

The birth date must make you 18+ years old.

• Today's date (Jan 4, 2026): Must be born before Jan 4, 2008
• Example valid dates: 2000-01-01, 1995-06-15, 2007-12-31

---

Testing with Multiple Accounts

Since state is in-memory, you can test multiple accounts by:

1. Complete signup for Account A
2. Note the Lantern name and passphrase (if needed)
3. Refresh page: window.location.reload()
4. Navigate to signup: window.location.hash = '#/signup'
5. Create Account B with different data

---

Running Tests

# Run all tests
npm test

# Run tests for a specific component
npm test -- CreateNewProfile.test.jsx --run
npm test -- SignupFlow.test.jsx --run

# Watch mode (re-runs on file changes)
npm test -- CreateNewProfile.test.jsx

---

Dev Server Commands

# Start Vite dev server
npm run dev

# Start Storybook
npm run storybook

# Build for production
npm run build

# Preview production build locally
npm run preview

---

Last Updated: January 4, 2026
Status: ✅ Signup flow ready for pilot testing