535 lines
9.8 KiB
Markdown
535 lines
9.8 KiB
Markdown
# Testing Session - UI/UX Improvements
|
|
|
|
**Date**: 2026-01-21
|
|
**Tester**: [Your Name]
|
|
**Session Start**: [Time]
|
|
**Environment**: Dev Container
|
|
|
|
---
|
|
|
|
## 🎯 Session Objective
|
|
|
|
Test all 4 critical UI/UX improvements:
|
|
|
|
1. Brand Colors (visual verification)
|
|
2. Button Component (functional testing)
|
|
3. Onboarding Tour (flow testing)
|
|
4. Mobile Navigation (responsive testing)
|
|
|
|
---
|
|
|
|
## ✅ Pre-Test Setup Checklist
|
|
|
|
### 1. Dev Server Status
|
|
|
|
- [ ] Dev server running at `http://localhost:5173`
|
|
- [ ] Browser open (Chrome/Edge recommended)
|
|
- [ ] DevTools open (F12)
|
|
|
|
**Command to start**:
|
|
|
|
```bash
|
|
podman exec -it flyer-crawler-dev npm run dev:container
|
|
```
|
|
|
|
**Server Status**: [ ] Running [ ] Not Running
|
|
|
|
---
|
|
|
|
### 2. Browser Setup
|
|
|
|
- [ ] Clear cache (Ctrl+Shift+Delete)
|
|
- [ ] Clear localStorage for localhost
|
|
- [ ] Enable responsive design mode (Ctrl+Shift+M)
|
|
|
|
**Browser Version**: **\*\*\*\***\_**\*\*\*\***
|
|
|
|
---
|
|
|
|
## 🧪 Test Execution
|
|
|
|
### TEST 1: Onboarding Tour ⭐ CRITICAL
|
|
|
|
**Priority**: 🔴 Must Pass
|
|
**Time**: 5 minutes
|
|
|
|
#### Steps:
|
|
|
|
1. Open DevTools → Application → Local Storage
|
|
2. Delete key: `flyer_crawler_onboarding_completed`
|
|
3. Refresh page (F5)
|
|
4. Observe if tour appears
|
|
|
|
#### Expected:
|
|
|
|
- ✅ Tour modal appears within 2 seconds
|
|
- ✅ Shows "Step 1 of 6"
|
|
- ✅ Points to Flyer Uploader section
|
|
- ✅ Skip button visible
|
|
- ✅ Next button visible
|
|
|
|
#### Actual Result:
|
|
|
|
```
|
|
[Record what you see here]
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
**Status**: [ ] ✅ PASS [ ] ❌ FAIL [ ] ⚠️ PARTIAL
|
|
|
|
**Screenshots**: [Attach if needed]
|
|
|
|
---
|
|
|
|
### TEST 2: Tour Navigation
|
|
|
|
**Time**: 5 minutes
|
|
|
|
#### Steps:
|
|
|
|
Click "Next" button 6 times, observe each step
|
|
|
|
#### Verification Table:
|
|
|
|
| Step | Target | Visible? | Correct Text? | Notes |
|
|
| ---- | -------------- | -------- | ------------- | ----- |
|
|
| 1 | Flyer Uploader | [ ] | [ ] | |
|
|
| 2 | Data Table | [ ] | [ ] | |
|
|
| 3 | Watch Button | [ ] | [ ] | |
|
|
| 4 | Watchlist | [ ] | [ ] | |
|
|
| 5 | Price Chart | [ ] | [ ] | |
|
|
| 6 | Shopping List | [ ] | [ ] | |
|
|
|
|
#### Additional Checks:
|
|
|
|
- [ ] Progress indicator updates (1/6 → 6/6)
|
|
- [ ] Can click "Previous" button
|
|
- [ ] Tour closes after step 6
|
|
- [ ] localStorage key saved
|
|
|
|
**Status**: [ ] ✅ PASS [ ] ❌ FAIL
|
|
|
|
---
|
|
|
|
### TEST 3: Mobile Tab Bar ⭐ CRITICAL
|
|
|
|
**Priority**: 🔴 Must Pass
|
|
**Time**: 8 minutes
|
|
|
|
#### Part A: Mobile View (375px)
|
|
|
|
**Setup**: Toggle device toolbar → iPhone SE
|
|
|
|
#### Checks:
|
|
|
|
- [ ] Bottom tab bar visible
|
|
- [ ] 4 tabs present: Home, Deals, Lists, Profile
|
|
- [ ] Left sidebar (flyer list) HIDDEN
|
|
- [ ] Right sidebar (widgets) HIDDEN
|
|
- [ ] Main content uses full width
|
|
|
|
**Visual Check**:
|
|
|
|
```
|
|
Tab Bar Position: [ ] Bottom [ ] Other: _______
|
|
Number of Tabs: _______
|
|
Tab Bar Height: ~64px? [ ] Yes [ ] No
|
|
```
|
|
|
|
#### Part B: Tab Navigation
|
|
|
|
Click each tab and verify:
|
|
|
|
| Tab | URL | Page Loads? | Highlights? | Content Correct? |
|
|
| ------- | ---------- | ----------- | ----------- | ---------------- |
|
|
| Home | `/` | [ ] | [ ] | [ ] |
|
|
| Deals | `/deals` | [ ] | [ ] | [ ] |
|
|
| Lists | `/lists` | [ ] | [ ] | [ ] |
|
|
| Profile | `/profile` | [ ] | [ ] | [ ] |
|
|
|
|
#### Part C: Desktop View (1440px)
|
|
|
|
**Setup**: Exit device mode, maximize window
|
|
|
|
#### Checks:
|
|
|
|
- [ ] Tab bar HIDDEN (not visible)
|
|
- [ ] Left sidebar VISIBLE
|
|
- [ ] Right sidebar VISIBLE
|
|
- [ ] 3-column layout intact
|
|
- [ ] No layout regressions
|
|
|
|
**Status**: [ ] ✅ PASS [ ] ❌ FAIL
|
|
|
|
---
|
|
|
|
### TEST 4: Dark Mode ⭐ CRITICAL
|
|
|
|
**Priority**: 🔴 Must Pass
|
|
**Time**: 5 minutes
|
|
|
|
#### Steps:
|
|
|
|
1. Click dark mode toggle in header
|
|
2. Navigate: Home → Deals → Lists → Profile
|
|
3. Observe colors and contrast
|
|
|
|
#### Visual Verification:
|
|
|
|
**Mobile Tab Bar**:
|
|
|
|
- [ ] Dark background (#111827 or similar)
|
|
- [ ] Dark border color
|
|
- [ ] Active tab: teal (#14b8a6)
|
|
- [ ] Inactive tabs: gray
|
|
|
|
**New Pages**:
|
|
|
|
- [ ] DealsPage: dark background, light text
|
|
- [ ] ShoppingListsPage: dark cards
|
|
- [ ] FlyersPage: dark theme
|
|
- [ ] No white boxes visible
|
|
|
|
**Button Component**:
|
|
|
|
- [ ] Primary buttons: teal background
|
|
- [ ] Secondary buttons: gray background
|
|
- [ ] Danger buttons: red background
|
|
- [ ] All text readable
|
|
|
|
#### Toggle Back:
|
|
|
|
- [ ] Light mode restores correctly
|
|
- [ ] No stuck dark elements
|
|
|
|
**Status**: [ ] ✅ PASS [ ] ❌ FAIL
|
|
|
|
---
|
|
|
|
### TEST 5: Brand Colors Visual Check
|
|
|
|
**Time**: 3 minutes
|
|
|
|
#### Verification:
|
|
|
|
Navigate through app and check teal color consistency:
|
|
|
|
- [ ] Active tab: teal
|
|
- [ ] Primary buttons: teal
|
|
- [ ] Links on hover: teal
|
|
- [ ] Focus rings: teal
|
|
- [ ] All teal shades match (#14b8a6)
|
|
|
|
**Color Picker Check** (optional):
|
|
Use DevTools color picker on active tab:
|
|
|
|
- Expected: `#14b8a6` or `rgb(20, 184, 166)`
|
|
- Actual: **\*\*\*\***\_\_\_**\*\*\*\***
|
|
|
|
**Status**: [ ] ✅ PASS [ ] ❌ FAIL
|
|
|
|
---
|
|
|
|
### TEST 6: Button Component
|
|
|
|
**Time**: 5 minutes
|
|
|
|
#### Find and Test Buttons:
|
|
|
|
**FlyerUploader Page**:
|
|
|
|
- [ ] "Upload Another Flyer" button (primary, teal)
|
|
- [ ] Button clickable
|
|
- [ ] Hover effect works
|
|
- [ ] Loading state (if applicable)
|
|
|
|
**ShoppingList Page** (navigate to /lists):
|
|
|
|
- [ ] "New List" button (secondary, gray)
|
|
- [ ] "Delete List" button (danger, red)
|
|
- [ ] Buttons functional
|
|
- [ ] Hover states work
|
|
|
|
**In Dark Mode**:
|
|
|
|
- [ ] All button variants visible
|
|
- [ ] Good contrast
|
|
- [ ] No white backgrounds
|
|
|
|
**Status**: [ ] ✅ PASS [ ] ❌ FAIL
|
|
|
|
---
|
|
|
|
### TEST 7: Responsive Breakpoints
|
|
|
|
**Time**: 5 minutes
|
|
|
|
#### Test at each width:
|
|
|
|
**375px (Mobile)**:
|
|
|
|
```
|
|
Tab bar: [ ] Visible [ ] Hidden
|
|
Sidebars: [ ] Visible [ ] Hidden
|
|
Layout: [ ] Single column [ ] Multi-column
|
|
```
|
|
|
|
**768px (Tablet)**:
|
|
|
|
```
|
|
Tab bar: [ ] Visible [ ] Hidden
|
|
Sidebars: [ ] Visible [ ] Hidden
|
|
Layout: [ ] Single column [ ] Multi-column
|
|
```
|
|
|
|
**1024px (Desktop)**:
|
|
|
|
```
|
|
Tab bar: [ ] Visible [ ] Hidden
|
|
Sidebars: [ ] Visible [ ] Hidden
|
|
Layout: [ ] Single column [ ] Multi-column
|
|
```
|
|
|
|
**1440px (Large Desktop)**:
|
|
|
|
```
|
|
Layout: [ ] Unchanged [ ] Broken
|
|
All elements: [ ] Visible [ ] Hidden/Cut off
|
|
```
|
|
|
|
**Status**: [ ] ✅ PASS [ ] ❌ FAIL
|
|
|
|
---
|
|
|
|
### TEST 8: Admin Routes (If Admin User)
|
|
|
|
**Time**: 3 minutes
|
|
**Skip if**: [ ] Not admin user
|
|
|
|
#### Steps:
|
|
|
|
1. Log in as admin
|
|
2. Navigate to `/admin`
|
|
3. Check for tab bar
|
|
|
|
#### Checks:
|
|
|
|
- [ ] Admin dashboard loads
|
|
- [ ] Tab bar NOT visible
|
|
- [ ] Layout looks correct
|
|
- [ ] Can navigate to subpages
|
|
- [ ] Subpages work in mobile view
|
|
|
|
**Status**: [ ] ✅ PASS [ ] ❌ FAIL [ ] ⏭️ SKIPPED
|
|
|
|
---
|
|
|
|
### TEST 9: Console Errors
|
|
|
|
**Time**: 2 minutes
|
|
|
|
#### Steps:
|
|
|
|
1. Open Console tab in DevTools
|
|
2. Clear console
|
|
3. Navigate through app: Home → Deals → Lists → Profile → Home
|
|
4. Check for red error messages
|
|
|
|
#### Results:
|
|
|
|
```
|
|
Errors Found: [ ] None [ ] Some (list below)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
**React 19 warnings are OK** (peer dependencies)
|
|
|
|
**Status**: [ ] ✅ PASS (no errors) [ ] ❌ FAIL (errors present)
|
|
|
|
---
|
|
|
|
### TEST 10: Integration Flow
|
|
|
|
**Time**: 5 minutes
|
|
|
|
#### User Journey:
|
|
|
|
1. Start on Home page (mobile view)
|
|
2. Navigate to Deals tab
|
|
3. Navigate to Lists tab
|
|
4. Navigate to Profile tab
|
|
5. Navigate back to Home
|
|
6. Toggle dark mode
|
|
7. Navigate through tabs again
|
|
|
|
#### Checks:
|
|
|
|
- [ ] All navigation smooth
|
|
- [ ] No data loss
|
|
- [ ] Active tab always correct
|
|
- [ ] Browser back button works
|
|
- [ ] Dark mode persists across routes
|
|
- [ ] No JavaScript errors
|
|
- [ ] No layout shifting
|
|
|
|
**Status**: [ ] ✅ PASS [ ] ❌ FAIL
|
|
|
|
---
|
|
|
|
## 📊 Test Results Summary
|
|
|
|
### Critical Tests Status
|
|
|
|
| Test | Status | Priority | Notes |
|
|
| ------------------- | ------ | ----------- | ----- |
|
|
| 1. Onboarding Tour | [ ] | 🔴 Critical | |
|
|
| 2. Tour Navigation | [ ] | 🟡 High | |
|
|
| 3. Mobile Tab Bar | [ ] | 🔴 Critical | |
|
|
| 4. Dark Mode | [ ] | 🔴 Critical | |
|
|
| 5. Brand Colors | [ ] | 🟡 High | |
|
|
| 6. Button Component | [ ] | 🟢 Medium | |
|
|
| 7. Responsive | [ ] | 🔴 Critical | |
|
|
| 8. Admin Routes | [ ] | 🟢 Medium | |
|
|
| 9. Console Errors | [ ] | 🔴 Critical | |
|
|
| 10. Integration | [ ] | 🟡 High | |
|
|
|
|
**Pass Rate**: **\_** / 10 tests passed
|
|
|
|
---
|
|
|
|
## 🐛 Issues Found
|
|
|
|
### Critical Issues (Blockers)
|
|
|
|
1. ***
|
|
2. ***
|
|
3. ***
|
|
|
|
### High Priority Issues
|
|
|
|
1. ***
|
|
2. ***
|
|
3. ***
|
|
|
|
### Medium/Low Priority Issues
|
|
|
|
1. ***
|
|
2. ***
|
|
3. ***
|
|
|
|
---
|
|
|
|
## 📸 Screenshots
|
|
|
|
Attach screenshots for:
|
|
|
|
- [ ] Onboarding tour (step 1)
|
|
- [ ] Mobile tab bar (375px)
|
|
- [ ] Desktop layout (1440px)
|
|
- [ ] Dark mode (tab bar)
|
|
- [ ] Any bugs/issues found
|
|
|
|
---
|
|
|
|
## 🎯 Final Decision
|
|
|
|
### Must-Pass Criteria
|
|
|
|
**Critical tests** (all must pass):
|
|
|
|
- [ ] Test 1: Onboarding Tour
|
|
- [ ] Test 3: Mobile Tab Bar
|
|
- [ ] Test 4: Dark Mode
|
|
- [ ] Test 7: Responsive
|
|
- [ ] Test 9: No Console Errors
|
|
|
|
**Result**: [ ] ALL CRITICAL PASS [ ] SOME FAIL
|
|
|
|
---
|
|
|
|
### Production Readiness
|
|
|
|
**Overall Assessment**:
|
|
[ ] ✅ READY FOR PRODUCTION
|
|
[ ] ⚠️ READY WITH MINOR ISSUES
|
|
[ ] ❌ NOT READY (critical issues)
|
|
|
|
**Blocking Issues** (must fix before deploy):
|
|
|
|
1. ***
|
|
2. ***
|
|
3. ***
|
|
|
|
**Recommended Fixes** (can deploy, fix later):
|
|
|
|
1. ***
|
|
2. ***
|
|
3. ***
|
|
|
|
---
|
|
|
|
## 🔐 Sign-Off
|
|
|
|
**Tester Name**: ******\*\*\*\*******\_\_\_******\*\*\*\*******
|
|
|
|
**Date/Time Completed**: ****\*\*\*\*****\_\_\_****\*\*\*\*****
|
|
|
|
**Total Testing Time**: **\_\_** minutes
|
|
|
|
**Recommended Action**:
|
|
[ ] Deploy to production
|
|
[ ] Deploy to staging first
|
|
[ ] Fix issues, re-test
|
|
[ ] Hold deployment
|
|
|
|
**Additional Notes**:
|
|
|
|
---
|
|
|
|
---
|
|
|
|
---
|
|
|
|
---
|
|
|
|
---
|
|
|
|
## 📋 Next Steps
|
|
|
|
**If PASS**:
|
|
|
|
1. [ ] Create commit with test results
|
|
2. [ ] Update CHANGELOG.md
|
|
3. [ ] Tag release (v0.12.4)
|
|
4. [ ] Deploy to staging
|
|
5. [ ] Monitor for 24 hours
|
|
6. [ ] Deploy to production
|
|
|
|
**If FAIL**:
|
|
|
|
1. [ ] Log issues in GitHub/Gitea
|
|
2. [ ] Assign to developer
|
|
3. [ ] Schedule re-test
|
|
4. [ ] Update test plan if needed
|
|
|
|
---
|
|
|
|
**Session End**: [Time]
|
|
**Session Duration**: **\_\_** minutes
|