fix(m4): TableRow spreads rest props for data-testid; improve E2E timeouts

e2e/plans.spec.ts

@@ -5,25 +5,25 @@ test.describe('Plans', () => {
   test.beforeEach(async ({ page }) => {
     await login(page);
     await page.goto('/plans');
-    await page.waitForLoadState('networkidle');
   });
 
   test('plans page renders with header and table', async ({ page }) => {
-    await expect(page.locator('h1:has-text("Plans")')).toBeVisible();
+    await expect(page.locator('h1:has-text("Plans")')).toBeVisible({ timeout: 10000 });
     await expect(page.locator('table')).toBeVisible();
     await expect(page.locator('[data-testid="btn-add-plan"]')).toBeVisible();
   });
 
   test('plans list loads rows from API', async ({ page }) => {
-    // Wait for data to load
+    // Wait for rows to appear (demo tenant has seeded plans)
-    await page.waitForTimeout(3000);
+    await page.waitForSelector('[data-testid="plan-row"]', { timeout: 20000 });
     const rows = page.locator('[data-testid="plan-row"]');
-    const count = await rows.count();
+    expect(await rows.count()).toBeGreaterThan(0);
-    // Demo tenant has seeded plans
-    expect(count).toBeGreaterThan(0);
   });
 
   test('add plan modal opens and submits', async ({ page }) => {
+    // Wait for page to be ready
+    await page.waitForSelector('h1:has-text("Plans")', { timeout: 10000 });
+
     await page.click('[data-testid="btn-add-plan"]');
 
     // Modal should appear
@@ -41,19 +41,19 @@ test.describe('Plans', () => {
     // Submit
     await page.click('[data-testid="btn-submit-create"]');
 
-    // Wait for modal to close (API call + state update)
+    // Modal should close (API call + state update)
-    await expect(page.locator('[data-testid="modal-create-plan"]')).not.toBeVisible({ timeout: 10000 });
+    await expect(page.locator('[data-testid="modal-create-plan"]')).not.toBeVisible({ timeout: 15000 });
 
     // New plan should appear in the table
-    await page.waitForTimeout(1000);
+    await expect(page.locator(`text=${planName}`)).toBeVisible({ timeout: 10000 });
-    await expect(page.locator(`text=${planName}`)).toBeVisible({ timeout: 5000 });
   });
 
   test('edit plan modal opens and submits', async ({ page }) => {
-    await page.waitForTimeout(2000);
+    // Wait for rows
+    await page.waitForSelector('[data-testid="plan-row"]', { timeout: 20000 });
+
     const editBtns = page.locator('[data-testid="btn-edit-plan"]');
-    const count = await editBtns.count();
+    expect(await editBtns.count()).toBeGreaterThan(0);
-    expect(count).toBeGreaterThan(0);
 
     // Click first edit button
     await editBtns.first().click();
@@ -69,23 +69,24 @@ test.describe('Plans', () => {
     await page.click('[data-testid="btn-submit-edit"]');
 
     // Modal should close
-    await expect(page.locator('[data-testid="modal-edit-plan"]')).not.toBeVisible({ timeout: 10000 });
+    await expect(page.locator('[data-testid="modal-edit-plan"]')).not.toBeVisible({ timeout: 15000 });
   });
 
   test('delete plan shows confirmation and cancels', async ({ page }) => {
-    await page.waitForTimeout(2000);
+    // Wait for rows
-    const deleteBtns = page.locator('[data-testid="btn-delete-plan"]');
+    await page.waitForSelector('[data-testid="plan-row"]', { timeout: 20000 });
-    const count = await deleteBtns.count();
-    expect(count).toBeGreaterThan(0);
 
-    // Click last delete button (to avoid deleting seeded data, target the E2E-created plan)
+    const deleteBtns = page.locator('[data-testid="btn-delete-plan"]');
+    expect(await deleteBtns.count()).toBeGreaterThan(0);
+
+    // Click last delete button
     await deleteBtns.last().click();
 
     // Confirmation modal should appear
     await expect(page.locator('[data-testid="modal-delete-plan"]')).toBeVisible({ timeout: 5000 });
     await expect(page.locator('[data-testid="btn-confirm-delete"]')).toBeVisible();
 
-    // Cancel the delete
+    // Cancel the delete (don't actually delete seeded data)
     await page.click('[data-testid="btn-cancel-delete"]');
 
     // Modal should close

src/components/ui/Table.tsx

@@ -1,4 +1,5 @@
 import { cn } from "@/lib/utils";
+import { HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from "react";
 
 interface TableProps {
   children: React.ReactNode;
@@ -23,23 +24,26 @@ export function TableBody({ children }: TableProps) {
   return <tbody className="divide-y divide-gray-100">{children}</tbody>;
 }
 
-export function TableRow({ children, className, onClick }: TableProps & { onClick?: () => void }) {
+export function TableRow({
+  children, className, onClick, ...rest
+}: TableProps & { onClick?: () => void } & HTMLAttributes<HTMLTableRowElement>) {
   return (
     <tr
       className={cn("transition-colors", onClick && "cursor-pointer hover:bg-blue-50", className)}
       onClick={onClick}
+      {...rest}
     >
       {children}
     </tr>
   );
 }
 
-export function Th({ children, className }: TableProps) {
+export function Th({ children, className, ...rest }: TableProps & ThHTMLAttributes<HTMLTableCellElement>) {
-  return <th className={cn("px-4 py-3 text-left font-medium", className)}>{children}</th>;
+  return <th className={cn("px-4 py-3 text-left font-medium", className)} {...rest}>{children}</th>;
 }
 
-export function Td({ children, className }: TableProps) {
+export function Td({ children, className, ...rest }: TableProps & TdHTMLAttributes<HTMLTableCellElement>) {
-  return <td className={cn("px-4 py-3 text-gray-700", className)}>{children}</td>;
+  return <td className={cn("px-4 py-3 text-gray-700", className)} {...rest}>{children}</td>;
 }
 
 export function EmptyState({ message = "No data yet" }: { message?: string }) {