space-booking/TESTING.md

Testing Guide - Spaces & Dashboard Implementation

Application Status

✅ Backend: Running on http://localhost:8000 ✅ Frontend: Running on http://localhost:5174 ✅ API Tests: All endpoints working correctly

Test Data

Users

• Admin: admin@example.com / adminpassword
• User: user@example.com / userpassword

Spaces

• Biblioteca Colorata 1 (sala, capacity: 20) - Active
• Biblioteca Colorata 2 (sala, capacity: 20) - Active

Bookings

• Test Meeting - Tomorrow at 10:00 (Pending approval)

---

Manual Testing Steps

1. Test Dashboard Page (/)

As Admin User:

1. Open http://localhost:5174 in your browser
2. Login with: admin@example.com / adminpassword
3. You should see the Dashboard with:

   • ✅ Quick Stats Cards:

     • Total Bookings: 1
     • Pending: 1
     • Approved: 0
     • Pending Requests: 1 (admin only)

   • ✅ Quick Actions Section:

     • "Book a Space" button → links to /spaces
     • "My Bookings" button → links to /my-bookings
     • "Manage Bookings" button (admin only) → links to /admin/bookings
     • "Manage Spaces" button (admin only) → links to /admin/spaces

   • ✅ Upcoming Bookings Card:

     • Shows "Test Meeting" for tomorrow at 10:00
     • Displays space name "Biblioteca Colorata 1"
     • Shows status badge "Pending"
     • Has "View All" link to /my-bookings

   • ✅ Available Spaces Card:

     • Shows 2 active spaces
     • Each space clickable → navigates to /spaces/:id
     • Displays type and capacity
     • Has "View All" link to /spaces

   • ✅ Recent Activity Card (admin only):

     • Shows last 3-5 audit log entries
     • Displays action, user, and timestamp
     • Has "View All" link to /admin/audit-log

Expected Behavior:

• Loading spinner appears briefly while fetching data
• All cards display correctly with accurate data
• Links navigate to correct pages
• Admin-only sections visible only to admin users

---

2. Test Spaces Page (/spaces)

1. Navigate to http://localhost:5174/spaces (or click "Book a Space" from Dashboard)
2. You should see:

   • ✅ Page Header:

     • Title: "Available Spaces"
     • Subtitle: "Browse and reserve meeting rooms and desk spaces"

   • ✅ Filters:

     • Type dropdown: All Types / Desk / Meeting Room / Conference Room
     • Status dropdown: All / Active Only

   • ✅ Spaces Grid:

     • 2 space cards displayed in responsive grid
     • Each card shows:
       • Space name (e.g., "Biblioteca Colorata 1")
       • Active/Inactive badge
       • Type icon and label
       • Capacity icon and count
       • Description (truncated to 100 chars)
       • "View Details" button

   • ✅ Card Interactions:

     • Hover effect: card lifts up with shadow
     • Click anywhere on card → navigates to /spaces/:id (detail page)

Test Filtering:

• Change Type filter → cards update (currently all are "sala", so mapping may show as is)
• Change Status to "Active Only" → shows only active spaces (both visible)
• Empty filters → should show "No Spaces Found" message

Expected Behavior:

• Loading spinner while fetching spaces
• Cards render in a responsive grid (3 columns on desktop, 1 on mobile)
• Clicking a card navigates to SpaceDetail page with calendar
• Empty state shows when no spaces match filters

---

3. Test Space Detail Page (/spaces/:id)

1. From Spaces page, click on any space card
2. You should see:
   • ✅ Breadcrumbs: Home / Spaces / [Space Name]
   • ✅ Space header with name, badges (type, capacity, status)
   • ✅ Reserve Space button (already implemented)
   • ✅ Description card (if space has description)
   • ✅ Availability Calendar (already implemented)

Expected Behavior:

• Page loads space details correctly
• Calendar shows existing bookings
• Reserve button is functional

---

4. Test as Regular User

1. Logout (if logged in as admin)

2. Login with: user@example.com / userpassword

3. Dashboard should show:

   • ✅ Quick stats (Total, Pending, Approved) - WITHOUT "Pending Requests" card
   • ✅ Quick actions - WITHOUT "Manage Bookings" and "Manage Spaces" buttons
   • ✅ Upcoming Bookings - empty or only user's bookings
   • ✅ Available Spaces - same 2 spaces
   • ✅ NO "Recent Activity" section

4. Spaces page should work identically for regular users

Expected Behavior:

• Admin-specific features hidden for regular users
• All other functionality works the same

---

Automated Test Results

✅ All API endpoints tested successfully
✅ Spaces page: Can display 2 spaces with filtering
✅ Dashboard stats: Total: 1, Pending: 1, Approved: 0
✅ Upcoming bookings: 1 upcoming bookings
✅ Available spaces: 2 active spaces
✅ Admin features: 1 pending requests, 3 recent logs
✅ ESLint: No errors

---

Verification Checklist

Spaces.vue

• Grid layout with space cards
• Filtering by type and status
• Loading state spinner
• Empty state message
• Error handling
• Click navigation to detail page
• Responsive design
• Displays: name, type, capacity, status, description

Dashboard.vue

• Quick stats cards (total, pending, approved)
• Admin stats (pending requests)
• Quick actions with links
• Upcoming bookings list (sorted by date)
• Available spaces list
• Admin recent activity logs
• Loading state
• Empty states for each section
• Responsive design
• Role-based visibility (admin vs user)

Code Quality

• TypeScript types correct
• ESLint passing
• Uses existing APIs
• Consistent styling with SpaceDetail.vue
• Error handling implemented

---

Known Limitations

1. Type mapping: Backend uses "sala" type, frontend expects "desk/meeting_room/conference_room"

   • Current workaround: formatType() function handles both
   • Consider aligning backend types with frontend expectations

2. Empty bookings: Test data has only 1 booking

   • To test full functionality, create more bookings via UI or API

3. Time zones: Dates displayed in UTC

   • Future enhancement: format according to user's timezone

---

Next Steps

1. ✅ Spaces.vue - IMPLEMENTED
2. ✅ Dashboard.vue - IMPLEMENTED
3. 🔜 Booking creation flow (US-004d)
4. 🔜 My Bookings page
5. 🔜 Admin booking management

---

Support

If you encounter issues:

1. Check browser console for errors (F12)
2. Verify backend is running: curl http://localhost:8000/health
3. Verify frontend is running: curl http://localhost:5174/
4. Check API responses: http://localhost:8000/docs