# Complete Testing Guide - SurveyStronghold

## 🚀 Quick Start Testing (5 Minutes)

### Step 1: Landing Page (Currently Open)
✅ **URL:** http://localhost:3000

**What to Test:**
- [ ] Logo displays correctly
- [ ] "Your data. Your fortress." heading visible
- [ ] "Start free" button visible
- [ ] "Log in" button visible
- [ ] Click "Log in" → Should go to `/login`
- [ ] Click "Start free" → Should go to `/register`
- [ ] Responsive: Resize browser window - buttons should stack on mobile

---

### Step 2: Test Login with Demo Account
✅ **URL:** http://localhost:3000/login

**Demo Credentials:**
- **Email:** demo@surveystronghold.com
- **Password:** Demo1234!

**What to Test:**
- [ ] Login form displays correctly
- [ ] Tab switcher shows "Log in" / "Register"
- [ ] Enter email and password
- [ ] Click "Log in"
- [ ] Should redirect to `/app/dashboard`
- [ ] **Mobile:** Form should be touch-friendly

---

### Step 3: Test Dashboard
✅ **URL:** http://localhost:3000/app/dashboard (after login)

**What to Test:**
- [ ] Sidebar shows on left (desktop) or hamburger menu (mobile)
- [ ] 4 stat cards display:
  - Total Views
  - Responses
  - Completion Rate
  - Avg. Time to Complete
- [ ] Surveys table shows "Customer Satisfaction — Q3 2026"
- [ ] "New Survey" button visible
- [ ] Sidebar highlights "Dashboard" (not Analytics or other items)
- [ ] **Mobile:** Tap hamburger → sidebar slides in → tap outside → sidebar closes

---

### Step 4: Test Survey Filler
✅ **URL:** http://localhost:3000/s/demo-csat-web-link-1

**What to Test:**
- [ ] Welcome screen shows with "Start survey" button
- [ ] Click "Start survey"
- [ ] **Question 1 (NPS):** Shows 0-10 buttons
  - Click any number (e.g., 9)
  - Click "Next →"
- [ ] **Question 2 (Multiple Choice):** "Which feature do you value most?"
  - Should show 4 choice buttons:
    - Analytics
    - Survey Builder
    - Integrations
    - Branding
  - Click any choice
  - Click "Next →"
- [ ] **Question 3 (Text):** "What made your experience great?"
  - Should show large text area
  - Type something
  - Click "Submit →"
- [ ] Thank you screen shows ✓
- [ ] **Mobile:** All buttons are large and easy to tap

---

### Step 5: Test Survey Builder
✅ **URL:** http://localhost:3000/app/dashboard → Click "New Survey"

**What to Test:**
1. **Create New Survey:**
   - [ ] Should redirect to `/app/surveys/[id]/build`
   - [ ] Builder loads with 3 sections (desktop) or tabs (mobile)
   
2. **Add Questions:**
   - [ ] Click "Multiple Choice" from library
   - [ ] Question appears in center canvas
   - [ ] Right panel shows settings
   - [ ] 3 default options: Option A, B, C
   
3. **Edit Question:**
   - [ ] Change question text in settings panel
   - [ ] Add a new option with "+ Add option"
   - [ ] Remove an option (trash icon)
   - [ ] Toggle "Required" switch
   - [ ] Check "Autosaved just now" appears
   
4. **Drag to Reorder:**
   - [ ] Add another question
   - [ ] Drag questions to reorder
   
5. **Branching Logic:**
   - [ ] Select a question
   - [ ] In settings: "If answer is…" → select an option
   - [ ] "Then" → "End survey"
   
6. **Publish:**
   - [ ] Click "Publish" button
   - [ ] Confirm dialog
   - [ ] Redirects to Distribute page

---

### Step 6: Test Analytics
✅ **URL:** From dashboard → Click on "Customer Satisfaction — Q3 2026" → Results tab

**What to Test:**
- [ ] Analytics page loads
- [ ] Top stats show:
  - Total responses (143)
  - Completion rate (71.5%)
  - Avg completion time
- [ ] **NPS Chart** displays (bar chart with promoters/passives/detractors)
- [ ] **Multiple Choice Chart** displays (horizontal bars)
- [ ] **Word Cloud** displays for open text
- [ ] **Timeline Chart** (responses over time)
- [ ] **Traffic Sources** pie chart
- [ ] **Respondents Table** at bottom
- [ ] Filter by date range (7d, 30d, 90d, all)
- [ ] Export buttons visible (CSV, PDF)
- [ ] **Mobile:** Charts should be horizontally scrollable if needed

---

### Step 7: Test Distribute Page
✅ **URL:** From survey → Click "Distribute" or go to `/app/surveys/[surveyId]/distribute`

**What to Test:**
- [ ] Shows 3 collector types:
  - Web Link
  - Embed Code
  - QR Code
