hosting-frontend/docs/UAT.md

# User Acceptance Testing (UAT) Guide

Comprehensive UAT scenarios for Portfolio Host application.

## Test Environment Setup

### Prerequisites
- Test user accounts created
- Test data prepared
- Browser: Chrome, Firefox, Safari, Edge (latest versions)
- Mobile device (iOS and Android)
- Test API endpoint configured

### Test Execution
- Date: [DATE]
- Tester: [NAME]
- Environment: Staging/Production
- Duration: [TIME]

---

## 1. User Registration & Authentication

### Scenario 1.1: User Registration
**Steps**:
1. Navigate to landing page
2. Click "Sign Up" button
3. Fill registration form:
   - Name: John Portfolio Creator
   - Email: john@example.com
   - Password: TestPass123!
   - Confirm Password: TestPass123!
4. Click "Create Account"

**Expected Results**:
- ✅ Form validates all fields
- ✅ Password requirements displayed
- ✅ Success message shown
- ✅ Redirected to login or dashboard
- ✅ Confirmation email sent (if configured)

### Scenario 1.2: User Login
**Steps**:
1. Navigate to login page
2. Enter email: john@example.com
3. Enter password: TestPass123!
4. Click "Sign In"

**Expected Results**:
- ✅ Login successful
- ✅ Redirected to dashboard
- ✅ User name displayed in navbar
- ✅ Session persisted (can refresh without re-login)

### Scenario 1.3: Logout
**Steps**:
1. From dashboard, click logout button
2. Confirm logout

**Expected Results**:
- ✅ Session cleared
- ✅ Redirected to landing page
- ✅ Cannot access dashboard without re-login

### Scenario 1.4: Password Reset
**Steps**:
1. Navigate to login page
2. Click "Forgot Password"
3. Enter email
4. Click reset link in email
5. Enter new password
6. Login with new password

**Expected Results**:
- ✅ Reset email sent
- ✅ Link works and expires after time
- ✅ New password accepted
- ✅ Old password no longer works

---

## 2. Portfolio Management

### Scenario 2.1: Create Portfolio
**Steps**:
1. Go to Dashboard
2. Click "Create New Portfolio"
3. Enter:
   - Name: My Portfolio
   - Domain: myportfolio.com
4. Click "Create"

**Expected Results**:
- ✅ Portfolio created
- ✅ Added to portfolio list
- ✅ Status shows "Pending Upload"
- ✅ Created date displayed

### Scenario 2.2: Upload Portfolio Files
**Steps**:
1. Select portfolio "My Portfolio"
2. Click "Upload ZIP"
3. Select portfolio.zip file (contains index.html + assets)
4. Wait for upload to complete

**Expected Results**:
- ✅ Upload progress shown
- ✅ Status changes to "Deployed"
- ✅ Portfolio accessible at domain
- ✅ All assets load correctly

### Scenario 2.3: View Portfolio
**Steps**:
1. From dashboard, click "View" button
2. Verify portfolio displays correctly

**Expected Results**:
- ✅ Portfolio opens in new tab
- ✅ All pages load correctly
- ✅ Links work properly
- ✅ Images/assets display

### Scenario 2.4: Edit Portfolio Settings
**Steps**:
1. Click "Edit" on portfolio
2. Change name to "My Updated Portfolio"
3. Save changes

**Expected Results**:
- ✅ Changes saved
- ✅ Updated name displayed
- ✅ Portfolio still accessible

### Scenario 2.5: Delete Portfolio
**Steps**:
1. Click "Delete" on portfolio
2. Confirm deletion

**Expected Results**:
- ✅ Portfolio removed from list
- ✅ Confirmation message shown
- ✅ Portfolio no longer accessible
- ✅ Domain becomes available for reuse

---

## 3. Mobile Responsiveness

### Scenario 3.1: Landing Page Mobile
**Steps**:
1. Open landing page on mobile (375px width)
2. Verify all sections visible
3. Test navigation
4. Test CTA buttons

**Expected Results**:
- ✅ Hero section readable
- ✅ Features display in single column
- ✅ FAQ accordion works on mobile
- ✅ Stats section responsive
- ✅ Buttons have 44x44px touch targets
- ✅ No horizontal scroll

### Scenario 3.2: Dashboard Mobile
**Steps**:
1. Login on mobile
2. View portfolio list
3. Test view, edit, delete actions

**Expected Results**:
- ✅ List view used automatically on mobile
- ✅ Buttons accessible on touch screen
- ✅ Proper spacing between elements
- ✅ No overlapping content

### Scenario 3.3: Mobile Menu
**Steps**:
1. Open navigation on mobile
2. Click hamburger menu
3. Test navigation links

**Expected Results**:
- ✅ Menu toggles open/closed
- ✅ All links visible in menu
- ✅ Links work correctly
- ✅ Menu closes after selection

---

## 4. Accessibility Testing

### Scenario 4.1: Keyboard Navigation
**Steps**:
1. Use Tab key to navigate through all interactive elements
2. Verify focus indicator visible
3. Use Enter key on buttons
4. Use Escape to close modals

**Expected Results**:
- ✅ All buttons/links reachable via Tab
- ✅ Focus indicator clearly visible
- ✅ Logical tab order
- ✅ Escape key closes dialogs

### Scenario 4.2: Screen Reader Testing
**Steps**:
1. Use screen reader (NVDA, JAWS, VoiceOver)
2. Navigate through page
3. Verify all content announced

**Expected Results**:
- ✅ All headings announced
- ✅ Form labels associated with inputs
- ✅ Button purposes clear
- ✅ Error messages announced
- ✅ Status updates announced

