test

Original source / Raw SKILL.md

---
name: test
description: Test features before users find bugs. Use when feature is built, before deploying, or when bugs reported. Covers manual testing, edge cases, cross-browser testing, and testing checklists for non-technical founders.
---

# 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

---

## Manual Testing Workflow

```
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
- Try all main actions
- Do loading states show?

See [BREAKING-THINGS.md](BREAKING-THINGS.md) for full list.

---

## Documenting Bugs

**Bug report template:**

```
Bug: [Short description]

Steps to reproduce:
1. [First action]
2. [Second action]
3. [What triggers the bug]

Expected: [What should happen]
Actual: [What actually happened]

Screenshot: [Attach if visual]
Browser: [Chrome 120 on Mac]
URL: [Where it happened]
Frequency: [Always / Sometimes / Once]
```

**Give to AI to fix:**
```
Bug found: [paste bug report]

Please:
1. Reproduce the bug
2. Identify root cause
3. Fix the issue
4. Verify fix works
5. Test that fix didn't break anything else
```

---

## Regression Testing

**After fixing a bug, test:**

```
Regression Checklist:
- [ ] Original bug is fixed
- [ ] Happy path still works
- [ ] Related features still work
- [ ] No new errors in console
- [ ] No new visual issues
```

**Common regression issues:**
- Fix breaks different browser
- Fix breaks mobile layout
- Fix breaks related feature
- Fix introduces new edge case bug

---

## Pre-Deployment Checklist

**Before pushing to production:**

```
Production Readiness:
- [ ] All features tested (happy path + edge cases)
- [ ] Works on mobile (iPhone + Android)
- [ ] Works in Safari and Chrome
- [ ] No console errors
- [ ] Forms validate correctly
- [ ] Authentication works
- [ ] No test data visible
- [ ] Error messages are user-friendly
- [ ] Loading states show
- [ ] Can't break it with weird input
```

---

## When to Get QA Help

**Consider hiring QA when:**
- > 10 features to test before launch
- Complex user flows (multi-step processes)
- Multiple integrations to verify
- Preparing for big launch (> 1000 users)

**For most MVPs:** Following this checklist is sufficient.

---

## Common Testing Mistakes

| Mistake | Fix |
|---------|-----|
| Only test happy path | Test edge cases too |
| Test only on Chrome desktop | Test mobile + Safari |
| Skip testing forms | Forms are where bugs hide |
| Test while AI still building | Wait until feature complete |
| Ignore console errors | Fix all errors before deploy |
| Test with perfect data | Test empty, long, invalid data |

---

## Quick Testing Shortcuts

**5-minute quick test:**
```
1. Load page in Chrome
2. Complete main user flow
3. Try one edge case (empty field)
4. Check mobile view (Chrome DevTools)
5. Look for console errors
```

**15-minute thorough test:**
```
1. Happy path in Chrome
2. 3-4 edge cases
3. Test on real phone
4. Check Safari
5. Try to break it (fast clicks, weird input)
6. Check all error messages
```

---

## Testing Tools

**Built into browser:**
- Chrome DevTools (Inspect)
- Network tab (check API calls)
- Console (check for errors)
- Device mode (test mobile sizes)
- Lighthouse (performance + best practices)

**Free external tools:**
- BrowserStack (free trial) - Test on real devices
- Can I Use (caniuse.com) - Check browser support
- Validator.nu - Check HTML validity

**Usually don't need:**
- Automated testing frameworks (too complex for non-technical)
- Paid testing services (manual testing sufficient for MVP)

---

## Success Looks Like

✅ Main user flow works perfectly  
✅ Edge cases handled gracefully  
✅ Works on mobile and desktop  
✅ Works in Chrome and Safari  
✅ Error messages clear and helpful  
✅ Can't break it with weird input  
✅ No bugs reported by users

---

## Referenced Files

> The following files are referenced in this skill and included for context.

### TEST-SCENARIOS.md

```markdown
# Testing Scenarios

Common scenarios to test for SaaS applications.

---

## Authentication Scenarios

