docs/E2E_TESTING.md

@@ -0,0 +1,526 @@
+# 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