### Scenario 4.3: Color Contrast
**Steps**:
1. Use color contrast analyzer
2. Check text contrast ratios
3. Verify color not only indication

**Expected Results**:
- ✅ Text contrast 4.5:1 minimum
- ✅ UI controls 3:1 minimum
- ✅ Color combined with icons/text

---

## 5. Performance Testing

### Scenario 5.1: Page Load Speed
**Steps**:
1. Open developer tools
2. Measure page load time
3. Check Lighthouse score

**Expected Results**:
- ✅ Page loads in < 2 seconds
- ✅ Lighthouse score > 90
- ✅ Smooth animations

### Scenario 5.2: API Response Time
**Steps**:
1. Check network tab in DevTools
2. Monitor API response times
3. Check database queries

**Expected Results**:
- ✅ API responses < 200ms
- ✅ No slow queries
- ✅ Proper caching implemented

### Scenario 5.3: Load Testing
**Steps**:
1. Simulate 50 concurrent users
2. Monitor server response time
3. Check error rates

**Expected Results**:
- ✅ Response time < 500ms
- ✅ No 500 errors
- ✅ All users can login/access portfolios

---

## 6. Browser Compatibility

### Scenario 6.1: Chrome
**Steps**:
1. Test all features in Chrome latest
2. Check rendering
3. Verify JavaScript works

**Expected Results**:
- ✅ All features work
- ✅ No console errors
- ✅ Renders correctly

### Scenario 6.2: Firefox
**Steps**:
1. Test all features in Firefox latest
2. Check rendering
3. Verify JavaScript works

**Expected Results**:
- ✅ All features work
- ✅ No console errors
- ✅ Renders correctly

### Scenario 6.3: Safari
**Steps**:
1. Test all features in Safari latest
2. Check rendering
3. Verify JavaScript works

**Expected Results**:
- ✅ All features work
- ✅ No console errors
- ✅ Renders correctly

### Scenario 6.4: Edge
**Steps**:
1. Test all features in Edge latest
2. Check rendering
3. Verify JavaScript works

**Expected Results**:
- ✅ All features work
- ✅ No console errors
- ✅ Renders correctly

---

## 7. Security Testing

### Scenario 7.1: SQL Injection
**Steps**:
1. Try SQL injection in login: `' OR '1'='1`
2. Verify handled safely

**Expected Results**:
- ✅ Input sanitized
- ✅ No SQL error shown
- ✅ Generic error message

### Scenario 7.2: XSS Prevention
**Steps**:
1. Try to inject JavaScript in portfolio name
2. Verify content escaped

**Expected Results**:
- ✅ Script not executed
- ✅ Content displayed as text
- ✅ No console errors

### Scenario 7.3: CSRF Protection
**Steps**:
1. Verify CSRF tokens present
2. Check token validation

**Expected Results**:
- ✅ CSRF tokens included in forms
- ✅ Requests validated

### Scenario 7.4: SSL/HTTPS
**Steps**:
1. Verify site uses HTTPS
2. Check certificate valid
3. Check no mixed content

**Expected Results**:
- ✅ Green lock icon
- ✅ Certificate valid
- ✅ No mixed content warnings

---

## 8. Data Validation

### Scenario 8.1: Email Validation
**Steps**:
1. Try invalid emails: `test@`, `@test.com`, `test`
2. Verify validation works

**Expected Results**:
- ✅ Invalid emails rejected
- ✅ Error message shown
- ✅ Valid emails accepted

### Scenario 8.2: Password Validation
**Steps**:
1. Try short password (< 6 chars)
2. Try valid password
3. Verify confirmation matching

**Expected Results**:
- ✅ Too short rejected
- ✅ Valid password accepted
- ✅ Mismatch detected

### Scenario 8.3: Domain Validation
**Steps**:
1. Try invalid domain formats
2. Try valid domain

**Expected Results**:
- ✅ Invalid domains rejected
- ✅ Valid domains accepted
- ✅ Error messages clear

---

## 9. Error Handling

### Scenario 9.1: Network Errors
**Steps**:
1. Disconnect network
2. Try to load page
3. Verify error handling

**Expected Results**:
- ✅ Error message shown
- ✅ Can retry
- ✅ No infinite loading

### Scenario 9.2: Server Errors
**Steps**:
1. Trigger 500 error (if possible in test)
2. Verify error message

**Expected Results**:
- ✅ User-friendly error message
- ✅ Can try again
- ✅ No technical details exposed

### Scenario 9.3: Validation Errors
**Steps**:
1. Submit form with invalid data
2. Verify error messages

**Expected Results**:
- ✅ Clear error messages
- ✅ Fields highlighted
- ✅ Helpful suggestions

---

## 10. Data Persistence

### Scenario 10.1: Session Persistence
**Steps**:
1. Login to dashboard
2. Refresh page
3. Verify still logged in

**Expected Results**:
- ✅ Session maintained
- ✅ User still logged in
- ✅ Portfolio data loaded

### Scenario 10.2: Data Recovery
**Steps**:
1. Create portfolio
2. Refresh page
3. Verify portfolio still exists

**Expected Results**:
- ✅ Data persisted
- ✅ No data loss
- ✅ Updated correctly

---

## Sign-Off

- ✅ All test scenarios passed
- ✅ No critical bugs found
- ✅ No high-priority bugs blocking release
- ✅ Application ready for production

**Tester Signature**: _________________
**Date**: _________________
**Status**: ☐ Pass  ☐ Fail

---

**Last Updated**: 2025-10-17