### Signup Flow
```
Happy Path:
1. Enter valid email and password
2. Click "Sign Up"
3. See "Check your email" message
4. Click link in email
5. Redirected to dashboard

Edge Cases:
- Email already registered: "Email already in use"
- Weak password: "Password must be 8+ characters"
- Invalid email format: "Enter valid email"
- Email link expired: "Link expired. Request new one"
- Email link already used: "Already confirmed. Log in"
```

### Login Flow
```
Happy Path:
1. Enter correct email and password
2. Click "Log In"
3. Redirected to dashboard

Edge Cases:
- Wrong password: "Invalid email or password"
- Account doesn't exist: "Invalid email or password"
- Too many attempts: "Too many attempts. Try again in 15 minutes"
- Session expired: Redirect to login with message
```

### Password Reset
```
Happy Path:
1. Click "Forgot Password"
2. Enter email
3. Click link in email
4. Enter new password
5. See "Password updated" message
6. Can log in with new password

Edge Cases:
- Email not found: "If email exists, we sent a link"
- Reset link expired: "Link expired. Request new one"
- Passwords don't match: "Passwords must match"
- Weak new password: "Password requirements not met"
```

---

## Form Scenarios

### Contact Form
```
Happy Path:
1. Fill in name, email, message
2. Click "Send"
3. See "Message sent!" confirmation
4. Form clears

Edge Cases:
- Missing required field: "This field is required"
- Invalid email: "Enter valid email address"
- Message too short: "Message must be at least 10 characters"
- Submit while loading: Button disabled, show spinner
- Network error: "Could not send. Try again"
```

### Profile Update
```
Happy Path:
1. Change name
2. Upload new photo
3. Click "Save"
4. See "Profile updated!" message
5. Changes reflected immediately

Edge Cases:
- No changes made: "No changes to save"
- Image too large: "Image must be under 5MB"
- Invalid image type: "Only JPG and PNG allowed"
- Name too long: "Max 50 characters"
- Save during upload: Wait for upload, then save
```

---

## Data Display Scenarios

### List/Table View
```
Happy Path:
1. Load page
2. See list of items
3. Click item to view details
4. Navigate between pages

Edge Cases:
- No items: "No items yet. Create your first one!"
- Loading: Show skeleton/spinner
- Error loading: "Could not load. Try refreshing"
- Very long list: Paginate (50 items/page)
- Search with no results: "No matches found"
```

### Dashboard
```
Happy Path:
1. Load dashboard
2. See metrics update
3. Charts render correctly
4. Data is current

Edge Cases:
- No data yet: "Getting started? Here's what to do"
- Data still loading: Show skeleton cards
- API fails: Show cached data + "Using cached data"
- Very large numbers: Format (1.2M not 1200000)
- Negative values: Handle gracefully (red color, parentheses)
```

---

## Payment Scenarios

### Checkout
```
Happy Path:
1. Select plan
2. Enter card details (Stripe)
3. Click "Subscribe"
4. See success message
5. Receive email receipt
6. Access pro features

Edge Cases:
- Card declined: "Payment failed. Try different card"
- Missing card details: "Enter card information"
- Invalid card: "Invalid card number"
- Expired card: "Card is expired"
- Network timeout: "Payment processing. Check email for confirmation"
```

### Subscription Management
```
Happy Path:
1. View current plan
2. Change to different plan
3. Confirm change
4. See updated features
5. Receive confirmation email

Edge Cases:
- Downgrade with data loss: "Downgrading will remove X. Continue?"
- Cancel subscription: "Cancel subscription? Access until [date]"
- Reactivate cancelled: "Reactivate subscription?"
- Payment method failed: "Update payment method to continue"
```

---

## File Upload Scenarios

### Single File Upload
```
Happy Path:
1. Click "Upload"
2. Select file
3. See progress bar
4. File uploads successfully
5. See uploaded file

Edge Cases:
- File too large: "Max 5MB"
- Wrong file type: "Only PDF and images allowed"
- Network error during upload: "Upload failed. Try again"
- File with same name exists: "File already exists. Replace?"
- Cancel during upload: Stop upload, remove partial
```

### Multiple Files
```
Happy Path:
1. Select multiple files
2. See all files listed
3. Upload starts automatically
4. Progress shown for each
5. All succeed

Edge Cases:
- Some files invalid: "3 files uploaded, 2 failed"
- Mixed success/failure: Show status per file
- Very slow connection: Show time remaining estimate
- Upload folder: "Folders not supported"
```

