# 🧪 Mobile App Testing Guide

## Quick Test Checklist

### 1. Mobile Detection & Redirect
- [ ] Desktop (width > 768px): Show landing page
- [ ] Mobile (width < 768px): Auto-redirect ke `/mobile-app`
- [ ] iPhone User-Agent: Auto-redirect ke `/mobile-app`
- [ ] Android User-Agent: Auto-redirect ke `/mobile-app`
- [ ] iPad landscape: Show desktop view (width > 768px)

**Test Commands**:
```bash
# Desktop view
curl -H "User-Agent: Mozilla/5.0" http://localhost:3200/ | grep -q "bfi-hero" && echo "✓ Desktop view"

# Mobile view
curl -H "User-Agent: iPhone" http://localhost:3200/ | grep -q "mobile-app" && echo "✓ Mobile redirect"
```

### 2. Login Form (Mobile)
```
URL: http://localhost:3200/mobile-app

Form Fields:
- Email input (type="email")
- Password input (type="password")
- Login button

Test Cases:
✓ Empty form → Show validation error
✓ Invalid email/password → Show Firebase error message
✓ Unverified email → Ask user to verify email first
✓ Verified but pending account → Show pending approval state
✓ Verified and approved account → Load dashboard
✓ Error message dismissal → Clear on new attempt
```

### 3. Authentication & Session
```
After successful login:
✓ Firebase ID token stored for API requests
✓ isLoggedIn flag set to 'true'
✓ User data displayed in header
✓ Dashboard loaded with real file data

Session verification:
✓ Refresh page → Still logged in
✓ Close browser tab → Re-open → Still logged in
✓ Clear localStorage → Redirect to login
```

### 4. Dashboard View
```
Visible Elements:
✓ Header with logo & brand name
✓ Stats section (Files count, Folders count)
✓ Recent files grid (2 columns)
✓ Bottom tab navigation (3 tabs)
✓ Responsive safe area (notch support)

Interactions:
✓ Click file card → Open/preview
✓ Scroll content area → No tab bar overlap
✓ Switch tabs → Tab indicator highlight
✓ Folder count matches the folders returned by the API
✓ File tab shows files grouped by folder
✓ Search filters file names, suggested titles, and tags
✓ Profile tab shows account details and permissions
```

### 5. Logout Flow
```
Click "Keluar dari akun" in Profile:
✓ Show confirm dialog with email
✓ "Cancel" → Stay logged in
✓ "OK" → Logout process
✓ All session tokens and user details removed from localStorage
✓ Redirect to login page
✓ Login form reset (empty fields)
```

### 6. Responsive Design
```
Portrait Mode (375px, 667px):
✓ All content visible (no horizontal scroll)
✓ Touch targets >= 44x44px
✓ Text readable (no tiny font)
✓ Tabs visible at bottom
✓ Header proper spacing with notch

Landscape Mode (667px, 375px):
✓ Content still readable
✓ Tab bar not covering content
✓ Header collapse properly
✓ Grid layout adjust (1 column?)

iPhone X/11 Safe Area:
✓ Content not behind notch
✓ Tabs above safe area inset
✓ Logo has padding from notch
```

### 7. Performance Tests
```
Network Throttling (Mobile Chrome DevTools):
✓ Fast 3G: App functional < 3s
✓ Slow 3G: App functional < 8s
✓ Load time without cache: < 2s

Memory/Battery:
✓ No memory leaks (open/close 10x)
✓ Check DevTools memory profiler
✓ No excessive CPU usage
```

### 8. Edge Cases
```
✓ Very long filename → Truncate with ellipsis
✓ Very large file size → Format correctly (MB, GB)
✓ No recent files → Show empty state
✓ Network error during login → Show error message
✓ Session expired → Logout automatically
✓ Invalid token → Redirect to login
✓ User permission denied → Show access denied message
```

## Manual Testing on Real Devices

