SkyArtShop/docs/FRONTEND_TESTING_GUIDE.md

# 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! 🎉**