import { test, expect } from '@playwright/test'; import { login } from './helpers/auth'; test.describe('Payments', () => { test.beforeEach(async ({ page }) => { await login(page); await page.goto('/payments'); }); test('page renders with header and table', async ({ page }) => { await expect(page.locator('h1:has-text("Payments")')).toBeVisible(); await expect(page.locator('table')).toBeVisible(); }); test('payments list loads rows from API', async ({ page }) => { await expect(page.locator('[data-testid="payment-row"]').first()).toBeVisible({ timeout: 15000 }); const count = await page.locator('[data-testid="payment-row"]').count(); expect(count).toBeGreaterThan(0); }); test('channel filter buttons exist and toggle active state', async ({ page }) => { const cashBtn = page.locator('button:has-text("CASH")').first(); await expect(cashBtn).toBeVisible(); await cashBtn.click(); await expect(cashBtn).toHaveClass(/bg-blue-600/); // Reset to All await page.locator('button:has-text("All")').first().click(); }); test('clicking payment row opens detail modal', async ({ page }) => { await expect(page.locator('[data-testid="payment-row"]').first()).toBeVisible({ timeout: 15000 }); await page.locator('[data-testid="payment-row"]').first().click(); await expect(page.locator('text=Payment Details')).toBeVisible({ timeout: 5000 }); // Check modal has key fields await expect(page.locator('text=Amount')).toBeVisible(); await expect(page.locator('text=Method')).toBeVisible(); }); test('detail modal closes on close button', async ({ page }) => { await expect(page.locator('[data-testid="payment-row"]').first()).toBeVisible({ timeout: 15000 }); await page.locator('[data-testid="payment-row"]').first().click(); await expect(page.locator('text=Payment Details')).toBeVisible({ timeout: 5000 }); await page.locator('button:has-text("Close")').click(); await expect(page.locator('text=Payment Details')).not.toBeVisible({ timeout: 5000 }); }); });