### iOS (iPhone/iPad)
```
1. Connect to same network as server
2. Find server IP: ifconfig | grep "inet " | grep -v 127
3. Open Safari: http://<SERVER_IP>:3200/
4. Test auto-redirect to mobile-app
5. Test Install app:
   - Tap share icon (↗)
   - Tap "Add to Home Screen"
   - Name: "BFI"
   - Tap "Add"
   - App should open fullscreen
```

### Android
```
1. Connect to same network as server
2. Open Chrome/Firefox: http://<SERVER_IP>:3200/
3. Test auto-redirect to mobile-app
4. Test Install app:
   - Tap menu (⋮)
   - Tap "Install app"
   - App should open fullscreen (PWA)
5. Test gesture buttons (back, home, recents)
```

## Browser DevTools Testing

### Chrome/Edge DevTools
```
1. Press F12 to open DevTools
2. Click device icon (Ctrl+Shift+M) for mobile mode
3. Select device: iPhone 12 / Pixel 5 / iPad
4. Test orientations: Rotate device
5. Check Console for errors
6. Network tab: Check API calls
7. Application tab: Check localStorage, manifest
```

### Test Device Presets
```
Mobile:
- iPhone 12 (390 x 844)
- Pixel 5 (393 x 851)
- Galaxy S20 (360 x 800)

Tablet:
- iPad (768 x 1024)
- iPad Pro 12.9" (1024 x 1366)

Safe Area (Notch):
- iPhone 12 Pro Max (428 x 926)
- Pixel 6 Pro (412 x 915)
```

## API Testing

### Test Firebase Login, Signup, and Password Reset
Use the desktop and mobile login forms with a Firebase test account; credentials
are validated by Firebase Authentication, not by a local API endpoint.

1. Register with an email/password account and verify the email link.
2. Sign in before approval and verify the pending-access state is shown.
3. Approve the account in Settings, then verify access to the app.
4. Test the password-reset email from both login surfaces.
5. Sign in with Google and verify that the Firebase ID token is accepted.

### Test Session Verification
```bash
TOKEN="<Firebase ID token from an authenticated session>"

curl -X POST http://localhost:3200/api/auth/session \
  -H "Authorization: Bearer $TOKEN" \
  -H "Content-Type: application/json" \
  | jq .

# Response:
{
  "user": { "email": "...", "name": "...", "role": "..." },
  "permissions": [...],
  "tokenLimit": 50000
}
```

### Test File Listing
```bash
TOKEN="eyJhbGc..." # From login response

curl -X GET http://localhost:3200/api/files \
  -H "Authorization: Bearer $TOKEN" \
  | jq .

# Response: Array of file objects
[
  {
    "id": "seed-word-1",
    "filename": "Laporan Keuangan Q3.docx",
    "size": 2516582,
    "uploadTime": "2026-10-04T12:00:00Z",
    "type": "word",
    ...
  },
  ...
]
```

## Regression Testing

After each update, run through:
1. Login form submission
2. Dashboard data loading
3. Tab switching
4. Logout flow
5. Responsive layout
6. Touch interactions
7. Error handling
8. Performance metrics

## Performance Benchmarks

Target metrics:
- **First Contentful Paint (FCP)**: < 1.5s
- **Largest Contentful Paint (LCP)**: < 2.5s
- **Cumulative Layout Shift (CLS)**: < 0.1
- **Time to Interactive (TTI)**: < 3s
- **Bundle size**: < 150KB (gzipped)

Check with Lighthouse:
```
Chrome DevTools → Lighthouse → Mobile → Generate report
```

## Known Issues & Limitations

1. **Double-tap zoom**: Disabled for better UX
2. **Context menu**: Long-press disabled (custom interactions)
3. **Viewport zoom**: Locked to 1.0
4. **Orientation**: Portrait primary
5. **Safe area**: Only tested on iOS 11+ & Android 9+

---

**Last Updated**: 6 Oktober 2026  
**Test Environment**: Chrome 120+, Safari 17+, Firefox 121+