---

## Search Scenarios

### Basic Search
```
Happy Path:
1. Enter search term
2. Results appear instantly
3. Click result to view
4. Highlight matching text

Edge Cases:
- No results: "No matches for 'term'. Try different keywords"
- Search while typing: Debounce (wait 300ms)
- Special characters: Handle gracefully
- Very long search term: Truncate, still search
- Empty search: Show all items or recent
```

### Advanced Search
```
Happy Path:
1. Enter search with filters
2. Results match all criteria
3. Clear filters individually
4. Results update

Edge Cases:
- Conflicting filters: "No items match all filters"
- Invalid date range: "End date must be after start date"
- Too many results: "500+ results. Narrow your search"
- Filters with no results: "0 results. Try removing filters"
```

---

## Navigation Scenarios

### Multi-Step Form
```
Happy Path:
1. Complete step 1
2. Click "Next"
3. Complete step 2
4. Click "Next"
5. Review and submit
6. See confirmation

Edge Cases:
- Click "Next" without completing: "Complete required fields"
- Click "Back": Previous data preserved
- Refresh page mid-flow: Resume where left off
- Abandon and return: Resume or start over?
- Invalid step: Jump directly to step 3 in URL
```

### Tabs
```
Happy Path:
1. Click tab
2. Content switches
3. Tab stays active on refresh
4. Deep link to tab works

Edge Cases:
- Unsaved changes: "You have unsaved changes. Leave?"
- Loading new tab: Show loading state
- Tab with error: Show error, don't break all tabs
- Too many tabs: Horizontal scroll or dropdown
```

---

## Real-Time Scenarios

### Live Updates
```
Happy Path:
1. Data changes on server
2. UI updates automatically
3. Smooth transition, no flicker
4. User sees latest data

Edge Cases:
- User editing during update: Don't overwrite
- Conflict (2 users edit): Show conflict resolution
- Connection lost: Show "Offline" banner
- Reconnect: Sync changes, show what happened
```

### Notifications
```
Happy Path:
1. Event occurs
2. Notification appears
3. Click to view details
4. Mark as read

Edge Cases:
- Many notifications: Group similar ones
- Notification while typing: Don't interrupt
- Old notifications: Auto-mark read after 7 days
- Disabled notifications: Store, show in app only
```

---

## Error Recovery Scenarios

### Network Failure
```
Test:
1. Start action
2. Disable network (DevTools)
3. Action fails
4. Re-enable network
5. Retry action

Expected:
- Clear error message
- Easy retry (button or auto-retry)
- Don't lose user's data
- Recover gracefully when back online
```

### Session Expiry
```
Test:
1. Log in
2. Wait 30 minutes (or change system time)
3. Try to perform action
4. Session expired

Expected:
- Redirect to login
- Show "Session expired. Please log in"
- After re-login, return to where they were
- Don't lose unsaved data if possible
```

---

## Mobile-Specific Scenarios

### Portrait/Landscape
```
Test:
1. Open app in portrait
2. Rotate to landscape
3. Rotate back to portrait

Expected:
- Layout adapts smoothly
- No content cut off
- Maintain scroll position
- Inputs don't lose focus
```

### Touch Interactions
```
Test:
1. Tap buttons (not click)
2. Swipe to scroll
3. Pinch to zoom (if allowed)
4. Long press (if used)

Expected:
- Tap targets 44x44px minimum
- No hover states (they stick)
- Smooth scrolling
- No accidental taps
```

---

## Accessibility Scenarios

### Keyboard Navigation
```
Test:
1. Use only Tab key
2. Navigate through forms
3. Submit with Enter
4. Escape closes modals

Expected:
- All interactive elements reachable
- Visible focus indicator
- Logical tab order
- Shortcuts work
```

### Screen Reader
```
Test (with VoiceOver/NVDA):
1. Navigate page with screen reader
2. Forms are labeled
3. Buttons are described
4. Images have alt text

Expected:
- Content makes sense
- No "button button button"
- Form errors announced
- Skip links available
```

---

## Quick Scenario Checklist

