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