feat(frontend): StateHistoryTimeline with kind-colored dots
This commit is contained in:
Tyler
@@ -0,0 +1,276 @@
|
||||
// @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 / MatchedRemitCard).
|
||||
(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 } from "vitest";
|
||||
import { StateHistoryTimeline } from "./StateHistoryTimeline";
|
||||
import type { ClaimDetailStateHistoryEvent } 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 makeEvent(
|
||||
overrides: Partial<ClaimDetailStateHistoryEvent> = {}
|
||||
): ClaimDetailStateHistoryEvent {
|
||||
return {
|
||||
kind: "claim_submitted",
|
||||
ts: "2026-06-12T10:30:00Z",
|
||||
batchId: null,
|
||||
remittanceId: null,
|
||||
...overrides,
|
||||
};
|
||||
}
|
||||
|
||||
describe("StateHistoryTimeline", () => {
|
||||
it("test_section_label_includes_count", () => {
|
||||
const events = [
|
||||
makeEvent({ kind: "claim_submitted" }),
|
||||
makeEvent({ kind: "claim_accepted" }),
|
||||
makeEvent({ kind: "claim_paid" }),
|
||||
];
|
||||
|
||||
const { container, unmount } = renderIntoContainer(
|
||||
<StateHistoryTimeline history={events} />
|
||||
);
|
||||
|
||||
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 "State History"; assert case-insensitively and
|
||||
// confirm the visual transform via the className sniff below.
|
||||
const text = (label?.textContent ?? "").toLowerCase();
|
||||
expect(text).toContain("state history");
|
||||
expect(text).toContain("(3)");
|
||||
|
||||
// Eyebrow style (uppercase + tracking) — sniff the className.
|
||||
const cls = label?.className ?? "";
|
||||
expect(cls).toContain("uppercase");
|
||||
expect(cls).toContain("tracking-[0.18em]");
|
||||
|
||||
unmount();
|
||||
});
|
||||
|
||||
it("test_empty_array_renders_empty_state", () => {
|
||||
const { container, unmount } = renderIntoContainer(
|
||||
<StateHistoryTimeline history={[]} />
|
||||
);
|
||||
|
||||
const empty = container.querySelector('[data-testid="state-history-empty"]');
|
||||
expect(empty).not.toBeNull();
|
||||
expect(empty?.textContent ?? "").toContain("No history events");
|
||||
|
||||
// No timeline rendered in the empty state.
|
||||
expect(
|
||||
container.querySelector('[data-testid="state-history-timeline"]')
|
||||
).toBeNull();
|
||||
expect(
|
||||
container.querySelectorAll('[data-testid="state-history-item"]').length
|
||||
).toBe(0);
|
||||
|
||||
// Section label still present, but with count "(0)".
|
||||
const label = container.querySelector('[data-testid="section-label"]');
|
||||
expect(label?.textContent ?? "").toContain("(0)");
|
||||
|
||||
unmount();
|
||||
});
|
||||
|
||||
it("test_single_event_renders_one_row_with_kind_and_ts", () => {
|
||||
const events = [
|
||||
makeEvent({ kind: "claim_paid", ts: "2026-06-12T10:30:00Z" }),
|
||||
];
|
||||
|
||||
const { container, unmount } = renderIntoContainer(
|
||||
<StateHistoryTimeline history={events} />
|
||||
);
|
||||
|
||||
const items = container.querySelectorAll('[data-testid="state-history-item"]');
|
||||
expect(items.length).toBe(1);
|
||||
|
||||
const text = items[0].textContent ?? "";
|
||||
// Kind rendered (underscore replaced with space, case insensitive).
|
||||
expect(text.toLowerCase()).toContain("claim paid");
|
||||
// ts formatted via fmt.date — at minimum the year is rendered.
|
||||
expect(text).toContain("2026");
|
||||
|
||||
unmount();
|
||||
});
|
||||
|
||||
it("test_multiple_events_render_in_input_order", () => {
|
||||
const events = [
|
||||
makeEvent({ kind: "claim_submitted", ts: "2026-06-10T10:00:00Z" }),
|
||||
makeEvent({ kind: "claim_accepted", ts: "2026-06-11T11:00:00Z" }),
|
||||
makeEvent({ kind: "remit_received", ts: "2026-06-12T12:00:00Z" }),
|
||||
makeEvent({ kind: "claim_paid", ts: "2026-06-13T13:00:00Z" }),
|
||||
];
|
||||
|
||||
const { container, unmount } = renderIntoContainer(
|
||||
<StateHistoryTimeline history={events} />
|
||||
);
|
||||
|
||||
const items = Array.from(
|
||||
container.querySelectorAll('[data-testid="state-history-item"]')
|
||||
);
|
||||
expect(items.length).toBe(4);
|
||||
|
||||
const kinds = items.map(
|
||||
(li) => li.getAttribute("data-kind") ?? ""
|
||||
);
|
||||
// The backend returns events most-recent-first; the component must
|
||||
// render them in input order without resorting, so a re-sorting
|
||||
// reordering would be visible here.
|
||||
expect(kinds).toEqual([
|
||||
"claim_submitted",
|
||||
"claim_accepted",
|
||||
"remit_received",
|
||||
"claim_paid",
|
||||
]);
|
||||
|
||||
unmount();
|
||||
});
|
||||
|
||||
it.each([
|
||||
[
|
||||
"claim_submitted",
|
||||
"bg-[color:var(--m-ink-secondary)]",
|
||||
],
|
||||
[
|
||||
"claim_accepted",
|
||||
"bg-[color:var(--m-success)]",
|
||||
],
|
||||
[
|
||||
"claim_paid",
|
||||
"bg-[color:var(--m-success)]",
|
||||
],
|
||||
[
|
||||
"claim_denied",
|
||||
"bg-[color:var(--m-error)]",
|
||||
],
|
||||
[
|
||||
"manual_match",
|
||||
"bg-[color:var(--m-warning)]",
|
||||
],
|
||||
[
|
||||
"manual_unmatch",
|
||||
"bg-[color:var(--m-warning)]",
|
||||
],
|
||||
[
|
||||
"remit_received",
|
||||
"bg-[color:var(--m-accent)]",
|
||||
],
|
||||
[
|
||||
"something_unknown",
|
||||
"bg-[color:var(--m-ink-tertiary)]",
|
||||
],
|
||||
])(
|
||||
"test_dot_color_for_kind_%s",
|
||||
(kind, expectedClass) => {
|
||||
const { container, unmount } = renderIntoContainer(
|
||||
<StateHistoryTimeline
|
||||
history={[makeEvent({ kind })]}
|
||||
/>
|
||||
);
|
||||
|
||||
const dot = container.querySelector('[data-testid="state-history-dot"]');
|
||||
expect(dot).not.toBeNull();
|
||||
const cls = dot?.className ?? "";
|
||||
expect(cls).toContain(expectedClass);
|
||||
|
||||
unmount();
|
||||
}
|
||||
);
|
||||
|
||||
it("test_event_with_remittanceId_renders_id", () => {
|
||||
const events = [
|
||||
makeEvent({
|
||||
kind: "remit_received",
|
||||
remittanceId: "REM-2026-0007",
|
||||
}),
|
||||
];
|
||||
|
||||
const { container, unmount } = renderIntoContainer(
|
||||
<StateHistoryTimeline history={events} />
|
||||
);
|
||||
|
||||
const id = container.querySelector('[data-testid="history-remit-id"]');
|
||||
expect(id).not.toBeNull();
|
||||
expect(id?.textContent ?? "").toContain("REM-2026-0007");
|
||||
|
||||
unmount();
|
||||
});
|
||||
|
||||
it("test_event_without_remittanceId_does_not_render_id", () => {
|
||||
const events = [
|
||||
makeEvent({ kind: "claim_submitted", remittanceId: null }),
|
||||
];
|
||||
|
||||
const { container, unmount } = renderIntoContainer(
|
||||
<StateHistoryTimeline history={events} />
|
||||
);
|
||||
|
||||
expect(
|
||||
container.querySelector('[data-testid="history-remit-id"]')
|
||||
).toBeNull();
|
||||
|
||||
unmount();
|
||||
});
|
||||
|
||||
it("test_mixed_events_with_and_without_remit_ids", () => {
|
||||
const events = [
|
||||
makeEvent({ kind: "claim_submitted", remittanceId: null }),
|
||||
makeEvent({
|
||||
kind: "remit_received",
|
||||
remittanceId: "REM-A",
|
||||
}),
|
||||
makeEvent({ kind: "claim_paid", remittanceId: null }),
|
||||
makeEvent({
|
||||
kind: "manual_match",
|
||||
remittanceId: "REM-B",
|
||||
}),
|
||||
];
|
||||
|
||||
const { container, unmount } = renderIntoContainer(
|
||||
<StateHistoryTimeline history={events} />
|
||||
);
|
||||
|
||||
const items = container.querySelectorAll('[data-testid="state-history-item"]');
|
||||
expect(items.length).toBe(4);
|
||||
|
||||
// Per-row presence of the remittance id element.
|
||||
expect(
|
||||
items[0].querySelector('[data-testid="history-remit-id"]')
|
||||
).toBeNull();
|
||||
expect(
|
||||
items[1].querySelector('[data-testid="history-remit-id"]')?.textContent ?? ""
|
||||
).toContain("REM-A");
|
||||
expect(
|
||||
items[2].querySelector('[data-testid="history-remit-id"]')
|
||||
).toBeNull();
|
||||
expect(
|
||||
items[3].querySelector('[data-testid="history-remit-id"]')?.textContent ?? ""
|
||||
).toContain("REM-B");
|
||||
|
||||
unmount();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,126 @@
|
||||
import { fmt } from "@/lib/format";
|
||||
import type { ClaimDetail } from "@/types";
|
||||
|
||||
type StateHistoryTimelineProps = {
|
||||
history: ClaimDetail["stateHistory"];
|
||||
};
|
||||
|
||||
/**
|
||||
* Event-kind → dot background color. The dot is the only colored element
|
||||
* per row; the rest of the row uses the standard ink tokens so the
|
||||
* timeline reads as a calm list of facts, with the dot color doing the
|
||||
* signal work.
|
||||
*
|
||||
* claim_submitted → ink-secondary (neutral, in-flight)
|
||||
* claim_accepted → success (payer accepted)
|
||||
* claim_paid → success (funds received)
|
||||
* claim_denied → error (needs attention)
|
||||
* manual_match → warning (operator action)
|
||||
* manual_unmatch → warning (operator action)
|
||||
* remit_received → accent (ERA arrived)
|
||||
* anything else → muted (forward-compat with new kinds)
|
||||
*/
|
||||
const DOT_BG: Record<string, string> = {
|
||||
claim_submitted: "bg-[color:var(--m-ink-secondary)]",
|
||||
claim_accepted: "bg-[color:var(--m-success)]",
|
||||
claim_paid: "bg-[color:var(--m-success)]",
|
||||
claim_denied: "bg-[color:var(--m-error)]",
|
||||
manual_match: "bg-[color:var(--m-warning)]",
|
||||
manual_unmatch: "bg-[color:var(--m-warning)]",
|
||||
remit_received: "bg-[color:var(--m-accent)]",
|
||||
};
|
||||
|
||||
function dotColorFor(kind: string): string {
|
||||
return DOT_BG[kind] ?? "bg-[color:var(--m-ink-tertiary)]";
|
||||
}
|
||||
|
||||
/**
|
||||
* Display label for the event kind. The raw kind is a snake-case machine
|
||||
* value (e.g. ``claim_paid``); replacing underscores with spaces gives a
|
||||
* friendlier visual label without losing the original token (it's still
|
||||
* on the ``<li data-kind="…">`` attribute for tests/inspection). The
|
||||
* CSS ``uppercase`` transform handles visual casing.
|
||||
*/
|
||||
function kindLabel(kind: string): string {
|
||||
return kind.replace(/_/g, " ");
|
||||
}
|
||||
|
||||
/**
|
||||
* State-history timeline for the claim detail drawer (SP4).
|
||||
*
|
||||
* Vertical timeline: a 2px left rule on the outer <ol> with a colored
|
||||
* dot on each <li> centered on the rule (negative offset). Events
|
||||
* render in input order — the backend already returns them
|
||||
* most-recent-first per the type comment, so the visual order matches
|
||||
* the audit order without resorting. Each row shows the kind eyebrow,
|
||||
* a mono ts (date + time), and an optional remittance id underneath
|
||||
* when the event was triggered by an ERA.
|
||||
*/
|
||||
export function StateHistoryTimeline({ history }: StateHistoryTimelineProps) {
|
||||
return (
|
||||
<section
|
||||
className="flex flex-col gap-3 px-6 py-4"
|
||||
data-testid="state-history-section"
|
||||
>
|
||||
<h3
|
||||
data-testid="section-label"
|
||||
className="text-[10.5px] font-semibold uppercase tracking-[0.18em] text-[color:var(--m-ink-tertiary)]"
|
||||
>
|
||||
State History ({history.length})
|
||||
</h3>
|
||||
|
||||
{history.length === 0 ? (
|
||||
<p
|
||||
data-testid="state-history-empty"
|
||||
className="text-sm text-[color:var(--m-ink-tertiary)]"
|
||||
>
|
||||
No history events
|
||||
</p>
|
||||
) : (
|
||||
<ol
|
||||
data-testid="state-history-timeline"
|
||||
className="relative ml-2 flex flex-col gap-3 border-l-2 border-[color:var(--m-border-heavy)] pl-5"
|
||||
>
|
||||
{history.map((event, i) => (
|
||||
<li
|
||||
key={`${event.kind}-${event.ts}-${i}`}
|
||||
data-testid="state-history-item"
|
||||
data-kind={event.kind}
|
||||
className="relative flex flex-col gap-1"
|
||||
>
|
||||
<span
|
||||
data-testid="state-history-dot"
|
||||
aria-hidden
|
||||
className={`absolute -left-[25px] top-1.5 h-2 w-2 rounded-full ${dotColorFor(event.kind)}`}
|
||||
/>
|
||||
<div className="flex flex-wrap items-baseline gap-x-2 gap-y-0.5">
|
||||
<span
|
||||
data-testid="state-history-kind"
|
||||
className="text-[10px] font-semibold uppercase tracking-[0.14em] text-[color:var(--m-ink-tertiary)]"
|
||||
>
|
||||
{kindLabel(event.kind)}
|
||||
</span>
|
||||
<span
|
||||
data-testid="state-history-ts"
|
||||
className="font-mono text-xs text-[color:var(--m-ink-secondary)] tabular-nums"
|
||||
style={{ fontFamily: "var(--m-font-mono)" }}
|
||||
>
|
||||
{fmt.date(event.ts)} · {fmt.time(event.ts)}
|
||||
</span>
|
||||
</div>
|
||||
{event.remittanceId ? (
|
||||
<span
|
||||
data-testid="history-remit-id"
|
||||
className="font-mono text-xs text-[color:var(--m-ink-tertiary)]"
|
||||
style={{ fontFamily: "var(--m-font-mono)" }}
|
||||
>
|
||||
Remit {event.remittanceId}
|
||||
</span>
|
||||
) : null}
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user