fix(m5): add data-testid to payment rows; upgrade E2E spec with proper selectors

This commit is contained in:
root
2026-03-31 02:18:52 +00:00
parent fa6a525c1f
commit 512b9ef830
2 changed files with 24 additions and 15 deletions

View File

@@ -90,7 +90,7 @@ export default function PaymentsPage() {
) : payments.length === 0 ? ( ) : payments.length === 0 ? (
<EmptyState colSpan={7} message="No payments found" icon={<CreditCard size={24} />} /> <EmptyState colSpan={7} message="No payments found" icon={<CreditCard size={24} />} />
) : payments.map(p => ( ) : payments.map(p => (
<TableRow key={p.id} onClick={() => setSelected(p)} className="cursor-pointer hover:bg-blue-50 transition-colors"> <TableRow key={p.id} data-testid="payment-row" onClick={() => setSelected(p)} className="cursor-pointer hover:bg-blue-50 transition-colors">
<Td className="text-sm">{p.paymentDate ? formatDate(p.paymentDate) : formatDate(p.createdAt)}</Td> <Td className="text-sm">{p.paymentDate ? formatDate(p.paymentDate) : formatDate(p.createdAt)}</Td>
<Td className="font-medium"> <Td className="font-medium">
{p.client ? `${p.client.firstName} ${p.client.lastName}` : "—"} {p.client ? `${p.client.firstName} ${p.client.lastName}` : "—"}

View File

@@ -7,31 +7,40 @@ test.describe('Payments', () => {
await page.goto('/payments'); await page.goto('/payments');
}); });
test('payments page renders', async ({ page }) => { test('page renders with header and table', async ({ page }) => {
await expect(page.locator('h1:has-text("Payments")')).toBeVisible(); await expect(page.locator('h1:has-text("Payments")')).toBeVisible();
await expect(page.locator('table')).toBeVisible(); await expect(page.locator('table')).toBeVisible();
}); });
test('payments load with amounts', async ({ page }) => { test('payments list loads rows from API', async ({ page }) => {
await page.waitForSelector('tbody tr', { timeout: 15000 }); await expect(page.locator('[data-testid="payment-row"]').first()).toBeVisible({ timeout: 15000 });
const rows = page.locator('tbody tr'); const count = await page.locator('[data-testid="payment-row"]').count();
const count = await rows.count();
expect(count).toBeGreaterThan(0); expect(count).toBeGreaterThan(0);
}); });
test('channel filter buttons work', async ({ page }) => { test('channel filter buttons exist and toggle active state', async ({ page }) => {
const cashBtn = page.locator('button:has-text("CASH")').first(); const cashBtn = page.locator('button:has-text("CASH")').first();
await expect(cashBtn).toBeVisible();
await cashBtn.click(); await cashBtn.click();
await page.waitForTimeout(500); await expect(cashBtn).toHaveClass(/bg-blue-600/);
await expect(page.locator('h1:has-text("Payments")')).toBeVisible(); // Reset to All
// All filter works await page.locator('button:has-text("All")').first().click();
await page.locator('button:has-text("All")').click();
}); });
test('clicking payment row opens detail modal', async ({ page }) => { test('clicking payment row opens detail modal', async ({ page }) => {
await page.waitForSelector('tbody tr', { timeout: 15000 }); await expect(page.locator('[data-testid="payment-row"]').first()).toBeVisible({ timeout: 15000 });
await page.locator('tbody tr').first().click(); await page.locator('[data-testid="payment-row"]').first().click();
await page.waitForTimeout(300); await expect(page.locator('text=Payment Details')).toBeVisible({ timeout: 5000 });
await expect(page.locator('text=Payment Details')).toBeVisible(); // 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 });
}); });
}); });