# End-to-End Testing Guide

## Overview

This guide covers manual end-to-end testing of the Pantry MVP. These tests ensure all critical user flows work correctly before release.

## Test Environment

**Requirements:**
- Browser: Chrome/Edge, Firefox, or Safari
- Resolution: 1920x1080 (desktop) and 390x844 (mobile)
- Network: Both online and offline modes
- Data: Fresh database with seed data

## Critical User Flows

### 1. Authentication Flow

#### Test 1.1: Sign Up
**Priority:** HIGH

1. Navigate to app home page
2. Click "Sign Up" or similar
3. Enter email: test@example.com
4. Enter password: SecurePass123!
5. Confirm password
6. Submit form

**Expected Results:**
- ✅ Validation errors if password too weak
- ✅ Account created successfully
- ✅ Redirected to home/dashboard
- ✅ Welcome message shown (optional)

#### Test 1.2: Sign In
**Priority:** HIGH

1. Sign out if signed in
2. Navigate to home page
3. Click "Sign In"
4. Enter correct credentials
5. Submit form

**Expected Results:**
- ✅ Successfully signed in
- ✅ Redirected to dashboard
- ✅ User menu shows email/name

#### Test 1.3: Sign In (Wrong Credentials)
**Priority:** MEDIUM

1. Try signing in with wrong password
2. Try signing in with non-existent email

**Expected Results:**
- ✅ Error message shown
- ✅ Form not cleared (email retained)
- ✅ No redirect
- ✅ Try again allowed

#### Test 1.4: Sign Out
**Priority:** HIGH

1. While signed in, click user menu
2. Click "Sign Out"

**Expected Results:**
- ✅ Signed out successfully
- ✅ Redirected to sign-in page
- ✅ Cannot access protected pages

### 2. Inventory Management

#### Test 2.1: View Inventory List
**Priority:** HIGH

1. Sign in
2. Navigate to home/inventory page

**Expected Results:**
- ✅ List of pantry items displayed
- ✅ Items show: name, quantity, unit, location tags
- ✅ Empty state if no items
- ✅ Loading state while fetching

#### Test 2.2: Add Item Manually
**Priority:** HIGH

1. Navigate to inventory
2. Click "Add Item" button
3. Enter item details:
   - Name: "Olive Oil"
   - Quantity: 1
   - Unit: L (liter)
   - Tags: pantry, cooking-oil
4. Submit

**Expected Results:**
- ✅ Form validation works
- ✅ Item appears in list immediately
- ✅ Success message shown
- ✅ Form cleared for next entry

#### Test 2.3: Edit Item
**Priority:** HIGH

1. Click on an existing item
2. Click "Edit" button
3. Change quantity from 1 to 0.5
4. Save changes

**Expected Results:**
- ✅ Modal/form opens with current values
- ✅ Changes saved successfully
- ✅ List updated immediately
- ✅ No page reload needed

#### Test 2.4: Delete Item
**Priority:** HIGH

1. Click on an item
2. Click "Delete" button
3. Confirm deletion

**Expected Results:**
- ✅ Confirmation dialog shown
- ✅ Item removed from list
- ✅ Success message shown
- ✅ Can undo (optional)

#### Test 2.5: Filter by Tag
**Priority:** MEDIUM

1. View inventory list
2. Click on a tag filter (e.g., "fridge")

**Expected Results:**
- ✅ Only items with that tag shown
- ✅ Filter state persists
- ✅ Clear filter button available
- ✅ Item count updated

### 3. Barcode Scanning

#### Test 3.1: Scan Known Product
**Priority:** HIGH

1. Navigate to Scan page
2. Allow camera permissions
3. Scan a barcode (e.g., Coca-Cola)

**Expected Results:**
- ✅ Camera opens
- ✅ Barcode detected
- ✅ Product info fetched from Open Food Facts
- ✅ Pre-filled add form shown
- ✅ Can edit before adding

#### Test 3.2: Scan Unknown Product
**Priority:** MEDIUM

1. Scan a barcode not in database
2. Manual entry form shown

**Expected Results:**
- ✅ "Product not found" message
- ✅ Option to add manually
- ✅ Barcode pre-filled
- ✅ Can still save item

#### Test 3.3: Camera Permission Denied
**Priority:** MEDIUM

1. Block camera permission
2. Try to scan

**Expected Results:**
- ✅ Permission prompt shown
- ✅ Helpful error message
- ✅ Instructions to enable camera
- ✅ Option to add manually

