Test Plan

Ideal Test Plan

Unit Testing

• Full boundary testing for all 6 Fitzpatrick types
  
  

• Testing all 5 facial skin types (normal, oily, dry, combination, sensitive)
  
  

• Invalid input tests (empty answers, wrong formats)
  
  

• Component-level tests for Home, Quiz, Results, Resources, Reminder, and Navigation
  
  

• Mocked UV index API responses
  
  

• Tools: Jest, React Testing Library, Vitest
  
  

• Goal: 95 percent coverage
  
  

Integration and System Testing

• Entire quiz flow: Home → Quiz → Results
  
  

• All Fitzpatrick/skin-type combinations
  
  

• All navigation paths
  
  

• UV timer and geolocation
  
  

• Tools: Cypress or Playwright
  
  

Performance and Compatibility Testing

• Lighthouse performance score above 80
  
  

• Test on major browsers (Chrome, Firefox, Safari, Edge)
  
  

• Desktop, tablet, mobile views
  
  

Acceptance Testing

• Users with different skin tones and tech experience
  
  

• Tasks:
  
  

  • Complete quiz without guidance
    
    

  • Review and understand results
    
    

  • Explore sunscreen recommendations
    
    

  • Set reminder timer
    
    

• Success Criteria:
  
  

• 90% can finish quiz without assistance
  
  

• 90% clearly understand results
  
  

Actual Test Plan

Automated Unit Testing

Environment

• Node.js 23.7.0
  
  

• npm 11.1.0
  
  

• macOS Sequoia 15.6.1
  
  

Tests

• Fitzpatrick Scoring & Classification
  
  

  • Score boundaries for all Fitzpatrick types (I–VI)
    
    

  • Correct mapping from numeric score → skin type
    
    

  • Threshold edge cases
    
    

• Skin Type Extraction
  
  

  • Oily, dry, combination, and sensitive facial skin types
    
    

  • Default normal skin when no category matches
    
    

• UV Reapplication Logic
  
  

  • Correct lookup for UV categories
    
    

  • Correct reapplication intervals
    
    

  • Boundary conditions for min/max UV values
    
    

• Additional Validation
  
  

  • Consistency of configuration tables
    
    

  • Randomized integrity checks
    
    

Execution

Run: node src/tests.ts

Success Criteria

If all tests pass, the test runner will display:

==================================================

📊 Test Summary: 10/10 tests passed

✅ All tests passed!

==================================================

If any tests fail, the summary will instead show the number of failed tests, for example:

==================================================

📊 Test Summary: 8/10 tests passed

❌ 2 test(s) failed

==================================================

Manual Integration Testing

Environment

• Browser: Chrome 142.0.7444.176
  
  

• Device: MacBook Pro 13 inch M1
  
  

• OS: macOS Sonoma 14.2.1
  
  

• React 19.2.1, Vite 7.2.6
  
  

Tests

• TC-01: Complete Quiz Flow
  
  

  • Navigate to quiz → answer questions → verify results display
    
    

  • Expected: Correct skin types shown and recommended sunscreens align with skin types and sunscreen preferences
    
    

• TC-02: Results for All Fitzpatrick Types
  
  

  • Complete quiz 6 times targeting each type (I-VI)
    
    

  • Expected: Each type displays correct skin information and sunscreen recommendations
    
    

• TC-03: UV Reminder Timer
  
  

  • Navigate to Reminder → allow geolocation → start timer
    
    

  • Expected: Location and UV index fetched, timer starts and counts down correctly
    
    

• TC-04: Navigation
  
  

  • Test all page navigation (Home, Quiz, Results, Resources, Reminder)
    
    

  • Expected: All routes work, state preserved
    
    

• TC-05: Mobile Responsive
  
  

  • Test on iPhone 14 viewport (390×844)
    
    

  • Expected: All elements functional and readable
    
    

Execution

• Run: npm run dev
  
  

• Open http://localhost:5173/
  
  

• Execute TC-01 through TC-05

Performance Testing

Platforms

• Browsers
  
  

  • Chrome
    
    

  • Firefox
    
    

  • Safari
    
    

  • Edge

• Devices
  
  

  • Desktop
    
    

  • Tablet
    
    

  • Smartphone
    
    

Execution

• Open Chrome DevTools (F12)
  
  

• Navigate to Lighthouse tab
  
  

• Run performance audit
  
  

• Record scores
  
  

Success Criteria

• Initial load: < 3 seconds
  
  

• Performance score: > 80
  
  

Acceptance Testing

Who: Five external users

Tasks

• Complete quiz without guidance
  
  

• Review and understand results
  
  

• Explore sunscreen recommendations
  
  

• Set reminder timer
  
  

Success Criteria

• 90% can finish quiz without assistance
  
  

• 90% clearly understand results
  
  

Tools

• Node.js: Unit Testing
  
  

• Google Chrome: Integration Testing, Acceptance Testing
  
  

• Chrome DevTools: Performance Testing
  
  

Completion Criteria

• All automated tests pass
  
  

• All manual test cases pass
  
  

• All performance tests pass
  
  

• All acceptance tests passes
  
  

• No critical bugs reported