448 lines
9.1 KiB
Markdown
448 lines
9.1 KiB
Markdown
# Frontend Testing & Validation Guide
|
|
|
|
**Date:** December 18, 2025
|
|
**Purpose:** Test all frontend improvements
|
|
|
|
---
|
|
|
|
## 🧪 Quick Test Commands
|
|
|
|
### 1. Test Server Health
|
|
|
|
```bash
|
|
curl http://localhost:5000/health | jq
|
|
```
|
|
|
|
### 2. Test Responsive Layout (Using Browser DevTools)
|
|
|
|
```javascript
|
|
// Open DevTools (F12) → Console → Run this:
|
|
|
|
// Test Mobile View (375px width)
|
|
window.resizeTo(375, 667);
|
|
|
|
// Test Tablet View (768px width)
|
|
window.resizeTo(768, 1024);
|
|
|
|
// Test Desktop View (1920px width)
|
|
window.resizeTo(1920, 1080);
|
|
```
|
|
|
|
### 3. Test API Integration
|
|
|
|
```bash
|
|
# Test admin session (should require authentication)
|
|
curl -s http://localhost:5000/api/admin/session -H "Cookie: connect.sid=YOUR_SESSION_ID" | jq
|
|
|
|
# Test public API
|
|
curl -s http://localhost:5000/api/products | jq
|
|
```
|
|
|
|
### 4. Test Toast Notifications
|
|
|
|
```javascript
|
|
// Open browser console on any page with utils.js loaded:
|
|
|
|
// Test success toast
|
|
showToast('Operation successful!', 'success');
|
|
|
|
// Test error toast
|
|
showToast('Something went wrong!', 'error');
|
|
|
|
// Test warning toast
|
|
showToast('Please be careful!', 'warning');
|
|
|
|
// Test info toast
|
|
showToast('Just so you know...', 'info');
|
|
```
|
|
|
|
### 5. Test Storage Utilities
|
|
|
|
```javascript
|
|
// Test storage in console:
|
|
|
|
// Set data
|
|
storage.set('testUser', { name: 'John', age: 30 });
|
|
|
|
// Get data
|
|
const user = storage.get('testUser');
|
|
console.log(user); // { name: 'John', age: 30 }
|
|
|
|
// Remove data
|
|
storage.remove('testUser');
|
|
|
|
// Clear all
|
|
storage.clear();
|
|
```
|
|
|
|
### 6. Test API Request Helper
|
|
|
|
```javascript
|
|
// Test API request with error handling:
|
|
|
|
async function testAPI() {
|
|
try {
|
|
const data = await apiRequest('/api/products');
|
|
console.log('Success:', data);
|
|
} catch (error) {
|
|
console.error('Error:', error.message);
|
|
}
|
|
}
|
|
|
|
testAPI();
|
|
```
|
|
|
|
---
|
|
|
|
## 📱 Responsive Testing Checklist
|
|
|
|
### Mobile (320px - 768px)
|
|
|
|
- [ ] Sidebar collapses and shows hamburger menu button
|
|
- [ ] Menu toggle button is at least 44x44px (touch-friendly)
|
|
- [ ] Sidebar slides in from left when opened
|
|
- [ ] Backdrop appears behind sidebar
|
|
- [ ] Clicking outside closes sidebar
|
|
- [ ] Cards stack vertically (1 column)
|
|
- [ ] Forms are full width
|
|
- [ ] Tables scroll horizontally if needed
|
|
- [ ] Toast notifications fit screen width
|
|
- [ ] Images scale properly
|
|
- [ ] Text is readable (not too small)
|
|
- [ ] No horizontal scrolling on pages
|
|
|
|
### Tablet (769px - 1024px)
|
|
|
|
- [ ] Sidebar visible at 220px width
|
|
- [ ] Cards show in 2 columns
|
|
- [ ] Forms have proper spacing
|
|
- [ ] Navigation is accessible
|
|
- [ ] Touch targets are adequate
|
|
|
|
### Desktop (≥1025px)
|
|
|
|
- [ ] Sidebar visible at 250px width
|
|
- [ ] Multi-column card layouts work
|
|
- [ ] Hover states work on interactive elements
|
|
- [ ] All features accessible with mouse
|
|
|
|
---
|
|
|
|
## ♿ Accessibility Testing
|
|
|
|
### Keyboard Navigation
|
|
|
|
Test these keyboard shortcuts:
|
|
|
|
```
|
|
Tab → Move to next focusable element
|
|
Shift+Tab → Move to previous focusable element
|
|
Enter/Space → Activate buttons/links
|
|
Escape → Close modals/dropdowns
|
|
Arrow Keys → Navigate within components
|
|
```
|
|
|
|
#### Checklist
|
|
|
|
- [ ] All interactive elements are keyboard accessible
|
|
- [ ] Focus indicator is visible (2px outline)
|
|
- [ ] Focus order is logical
|
|
- [ ] Modals trap focus properly
|
|
- [ ] Can close modals with Escape key
|
|
- [ ] Skip link appears on Tab key press
|
|
|
|
### Screen Reader Testing
|
|
|
|
#### NVDA (Windows - Free)
|
|
|
|
```bash
|
|
# Download from: https://www.nvaccess.org/download/
|
|
# Install and press Ctrl+Alt+N to start
|
|
```
|
|
|
|
#### Test Points
|
|
|
|
- [ ] Skip link announces "Skip to main content"
|
|
- [ ] Navigation landmarks are announced
|
|
- [ ] Buttons announce their purpose
|
|
- [ ] Form inputs have associated labels
|
|
- [ ] Images have descriptive alt text
|
|
- [ ] ARIA live regions announce updates
|
|
- [ ] Toast notifications are announced
|
|
- [ ] Loading states are communicated
|
|
|
|
### Color Contrast
|
|
|
|
Use Chrome DevTools Lighthouse:
|
|
|
|
1. Open DevTools (F12)
|
|
2. Go to "Lighthouse" tab
|
|
3. Select "Accessibility"
|
|
4. Click "Analyze page load"
|
|
5. Check for contrast issues
|
|
|
|
Target: **95+ Accessibility Score**
|
|
|
|
---
|
|
|
|
## 🎨 Visual Testing
|
|
|
|
### Browser Compatibility
|
|
|
|
#### Chrome/Edge (Chromium)
|
|
|
|
```bash
|
|
# Open in Chrome
|
|
google-chrome http://localhost:5000/admin/dashboard-example.html
|
|
|
|
# Check Console (F12) for errors
|
|
# Should show: 0 errors, 0 warnings
|
|
```
|
|
|
|
#### Firefox
|
|
|
|
```bash
|
|
firefox http://localhost:5000/admin/dashboard-example.html
|
|
```
|
|
|
|
#### Safari (Mac only)
|
|
|
|
```bash
|
|
open -a Safari http://localhost:5000/admin/dashboard-example.html
|
|
```
|
|
|
|
### Mobile Browsers
|
|
|
|
#### iOS Safari (Using iOS Simulator)
|
|
|
|
```bash
|
|
# If you have Xcode installed:
|
|
xcrun simctl boot "iPhone 14 Pro"
|
|
open -a Simulator
|
|
# Then open Safari and navigate to http://your-local-ip:5000
|
|
```
|
|
|
|
#### Chrome Android (Using Chrome DevTools)
|
|
|
|
1. Connect Android device via USB
|
|
2. Enable USB debugging on Android
|
|
3. Open Chrome DevTools → Remote devices
|
|
4. Inspect your device
|
|
|
|
---
|
|
|
|
## ⚡ Performance Testing
|
|
|
|
### Lighthouse Performance Check
|
|
|
|
```javascript
|
|
// Run in Chrome DevTools → Lighthouse
|
|
// Target Scores:
|
|
// - Performance: 90+
|
|
// - Accessibility: 95+
|
|
// - Best Practices: 95+
|
|
// - SEO: 90+
|
|
```
|
|
|
|
### Network Throttling Test
|
|
|
|
```javascript
|
|
// Chrome DevTools → Network tab
|
|
// Select: "Slow 3G"
|
|
// Reload page and test:
|
|
// - Page loads in < 10 seconds
|
|
// - Loading states are visible
|
|
// - Images load progressively
|
|
```
|
|
|
|
### Check Bundle Sizes
|
|
|
|
```bash
|
|
# Check JavaScript file sizes
|
|
ls -lh website/assets/js/*.js
|
|
ls -lh website/admin/js/*.js
|
|
|
|
# Check CSS file sizes
|
|
ls -lh website/assets/css/*.css
|
|
ls -lh website/admin/css/*.css
|
|
|
|
# Target: < 100KB per file (uncompressed)
|
|
```
|
|
|
|
---
|
|
|
|
## 🐛 Error Testing
|
|
|
|
### Test Error Handling
|
|
|
|
#### 1. Network Error
|
|
|
|
```javascript
|
|
// Disconnect from internet, then:
|
|
await apiRequest('/api/products'); // Should show error toast
|
|
```
|
|
|
|
#### 2. 404 Error
|
|
|
|
```javascript
|
|
await apiRequest('/api/nonexistent'); // Should handle gracefully
|
|
```
|
|
|
|
#### 3. Authentication Error
|
|
|
|
```javascript
|
|
// Clear cookies, then:
|
|
await apiRequest('/api/admin/products'); // Should redirect to login
|
|
```
|
|
|
|
#### 4. Storage Quota Error
|
|
|
|
```javascript
|
|
// Fill localStorage to test quota handling:
|
|
try {
|
|
for (let i = 0; i < 10000; i++) {
|
|
storage.set(`test${i}`, new Array(10000).fill('x').join(''));
|
|
}
|
|
} catch (e) {
|
|
console.log('Storage quota handled correctly');
|
|
}
|
|
storage.clear(); // Clean up
|
|
```
|
|
|
|
---
|
|
|
|
## ✅ Acceptance Criteria
|
|
|
|
All tests must pass:
|
|
|
|
### Responsive Layout
|
|
|
|
- ✅ Works on 320px to 2560px+ screens
|
|
- ✅ No horizontal scrolling
|
|
- ✅ Touch targets ≥ 44x44px
|
|
- ✅ Text readable at all sizes
|
|
|
|
### Console Errors
|
|
|
|
- ✅ Zero console errors on page load
|
|
- ✅ Zero console warnings (except from external libraries)
|
|
- ✅ No 404s for assets
|
|
|
|
### State Management
|
|
|
|
- ✅ LocalStorage works across page refreshes
|
|
- ✅ Data persists correctly
|
|
- ✅ Errors handled gracefully
|
|
|
|
### API Integration
|
|
|
|
- ✅ All endpoints return expected data
|
|
- ✅ Errors display user-friendly messages
|
|
- ✅ Loading states shown during requests
|
|
- ✅ Network errors handled
|
|
|
|
### Accessibility
|
|
|
|
- ✅ Lighthouse score ≥ 95
|
|
- ✅ All images have alt text
|
|
- ✅ All buttons have accessible names
|
|
- ✅ Keyboard navigation works
|
|
- ✅ Screen reader friendly
|
|
- ✅ Color contrast passes WCAG AA
|
|
|
|
### Performance
|
|
|
|
- ✅ Lighthouse performance ≥ 90
|
|
- ✅ Page loads in < 3s on regular connection
|
|
- ✅ Images lazy load
|
|
- ✅ No unnecessary re-renders
|
|
|
|
---
|
|
|
|
## 🎯 Real-World Test Scenarios
|
|
|
|
### Scenario 1: Admin Login Flow
|
|
|
|
1. Navigate to `/admin/login.html`
|
|
2. Enter credentials
|
|
3. Verify redirect to dashboard
|
|
4. Check mobile menu works
|
|
5. Test logout functionality
|
|
|
|
### Scenario 2: Product Management
|
|
|
|
1. Go to products page
|
|
2. Click "Add Product"
|
|
3. Fill form with validation
|
|
4. Submit and verify toast notification
|
|
5. See product in list
|
|
6. Edit product
|
|
7. Delete product with confirmation
|
|
|
|
### Scenario 3: Mobile Shopping Experience
|
|
|
|
1. Open site on mobile (< 768px)
|
|
2. Browse products
|
|
3. Add items to cart
|
|
4. Open cart dropdown
|
|
5. Adjust quantities
|
|
6. Remove items
|
|
7. Add to wishlist
|
|
8. Verify storage persists
|
|
|
|
### Scenario 4: Accessibility Test
|
|
|
|
1. Use only keyboard (no mouse)
|
|
2. Tab through entire page
|
|
3. Verify focus visible
|
|
4. Use screen reader
|
|
5. Check all announcements
|
|
6. Verify image descriptions
|
|
|
|
---
|
|
|
|
## 📊 Expected Results
|
|
|
|
After all tests pass, you should see:
|
|
|
|
```
|
|
✅ Responsive: All breakpoints working
|
|
✅ Console: 0 errors, 0 warnings
|
|
✅ State: Data persists correctly
|
|
✅ API: All requests successful
|
|
✅ A11y: Lighthouse score 95+
|
|
✅ Performance: Load time < 3s
|
|
✅ Mobile: Touch-friendly, no issues
|
|
✅ Desktop: Hover states, proper layout
|
|
✅ Keyboard: Full navigation possible
|
|
✅ Screen Reader: All content accessible
|
|
```
|
|
|
|
---
|
|
|
|
## 🆘 Troubleshooting
|
|
|
|
### Issue: Mobile menu doesn't appear
|
|
|
|
**Solution:** Include utils.js and utilities.css, ensure auth.js is loaded
|
|
|
|
### Issue: Toast notifications not showing
|
|
|
|
**Solution:** Include utilities.css for toast styles
|
|
|
|
### Issue: Storage errors in console
|
|
|
|
**Solution:** Use storage utility instead of direct localStorage calls
|
|
|
|
### Issue: API requests fail
|
|
|
|
**Solution:** Check server is running on port 5000, verify CORS settings
|
|
|
|
### Issue: Focus styles not visible
|
|
|
|
**Solution:** Ensure utilities.css is included and loads after other styles
|
|
|
|
---
|
|
|
|
**🎉 Happy Testing! 🎉**
|