diff --git a/docs/E2E_TESTING.md b/docs/E2E_TESTING.md new file mode 100644 index 0000000..5f5eec3 --- /dev/null +++ b/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