**Before every deploy:**
```
- [ ] Sign up and log in
- [ ] Complete main user flow
- [ ] Submit a form (valid and invalid)
- [ ] Upload a file
- [ ] Search for something
- [ ] View list/table
- [ ] Edit something and save
- [ ] Delete something
- [ ] Check mobile layout
- [ ] Try in Safari
```
```

### EDGE-CASES.md

```markdown
# Edge Case Testing

Comprehensive list of edge cases to test.

---

## Input Edge Cases

### Text Fields

**Empty:**
- Required field left blank
- Optional field left blank
- Space-only input ("   ")

**Length:**
- Exactly at max limit (if 50 chars, enter 50)
- One over max limit (enter 51)
- Extremely long (10,000 characters)
- Single character

**Special characters:**
- Emoji: 🎉💀🔥
- Accents: café, naïve, Zürich
- Quotes: "test" 'test' `test`
- HTML: `<script>alert('xss')</script>`
- SQL: `'; DROP TABLE users;--`
- Newlines and tabs

**Case sensitivity:**
- ALL CAPS
- all lowercase
- MiXeD cAsE

---

## Number Fields

**Boundaries:**
- Zero
- Negative numbers
- Decimal numbers (if integers only)
- Very large numbers (999999999)
- Scientific notation (1e10)

**Invalid:**
- Letters in number field
- Special characters: $1,000
- Multiple decimals: 12.34.56

---

## Email Fields

**Valid formats:**
- [email protected]
- [email protected]
- [email protected]

**Invalid formats:**
- No @ sign: plaintext
- No domain: user@
- No username: @domain.com
- Multiple @: user@@example.com
- Spaces: user @example.com

---

## Date/Time Fields

**Boundaries:**
- Past dates (when not allowed)
- Future dates (when not allowed)
- February 29 (leap year)
- Invalid dates: Feb 30, April 31

**Formats:**
- Different input formats
- Different display formats
- Timezone handling

---

## Dropdown/Select

**Edge cases:**
- Nothing selected (if required)
- First option selected
- Last option selected
- Very long option text (does it truncate?)

---

## Checkboxes

**Edge cases:**
- None selected (if at least one required)
- All selected
- Checking/unchecking rapidly

---

## File Upload

**File types:**
- Correct type (PDF, JPG)
- Wrong type (EXE, ZIP)
- No extension: file
- Multiple extensions: file.pdf.exe

**File sizes:**
- Empty file (0 bytes)
- Exactly at limit (5MB file, 5MB limit)
- Slightly over limit (5.1MB)
- Huge file (100MB+)

**File names:**
- Very long filename (200+ chars)
- Special characters: file!@#$.jpg
- Non-English: 文档.pdf
- Spaces: my file.pdf
- No extension

---

## List/Table Edge Cases

**Data volume:**
- Empty list (0 items)
- Single item
- Exactly one page (50 items)
- Multiple pages (500 items)
- Huge list (10,000+ items)

**Item content:**
- Very long title (breaks layout?)
- No title/description
- Special characters in data
- Mixed data types

---

## URL/Link Edge Cases

**Valid URLs:**
- https://example.com
- http://example.com (if allowed)
- www.example.com (missing protocol)
- example.com (missing protocol)

**Invalid URLs:**
- Not a URL: "banana"
- JavaScript: javascript:alert('xss')
- Internal IPs: http://192.168.1.1
- File protocol: file:///etc/passwd

---

## User Action Edge Cases

### Timing

**Too fast:**
- Double-click submit button
- Click back button immediately
- Type and submit before validation

**Too slow:**
- Fill form, wait 30 min, submit
- Start action, let session expire
- Open page, leave for hour, interact

### Multiple actions

**Concurrent:**
- Open same page in 2 tabs
- Edit in tab 1, save in tab 2
- Log out in one tab, act in another

**Repeated:**
- Click button 10 times fast
- Submit form 5 times
- Refresh page repeatedly

### Unexpected order

**Skip steps:**
- Navigate directly to step 3 of 5
- Access protected route while logged out
- Submit without filling required fields

**Go backwards:**
- Click back button after submit
- Use browser back (not app navigation)
- Edit after finalizing

---

## Network Edge Cases

