integratedhub/PROMPT.md

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:

// 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:

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:

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:

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

# 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