From 5fdff3741ddae5adb1f0621d9bb9e10367a4b9f8 Mon Sep 17 00:00:00 2001
From: TortoiseWolfe <101219421+TortoiseWolfe@users.noreply.github.com>
Date: Fri, 3 Jul 2026 14:24:07 -0400
Subject: [PATCH] fix(test): #163 add data-payment-item hook so
 payment-isolation E2E scopes on rendered rows
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The payment-isolation "shows only own payments" E2E asserts
`hasNoPayments || hasPayments`, counting `[data-payment-item]` for the
list branch. PaymentHistory never emitted that attribute, so the test
only passed via the empty-state — it went red the moment the shared
fixture user acquired a seeded payment row (verified via the failure
trace: query returned 200 with one row, component rendered the table,
neither test branch matched). Not flake, not a regression from #156 —
a latent test-selector gap. Confirmed pre-existing by re-running E2E on
the pre-#156 commit (also red).

Adds data-payment-item to the desktop table rows and mobile cards so
the list branch matches actual rendered payments.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 src/components/payment/PaymentHistory/PaymentHistory.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/payment/PaymentHistory/PaymentHistory.tsx b/src/components/payment/PaymentHistory/PaymentHistory.tsx
index c4ec1e46..a0899901 100644
--- a/src/components/payment/PaymentHistory/PaymentHistory.tsx
+++ b/src/components/payment/PaymentHistory/PaymentHistory.tsx
@@ -296,7 +296,7 @@ export const PaymentHistory: React.FC<PaymentHistoryProps> = ({
           </thead>
           <tbody>
             {paginatedPayments.map((payment) => (
-              <tr key={payment.id} className="hover">
+              <tr key={payment.id} className="hover" data-payment-item>
                 <td>{new Date(payment.created_at).toLocaleDateString()}</td>
                 <td className="font-semibold">
                   {formatPaymentAmount(
@@ -355,7 +355,11 @@ export const PaymentHistory: React.FC<PaymentHistoryProps> = ({
       {/* Cards - Mobile */}
       <div className="flex flex-col gap-3 sm:hidden">
         {paginatedPayments.map((payment) => (
-          <div key={payment.id} className="card bg-base-100 shadow">
+          <div
+            key={payment.id}
+            className="card bg-base-100 shadow"
+            data-payment-item
+          >
             <div className="card-body p-4">
               <div className="flex items-center justify-between">
                 <span className="text-base-content/85 text-sm">