**Connection:**
- Slow connection (3G)
- Disconnected mid-action
- Intermittent connection
- Very high latency (500ms+)

**Errors:**
- 500 Internal Server Error
- 404 Not Found
- 503 Service Unavailable
- Timeout (no response)

---

## Browser/Device Edge Cases

### Browser

**Storage:**
- Cookies disabled
- Local storage full
- Private/incognito mode

**Settings:**
- JavaScript disabled
- Ad blocker active
- Browser extensions interfering

### Device

**Screen sizes:**
- Very small (320px width)
- Very large (4K monitor)
- Non-standard aspect ratio

**Performance:**
- Old/slow device
- Low memory
- CPU throttled

---

## Data State Edge Cases

**New user:**
- First login (onboarding flow)
- No data created yet
- Empty dashboard

**Active user:**
- Normal amount of data
- Some incomplete actions
- Recent activity

**Power user:**
- Lots of data (1000+ items)
- Complex setup
- Heavy usage patterns

**Inactive user:**
- Account dormant for months
- Old data format
- Deprecated features used

---

## Authentication Edge Cases

**Session:**
- Session expired mid-action
- Multiple concurrent sessions
- Session hijacking attempts

**Permissions:**
- Try to access admin route as regular user
- View another user's data
- Edit data you don't own

**Token:**
- Expired token
- Invalid token
- Missing token
- Malformed token

---

## Payment Edge Cases

**Card validation:**
- Test card: 4242 4242 4242 4242
- Declined card: 4000 0000 0000 0002
- Insufficient funds: 4000 0000 0000 9995
- Expired card
- Invalid CVV

**Billing:**
- Upgrade mid-cycle
- Downgrade mid-cycle
- Cancel with refund
- Failed payment retry

---

## Search Edge Cases

**Query:**
- Empty search
- Single character: "a"
- Very long query (500 chars)
- Special characters: *?%
- SQL injection attempt

**Results:**
- No results
- One result
- Thousands of results
- Exact match
- Partial match

---

## Real-Time Edge Cases

**Updates:**
- Data changes while user viewing
- Conflict: two users edit same item
- Delete item user is viewing
- Update item user is editing

**Notifications:**
- Single notification
- 100 notifications at once
- Notification while user typing
- Old unread notifications

---

## Mobile-Specific Edge Cases

**Gestures:**
- Swipe vs scroll
- Long press
- Pinch to zoom (if allowed)
- Pull to refresh

**Orientation:**
- Start portrait, rotate to landscape
- Rotate while form open
- Rotate during action

**Keyboard:**
- Keyboard covers input
- Auto-correct changes input
- Keyboard shortcuts (if any)

---

## Quick Edge Case Test

**10-minute edge case test:**
```
1. Leave required field empty → error?
2. Enter 1000 characters in text field → truncate or error?
3. Double-click submit button → prevents double submit?
4. Enter HTML/SQL in text field → sanitized?
5. Upload 10MB file (over limit) → clear error?
6. Go offline, try action → handles gracefully?
7. Very long item name → layout breaks?
8. Open 2 tabs, log out in one → other tab handles?
9. Enter invalid email → validates?
10. Submit form, immediately refresh → doesn't resubmit?
```
```

### BREAKING-THINGS.md

```markdown
# Breaking Things on Purpose

How to intentionally break your app to find bugs before users do.

---

## Why Break Things?

Users are creative at finding bugs. They:
- Click too fast
- Enter weird data
- Use your app in unexpected ways
- Have slow connections
- Use old browsers

**Better you find bugs than users.**

---

## The Chaos Monkey Approach

### 1. Click Everything Rapidly

```
Test: Click submit button 10 times fast
Good: Button disables after first click
Bad: Creates 10 duplicate submissions

Test: Click between tabs rapidly
Good: Tabs switch smoothly, no errors
Bad: UI breaks, data gets mixed up

Test: Navigate back/forward fast
Good: Pages load correctly
Bad: Page shows wrong data or errors
```

### 2. Enter Absurd Data

```
Test: Enter 10,000 characters in "name" field
Good: Truncates to 50 chars or shows error
Bad: Breaks layout or crashes

Test: Enter: <script>alert('xss')</script>
Good: Sanitizes input, stores as plain text
Bad: Alert appears (XSS vulnerability)

Test: Enter: '; DROP TABLE users;--
Good: Treated as plain text
Bad: Database error (SQL injection)
```