### 4. Tag Management

#### Test 4.1: Create Tag
**Priority:** MEDIUM

1. Go to Settings → Tags
2. Click "Add Tag"
3. Enter name: "freezer"
4. Pick color: blue
5. Save

**Expected Results:**
- ✅ Tag created successfully
- ✅ Appears in tag list
- ✅ Available in item forms
- ✅ Color applied correctly

#### Test 4.2: Edit Tag
**Priority:** LOW

1. Click on existing tag
2. Change name or color
3. Save

**Expected Results:**
- ✅ Tag updated
- ✅ All items with tag reflect changes
- ✅ No broken references

#### Test 4.3: Delete Tag
**Priority:** LOW

1. Click delete on a tag
2. Confirm

**Expected Results:**
- ✅ Confirmation shown if tag in use
- ✅ Tag removed
- ✅ Items keep other tags
- ✅ No app crashes

### 5. PWA Installation

#### Test 5.1: Install Prompt (Desktop)
**Priority:** MEDIUM

1. Visit app on Chrome (desktop)
2. Wait 3 seconds

**Expected Results:**
- ✅ Install banner appears
- ✅ Shows app icon and name
- ✅ Install button works
- ✅ Can dismiss and won't show for 7 days

#### Test 5.2: Install from Settings
**Priority:** MEDIUM

1. Go to Settings → App
2. Click "Install App" button

**Expected Results:**
- ✅ Browser install dialog opens
- ✅ App installs to desktop/home screen
- ✅ Launches in standalone mode
- ✅ Icon and name correct

#### Test 5.3: iOS Safari Add to Home Screen
**Priority:** HIGH (iOS users)

1. Open app in Safari (iOS)
2. Tap Share button
3. Tap "Add to Home Screen"
4. Confirm

**Expected Results:**
- ✅ Icon added to home screen
- ✅ Opens in standalone mode
- ✅ Splash screen shown
- ✅ No Safari UI

### 6. Offline Functionality

#### Test 6.1: Work Offline
**Priority:** HIGH

1. Load app while online
2. Navigate to all pages
3. Disconnect internet
4. Try navigating again

**Expected Results:**
- ✅ Offline banner appears
- ✅ Previously visited pages load
- ✅ Cached data visible
- ✅ No white screens or errors

#### Test 6.2: Offline Indicator
**Priority:** MEDIUM

1. Go offline
2. Check for visual feedback

**Expected Results:**
- ✅ "You're offline" banner at top
- ✅ Banner is amber/warning color
- ✅ Icon indicates offline status

#### Test 6.3: Return Online
**Priority:** MEDIUM

1. Go offline
2. Wait a few seconds
3. Go online

**Expected Results:**
- ✅ "Back online!" banner (green)
- ✅ Auto-hides after 3 seconds
- ✅ Data syncs (if pending changes)

### 7. Responsive Design

#### Test 7.1: Mobile View
**Priority:** HIGH

1. Resize browser to 390px wide
2. Navigate all pages

**Expected Results:**
- ✅ Navigation adapts (hamburger menu)
- ✅ Lists stack vertically
- ✅ Buttons are touch-friendly
- ✅ No horizontal scroll
- ✅ Text readable without zoom

#### Test 7.2: Tablet View
**Priority:** MEDIUM

1. Resize to 768px wide

**Expected Results:**
- ✅ Layout adapts
- ✅ 2-column grids where appropriate
- ✅ Navigation hybrid or drawer

#### Test 7.3: Desktop View
**Priority:** MEDIUM

1. View at 1920px wide

**Expected Results:**
- ✅ Full navigation visible
- ✅ Multi-column layouts
- ✅ Content not stretched too wide
- ✅ Whitespace used effectively

### 8. Performance

#### Test 8.1: Page Load Time
**Priority:** HIGH

1. Clear cache
2. Load home page
3. Measure time to interactive

**Expected Results:**
- ✅ < 3 seconds on 4G
- ✅ < 1 second on repeat visit
- ✅ Loading indicators shown

#### Test 8.2: Lighthouse Score
**Priority:** MEDIUM

1. Open DevTools → Lighthouse
2. Run "Progressive Web App" audit

**Expected Results:**
- ✅ PWA score: 90+
- ✅ Performance: 80+
- ✅ Accessibility: 90+
- ✅ Best Practices: 90+

### 9. Accessibility

