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:
+32
-15
@@ -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 () => {
|
||||
|
||||
Reference in New Issue
Block a user