### 3. Do Things Out of Order

```
Test: Go directly to step 3 of 5 (URL hack)
Good: Redirects to step 1 or shows error
Bad: Breaks or skips validation

Test: Submit form before fields loaded
Good: Form disabled until ready
Bad: Submits partial/empty data

Test: Edit item you just deleted
Good: Shows "Item not found"
Bad: Crashes or shows stale data
```

### 4. Refresh at Wrong Times

```
Test: Refresh during form submission
Good: Shows confirmation or idempotent
Bad: Submits twice

Test: Refresh during file upload
Good: Upload cancels or resumes
Bad: Partial file saved or error

Test: Refresh after successful action
Good: Shows result, no re-execution
Bad: Action runs again
```

---

## Network Chaos

### Simulate Slow Connection

**Chrome DevTools:**
1. Open DevTools (F12)
2. Network tab
3. Dropdown: "Slow 3G"
4. Try your app

**What breaks:**
- Missing loading states
- Timeouts with no error message
- Double-submits (user clicks again)
- Broken layout (images don't load)

### Simulate Offline

**Chrome DevTools:**
1. Network tab
2. Check "Offline"
3. Try actions

**What breaks:**
- No offline message shown
- Actions fail silently
- Error messages unhelpful
- Can't recover when back online

### Interrupt Actions

```
Test: Start upload, disable network
Good: Shows error, allows retry
Bad: Hangs forever or crashes

Test: Submit form, go offline mid-request
Good: Shows "Connection lost, retrying..."
Bad: Form clears or shows success incorrectly
```

---

## Authentication Chaos

### Expired Sessions

```
Test: Log in, wait 30 min, try action
Good: Redirects to login with clear message
Bad: Shows generic error or crashes

Test: Open app in 2 tabs, logout in one
Good: Other tab detects logout
Bad: Other tab breaks on next action
```

### Permission Chaos

```
Test: Regular user tries /admin URL
Good: 403 error or redirect with message
Bad: Shows admin page or crashes

Test: Edit URL to view other user's data
Good: Permission denied
Bad: Shows other user's data (security issue!)
```

### Token Manipulation

```
Test: Clear auth token, try protected action
Good: Redirects to login
Bad: Shows error page or crashes

Test: Modify token in DevTools, make request
Good: Rejects invalid token
Bad: Accepts tampered token (security issue!)
```

---

## Data Chaos

### Empty States

```
Test: New account, view dashboard
Good: Clear empty state with action
Bad: Blank page or loading forever

Test: Delete all items, view list
Good: "No items" with "Create" button
Bad: Error or broken layout
```

### Volume Stress

```
Test: Create 1000 items, load list
Good: Paginates, loads quickly
Bad: Crashes or takes minutes

Test: Upload 100 files at once
Good: Handles or limits queue
Bad: Crashes or uploads fail
```

### Weird Characters

```
Test: Name with emoji: "John 🎉 Doe"
Good: Saves and displays correctly
Bad: Breaks display or saves incorrectly

Test: Bio with every special char: !@#$%^&*()
Good: Handles gracefully
Bad: Breaks layout or parsing
```

---

## Browser Chaos

### Different Browsers

```
Test in Safari (iOS):
- Dates formatted differently
- Flexbox behaves differently
- Some CSS might not work

Test in Firefox:
- Extensions might interfere
- Scrolling feels different
- Input behaviors vary
```

### Browser Settings

```
Test: Disable JavaScript
Good: Shows "Please enable JS" message
Bad: Blank page

Test: Disable cookies
Good: Still works or clear message
Bad: Infinite redirect or error

Test: Enable "Do Not Track"
Good: Respects privacy setting
Bad: Tracking breaks app
```

### Extensions

```
Test: Ad blocker active
Good: App works (maybe disable ads gracefully)
Bad: App breaks or loads forever

Test: Password manager active
Good: Plays nice with autofill
Bad: Double-fills fields or breaks
```

---

## Mobile Chaos

### Rotation

```
Test: Fill form, rotate device
Good: Form data preserved
Bad: Form clears

Test: Rotate during action
Good: Action continues
Bad: Action cancels or duplicates
```

### Keyboards

```
Test: Keyboard covers input
Good: Page scrolls to show input
Bad: Can't see what you're typing

Test: Autocorrect changes input
Good: Validation still works
Bad: Form rejects valid input
```

### Gestures

```
Test: Swipe vs scroll confusion
Good: Clear distinction
Bad: Accidental actions

Test: Pinch to zoom (if not intended)
Good: Disabled on form
Bad: Zooms and breaks layout
```

---

## Timing Attacks

### Race Conditions

```
Test: Submit form, immediately click elsewhere
Good: Form submission completes
Bad: Submission cancelled

Test: Open modal, immediately press Escape
Good: Modal closes gracefully
Bad: Modal stuck or errors

Test: Load data, immediately navigate away
Good: Request cancelled, no errors
Bad: Memory leak or errors
```

### Rapid Actions

```
Test: Type very fast in search
Good: Debounces, searches after pause
Bad: Makes 50 API calls

Test: Scroll up/down rapidly
Good: Smooth, no flicker
Bad: Jumpy or errors

Test: Click pagination rapidly
Good: Loads correctly
Bad: Wrong page or duplicate requests
```

---

## Copy/Paste Attacks

### Large Pastes

```
Test: Copy 10,000 words, paste in field
Good: Truncates or shows error
Bad: Freezes or crashes

Test: Paste HTML from website
Good: Strips HTML, keeps text
Bad: Renders HTML (security issue!)
```

### Weird Paste

```
Test: Paste image in text field
Good: Ignores or shows error
Bad: Crashes

Test: Paste formatted text
Good: Strips formatting
Bad: Breaks layout
```

---

## File Upload Chaos

### File Types

```
Test: Upload .exe file (expecting .pdf)
Good: Rejects with clear message
Bad: Accepts or crashes

Test: Rename virus.exe to virus.pdf
Good: Checks file content, not just name
Bad: Accepts malicious file
```

### File Sizes

```
Test: Upload 100MB file (limit 5MB)
Good: Rejects before uploading
Bad: Uploads then fails

Test: Upload 0-byte file
Good: Rejects with message
Bad: Saves broken file
```

---

## The Nuclear Option

### Ultimate Stress Test

```
Do all of these at once:
1. Slow 3G connection
2. Fill every field with maximum data
3. Double-click all buttons
4. Open 5 tabs doing different things
5. Go offline mid-action
6. Rotate device continuously
7. Paste 10,000 characters everywhere
8. Refresh randomly

If app survives: Very robust
If app breaks: You found bugs!
```

---

## Automated Breaking (Optional)

### Simple Script

```javascript
// Run in browser console
// Clicks "submit" button 100 times
for(let i=0; i<100; i++) {
  document.querySelector('button[type="submit"]').click();
}
```

### Monkey Testing Tools

- **Gremlins.js** - Random clicks and inputs
- **FuzzDB** - Malicious input strings
- **Chrome DevTools** - Throttling, offline mode

---

## What to Do When Things Break

**When you find a bug:**

1. **Document it:**
   - Exact steps to reproduce
   - Screenshot/video
   - Browser and device
   - Frequency

2. **Assess severity:**
   - Blocker: Can't use app at all
   - Critical: Main feature broken
   - Major: Important feature broken
   - Minor: Edge case, rare issue

3. **Give to AI to fix:**
```
Found bug: [paste documentation]
Severity: [level]
Please fix and verify it doesn't break anything else.
```

4. **Test the fix:**
   - Reproduce original bug (should be gone)
   - Test related features (no regression)
   - Try to break fix in new ways

---

## Breaking Things Checklist

**Before every deploy:**
```
- [ ] Clicked buttons rapidly
- [ ] Entered 1000+ characters in fields
- [ ] Tested with slow 3G
- [ ] Tested offline scenario
- [ ] Tried to access protected routes
- [ ] Submitted forms twice
- [ ] Refreshed during actions
- [ ] Tested on mobile device
- [ ] Rotated device during use
- [ ] Tried SQL/HTML injection
```

**If nothing broke:** Either very robust or need to try harder!

```