#### Test 9.1: Keyboard Navigation
**Priority:** HIGH

1. Use only keyboard (Tab, Enter, Esc)
2. Navigate entire app

**Expected Results:**
- ✅ All interactive elements reachable
- ✅ Focus indicators visible
- ✅ Modals can be closed with Esc
- ✅ Logical tab order

#### Test 9.2: Screen Reader
**Priority:** MEDIUM

1. Enable VoiceOver (Mac) or NVDA (Windows)
2. Navigate app

**Expected Results:**
- ✅ All text announced
- ✅ Images have alt text
- ✅ Form labels read correctly
- ✅ Buttons have meaningful labels

### 10. Error Handling

#### Test 10.1: Network Error
**Priority:** HIGH

1. Start action (add item)
2. Disable network mid-request
3. Check behavior

**Expected Results:**
- ✅ Error message shown
- ✅ Action can be retried
- ✅ Data not lost
- ✅ No crash

#### Test 10.2: Server Error (500)
**Priority:** MEDIUM

1. Trigger server error (if possible)

**Expected Results:**
- ✅ User-friendly error message
- ✅ No stack traces visible
- ✅ Option to try again
- ✅ Logs sent to monitoring (optional)

## Test Data Setup

### Seed Data Script

```sql
-- Run in Supabase SQL Editor
-- Insert test household
INSERT INTO households (id, name) VALUES 
  ('test-household-1', 'Test Household');

-- Insert test tags
INSERT INTO tags (id, household_id, name, color) VALUES
  ('tag-1', 'test-household-1', 'fridge', '#3b82f6'),
  ('tag-2', 'test-household-1', 'pantry', '#10b981'),
  ('tag-3', 'test-household-1', 'freezer', '#6366f1');

-- Insert test units
INSERT INTO units (id, household_id, name, abbreviation, base_unit, conversion_factor) VALUES
  ('unit-1', 'test-household-1', 'liter', 'L', 'L', 1),
  ('unit-2', 'test-household-1', 'milliliter', 'mL', 'L', 0.001),
  ('unit-3', 'test-household-1', 'kilogram', 'kg', 'kg', 1);

-- Insert test items
INSERT INTO pantry_items (household_id, name, quantity, unit_id) VALUES
  ('test-household-1', 'Milk', 1, 'unit-1'),
  ('test-household-1', 'Rice', 2, 'unit-3'),
  ('test-household-1', 'Olive Oil', 0.5, 'unit-1');
```

## Test Execution Checklist

**Before Testing:**
- [ ] Fresh database with seed data
- [ ] Clear browser cache
- [ ] Clear localStorage
- [ ] Unregister service workers
- [ ] Sign out all accounts

**Test Environments:**
- [ ] Chrome (Windows/Mac/Linux)
- [ ] Firefox (Windows/Mac/Linux)
- [ ] Safari (Mac/iOS)
- [ ] Mobile Chrome (Android)
- [ ] Mobile Safari (iOS)

**Test Scenarios:**
- [ ] Authentication (4 tests)
- [ ] Inventory Management (5 tests)
- [ ] Barcode Scanning (3 tests)
- [ ] Tag Management (3 tests)
- [ ] PWA Installation (3 tests)
- [ ] Offline Functionality (3 tests)
- [ ] Responsive Design (3 tests)
- [ ] Performance (2 tests)
- [ ] Accessibility (2 tests)
- [ ] Error Handling (2 tests)

## Bug Report Template

```
**Title:** Short description

**Priority:** High / Medium / Low

**Environment:**
- Browser: Chrome 120.0
- OS: Windows 11
- Device: Desktop 1920x1080

**Steps to Reproduce:**
1. Navigate to...
2. Click on...
3. Enter...

**Expected Result:**
What should happen

**Actual Result:**
What actually happened

**Screenshots/Video:**
[Attach if applicable]

**Console Errors:**
[Copy any errors from DevTools console]

**Workaround:**
[If known]
```

## Sign-off

**Tested by:** [Name]  
**Date:** [Date]  
**Environment:** [Browser, OS]  
**Total Tests:** [X]  
**Passed:** [X]  
**Failed:** [X]  
**Blocked:** [X]

**Critical Issues Found:** [List or "None"]  
**Recommendation:** ✅ Ready for Release / ❌ Needs Fixes

---

**Next Steps:**
- Fix critical issues
- Retest failed scenarios
- Document known limitations
- Prepare release notes