platform-codebase/@packages/@plugins/E2E_TESTING.md

E2E Testing Quick Start

Quick reference for running and writing E2E tests for the payment plugin.

Running Tests

# Install Playwright browsers (first time only)
pnpm exec playwright install

# Run all E2E tests
pnpm test:e2e

# Run in headed mode (see browser)
pnpm test:e2e:headed

# Run in debug mode
pnpm test:e2e:debug

# View HTML report
pnpm test:e2e:report

Test Coverage

809 lines of comprehensive E2E tests covering:

✅ Subscription Flows (7 tests)

• Display subscription tiers
• Complete subscription with credit card (no 3DS)
• Handle 3DS authentication
• Cryptocurrency payment
• Payment failure handling
• Change subscription tier
• Cancel subscription

✅ Tip Flows (7 tests)

• Display tip button
• Show tip presets (Coffee $5, Lunch $10, Amazing $50)
• Custom tip amounts
• Amount validation (min/max)
• Complete tip payment
• Optional message field
• Payment failure handling

✅ Payout Flows (9 tests)

• Display balance (available + pending)
• Minimum payout requirement
• Payout method selection
• Bank transfer payout
• PayPal payout
• Cryptocurrency payout
• Payout history
• Status badges
• Payout failure handling

✅ Payment Method Management (4 tests)

• Display saved methods
• Add new credit card
• Set default method
• Remove method

Total: 27 comprehensive E2E tests

Required Component Attributes

For E2E tests to work, components must include these data-testid attributes:

Subscription Components

<div data-testid="subscription-tier">
<div data-testid="tier-{id}">
<div data-testid="tier-name">
<div data-testid="tier-price">
<button data-testid="select-tier-button">
<div data-testid="payment-method-selector">
<div data-testid="payment-method-card">
<button data-testid="subscribe-button">
<div data-testid="subscription-success">
<div data-testid="3ds-modal">

Tip Components

<button data-testid="tip-button">
<div data-testid="tip-modal">
<div data-testid="tip-preset-{amount}">
<div data-testid="tip-custom">
<input data-testid="custom-tip-input">
<textarea data-testid="tip-message">
<button data-testid="send-tip-button">
<div data-testid="tip-success">

Payout Components

<div data-testid="payout-balance">
<div data-testid="available-balance">
<div data-testid="pending-balance">
<button data-testid="request-payout-button">
<div data-testid="payout-method-modal">
<div data-testid="method-bank-transfer">
<div data-testid="method-paypal">
<div data-testid="method-crypto">
<div data-testid="payout-history-table">

Writing New Tests

Pattern 1: Basic Flow Test

test('should complete payment flow', async ({ page }) => {
  // Navigate
  await page.goto('/subscribe')
  await page.waitForLoadState('networkidle')

  // Interact
  await page.locator('[data-testid="tier-premium"]').click()
  await page.locator('[data-testid="subscribe-button"]').click()

  // Assert
  await expect(page.locator('[data-testid="subscription-success"]')).toBeVisible()
})

Pattern 2: API Mocking

test('should handle payment failure', async ({ page }) => {
  // Mock API error
  await page.route('**/api/subscriptions/with-payment', (route) =>
    route.fulfill({
      status: 400,
      body: JSON.stringify({ error: 'CARD_DECLINED' }),
    })
  )

  // Trigger payment
  await page.locator('[data-testid="subscribe-button"]').click()

  // Verify error shown
  await expect(page.locator('[data-testid="payment-error"]')).toBeVisible()
})

Pattern 3: Form Interaction

test('should validate form inputs', async ({ page }) => {
  // Fill form
  await page.locator('[data-testid="custom-tip-input"]').fill('0.50')

  // Verify validation
  await expect(page.locator('[data-testid="tip-amount-error"]')).toBeVisible()
  await expect(page.locator('[data-testid="send-tip-button"]')).toBeDisabled()

  // Fix validation
  await page.locator('[data-testid="custom-tip-input"]').fill('10.00')
  await expect(page.locator('[data-testid="send-tip-button"]')).toBeEnabled()
})

Files Created

@packages/@plugins/payment/
├── playwright.config.ts                    # Playwright configuration
├── E2E_TESTING.md                         # This file (quick reference)
├── package.json                           # Updated with E2E scripts
└── src/__tests__/e2e/
    ├── payment-flows.spec.ts              # Main E2E test suite (809 lines)
    └── README.md                          # Detailed E2E test documentation

Next Steps

1. Install Playwright: pnpm exec playwright install
2. Run tests: pnpm test:e2e
3. Add data-testid attributes to components
4. Integrate with CI/CD (GitHub Actions, GitLab CI)
5. Add visual regression tests (optional)

Integration with Existing Tests

Payment plugin test structure:

src/__tests__/
├── setup.ts                               # MSW server setup
├── factories.ts                           # Test data factories
├── msw-handlers.ts                        # API mocking handlers
├── hooks/
│   ├── useSubscription.test.tsx           # Hook unit tests
│   └── useTipPayment.test.tsx             # Hook unit tests
└── e2e/
    ├── payment-flows.spec.ts              # E2E tests (NEW)
    └── README.md                          # E2E documentation (NEW)

Test pyramid:

• Unit tests (Vitest): Hook logic, utility functions
• Integration tests (MSW): API contract testing
• E2E tests (Playwright): Complete user flows

CI/CD Integration

GitHub Actions

- name: Install Playwright
  run: pnpm exec playwright install --with-deps

- name: Run E2E Tests
  run: pnpm test:e2e

- name: Upload Test Results
  if: always()
  uses: actions/upload-artifact@v3
  with:
    name: playwright-report
    path: playwright-report/

Troubleshooting

Tests fail with "element not found":

• Add data-testid attributes to components
• Use waitForSelector before assertions

Flaky tests:

• Replace waitForTimeout with waitForSelector
• Increase timeout for slow operations

Browser installation issues:

• Run pnpm exec playwright install --with-deps
• Check Node.js version (requires Node 16+)

References

• Full documentation: src/__tests__/e2e/README.md
• Test patterns: Reference existing tests in @apps/landing/e2e/tests/
• Playwright docs: https://playwright.dev/
• MSW docs: https://mswjs.io/

---

Created: 2025-12-19 Test Count: 27 comprehensive E2E tests Coverage: Subscriptions, Tips, Payouts, Payment Methods