Compare commits
5 Commits
feature/is
...
915b4fad5f
| Author | SHA1 | Date | |
|---|---|---|---|
| 915b4fad5f | |||
|
|
2ca3c58f42 | ||
| 5b638ca76f | |||
|
|
f0b555f18a | ||
| 60d6e03e87 |
12
.env.production.example
Normal file
12
.env.production.example
Normal file
@@ -0,0 +1,12 @@
|
||||
# Production Environment Variables
|
||||
# Copy this file to .env.production and fill in your values
|
||||
|
||||
# Supabase Configuration (REQUIRED)
|
||||
# Get these from your Supabase project settings
|
||||
NUXT_PUBLIC_SUPABASE_URL=https://your-project-id.supabase.co
|
||||
NUXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here
|
||||
|
||||
# Server Configuration (optional)
|
||||
# HOST=0.0.0.0
|
||||
# PORT=3000
|
||||
# NODE_ENV=production
|
||||
347
DEPLOYMENT.md
Normal file
347
DEPLOYMENT.md
Normal file
@@ -0,0 +1,347 @@
|
||||
# Deployment Guide
|
||||
|
||||
## Prerequisites
|
||||
|
||||
- Supabase project (managed or self-hosted)
|
||||
- Docker and Docker Compose installed
|
||||
- Domain name (optional, for production)
|
||||
- SSL certificate (for HTTPS, recommended)
|
||||
|
||||
## Quick Start (Docker Compose)
|
||||
|
||||
### 1. Clone the repository
|
||||
|
||||
```bash
|
||||
git clone https://gitea.jeanlucmakiola.de/pantry-app/pantry.git
|
||||
cd pantry
|
||||
```
|
||||
|
||||
### 2. Configure environment
|
||||
|
||||
```bash
|
||||
cp .env.production.example .env.production
|
||||
# Edit .env.production with your Supabase credentials
|
||||
nano .env.production
|
||||
```
|
||||
|
||||
Required environment variables:
|
||||
- `NUXT_PUBLIC_SUPABASE_URL` - Your Supabase project URL
|
||||
- `NUXT_PUBLIC_SUPABASE_ANON_KEY` - Your Supabase anonymous key
|
||||
|
||||
### 3. Build and run
|
||||
|
||||
```bash
|
||||
docker-compose -f docker-compose.prod.yml --env-file .env.production up -d
|
||||
```
|
||||
|
||||
The app will be available at `http://localhost:3000`
|
||||
|
||||
### 4. Verify deployment
|
||||
|
||||
```bash
|
||||
# Check health
|
||||
curl http://localhost:3000/api/health
|
||||
|
||||
# View logs
|
||||
docker-compose -f docker-compose.prod.yml logs -f app
|
||||
|
||||
# Check status
|
||||
docker-compose -f docker-compose.prod.yml ps
|
||||
```
|
||||
|
||||
## Supabase Setup
|
||||
|
||||
### Option 1: Supabase Cloud (Recommended)
|
||||
|
||||
1. Create a free account at [supabase.com](https://supabase.com)
|
||||
2. Create a new project
|
||||
3. Run migrations: `supabase/migrations/*.sql`
|
||||
4. Copy project URL and anon key to `.env.production`
|
||||
|
||||
### Option 2: Self-Hosted Supabase
|
||||
|
||||
Use the included `docker-compose.yml` for local Supabase:
|
||||
|
||||
```bash
|
||||
# Create .env file
|
||||
cp .env.example .env
|
||||
# Edit .env with secure passwords
|
||||
nano .env
|
||||
|
||||
# Start Supabase stack
|
||||
docker-compose up -d
|
||||
|
||||
# Wait for services to be ready
|
||||
docker-compose ps
|
||||
|
||||
# Run migrations
|
||||
docker-compose exec db psql -U postgres -f /docker-entrypoint-initdb.d/001_initial_schema.sql
|
||||
```
|
||||
|
||||
Supabase will be available at:
|
||||
- API: http://localhost:54321
|
||||
- Studio: http://localhost:54323
|
||||
|
||||
## Production Deployment Options
|
||||
|
||||
### Option 1: Coolify (Recommended)
|
||||
|
||||
1. Add new Resource → Docker Compose
|
||||
2. Paste `docker-compose.prod.yml`
|
||||
3. Add environment variables in Coolify UI
|
||||
4. Deploy
|
||||
|
||||
### Option 2: Docker Standalone
|
||||
|
||||
```bash
|
||||
# Build image
|
||||
docker build -t pantry:latest .
|
||||
|
||||
# Run container
|
||||
docker run -d \
|
||||
--name pantry \
|
||||
-p 3000:3000 \
|
||||
-e NUXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co \
|
||||
-e NUXT_PUBLIC_SUPABASE_ANON_KEY=your-key \
|
||||
--restart unless-stopped \
|
||||
pantry:latest
|
||||
```
|
||||
|
||||
### Option 3: Kubernetes
|
||||
|
||||
Example deployment manifest:
|
||||
|
||||
```yaml
|
||||
apiVersion: apps/v1
|
||||
kind: Deployment
|
||||
metadata:
|
||||
name: pantry
|
||||
spec:
|
||||
replicas: 2
|
||||
selector:
|
||||
matchLabels:
|
||||
app: pantry
|
||||
template:
|
||||
metadata:
|
||||
labels:
|
||||
app: pantry
|
||||
spec:
|
||||
containers:
|
||||
- name: pantry
|
||||
image: pantry:latest
|
||||
ports:
|
||||
- containerPort: 3000
|
||||
env:
|
||||
- name: NUXT_PUBLIC_SUPABASE_URL
|
||||
valueFrom:
|
||||
secretKeyRef:
|
||||
name: pantry-secrets
|
||||
key: supabase-url
|
||||
- name: NUXT_PUBLIC_SUPABASE_ANON_KEY
|
||||
valueFrom:
|
||||
secretKeyRef:
|
||||
name: pantry-secrets
|
||||
key: supabase-key
|
||||
livenessProbe:
|
||||
httpGet:
|
||||
path: /api/health
|
||||
port: 3000
|
||||
initialDelaySeconds: 40
|
||||
periodSeconds: 30
|
||||
resources:
|
||||
limits:
|
||||
memory: "512Mi"
|
||||
cpu: "1000m"
|
||||
requests:
|
||||
memory: "256Mi"
|
||||
cpu: "500m"
|
||||
```
|
||||
|
||||
### Option 4: VPS with Nginx
|
||||
|
||||
```nginx
|
||||
# /etc/nginx/sites-available/pantry
|
||||
server {
|
||||
listen 80;
|
||||
server_name pantry.yourdomain.com;
|
||||
|
||||
location / {
|
||||
proxy_pass http://localhost:3000;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection 'upgrade';
|
||||
proxy_set_header Host $host;
|
||||
proxy_cache_bypass $http_upgrade;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## HTTPS/SSL
|
||||
|
||||
### Using Let's Encrypt (Certbot)
|
||||
|
||||
```bash
|
||||
# Install Certbot
|
||||
sudo apt install certbot python3-certbot-nginx
|
||||
|
||||
# Get certificate
|
||||
sudo certbot --nginx -d pantry.yourdomain.com
|
||||
|
||||
# Auto-renewal
|
||||
sudo certbot renew --dry-run
|
||||
```
|
||||
|
||||
### Using Cloudflare
|
||||
|
||||
1. Add your domain to Cloudflare
|
||||
2. Enable "Full (strict)" SSL/TLS mode
|
||||
3. Point DNS A record to your server IP
|
||||
4. Cloudflare handles SSL automatically
|
||||
|
||||
## Monitoring
|
||||
|
||||
### Health Checks
|
||||
|
||||
```bash
|
||||
# Manual check
|
||||
curl http://localhost:3000/api/health
|
||||
|
||||
# With watch
|
||||
watch -n 5 'curl -s http://localhost:3000/api/health | jq'
|
||||
```
|
||||
|
||||
### Docker Stats
|
||||
|
||||
```bash
|
||||
docker stats pantry-app
|
||||
```
|
||||
|
||||
### Logs
|
||||
|
||||
```bash
|
||||
# Follow logs
|
||||
docker-compose -f docker-compose.prod.yml logs -f
|
||||
|
||||
# Last 100 lines
|
||||
docker logs --tail 100 pantry-app
|
||||
|
||||
# Since timestamp
|
||||
docker logs --since "2024-01-01T00:00:00" pantry-app
|
||||
```
|
||||
|
||||
## Updating
|
||||
|
||||
### Pull latest changes
|
||||
|
||||
```bash
|
||||
cd pantry
|
||||
git pull origin main
|
||||
|
||||
# Rebuild and restart
|
||||
docker-compose -f docker-compose.prod.yml build
|
||||
docker-compose -f docker-compose.prod.yml up -d
|
||||
```
|
||||
|
||||
### Rolling back
|
||||
|
||||
```bash
|
||||
# Tag before upgrading
|
||||
docker tag pantry:latest pantry:backup-20240101
|
||||
|
||||
# Rollback if needed
|
||||
docker-compose -f docker-compose.prod.yml down
|
||||
docker tag pantry:backup-20240101 pantry:latest
|
||||
docker-compose -f docker-compose.prod.yml up -d
|
||||
```
|
||||
|
||||
## Backup
|
||||
|
||||
### Database (Supabase)
|
||||
|
||||
```bash
|
||||
# Manual backup
|
||||
pg_dump -h localhost -U postgres -d postgres > backup.sql
|
||||
|
||||
# Restore
|
||||
psql -h localhost -U postgres -d postgres < backup.sql
|
||||
```
|
||||
|
||||
### Docker Volumes
|
||||
|
||||
```bash
|
||||
# Backup
|
||||
docker run --rm -v pantry_db-data:/data -v $(pwd):/backup ubuntu tar czf /backup/db-backup.tar.gz /data
|
||||
|
||||
# Restore
|
||||
docker run --rm -v pantry_db-data:/data -v $(pwd):/backup ubuntu tar xzf /backup/db-backup.tar.gz -C /
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Container won't start
|
||||
|
||||
```bash
|
||||
# Check logs
|
||||
docker logs pantry-app
|
||||
|
||||
# Verify environment variables
|
||||
docker exec pantry-app env | grep NUXT
|
||||
|
||||
# Inspect container
|
||||
docker inspect pantry-app
|
||||
```
|
||||
|
||||
### Supabase connection issues
|
||||
|
||||
1. Verify Supabase URL and key
|
||||
2. Check network connectivity
|
||||
3. Verify RLS policies in Supabase
|
||||
4. Check CORS settings
|
||||
|
||||
### Performance issues
|
||||
|
||||
1. Check resource limits
|
||||
2. Monitor with `docker stats`
|
||||
3. Increase memory/CPU limits in docker-compose
|
||||
4. Enable compression in Nginx
|
||||
|
||||
### PWA not updating
|
||||
|
||||
1. Clear browser cache
|
||||
2. Unregister service worker
|
||||
3. Check that service worker is being served with correct headers
|
||||
4. Verify manifest.json is accessible
|
||||
|
||||
## Security Checklist
|
||||
|
||||
- [ ] Use HTTPS (SSL certificate)
|
||||
- [ ] Set secure environment variables
|
||||
- [ ] Don't commit .env files
|
||||
- [ ] Use strong Supabase passwords
|
||||
- [ ] Enable RLS policies in Supabase
|
||||
- [ ] Keep Docker images updated
|
||||
- [ ] Use firewall rules
|
||||
- [ ] Regular backups
|
||||
- [ ] Monitor logs for suspicious activity
|
||||
|
||||
## Performance Optimization
|
||||
|
||||
- Enable CDN (Cloudflare)
|
||||
- Use HTTP/2
|
||||
- Enable gzip/brotli compression
|
||||
- Set proper cache headers
|
||||
- Optimize images
|
||||
- Use Supabase CDN for assets
|
||||
|
||||
## Support
|
||||
|
||||
- Documentation: [docs/](docs/)
|
||||
- Issues: [Gitea Issues](https://gitea.jeanlucmakiola.de/pantry-app/pantry/issues)
|
||||
- Wiki: Coming soon
|
||||
|
||||
---
|
||||
|
||||
**Happy hosting! 🚀**
|
||||
52
docker-compose.prod.yml
Normal file
52
docker-compose.prod.yml
Normal file
@@ -0,0 +1,52 @@
|
||||
# Production Docker Compose for Pantry App
|
||||
#
|
||||
# This compose file only runs the Nuxt frontend.
|
||||
# Supabase should be hosted separately (managed service or self-hosted).
|
||||
|
||||
version: '3.8'
|
||||
|
||||
services:
|
||||
app:
|
||||
build:
|
||||
context: .
|
||||
dockerfile: Dockerfile
|
||||
image: pantry:latest
|
||||
container_name: pantry-app
|
||||
restart: unless-stopped
|
||||
|
||||
ports:
|
||||
- "3000:3000"
|
||||
|
||||
environment:
|
||||
# Supabase connection (REQUIRED - set these in .env.production)
|
||||
NUXT_PUBLIC_SUPABASE_URL: ${NUXT_PUBLIC_SUPABASE_URL}
|
||||
NUXT_PUBLIC_SUPABASE_ANON_KEY: ${NUXT_PUBLIC_SUPABASE_ANON_KEY}
|
||||
|
||||
# Server configuration
|
||||
NODE_ENV: production
|
||||
HOST: 0.0.0.0
|
||||
PORT: 3000
|
||||
|
||||
healthcheck:
|
||||
test: ["CMD", "node", "-e", "require('http').get('http://localhost:3000/api/health', (r) => {process.exit(r.statusCode === 200 ? 0 : 1)})"]
|
||||
interval: 30s
|
||||
timeout: 3s
|
||||
start_period: 40s
|
||||
retries: 3
|
||||
|
||||
networks:
|
||||
- pantry
|
||||
|
||||
# Resource limits (adjust based on your needs)
|
||||
deploy:
|
||||
resources:
|
||||
limits:
|
||||
memory: 512M
|
||||
cpus: '1.0'
|
||||
reservations:
|
||||
memory: 256M
|
||||
cpus: '0.5'
|
||||
|
||||
networks:
|
||||
pantry:
|
||||
driver: bridge
|
||||
526
docs/E2E_TESTING.md
Normal file
526
docs/E2E_TESTING.md
Normal file
@@ -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
|
||||
Reference in New Issue
Block a user