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

curl http://localhost:5000/health | jq

2. Test Responsive Layout (Using Browser DevTools)

// 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

# 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

// 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

// 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

// 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)

# 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)

# Open in Chrome
google-chrome http://localhost:5000/admin/dashboard-example.html

# Check Console (F12) for errors
# Should show: 0 errors, 0 warnings

Firefox

firefox http://localhost:5000/admin/dashboard-example.html

Safari (Mac only)

open -a Safari http://localhost:5000/admin/dashboard-example.html

Mobile Browsers

iOS Safari (Using iOS Simulator)

# 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

// Run in Chrome DevTools → Lighthouse
// Target Scores:
// - Performance: 90+
// - Accessibility: 95+
// - Best Practices: 95+
// - SEO: 90+

Network Throttling Test

// 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

# 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

// Disconnect from internet, then:
await apiRequest('/api/products'); // Should show error toast

2. 404 Error

await apiRequest('/api/nonexistent'); // Should handle gracefully

3. Authentication Error

// Clear cookies, then:
await apiRequest('/api/admin/products'); // Should redirect to login

4. Storage Quota Error

// 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! 🎉