D6.4.2 Test Execution Reports ‐ Web App Frontend - bounswe/bounswe2026group11 GitHub Wiki

D6.4.2 Test Execution Reports - Web App

Report date: 2026-04-11
Commit tested: b1ac014 (origin/main, "fix: not showing join request pending (#405)")
Test runner: Vitest 3.2.4 (jsdom environment)
Command: npm test (vitest run)
Result: ✅ All tests passed

Summary

Metric Value
Test files 10
Test cases 40
Passed 40
Failed 0
Skipped 0
Total duration ~1.6 s

Per-suite results

src/utils/validators.test.ts — 5 tests ✅

  • accepts a valid email
  • rejects an invalid OTP
  • rejects usernames with unsupported characters
  • allows blank phone numbers but rejects malformed input
  • rejects future birth dates

src/utils/eventStatus.test.ts — 5 tests ✅

  • getEventLifecyclePresentation maps ACTIVE to UPCOMING
  • getEventLifecyclePresentation maps IN_PROGRESS
  • getEventLifecyclePresentation returns null for other statuses
  • getEventStatusPresentation formats IN_PROGRESS into a user-facing label
  • getEventStatusPresentation formats unknown uppercase enum-like values into title case

src/utils/imageResize.test.ts — 2 tests ✅

  • prepareAvatarBlobs returns original and small blobs
  • prepareAvatarBlobs works with PNG files

src/services/api.test.ts — 12 tests ✅

  • apiGetAuth returns data on a successful response
  • apiGetAuth silently refreshes on 401 and retries with the new token
  • apiGetAuth calls onRefreshSuccess with new tokens after a successful refresh
  • apiGetAuth calls onRefreshFailure and throws when refresh request returns 401
  • apiGetAuth throws without attempting refresh when no token manager is set
  • apiGetAuth throws when retry after refresh also returns 401
  • apiGetAuth deduplicates concurrent refresh calls
  • apiPostAuth returns data on success
  • apiPostAuth silently refreshes on 401 and retries
  • apiPostAuth returns undefined for 204 responses
  • apiPatchAuth returns updated data on success
  • apiPatchAuth silently refreshes on 401 and retries

src/viewmodels/event/useMyEventsViewModel.test.ts — 3 tests ✅

  • splits upcoming response into upcoming (ACTIVE) and active (IN_PROGRESS)
  • returns empty active list when no IN_PROGRESS events
  • defaults to active tab

src/viewmodels/event/useEventDetailViewModel.test.ts — 3 tests ✅

  • adds favorite locally without refetching event detail
  • removes favorite locally without refetching event detail
  • rolls back the local favorite state when the request fails

src/viewmodels/favorites/useFavoritesViewModel.test.ts — 3 tests ✅

  • returns favorited events
  • returns empty list when no favorites
  • sets error on failure

src/App.test.tsx — 3 tests ✅

  • shows landing page when unauthenticated
  • redirects authenticated user from / to /discover
  • renders nothing while auth is loading

src/views/events/MyEventsPage.test.tsx — 1 test ✅

  • renders tabs in the updated order with "Hosted" label

src/views/events/EventDetailPage.test.tsx — 3 tests ✅

  • shows existing participant rating in summary mode until edit is requested
  • hides the participant rating card for non-participants
  • shows host-side participant ratings and edit actions in the management list

Environment

Item Value
OS macOS (darwin 25.2.0)
Node.js v20.12.2
Package manager npm 10.5.0
Test framework Vitest 3.2.4
DOM environment jsdom 25
React Testing Library @testing-library/react

Coverage notes

These automated tests cover the unit / integration-of-components layer of the web frontend:

  • Validators & utilities — pure functions for form validation, event status mapping, and image blob preparation.
  • API service layer — Bearer-auth fetch helpers, including silent token refresh, concurrent refresh deduplication, 401 retry, and refresh-failure handling.
  • View models — state management hooks for My Events, Event Detail (favorites optimistic update + rollback), and Favorites.
  • Views — routing behavior (App.tsx), MyEventsPage tab rendering, and EventDetailPage rating display for both participant and host perspectives.

User flows that are validated manually rather than through automated tests (per the Test Plan & Coverage page) include: registration → OTP → login, event creation with location and tags, event discovery/filters, join flows (public/protected), profile editing, favorites page, and expiry warning banner. These were exercised on the deployed web app during UAT sessions and are tracked as ✅ in the coverage matrix under the Frontend column.

How to reproduce

cd frontend
npm install
npm test

Expected output (tail):

 Test Files  10 passed (10)
      Tests  40 passed (40)
   Duration  ~1.6s