From e4f04cf38e2172968db9eab3b884ee1afdc48169 Mon Sep 17 00:00:00 2001
From: root <root@fiberops-dev.juankibin.space>
Date: Tue, 31 Mar 2026 03:23:55 +0000
Subject: [PATCH] test: fix E2E spec selectors for payments and remittances
 (strict mode, heading role)

---
 e2e/payments.spec.ts    |  4 ++--
 e2e/remittances.spec.ts | 17 +++++++++--------
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/e2e/payments.spec.ts b/e2e/payments.spec.ts
index 3731256..4c2dcb1 100644
--- a/e2e/payments.spec.ts
+++ b/e2e/payments.spec.ts
@@ -32,8 +32,8 @@ test.describe('Payments', () => {
     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();
+    await expect(page.locator('.fixed.inset-0 span:has-text("Amount")').first()).toBeVisible();
+    await expect(page.locator('.fixed.inset-0 span:has-text("Method")').first()).toBeVisible();
   });
 
   test('detail modal closes on close button', async ({ page }) => {
diff --git a/e2e/remittances.spec.ts b/e2e/remittances.spec.ts
index f116c7b..49d6652 100644
--- a/e2e/remittances.spec.ts
+++ b/e2e/remittances.spec.ts
@@ -18,17 +18,18 @@ test.describe('Remittances', () => {
 
   test('submit remittance modal opens', async ({ page }) => {
     await page.click('[data-testid="btn-submit-remittance"]');
-    await expect(page.locator('text=Submit Remittance')).toBeVisible({ timeout: 5000 });
+    await expect(page.getByRole('heading', { name: 'Submit Remittance' })).toBeVisible({ timeout: 5000 });
     // Close modal
     await page.locator('button:has-text("Cancel")').click();
-    await expect(page.locator('text=Submit Remittance')).not.toBeVisible({ timeout: 3000 });
+    await expect(page.getByRole('heading', { name: 'Submit Remittance' })).not.toBeVisible({ timeout: 3000 });
   });
 
-  test('empty state shows when no remittances', async ({ page }) => {
-    // Either rows exist OR empty state message shows — both are valid
+  test('empty state or rows shown after load', async ({ page }) => {
+    // Wait for loading skeleton to disappear
+    await page.waitForFunction(() => !document.querySelector('.animate-pulse'), { timeout: 10000 });
     const hasRows = await page.locator('[data-testid="remittance-row"]').count();
-    const hasEmpty = await page.locator('text=No remittances yet').isVisible().catch(() => false);
-    expect(hasRows > 0 || hasEmpty).toBeTruthy();
+    const hasEmpty = await page.locator('text=No remittances yet').count();
+    expect(hasRows > 0 || hasEmpty > 0).toBeTruthy();
   });
 
   test('clicking remittance row opens detail modal', async ({ page }) => {
@@ -40,9 +41,9 @@ test.describe('Remittances', () => {
       return;
     }
     await rows.first().click();
-    await expect(page.locator('text=Remittance Details')).toBeVisible({ timeout: 5000 });
+    await expect(page.getByRole('heading', { name: 'Remittance Details' })).toBeVisible({ timeout: 5000 });
     await expect(page.locator('text=Total Amount')).toBeVisible();
     await page.locator('button:has-text("Close")').click();
-    await expect(page.locator('text=Remittance Details')).not.toBeVisible({ timeout: 3000 });
+    await expect(page.getByRole('heading', { name: 'Remittance Details' })).not.toBeVisible({ timeout: 3000 });
   });
 });
-- 
2.43.0