From 22720168c4e27e3037be4961b11d759032efff63 Mon Sep 17 00:00:00 2001
From: Tyler <tyler@crispygoat.com>
Date: Sun, 21 Jun 2026 18:08:43 -0600
Subject: [PATCH] test(claims): wrap page in DrillStackProvider, switch to
 DrillDrawerHeader testids

Phase 5 Task 5.8 (PartiesGrid) and 5.9 (ValidationPanel) added useDrillStack()
calls, so Claims.test.tsx needs a DrillStackProvider wrapper around the
page render to keep the hook happy. Task 5.10 refactored the ClaimDrawer
header onto the shared DrillDrawerHeader, so the deep-link and close-button
tests need to find the title via <h2> and the close button via
aria-label='Close drawer' instead of the now-removed header-id /
header-close testids.

Without this fix the page-level Claims tests report 3 failures
(deep link, URL clear after close, ?-mark with drawer closed) that
were not failing on the Phase 4 base (9a313d2).
---
 src/pages/Claims.test.tsx | 47 ++++++++++++++++++++++++++-------------
 1 file changed, 32 insertions(+), 15 deletions(-)

diff --git a/src/pages/Claims.test.tsx b/src/pages/Claims.test.tsx
index bde6380..ebf2d0b 100644
--- a/src/pages/Claims.test.tsx
+++ b/src/pages/Claims.test.tsx
@@ -10,6 +10,7 @@ import { describe, expect, it, vi, beforeEach, afterEach } from "vitest";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { MemoryRouter } from "react-router-dom";
 import { Claims } from "./Claims";
+import { DrillStackProvider } from "@/components/drill/DrillStackProvider";
 import { api } from "@/lib/api";
 import { useTailStore } from "@/store/tail-store";
 import type { Claim, ClaimDetail } from "@/types";
@@ -194,7 +195,16 @@ function renderClaimsAt(initialEntries: string[]): {
         React.createElement(
           MemoryRouter,
           { initialEntries },
-          React.createElement(Claims),
+          // SP21 Phase 5 Task 5.8/5.9: the ClaimDrawer mounted by
+          // Claims now uses useDrillStack() in PartiesGrid +
+          // ValidationPanel. Wrap in a DrillStackProvider so the
+          // hook has a context (the provider is also mounted at
+          // the App root in production).
+          React.createElement(
+            DrillStackProvider,
+            null,
+            React.createElement(Claims),
+          ),
         ),
       ),
     );
@@ -313,17 +323,19 @@ describe("Claims page drawer wiring", () => {
       document.body.querySelector('[data-testid="claim-drawer"]')
     ).not.toBeNull();
 
-    // Header shows the claim id — proves the id propagated end-to-end
-    // (URL → useDrawerUrlState → ClaimDrawer prop → useClaimDetail →
-    // header render), not just that some drawer is mounted.
-    await settle(
-      () =>
-        document.body.querySelector('[data-testid="header-id"]')?.textContent ===
-        "CLM-1"
-    );
-    expect(
-      document.body.querySelector('[data-testid="header-id"]')?.textContent
-    ).toBe("CLM-1");
+    // SP21 Phase 5 Task 5.10: the claim id is now the title of the
+    // shared DrillDrawerHeader (rendered as an <h2>). Find the h2
+    // inside the drawer and assert its text matches the claim id —
+    // proves the id propagated end-to-end (URL → useDrawerUrlState
+    // → ClaimDrawer prop → useClaimDetail → header render), not
+    // just that some drawer is mounted.
+    await settle(() => {
+      const drawer = document.body.querySelector('[data-testid="claim-drawer"]');
+      const h2 = drawer?.querySelector("h2");
+      return h2?.textContent === "CLM-1";
+    });
+    const drawer = document.body.querySelector('[data-testid="claim-drawer"]');
+    expect(drawer?.querySelector("h2")?.textContent).toBe("CLM-1");
   });
 
   it("test_escape_closes_the_drawer", async () => {
@@ -360,9 +372,14 @@ describe("Claims page drawer wiring", () => {
 
     // Wait for the header to render — the close button only mounts once
     // `useClaimDetail` resolves with a real ClaimDetail (the skeleton /
-    // error states don't render the header).
+    // error states don't render the header). SP21 Phase 5 Task 5.10:
+    // the close button is now inside the shared DrillDrawerHeader;
+    // find it via its accessible name.
     await settle(
-      () => document.body.querySelector('[data-testid="header-close"]') !== null
+      () =>
+        document.body.querySelector(
+          '[data-testid="claim-drawer"] button[aria-label="Close drawer"]'
+        ) !== null
     );
 
     // URL currently carries the claim.
@@ -372,7 +389,7 @@ describe("Claims page drawer wiring", () => {
     // onClose → useDrawerUrlState.close(), which pushState's a URL with
     // the ?claim= param stripped.
     const closeBtn = document.body.querySelector(
-      '[data-testid="header-close"]'
+      '[data-testid="claim-drawer"] button[aria-label="Close drawer"]'
     ) as HTMLButtonElement | null;
     expect(closeBtn).not.toBeNull();
     await act(async () => {