webupdatev1
This commit is contained in:
Local Server
244
TESTING_GUIDE.md
Normal file
244
TESTING_GUIDE.md
Normal file
@@ -0,0 +1,244 @@
|
||||
## 🎯 Cart & Wishlist - Quick Test Guide
|
||||
|
||||
### Visual Flow
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ SHOP PAGE │
|
||||
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
|
||||
│ │ Product 1 │ │ Product 2 │ │ Product 3 │ │
|
||||
│ │ [Image] │ │ [Image] │ │ [Image] │ │
|
||||
│ │ $29.99 │ │ $39.99 │ │ $49.99 │ │
|
||||
│ │ ❤️ [🛒 Cart] │ │ ❤️ [🛒 Cart] │ │ ❤️ [🛒 Cart] │ │
|
||||
│ └──────────────┘ └──────────────┘ └──────────────┘ │
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
↓
|
||||
CLICK "Add to Cart"
|
||||
↓
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ ✅ Product 1 added to cart │ ← Toast Notification
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
↓
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ Navigation Bar: [🛒 ③] [❤️ ①] │ ← Badges Updated
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
↓
|
||||
CLICK Cart Icon 🛒
|
||||
↓
|
||||
┌─────────────────────────────────────────────────────────┐
|
||||
│ Shopping Cart [X] │
|
||||
│ ─────────────────────────────────────────────────── │
|
||||
│ │ [Image] Product 1 │ [-] 2 [+] │ $59.98 │ [X] │
|
||||
│ │ [Image] Product 2 │ [-] 1 [+] │ $39.99 │ [X] │
|
||||
│ ─────────────────────────────────────────────────── │
|
||||
│ Total: $99.97 │
|
||||
│ [Continue Shopping] [Proceed to Checkout] │
|
||||
└─────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
## 🧪 Test Checklist
|
||||
|
||||
### Shop Page Tests
|
||||
|
||||
- [ ] Page loads without errors
|
||||
- [ ] Console shows: `[ShopSystem] Ready!`
|
||||
- [ ] Products display correctly
|
||||
- [ ] Cart icon shows badge "0"
|
||||
- [ ] Wishlist icon shows badge "0"
|
||||
|
||||
### Add to Cart Tests
|
||||
|
||||
- [ ] Click "Add to Cart" on any product
|
||||
- [ ] Green notification appears
|
||||
- [ ] Cart badge updates to "1"
|
||||
- [ ] Click same product again → badge becomes "2"
|
||||
- [ ] Click different product → badge increases
|
||||
|
||||
### Cart Dropdown Tests
|
||||
|
||||
- [ ] Click cart icon in navbar
|
||||
- [ ] Dropdown slides out from right
|
||||
- [ ] See product image (small thumbnail)
|
||||
- [ ] See product name
|
||||
- [ ] See price
|
||||
- [ ] See quantity with +/- buttons
|
||||
- [ ] See subtotal
|
||||
- [ ] See total at bottom
|
||||
- [ ] Click "-" button → quantity decreases
|
||||
- [ ] Click "+" button → quantity increases
|
||||
- [ ] Click "X" button → item removed
|
||||
- [ ] Cart badge updates when quantity changes
|
||||
|
||||
### Add to Wishlist Tests
|
||||
|
||||
- [ ] Click heart ❤️ icon on any product
|
||||
- [ ] Green notification appears
|
||||
- [ ] Wishlist badge updates to "1"
|
||||
- [ ] Click same product again → "Already in wishlist" message
|
||||
- [ ] Click different product → badge increases
|
||||
|
||||
### Wishlist Dropdown Tests
|
||||
|
||||
- [ ] Click wishlist icon in navbar
|
||||
- [ ] Dropdown slides out from right
|
||||
- [ ] See product image
|
||||
- [ ] See product name
|
||||
- [ ] See price
|
||||
- [ ] See "Add to Cart" button
|
||||
- [ ] Click "Add to Cart" → item added to cart
|
||||
- [ ] Cart badge increases
|
||||
- [ ] Click "X" button → item removed from wishlist
|
||||
- [ ] Wishlist badge updates
|
||||
|
||||
### Persistence Tests
|
||||
|
||||
- [ ] Add items to cart
|
||||
- [ ] Add items to wishlist
|
||||
- [ ] Note the badge numbers
|
||||
- [ ] Press F5 (refresh page)
|
||||
- [ ] Badges show same numbers
|
||||
- [ ] Click cart icon → items still there
|
||||
- [ ] Click wishlist icon → items still there
|
||||
|
||||
### Product Page Tests
|
||||
|
||||
- [ ] Navigate to any product detail page
|
||||
- [ ] Click "Add to Cart" button
|
||||
- [ ] Notification appears
|
||||
- [ ] Cart badge updates
|
||||
- [ ] Click "Add to Wishlist" button
|
||||
- [ ] Notification appears
|
||||
- [ ] Wishlist badge updates
|
||||
|
||||
### Mobile Tests (Optional)
|
||||
|
||||
- [ ] Resize browser to mobile width
|
||||
- [ ] Cart icon still visible
|
||||
- [ ] Wishlist icon still visible
|
||||
- [ ] Click icons → dropdowns work
|
||||
- [ ] Items display correctly on narrow screen
|
||||
|
||||
### Edge Cases
|
||||
|
||||
- [ ] Add 10+ of same item (quantity shows correctly)
|
||||
- [ ] Add item to wishlist → add to cart → still in wishlist
|
||||
- [ ] Remove last item from cart → shows "Cart is empty"
|
||||
- [ ] Remove last item from wishlist → shows "Wishlist is empty"
|
||||
- [ ] Click outside dropdown → closes automatically
|
||||
|
||||
## 🐛 Common Issues & Solutions
|
||||
|
||||
### Issue: Nothing happens when clicking buttons
|
||||
|
||||
**Solution**:
|
||||
|
||||
1. Open Console (F12)
|
||||
2. Look for red error messages
|
||||
3. Type `window.ShopSystem` and press Enter
|
||||
4. Should show object, not `undefined`
|
||||
|
||||
### Issue: Badges don't update
|
||||
|
||||
**Solution**:
|
||||
|
||||
1. Check console for errors
|
||||
2. Hard refresh: Ctrl+Shift+R
|
||||
3. Clear localStorage: `localStorage.clear()` in console
|
||||
|
||||
### Issue: Images not showing
|
||||
|
||||
**Solution**:
|
||||
|
||||
1. Right-click broken image → Inspect
|
||||
2. Check `src` attribute
|
||||
3. Verify URL is correct
|
||||
4. Check Network tab for 404 errors
|
||||
|
||||
### Issue: Dropdowns don't open
|
||||
|
||||
**Solution**:
|
||||
|
||||
1. Check console errors
|
||||
2. Verify HTML has `id="cartPanel"` and `id="wishlistPanel"`
|
||||
3. Check CSS - dropdown might be hidden
|
||||
|
||||
### Issue: Items disappear on refresh
|
||||
|
||||
**Solution**:
|
||||
|
||||
1. Open DevTools → Application tab
|
||||
2. Check Local Storage
|
||||
3. Look for `skyart_cart` and `skyart_wishlist`
|
||||
4. If not there, localStorage might be disabled
|
||||
5. Check browser privacy settings
|
||||
|
||||
## 📋 Verification Checklist
|
||||
|
||||
Before reporting success, verify:
|
||||
|
||||
- ✅ All tests pass
|
||||
- ✅ No console errors
|
||||
- ✅ Badges update correctly
|
||||
- ✅ Dropdowns display items with images
|
||||
- ✅ Quantity controls work
|
||||
- ✅ Remove buttons work
|
||||
- ✅ Items persist after refresh
|
||||
- ✅ Notifications appear and auto-dismiss
|
||||
- ✅ Both shop page and product page work
|
||||
- ✅ Mobile responsive (if testing mobile)
|
||||
|
||||
## 🎨 What You Should See
|
||||
|
||||
### Empty State
|
||||
|
||||
```
|
||||
Cart Dropdown:
|
||||
┌─────────────────────┐
|
||||
│ Shopping Cart [X] │
|
||||
├─────────────────────┤
|
||||
│ 🛒 │
|
||||
│ Your cart is │
|
||||
│ empty │
|
||||
├─────────────────────┤
|
||||
│ [Continue Shopping] │
|
||||
└─────────────────────┘
|
||||
```
|
||||
|
||||
### With Items
|
||||
|
||||
```
|
||||
Cart Dropdown:
|
||||
┌─────────────────────────────┐
|
||||
│ Shopping Cart [X] │
|
||||
├─────────────────────────────┤
|
||||
│ [Img] Product Name │
|
||||
│ $29.99 │
|
||||
│ [-] 2 [+] │
|
||||
│ Subtotal: $59.98 [X] │
|
||||
├─────────────────────────────┤
|
||||
│ Total: $59.98 │
|
||||
│ [Continue Shopping] │
|
||||
│ [Proceed to Checkout] │
|
||||
└─────────────────────────────┘
|
||||
```
|
||||
|
||||
## 🚀 Success Criteria
|
||||
|
||||
Your cart and wishlist system is working perfectly when:
|
||||
|
||||
1. **Buttons respond instantly** (no delays)
|
||||
2. **Notifications appear** after every action
|
||||
3. **Badges show correct counts** at all times
|
||||
4. **Dropdowns display items** with images
|
||||
5. **Quantity controls work** smoothly
|
||||
6. **Items persist** across page refreshes
|
||||
7. **No errors** in browser console
|
||||
8. **Works on all pages** (shop, product, home)
|
||||
|
||||
---
|
||||
|
||||
**Ready to test?**
|
||||
|
||||
1. Open <http://localhost:5000/shop>
|
||||
2. Follow the test checklist above
|
||||
3. Report any issues you find!
|
||||
Reference in New Issue
Block a user