web/e2e/payment.spec.ts

import { test, expect, type Page } from '@playwright/test'

// Critical mock-payment journeys against the deployed backend + React build.
// The mock customer-action is simulated via the dev-only /mock-advance endpoint,
// surfaced in the UI as "Simulate settlement (mock)".

async function loginDemo(page: Page): Promise<void> {
  await page.goto('/#/enroll')
  await page.getByRole('button', { name: /Load demo identity|تحميل هوية/ }).click()
  await expect(page.getByText(/Signed in as|مُسجّل الدخول/)).toBeVisible()
}

test('mock payment succeeds via customer action', async ({ page }) => {
  await loginDemo(page)
  await page.goto('/#/pay')
  await page.getByRole('button', { name: 'Pay' }).click()
  await expect(page.getByText('Awaiting your bank')).toBeVisible()
  await page.getByRole('button', { name: 'Simulate settlement (mock)' }).click()
  await expect(page.getByText('Succeeded')).toBeVisible({ timeout: 15_000 })
})

test('duplicate submission is prevented (form replaced by receipt)', async ({ page }) => {
  await loginDemo(page)
  await page.goto('/#/pay')
  const pay = page.getByRole('button', { name: 'Pay' })
  await pay.click()
  await expect(page.getByText('Awaiting your bank')).toBeVisible()
  await expect(pay).toHaveCount(0)
})

test('Arabic RTL flow', async ({ page }) => {
  await page.goto('/#/pay')
  await page.getByRole('button', { name: 'العربية' }).click()
  await expect(page.locator('html')).toHaveAttribute('dir', 'rtl')
  await expect(page.getByText('الدفع — بدون بطاقة')).toBeVisible()
})

test('English flow shows normalized status labels', async ({ page }) => {
  await loginDemo(page)
  await page.goto('/#/pay')
  await page.getByRole('button', { name: 'Pay' }).click()
  await expect(page.getByText('Awaiting your bank')).toBeVisible()
})