fix(m5): add data-testid to payment rows; upgrade E2E spec with proper selectors
This commit is contained in:
@@ -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}` : "—"}
|
||||||
|
|||||||
@@ -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 });
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user