# CyberHybridHub Comprehensive Testing Prompt

## Overview

CyberHybridHub is a Deno Fresh web application that provides free financial
calendar services and a comprehensive rental property management portal. The
platform serves both landlords and tenants with distinct user flows, dashboards,
and property management features.

## Core Functionality Areas Requiring Testing

### 1. Authentication & User Management

**Critical Paths:**

- User login/logout via Microsoft Graph integration
- Session management and state persistence
- Role-based access control (landlord, tenant, admin)
- User onboarding flows for both landlord and tenant roles
- Email verification and banking setup completion

**E2E Test Scenarios:**

- Login with valid credentials using E2E fixtures (`x-e2e-user` header)
- Logout functionality and session cleanup
- Access control verification (landlord cannot access tenant-only routes)
- Onboarding step progression and completion
- Session persistence across page refreshes

### 2. Landlord Portal Functionality

#### Property Management

- **Property CRUD Operations**: Create, view, edit, delete properties
- **Property Media Management**: Upload, reorder, delete photos/videos/documents
- **Property Status Management**: Draft → Active → Leased → Available
  transitions
- **Property Merge Functionality**: Merge duplicate properties with data
  migration
- **Property Cleanup**: Bulk operations and data integrity checks

#### Lease & Tenant Management

- **Lease Creation & Management**: Generate leases from applications
- **Tenant Application Processing**: Review, approve, reject applications
- **Tenant Invitations**: Send invites for existing properties
- **Lease Document Management**: Upload, sign, and manage lease documents
- **Rent Schedule Setup**: Configure payment schedules and late fees

#### Financial Management

- **Payment Processing**: Track rent payments, late fees, and transaction
  history
- **Financial Reporting**: Revenue tracking, expense management, portfolio
  analytics
- **Banking Integration**: Setup and manage payment methods
- **Security Deposit Management**: Track and return deposits

#### Communication & Maintenance

- **Messaging System**: Landlord-tenant communication with message threading
- **Maintenance Request Management**: Receive, assign, track, and resolve
  requests
- **Document Management**: Store and organize property-related documents
- **Reminder System**: Set and manage property-related reminders

### 3. Tenant Portal Functionality

#### Application & Onboarding

- **Property Applications**: Apply for rental properties with document uploads
- **Application Status Tracking**: Monitor application progress
- **Tenant Onboarding**: Complete profile setup and banking information
- **Invite Acceptance**: Respond to landlord invitations

#### Lease & Property Management

- **Lease Viewing**: Access current lease agreements and terms
- **Property Information**: View property details, amenities, and policies
- **Document Access**: Download lease documents, receipts, and notices
- **Maintenance Requests**: Submit and track maintenance requests

#### Financial Management

- **Payment Methods**: Setup and manage bank accounts for rent payments
- **Rent Payments**: Make scheduled rent payments online
- **Payment History**: View transaction history and receipts
- **Financial Calendar**: Track payment due dates and financial obligations

#### Communication

- **Messaging**: Communicate with landlord about property matters
- **Message Threading**: View conversation history and attachments
- **Notifications**: Receive alerts for payments, maintenance, and messages

### 4. Financial Calendar Services (Free Features)

#### Calendar Management

- **Financial Event Tracking**: Add income sources and financial obligations
- **Payment Scheduling**: Set up recurring payment reminders
- **Budget Management**: Track income vs. expenses
- **Calendar Views**: Monthly, yearly, and custom date range views

#### Data Management

- **CRUD Operations**: Create, read, update, delete financial entries
- **Data Persistence**: Ensure data survives page refreshes and logins
- **Privacy & Security**: Verify encrypted data storage

### 5. System-Wide Features

#### Navigation & UI/UX

- **Responsive Design**: Mobile, tablet, and desktop compatibility
- **Navigation Menu**: Hamburger menu with grouped navigation items
- **Search & Filtering**: Property search, message filtering, data sorting
- **Accessibility**: Keyboard navigation, screen reader compatibility, ARIA
  labels

#### Data Integrity & Security

- **Encryption**: Verify sensitive data encryption at rest and in transit
- **Session Security**: Proper session timeout and secure cookie handling
- **Input Validation**: Form validation and sanitization
- **Error Handling**: Graceful error recovery and user feedback

#### Performance & Reliability

- **Loading States**: Proper loading indicators during async operations
- **Error Boundaries**: Prevent crashes from component errors
- **Offline Handling**: Basic offline functionality and sync behavior
- **Health Checks**: API endpoint health monitoring

## Playwright Testing Implementation

### Testing Infrastructure Setup

**E2E Mode Configuration:**

```typescript
// Enable deterministic testing environment
E2E_TEST=true
// Use fixture data instead of live database
// Fixed base URL for consistent testing
BASE_URL=http://127.0.0.1:8080
```

**Test User Fixtures Available:**

- `landlord`: Fully onboarded landlord with properties and active leases
- `landlord-2`: Second landlord with separate property portfolio
- `landlord-onboarding`: New landlord starting onboarding process
- `tenant`: Fully onboarded tenant with active lease and payment history
- `admin`: Administrative user for system management

### Playwright Test Structure

#### 1. UI E2E Tests (Browser Automation)

**Test Pattern:**

