Add E2E tests for appointment booking workflow

[github-actions]

Summary

This PR adds comprehensive Playwright E2E tests for the appointment booking workflow, a critical healthcare feature that allows medical staff to schedule patient appointments with practitioners or healthcare services.

Test File: tests/facility/appointments/appointmentBooking.spec.ts
Test Coverage: 7 test cases covering the complete booking flow
Related Issue: #16623

What Was Tested

Core Booking Flow

• ✅ Opening the appointment booking sheet from patient home page
• ✅ Selecting practitioners or healthcare services for appointments
• ✅ Filling appointment details (reason, tags)
• ✅ Navigating the date picker and time slot selection
• ✅ Creating appointments via the complete end-to-end workflow

UI Interactions

• ✅ Tab switching between "Book Appointment" and "Bookings" (existing appointments list)
• ✅ Closing the booking sheet via Escape key and close button
• ✅ Handling empty slot states gracefully (no available appointments)

Why This Matters

Appointment booking is one of the most frequently used features in CARE for scheduling patient care. This workflow was completely untested until now, despite being critical to daily healthcare operations. These tests ensure that:

1. Practitioners can book appointments without errors
2. The booking sheet UI works correctly across different screen sizes
3. Slot selection and date picking function properly
4. Error states are handled gracefully (e.g., no available slots)

Testing Approach

Patterns Used

• Role-based selectors: getByRole, getByLabel, getByText for accessibility compliance
• Helper utilities: selectFromCommand from tests/helper/ui.ts for consistent component interactions
• Dynamic data: faker for unique appointment reasons to prevent test collisions
• Web-first assertions: toBeVisible(), toHaveAttribute() for reliability
• Test steps: Organized with test.step() for clarity and debugging

Authentication

Uses tests/.auth/user.json (admin user) with necessary permissions to book appointments.

Fixtures

Leverages existing fixtures via:

• getFacilityId() - Test facility from setup
• getPatientId() - Test patient from setup

Test Quality Checklist

• ✅ Uses role-based selectors (avoids CSS selectors)
• ✅ Includes proper assertions (not just navigation checks)
• ✅ Handles loading states appropriately
• ✅ Tests both success and error/empty states
• ✅ Independent tests (no shared state)
• ✅ Follows naming convention: appointmentBooking.spec.ts
• ✅ Formatted with Prettier
• ✅ Passes ESLint with zero errors

How to Run Locally

# Prerequisites
npm run build                                    # Build app (required for tests)
# Ensure backend is running on port 9000 with fixtures

# Run this test file
npx playwright test tests/facility/appointments/appointmentBooking.spec.ts

# Run all appointment tests
npx playwright test tests/facility/appointments/

# Interactive debugging mode
npm run playwright:test:ui -- tests/facility/appointments/appointmentBooking.spec.ts

# Run with specific browser
npx playwright test tests/facility/appointments/appointmentBooking.spec.ts --project=chromium

Coverage Progress

Before: Appointments had only listing page tests (7 tests)
After: Appointments now have listing + booking workflow (14 tests total)

Coverage Estimate: ~30% of appointment workflows

Appointments Coverage:
├─ ✅ Listing page (filter, search, view modes) 
├─ ✅ Booking workflow (NEW) 
├─ ❌ Detail view
├─ ❌ Cancellation
├─ ❌ Rescheduling
├─ ❌ Status transitions
└─ ❌ Printing

Next Steps

The natural progression from booking tests:

1. Appointment detail view - View/edit booked appointments
2. Appointment cancellation - Critical reversal workflow
3. Token generation - Alternative walk-in appointment flow
4. Status transitions - Booked → Arrived → Fulfilled flow
5. Schedule templates - Provider-side availability management

Related Links

• Tracking Issue: [daily-playwright] Playwright Test Coverage Tracker #16623
• Testing Guide: tests/PLAYWRIGHT_GUIDE.md
• Yesterday's PR: [daily-playwright] Add E2E tests for appointments page
• Workflow Run: §30876429857

---

Technical Implementation Details

Component Structure Tested

The booking workflow involves several interconnected components:

1. BookAppointmentSheet - Main sheet/dialog container with tabs
2. BookAppointmentDetails - Form section with resource selector
3. AppointmentFormSection - Reason, tags, practitioner/service selection
4. AppointmentDateSelection - Calendar date picker
5. AppointmentSlotPicker - Time slot selection grid

Responsive Design Handling

The tests account for responsive differences:

• Desktop: Popover-based resource selection
• Mobile: Drawer-based resource selection
• Both: Handled seamlessly via selectFromCommand helper

Edge Cases Covered

• No practitioners available: Sheet still opens, shows empty state
• No time slots available: Graceful messaging, no errors
• Sheet closure: Both Escape key and close button tested
• Tab navigation: Switching between booking and existing appointments

---

AI generated by Daily Playwright Test Improver

AI generated by Daily Playwright Test Improver

[cloudflare-workers-and-pages]

Deploying care-preview with    Cloudflare Pages

Latest commit:	01f6f20
Status:	✅  Deploy successful!
Preview URL:	https://5a5d8d58.care-preview-a7w.pages.dev
Branch Preview URL:	https://daily-playwright-2026-08-04.care-preview-a7w.pages.dev

View logs