- [ ] Copy link button works
- [ ] QR code displays
- [ ] Embed code shows
- [ ] Each collector has on/off toggle

---

### Step 8: Test Billing Page
✅ **URL:** http://localhost:3000/app/billing

**What to Test:**
- [ ] Current plan shows (Pro Plan for demo account)
- [ ] 3 plan tiers display: Free, Pro, Enterprise
- [ ] Each plan shows:
  - Price
  - Response limit
  - Features list
  - "Current Plan" or "Upgrade" button
- [ ] Invoice history table at bottom
- [ ] **Mobile:** Plan cards should stack vertically

---

### Step 9: Test Audience Page
✅ **URL:** http://localhost:3000/app/audience

**What to Test:**
- [ ] Shows "Audience management coming soon" message
- [ ] Icon displays
- [ ] Proper layout in AppShell

---

### Step 10: Test Logout
✅ **From any page in app**

**What to Test:**
- [ ] User avatar/name visible in sidebar bottom
- [ ] Click on user menu or manually go to `/api/auth/signout`
- [ ] Confirms logout
- [ ] Redirects to home page

---

## 🧪 Advanced Testing

### Test Registration Flow
1. Go to http://localhost:3000/register
2. Enter new details:
   - Name: Test User
   - Email: test@example.com
   - Password: Test1234!
3. Click "Create account"
4. Should redirect to `/onboarding`
5. Fill workspace details
6. Complete onboarding
7. Should land on dashboard

### Test Forgot Password
1. Go to http://localhost:3000/forgot-password
2. Enter email
3. Form submits (email not sent in dev, but form works)

### Test Survey Response Submission
1. Open `/s/demo-csat-web-link-1` in incognito
2. Fill entire survey
3. Submit
4. Check dashboard → responses count should increase
5. Check analytics → new response appears

### Test Keyboard Navigation
1. On survey filler:
   - Press 1-9 keys for multiple choice
   - Press Enter to go next
   - Ctrl+Enter in text areas to submit

### Test Error Handling
1. Try to access survey builder without login → should redirect to login
2. Try invalid survey slug: `/s/invalid-slug` → should show 404
3. Try to login with wrong password → should show error message

---

## 📱 Mobile Responsive Testing

### Breakpoints to Test
1. **Mobile:** 375px width
2. **Tablet:** 768px width
3. **Desktop:** 1440px width

### What to Check on Mobile
- [ ] Hamburger menu appears in sidebar
- [ ] All buttons are at least 44x44px (touch-friendly)
- [ ] Text is readable (minimum 14px)
- [ ] No horizontal scrolling (except charts)
- [ ] Forms are easy to fill
- [ ] Navigation is intuitive

### How to Test Responsiveness
1. Open DevTools (F12)
2. Click device toggle (Ctrl+Shift+M)
3. Select "iPhone 12 Pro" or "Pixel 5"
4. Navigate through all pages
5. Test all interactions

---

## 🐛 Common Issues & Solutions

### Issue: Can't login
**Solution:** Check if database is seeded:
```powershell
cd e:\next-survey
npm run db:seed
```

### Issue: "Database connection failed"
**Solution:** Ensure MySQL is running:
```powershell
docker compose up -d
```

### Issue: Survey filler shows blank
**Solution:** This is now fixed! Empty choices show fallback message.

### Issue: Sidebar wrong highlight
**Solution:** This is now fixed! Only correct item highlights.

### Issue: Build errors
**Solution:** Run build to check:
```powershell
npm run build
```

---

## ✅ Success Criteria

### All Tests Pass When:
- [ ] All pages load without errors
- [ ] All navigation works correctly
- [ ] Forms submit successfully
- [ ] Charts and data display correctly
- [ ] Responsive design works on all screen sizes
- [ ] No console errors (check F12 DevTools)
- [ ] No TypeScript errors
- [ ] Build completes successfully

---

## 🎯 Test Results Summary

| Feature | Status | Notes |
|---------|--------|-------|
| Landing Page | ⏳ Testing | |
| Login/Register | ⏳ Testing | |
| Dashboard | ⏳ Testing | |
| Survey Builder | ⏳ Testing | |
| Survey Filler | ⏳ Testing | |
| Analytics | ⏳ Testing | |
| Billing | ⏳ Testing | |
| Audience | ⏳ Testing | |
| Responsive Design | ⏳ Testing | |

**Legend:** ✅ Pass | ❌ Fail | ⏳ Testing

---

## 📞 Need Help?

If you find any issues:
1. Check browser console (F12) for errors
2. Check terminal for server errors
3. Check `.env` file for correct DB credentials
4. Verify MySQL is running: `docker compose ps`
5. Restart dev server: `Ctrl+C` then `npm run dev`

---

## 🚀 Quick Test Command

Run all automated checks:
```powershell
# Lint
npm run lint

# Type check & build
npm run build

# Database check
npm run db:migrate
```

All should pass without errors!