feat(frontend): MatchedRemitCard with view-remittance link
This commit is contained in:
Tyler
@@ -0,0 +1,179 @@
|
||||
// @vitest-environment happy-dom
|
||||
// Pure prop-driven component; match the act() convention used by the
|
||||
// other ClaimDrawer test files (ClaimDrawerHeader / ClaimDrawerSkeleton /
|
||||
// ClaimDrawerError / ValidationPanel / ServiceLinesTable / DiagnosesList
|
||||
// / PartiesGrid / RawSegmentsPanel).
|
||||
(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
|
||||
|
||||
import React, { act } from "react";
|
||||
import { createRoot, type Root } from "react-dom/client";
|
||||
import { describe, expect, it, vi } from "vitest";
|
||||
import { MatchedRemitCard } from "./MatchedRemitCard";
|
||||
import type { ClaimDetailMatchedRemittance } from "@/types";
|
||||
|
||||
function renderIntoContainer(element: React.ReactElement): {
|
||||
container: HTMLDivElement;
|
||||
unmount: () => void;
|
||||
} {
|
||||
const container = document.createElement("div");
|
||||
document.body.appendChild(container);
|
||||
const root: Root = createRoot(container);
|
||||
act(() => {
|
||||
root.render(element);
|
||||
});
|
||||
return {
|
||||
container,
|
||||
unmount: () => {
|
||||
act(() => root.unmount());
|
||||
container.remove();
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function makeMatchedRemittance(
|
||||
overrides: Partial<ClaimDetailMatchedRemittance> = {}
|
||||
): ClaimDetailMatchedRemittance {
|
||||
return {
|
||||
id: "REM-2026-0001",
|
||||
totalPaid: 142.5,
|
||||
status: "received",
|
||||
receivedAt: "2026-06-12T10:00:00Z",
|
||||
...overrides,
|
||||
};
|
||||
}
|
||||
|
||||
describe("MatchedRemitCard", () => {
|
||||
it("test_null_prop_returns_no_dom", () => {
|
||||
const { container, unmount } = renderIntoContainer(
|
||||
<MatchedRemitCard matchedRemittance={null} />
|
||||
);
|
||||
|
||||
// No DOM at all — the component returns null before rendering.
|
||||
expect(container.innerHTML).toBe("");
|
||||
|
||||
unmount();
|
||||
});
|
||||
|
||||
it("test_populated_prop_renders_section_label", () => {
|
||||
const { container, unmount } = renderIntoContainer(
|
||||
<MatchedRemitCard matchedRemittance={makeMatchedRemittance()} />
|
||||
);
|
||||
|
||||
const label = container.querySelector('[data-testid="section-label"]');
|
||||
expect(label).not.toBeNull();
|
||||
|
||||
// `uppercase` is applied via Tailwind CSS, so textContent gives the
|
||||
// source-case string "Matched Remittance"; assert case-insensitively
|
||||
// and confirm the visual transform via the className sniff below.
|
||||
const text = (label?.textContent ?? "").toLowerCase();
|
||||
expect(text).toContain("matched remittance");
|
||||
|
||||
// Eyebrow style (uppercase + tracking) — sniff the className.
|
||||
const cls = label?.className ?? "";
|
||||
expect(cls).toContain("uppercase");
|
||||
expect(cls).toContain("tracking-[0.18em]");
|
||||
|
||||
unmount();
|
||||
});
|
||||
|
||||
it("test_renders_id_totalPaid_status_and_receivedAt", () => {
|
||||
const { container, unmount } = renderIntoContainer(
|
||||
<MatchedRemitCard
|
||||
matchedRemittance={makeMatchedRemittance({
|
||||
id: "REM-2026-9999",
|
||||
totalPaid: 250.0,
|
||||
status: "reconciled",
|
||||
receivedAt: "2026-06-10T14:30:00Z",
|
||||
})}
|
||||
/>
|
||||
);
|
||||
|
||||
// Remit ID rendered in mono.
|
||||
const idEl = container.querySelector('[data-testid="matched-remit-id"]');
|
||||
expect(idEl).not.toBeNull();
|
||||
expect(idEl?.textContent ?? "").toContain("REM-2026-9999");
|
||||
|
||||
// totalPaid formatted via fmt.usdPrecise → "$250.00".
|
||||
const totalPaidEl = container.querySelector(
|
||||
'[data-testid="matched-remit-total-paid"]'
|
||||
);
|
||||
expect(totalPaidEl).not.toBeNull();
|
||||
expect(totalPaidEl?.textContent ?? "").toContain("$250.00");
|
||||
|
||||
// Status badge.
|
||||
const statusEl = container.querySelector(
|
||||
'[data-testid="matched-remit-status"]'
|
||||
);
|
||||
expect(statusEl).not.toBeNull();
|
||||
expect(statusEl?.textContent ?? "").toContain("reconciled");
|
||||
|
||||
// receivedAt formatted via fmt.date — the date contains the year at
|
||||
// minimum, and `new Date("ISO Z")` is UTC-stable.
|
||||
const receivedEl = container.querySelector(
|
||||
'[data-testid="matched-remit-received"]'
|
||||
);
|
||||
expect(receivedEl).not.toBeNull();
|
||||
expect(receivedEl?.textContent ?? "").toContain("2026");
|
||||
|
||||
unmount();
|
||||
});
|
||||
|
||||
it("test_status_badge_uses_danger_variant_for_rejected_status", () => {
|
||||
// The remittance status field is an unconstrained string (per
|
||||
// `ClaimDetailMatchedRemittance`), so unknown statuses should fall
|
||||
// back to the muted variant rather than throwing.
|
||||
const { container, unmount } = renderIntoContainer(
|
||||
<MatchedRemitCard
|
||||
matchedRemittance={makeMatchedRemittance({ status: "weird" })}
|
||||
/>
|
||||
);
|
||||
|
||||
const statusEl = container.querySelector(
|
||||
'[data-testid="matched-remit-status"]'
|
||||
);
|
||||
expect(statusEl).not.toBeNull();
|
||||
// Muted variant (no color) — the badge still renders without error.
|
||||
expect(statusEl?.textContent ?? "").toContain("weird");
|
||||
|
||||
unmount();
|
||||
});
|
||||
|
||||
it("test_view_remittance_link_sets_window_location_href", () => {
|
||||
// Spy on the `href` setter so the click doesn't actually navigate
|
||||
// away in the test runner, and so we can assert what was assigned.
|
||||
const setHrefSpy = vi.spyOn(window.location, "href", "set");
|
||||
setHrefSpy.mockImplementation(() => {
|
||||
// No-op — happy-dom would otherwise try to update the URL.
|
||||
});
|
||||
|
||||
try {
|
||||
const { container, unmount } = renderIntoContainer(
|
||||
<MatchedRemitCard
|
||||
matchedRemittance={makeMatchedRemittance({ id: "REM-XYZ" })}
|
||||
/>
|
||||
);
|
||||
|
||||
const link = container.querySelector(
|
||||
'[data-testid="view-remittance-link"]'
|
||||
);
|
||||
expect(link).not.toBeNull();
|
||||
// The button should advertise the destination via the visible label.
|
||||
expect(link?.textContent ?? "").toContain("View remittance");
|
||||
|
||||
act(() => {
|
||||
link?.dispatchEvent(
|
||||
new MouseEvent("click", { bubbles: true, cancelable: true })
|
||||
);
|
||||
});
|
||||
|
||||
// The click handler should have assigned to window.location.href
|
||||
// exactly once, with the remittance-detail deep link.
|
||||
expect(setHrefSpy).toHaveBeenCalledTimes(1);
|
||||
expect(setHrefSpy).toHaveBeenCalledWith("/remittances?id=REM-XYZ");
|
||||
|
||||
unmount();
|
||||
} finally {
|
||||
setHrefSpy.mockRestore();
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,114 @@
|
||||
import { ArrowRight } from "lucide-react";
|
||||
import { Badge, type BadgeProps } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { fmt } from "@/lib/format";
|
||||
import type { ClaimDetail } from "@/types";
|
||||
|
||||
type MatchedRemitCardProps = {
|
||||
matchedRemittance: ClaimDetail["matchedRemittance"];
|
||||
};
|
||||
|
||||
/**
|
||||
* Remittance status → Badge variant. Mirrors the list-endpoint mapping
|
||||
* in ``RemittanceStatus`` (received / posted / reconciled). Unknown
|
||||
* statuses (the type is an unconstrained string) fall back to ``muted``
|
||||
* so a future backend status doesn't blow up the drawer.
|
||||
*/
|
||||
const STATUS_VARIANT: Record<string, BadgeProps["variant"]> = {
|
||||
received: "secondary",
|
||||
posted: "default",
|
||||
reconciled: "success",
|
||||
};
|
||||
|
||||
function statusVariantFor(status: string): BadgeProps["variant"] {
|
||||
return STATUS_VARIANT[status] ?? "muted";
|
||||
}
|
||||
|
||||
/**
|
||||
* Matched-remittance card for the claim detail drawer (SP4).
|
||||
*
|
||||
* Renders only when the claim has been paired with an ERA (the
|
||||
* ``matchedRemittance`` field is non-null). Layout: a single card with
|
||||
* remit id + status badge + received date on the left, big mono
|
||||
* ``totalPaid`` on the right, plus a "View remittance →" link that
|
||||
* deep-links to ``/remittances?id={id}`` (v1: full page navigation via
|
||||
* ``window.location.href``; a router-based nav handler is a v2 concern).
|
||||
*/
|
||||
export function MatchedRemitCard({ matchedRemittance }: MatchedRemitCardProps) {
|
||||
if (matchedRemittance === null) return null;
|
||||
|
||||
const { id, totalPaid, status, receivedAt } = matchedRemittance;
|
||||
|
||||
const handleViewRemittance = () => {
|
||||
window.location.href = `/remittances?id=${id}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<section
|
||||
className="flex flex-col gap-3 px-6 py-4"
|
||||
data-testid="matched-remit-card"
|
||||
>
|
||||
<h3
|
||||
data-testid="section-label"
|
||||
className="text-[10.5px] font-semibold uppercase tracking-[0.18em] text-[color:var(--m-ink-tertiary)]"
|
||||
>
|
||||
Matched Remittance
|
||||
</h3>
|
||||
|
||||
<div
|
||||
data-testid="matched-remit-card-inner"
|
||||
className="flex flex-col gap-4 rounded-lg border border-[color:var(--m-border-heavy)]/15 bg-[color:var(--m-surface)] p-4 sm:flex-row sm:items-start sm:justify-between"
|
||||
>
|
||||
{/* Left: remit id + status badge + received date */}
|
||||
<div className="flex min-w-0 flex-col gap-2">
|
||||
<span
|
||||
data-testid="matched-remit-id"
|
||||
className="font-mono text-sm text-[color:var(--m-ink-primary)]"
|
||||
style={{ fontFamily: "var(--m-font-mono)" }}
|
||||
>
|
||||
{id}
|
||||
</span>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Badge
|
||||
variant={statusVariantFor(status)}
|
||||
data-testid="matched-remit-status"
|
||||
className="uppercase tracking-[0.14em]"
|
||||
>
|
||||
{status}
|
||||
</Badge>
|
||||
<span
|
||||
data-testid="matched-remit-received"
|
||||
className="text-xs text-[color:var(--m-ink-tertiary)]"
|
||||
>
|
||||
Received {fmt.date(receivedAt)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right: total paid + view-remittance link */}
|
||||
<div className="flex flex-col items-start gap-2 sm:items-end">
|
||||
<span
|
||||
data-testid="matched-remit-total-paid"
|
||||
className="font-mono text-2xl font-semibold tabular-nums text-[color:var(--m-ink-primary)]"
|
||||
style={{ fontFamily: "var(--m-font-mono)" }}
|
||||
>
|
||||
{fmt.usdPrecise(totalPaid)}
|
||||
</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleViewRemittance}
|
||||
data-testid="view-remittance-link"
|
||||
>
|
||||
View remittance
|
||||
<ArrowRight
|
||||
className="h-3.5 w-3.5"
|
||||
strokeWidth={1.75}
|
||||
aria-hidden
|
||||
/>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user