```typescript
import { expect, test } from "@playwright/test";
import { applyDeterministicPage, useE2EUser } from "../helpers";

test.describe("Landlord Dashboard", () => {
  test("displays property portfolio overview", async ({ page }) => {
    await applyDeterministicPage(page);
    await useE2EUser(page, "landlord");

    await page.goto("/landlord/dashboard");
    await expect(page.locator("h1")).toContainText("Dashboard");
    // Verify property cards, income summary, recent activity
  });
});
```

#### 2. API E2E Tests (Direct API Calls)

**Test Pattern:**

```typescript
test.describe("Property API", () => {
  test("creates new property via API", async ({ request }) => {
    const response = await request.post("/api/create/property", {
      headers: e2eHeaders("landlord"),
      data: {
        title: "Test Property",
        address_1: "123 Test St",
        // ... other property data
      },
    });

    expect(response.status()).toBe(200);
    const property = await response.json();
    expect(property.title).toBe("Test Property");
  });
});
```

#### 3. Hybrid E2E Tests (API + UI)

**Test Pattern:**

```typescript
test.describe("Full Application Flow", () => {
  test("tenant applies and landlord approves", async ({ page, request }) => {
    // Setup: Create property via API
    const property = await createTestProperty(request);

    // UI: Tenant applies
    await useE2EUser(page, "tenant");
    await page.goto(`/rental-property/${property.id}`);
    await page.click('[data-testid="apply-button"]');
    // Complete application form...

    // API: Landlord approves
    const application = await getLatestApplication(request);
    await request.post(`/api/update/application-status`, {
      headers: e2eHeaders("landlord"),
      data: { applicationId: application.id, status: "approved" },
    });

    // UI: Verify lease creation
    await useE2EUser(page, "tenant");
    await page.goto("/tenant/dashboard");
    await expect(page.locator('[data-testid="active-lease"]')).toBeVisible();
  });
});
```

### Critical UI Experience Testing

#### 1. Navigation & Flow Testing

- **Menu Navigation**: Test hamburger menu, dropdown groups, and route
  navigation
- **Breadcrumbs**: Verify breadcrumb navigation in deep property pages
- **Back Button**: Test browser back button functionality and state preservation
- **Tab Navigation**: Test keyboard-only navigation and focus management

#### 2. Form Interaction Testing

- **Validation**: Test form validation with valid and invalid inputs
- **File Uploads**: Test document uploads for applications and property media
- **Multi-step Forms**: Test onboarding flows and application processes
- **Auto-save**: Test draft saving and form state persistence

#### 3. Data Display & Interaction

- **Data Tables**: Test sorting, filtering, and pagination in data tables
- **Search Functionality**: Test property search and message filtering
- **Modal Dialogs**: Test modal interactions, overlays, and focus trapping
- **Responsive Design**: Test layout on mobile, tablet, and desktop viewports

#### 4. Real-time Features

- **Live Updates**: Test real-time message updates and notifications
- **Status Changes**: Test status updates for maintenance requests and
  applications
- **Payment Processing**: Test payment flow and status updates
- **Calendar Integration**: Test calendar date selection and event creation

### Error Handling & Edge Cases

#### 1. Network & Performance

- **Slow Connections**: Test loading states and timeouts
- **Network Failures**: Test offline behavior and error recovery
- **Large Data Sets**: Test pagination and performance with large data
- **Concurrent Users**: Test session isolation and data consistency

#### 2. Data Validation

- **Invalid Inputs**: Test form validation and error messages
- **Missing Data**: Test behavior with incomplete user profiles
- **Expired Sessions**: Test session timeout and re-authentication
- **Permission Errors**: Test access control and error handling

#### 3. Browser Compatibility

- **Cross-browser**: Test in Chromium, Firefox, and Safari
- **Mobile Browsers**: Test iOS and mobile browser compatibility
- **Screen Readers**: Test accessibility with screen reader tools
- **Keyboard Navigation**: Test full keyboard accessibility

## Test Execution & Reporting

### Running Tests

```bash
# Run all E2E tests
deno task e2e

# Run tests with UI interface
deno task e2e:ui

# Generate test report
deno task e2e:report
```

### Test Organization

```
tests/e2e/
├── auth/
│   ├── login.spec.ts
│   ├── logout.spec.ts
│   └── onboarding.spec.ts
├── landlord/
│   ├── dashboard.spec.ts
│   ├── properties.spec.ts
│   ├── applications.spec.ts
│   ├── leases.spec.ts
│   ├── maintenance.spec.ts
│   └── payments.spec.ts
├── tenant/
│   ├── dashboard.spec.ts
│   ├── applications.spec.ts
│   ├── payments.spec.ts
│   └── maintenance.spec.ts
├── financial-calendar/
│   ├── income.spec.ts
│   ├── obligations.spec.ts
│   └── calendar.spec.ts
├── api/
│   ├── properties-api.spec.ts
│   ├── payments-api.spec.ts
│   └── messages-api.spec.ts
├── helpers/
│   ├── fixtures.ts
│   ├── auth-helpers.ts
│   └── data-generators.ts
└── utils/
    ├── test-utils.ts
    └── assertions.ts
```

### Success Criteria

- **Coverage**: All critical user flows tested with both UI and API approaches
- **Deterministic**: Tests produce consistent results across runs
- **Maintainable**: Clear test structure with reusable helpers and fixtures
- **Performance**: Tests complete within reasonable time limits
- **Reliability**: Minimal false failures and robust error handling