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).
This commit is contained in:
Tyler
2026-06-21 18:08:43 -06:00
parent 1c0d855b8e
commit 22720168c4
+31 -14
View File
@@ -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,9 +195,18 @@ function renderClaimsAt(initialEntries: string[]): {
React.createElement(
MemoryRouter,
{ initialEntries },
// 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),
),
),
),
);
});
return {
@@ -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 () => {