test

What this skill does

# Test

## Testing Checklist

```
Feature Testing:
- [ ] Happy path works (main user flow)
- [ ] Edge cases handled (empty, long, invalid data)
- [ ] Error messages clear and helpful
- [ ] Works on mobile (iOS and Android)
- [ ] Works in Safari, Chrome, Firefox
- [ ] Loading states show during waits
- [ ] Forms validate input
- [ ] Can't break it with weird input
- [ ] Back button works correctly
- [ ] Page refresh doesn't lose data
```

See [TEST-SCENARIOS.md](TEST-SCENARIOS.md) for detailed scenarios.

---

## When to Test

**Test when:**
- Feature just built by AI
- Before deploying to production
- After fixing a bug (verify fix works)
- Users report issues (reproduce first)

**Don't test:**
- While AI is still building
- Before feature is complete
- Every tiny change (batch test features)

**Rule:** Build → Test → Fix → Test again → Deploy

---

## Structured QA Workflow

Don't test randomly. Follow this sequence every time.

### Step 1: Orient — What Exists?

Before testing, know what you're testing. Walk through your app and list every page and feature.

```
Map Your App:
- [ ] List every page (home, dashboard, settings, etc.)
- [ ] List every form (signup, contact, create/edit)
- [ ] List every button that does something
- [ ] List every integration (payments, email, third-party)
```

### Step 2: Explore — Visit Everything Systematically

Go through every page, every button, every form. Don't skip pages you "know" work.

**Tell AI:**
```
Go through every page of my app. Click every button. Fill every form.
Submit every action. Tell me what's broken, what looks wrong, and what
behaves unexpectedly. For each issue, tell me:
- What page it's on
- What you did
- What happened vs. what should happen
- How severe it is (blocks users vs. cosmetic)
```

### Step 3: Score — Rate Your App's Health

Rate your app 1-10 on each dimension. Be honest — this is for you.

```
App Health Score:
                                      Score (1-10)
Does it load fast? (under 3 seconds)  ___
Do all buttons/links work?            ___
Do forms submit correctly?            ___
Do error messages make sense?         ___
Does it work on mobile?               ___
Is the core flow completable?         ___
                              Total:  ___/60

50-60: Ready to ship
40-49: Fix the gaps, then ship
30-39: Significant issues — fix before showing users
<30:   Major problems — keep building before testing
```

### Step 4: Fix and Re-Verify

After each fix, re-test **two things**: the thing that was broken AND the things that were working. AI fixes often break something else.

```
After Every Fix:
- [ ] Original bug is resolved
- [ ] Core signup/login flow still works
- [ ] Core action still works
- [ ] No new visual issues on the page you changed
```

### Step 5: The Fresh Eyes Test

Have someone who's never seen your app try to sign up and complete the core action. Watch without helping. What surprises you?

- Where do they hesitate?
- What do they click that you didn't expect?
- Where do they get confused but don't say anything?
- Can they describe what the app does after using it for 2 minutes?

This test reveals more than a week of solo testing. The things you "know" are obvious often aren't.

---

## Manual Testing Checklist

```
1. Test happy path
   - Does the main flow work?
   - Can user complete the task?

2. Test edge cases
   - What if field is empty?
   - What if text is very long?
   - What if user clicks twice?

3. Test on mobile
   - Open on real phone
   - Test main actions
   - Check layout doesn't break

4. Test in different browsers
   - Chrome (most users)
   - Safari (iOS users)
   - Firefox (some users)

5. Document issues
   - Screenshot the problem
   - Write exact steps to reproduce
   - Give to AI to fix
```

---

## Testing Edge Cases

**Always test these:**

**Empty data:**
- What shows when no items in list?
- What happens with empty form field?
- Is placeholder/empty state clear?

**Long data:**
- Very long name (200 characters)
- Very long text (10,000 characters)
- Does layout break?

