273 lines
6.2 KiB
Markdown
273 lines
6.2 KiB
Markdown
# 🚀 Quick Start - Phase 3.1 Testing
|
|
|
|
## Step-by-Step Testing Guide
|
|
|
|
### Before You Start
|
|
Make sure both backend and frontend are running:
|
|
|
|
```bash
|
|
# Backend (Terminal 1)
|
|
cd backend
|
|
# Should already be running from earlier
|
|
|
|
# Frontend (Terminal 2)
|
|
cd frontend
|
|
npm run dev
|
|
```
|
|
|
|
---
|
|
|
|
## 1. Generate Some Test Data (2 minutes)
|
|
|
|
### Method 1: Use Kiosk
|
|
1. Go to: **http://10.0.0.243:5173/kiosk**
|
|
2. Select **Lou** → Complete 2-3 chores
|
|
3. Select **Jess** → Complete 2-3 chores
|
|
4. Select **William** → Complete 1-2 chores
|
|
5. Select **Xander** → Complete 1 chore
|
|
6. Select **Bella** → Complete 1 chore
|
|
|
|
### Method 2: Use API Docs
|
|
1. Go to: **http://10.0.0.243:8000/docs**
|
|
2. Find "POST /api/v1/chores/{chore_id}/complete"
|
|
3. Click "Try it out"
|
|
4. Complete a few chores with different users
|
|
|
|
---
|
|
|
|
## 2. Test Weekly Reports (5 minutes)
|
|
|
|
### Access Reports
|
|
**URL**: http://10.0.0.243:5173/reports
|
|
|
|
### What to Check
|
|
✅ **Stats Cards Show Numbers**
|
|
- Total Completions > 0
|
|
- Active Members = number of users who completed chores
|
|
- Different Chores = types of chores completed
|
|
|
|
✅ **Top Performers Section**
|
|
- Shows users ranked by completion count
|
|
- Avatars display correctly
|
|
- Medal badges for top 3 (🥇🥈🥉)
|
|
|
|
✅ **Completions by Day Chart**
|
|
- Bar chart shows activity
|
|
- Days with completions show counts
|
|
|
|
✅ **Recent Completions List**
|
|
- Shows recently completed chores
|
|
- User names and avatars visible
|
|
- Timestamps show correctly
|
|
|
|
### Test Week Navigation
|
|
1. Click **"Previous Week"** button
|
|
- Should show "Last Week" or "1 Week Ago"
|
|
- Date range updates
|
|
- Shows that week's data (probably 0)
|
|
|
|
2. Click **"Next Week"** button
|
|
- Returns to current week
|
|
- Button disabled when at current week
|
|
|
|
---
|
|
|
|
## 3. Test User Statistics (3 minutes)
|
|
|
|
### Access Your Stats
|
|
**URL**: http://10.0.0.243:5173/stats
|
|
|
|
### What to Check
|
|
✅ **Personal Metrics Cards**
|
|
- Total Completions (all time)
|
|
- This Week count
|
|
- This Month count
|
|
- Favorite Chore displays
|
|
|
|
✅ **Recent Completions**
|
|
- Shows your last 10 completions
|
|
- Chore titles correct
|
|
- Timestamps accurate
|
|
|
|
✅ **Visual Design**
|
|
- Your avatar shows
|
|
- Cards are colorful and clear
|
|
- Layout is responsive
|
|
|
|
---
|
|
|
|
## 4. Test Navigation (1 minute)
|
|
|
|
### From Dashboard
|
|
1. Go to: **http://10.0.0.243:5173/dashboard**
|
|
2. Look at header (top right)
|
|
3. Click **"Reports"** → Should go to reports page
|
|
4. Click **"My Stats"** → Should go to your stats page
|
|
5. Click **"Settings"** → Should go to settings
|
|
6. All links work smoothly
|
|
|
|
---
|
|
|
|
## 5. Complete a New Chore (3 minutes)
|
|
|
|
### Test the Full Flow
|
|
1. **Go to Kiosk**: http://10.0.0.243:5173/kiosk
|
|
2. **Select a user** (your user)
|
|
3. **Complete a chore**
|
|
- Current modal works (we'll enhance it later)
|
|
4. **Go to Reports**: http://10.0.0.243:5173/reports
|
|
5. **Verify**:
|
|
- Total completions increased by 1
|
|
- You appear in Recent Completions
|
|
- Your count in Top Performers increased
|
|
|
|
6. **Go to Your Stats**: http://10.0.0.243:5173/stats
|
|
7. **Verify**:
|
|
- Total increased by 1
|
|
- This Week increased by 1
|
|
- New completion in Recent Completions
|
|
|
|
---
|
|
|
|
## 6. Test With Notes (Future - When Modal Updated)
|
|
|
|
This will be tested after we integrate the EnhancedCompletionModal:
|
|
- Complete a chore with notes
|
|
- Check Reports → Recent Completions
|
|
- Verify notes display correctly
|
|
|
|
---
|
|
|
|
## Expected Results
|
|
|
|
### Reports Page Should Show:
|
|
```
|
|
📊 Stats Cards
|
|
Total Completions: 10
|
|
Active Members: 5
|
|
Different Chores: 7
|
|
|
|
🏆 Top Performers
|
|
1. 🥇 Lou - 4 completions
|
|
2. 🥈 Jess - 3 completions
|
|
3. 🥉 William - 2 completions
|
|
|
|
📈 Completions by Day
|
|
Monday ■■■■ 4
|
|
Tuesday ■■ 2
|
|
Wednesday ■■■■ 4
|
|
...
|
|
|
|
📋 Recent Completions
|
|
Clean Kitchen - by Lou - 2:30 PM
|
|
Vacuum Living Room - by Jess - 1:15 PM
|
|
...
|
|
```
|
|
|
|
### User Stats Page Should Show:
|
|
```
|
|
👤 Your Profile
|
|
Total Completions: 4
|
|
This Week: 4
|
|
This Month: 4
|
|
Favorite Chore: Clean Kitchen
|
|
|
|
📜 Recent Completions
|
|
1. Clean Kitchen - Today 2:30 PM
|
|
2. Load Dishwasher - Today 1:45 PM
|
|
...
|
|
```
|
|
|
|
---
|
|
|
|
## Troubleshooting
|
|
|
|
### "No Data" or "0 Completions"
|
|
**Fix**: Complete some chores first! Use the kiosk or API docs.
|
|
|
|
### Reports Not Showing
|
|
**Fix**:
|
|
- Check backend is running (http://10.0.0.243:8000/health)
|
|
- Check frontend is running (http://10.0.0.243:5173)
|
|
- Check browser console for errors (F12)
|
|
|
|
### Navigation Not Working
|
|
**Fix**:
|
|
- Clear browser cache (Ctrl+Shift+R)
|
|
- Check App.tsx routes are saved
|
|
- Restart frontend dev server
|
|
|
|
### Avatars Not Loading
|
|
**Fix**:
|
|
- Verify API_BASE_URL in axios.ts is http://10.0.0.243:8000
|
|
- Check avatar files exist in backend/app/static/avatars/
|
|
|
|
---
|
|
|
|
## Quick Verification Commands
|
|
|
|
### Check Backend Health
|
|
```bash
|
|
curl http://10.0.0.243:8000/health
|
|
# Should return: {"status":"healthy"}
|
|
```
|
|
|
|
### Check Weekly Report API
|
|
```bash
|
|
curl -H "Authorization: Bearer YOUR_TOKEN" \
|
|
http://10.0.0.243:8000/api/v1/chores/reports/weekly
|
|
# Should return JSON with report data
|
|
```
|
|
|
|
### Check User Stats API
|
|
```bash
|
|
curl -H "Authorization: Bearer YOUR_TOKEN" \
|
|
http://10.0.0.243:8000/api/v1/chores/reports/user/1
|
|
# Should return JSON with user stats
|
|
```
|
|
|
|
---
|
|
|
|
## Success Checklist
|
|
|
|
After testing, you should have verified:
|
|
|
|
- [ ] Backend migration ran successfully
|
|
- [ ] Backend is running and responsive
|
|
- [ ] Frontend is running and accessible
|
|
- [ ] Can view Weekly Reports page
|
|
- [ ] Can view User Stats page
|
|
- [ ] Navigation links work from Dashboard
|
|
- [ ] Data shows correctly in reports
|
|
- [ ] Top performers displays properly
|
|
- [ ] Recent completions show
|
|
- [ ] User stats are accurate
|
|
- [ ] Week navigation works
|
|
- [ ] New completions appear immediately
|
|
|
|
---
|
|
|
|
## Next Steps After Testing
|
|
|
|
1. ✅ **Test everything works** (you're doing this now!)
|
|
2. 🎨 **Optionally enhance kiosk** with EnhancedCompletionModal
|
|
3. 📊 **Optionally add charts** (recharts library)
|
|
4. 📅 **Start Phase 3.2** - Calendar Module
|
|
5. 💾 **Commit to Gitea** when ready
|
|
|
|
---
|
|
|
|
## Getting Help
|
|
|
|
If something doesn't work:
|
|
1. Check browser console (F12 → Console tab)
|
|
2. Check backend logs in terminal
|
|
3. Verify URLs match your setup
|
|
4. Check PHASE_3_1_FRONTEND_COMPLETE.md for details
|
|
|
|
---
|
|
|
|
**Ready? Start testing!** 🚀
|
|
|
|
Visit: http://10.0.0.243:5173
|