**Invalid data:**
- Invalid email format
- Negative numbers where not allowed
- Special characters in text field
- SQL characters ('; DROP TABLE)

**Boundary cases:**
- Exactly at limit (100 char limit, enter 100)
- Just over limit (enter 101)
- Zero/empty values

**Tell AI:**
```
Test these edge cases:
- Empty username: show "Required"
- Username too long (>50 chars): show "Max 50 characters"
- Username with spaces: show "No spaces allowed"
- Special characters: show "Letters and numbers only"
```

See [EDGE-CASES.md](EDGE-CASES.md) for comprehensive list.

---

## Testing on Mobile

**Minimum mobile tests:**

```
Mobile Testing:
- [ ] Page loads and looks correct
- [ ] Can tap all buttons (44px minimum)
- [ ] Forms work (keyboard appears)
- [ ] No horizontal scroll
- [ ] Images load and fit screen
- [ ] Navigation works
- [ ] Can complete main user flow
```

**Test on:**
- iPhone (Safari) - Most common iOS
- Android phone (Chrome) - Most common Android

**Don't need to test:**
- Every phone model
- Tablets (unless primary use case)
- Landscape mode (unless important)

---

## Cross-Browser Testing

**Priority order:**

1. **Chrome** (65% of users) - Test thoroughly
2. **Safari** (20% of users) - Test main flows
3. **Firefox** (5% of users) - Quick check
4. **Edge** (5% of users) - Usually works if Chrome works

**Common browser issues:**
- Date pickers look different
- Flexbox behaves differently
- Scrolling momentum feels different
- Animations may not work on old Safari

**Quick test:**
```
Open in each browser:
1. Load homepage
2. Sign up / Log in
3. Complete 1-2 main actions
4. Check nothing is broken
```

---

## Testing Forms

**Form validation testing:**

```
Form Testing Checklist:
- [ ] Required fields show error if empty
- [ ] Email validation works (format check)
- [ ] Password requirements enforced
- [ ] Can't submit invalid form
- [ ] Error messages clear and specific
- [ ] Success message shows after submit
- [ ] Form disables during submit (no double-submit)
- [ ] Errors clear when user fixes them
```

**Tell AI:**
```
Test form validation:
- Required field left empty: "This field is required"
- Invalid email: "Enter a valid email address"
- Weak password: "Password must be 8+ characters with 1 number"
- All valid: Allow submit
- Show errors inline, not alert()
```

---

## Testing Authentication

**Auth flow testing:**

```
Auth Testing:
- [ ] Can sign up with valid info
- [ ] Can't sign up with existing email
- [ ] Can log in with correct password
- [ ] Can't log in with wrong password
- [ ] Can reset password via email
- [ ] Session expires after timeout
- [ ] Logout works (can't access protected pages)
- [ ] Can't access protected routes without login
- [ ] Redirect to login when session expires
```

---

## Testing Integrations

**Third-party services:**

**Payment (Stripe):**
```
- [ ] Test card (4242 4242 4242 4242) processes
- [ ] Declined card shows error
- [ ] Receipt email sent
- [ ] Subscription status updates
- [ ] Can cancel subscription
```

**Email (SendGrid):**
```
- [ ] Welcome email sends on signup
- [ ] Password reset email arrives
- [ ] Emails have correct content
- [ ] Links in email work
- [ ] Unsubscribe link works
```

**Tell AI:**
```
Add test mode checking:
Log when using test API keys.
Show banner: "TEST MODE - No real charges"
Use Stripe test cards only in development.
```

---

## Finding Bugs Yourself

**How to break your app:**

**1. Click fast and repeatedly**
- Double-click submit button
- Click back button quickly
- Refresh during loading

**2. Enter unexpected data**
- Copy/paste 10,000 characters
- Enter emojis 🎉 in text fields
- Try SQL: `'; DROP TABLE users;--`
- Enter HTML: `<script>alert('xss')</script>`

**3. Change state unexpectedly**
- Log out in another tab
- Let session expire, then try action
- Open same page in multiple tabs

**4. Use slow connection**
- Chrome DevTools → Network → Slow 3G
- T