feat(frontend): ValidationPanel with rule-grouped errors + warnings
This commit is contained in:
Tyler
@@ -0,0 +1,247 @@
|
||||
// @vitest-environment happy-dom
|
||||
// Pure prop-driven component, but match the act() convention used by
|
||||
// the other ClaimDrawer test files (ClaimDrawerHeader /
|
||||
// ClaimDrawerSkeleton / ClaimDrawerError).
|
||||
(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 { ValidationPanel } from "./ValidationPanel";
|
||||
import type { ClaimDetailValidation, ClaimDetailValidationIssue } 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 makeIssue(
|
||||
overrides: Partial<ClaimDetailValidationIssue> = {}
|
||||
): ClaimDetailValidationIssue {
|
||||
return {
|
||||
rule: "R050_diagnosis_present",
|
||||
message: "Primary diagnosis is required",
|
||||
severity: "error",
|
||||
...overrides,
|
||||
};
|
||||
}
|
||||
|
||||
function makeValidation(
|
||||
overrides: Partial<ClaimDetailValidation> = {}
|
||||
): ClaimDetailValidation {
|
||||
return {
|
||||
passed: true,
|
||||
errors: [],
|
||||
warnings: [],
|
||||
...overrides,
|
||||
};
|
||||
}
|
||||
|
||||
describe("ValidationPanel", () => {
|
||||
it("test_all_passed_state_renders_checkmark_and_message", () => {
|
||||
const { container, unmount } = renderIntoContainer(
|
||||
<ValidationPanel validation={makeValidation({ passed: true })} />
|
||||
);
|
||||
|
||||
// The pass-state root has data-testid="validation-passed".
|
||||
const passedRoot = container.querySelector('[data-testid="validation-passed"]');
|
||||
expect(passedRoot).not.toBeNull();
|
||||
|
||||
// The success copy is in the rendered text.
|
||||
const text = (container.textContent ?? "").toLowerCase();
|
||||
expect(text).toContain("all checks passed");
|
||||
|
||||
// The checkmark icon (lucide-react `CheckCircle2`) is an inline SVG.
|
||||
const svg = passedRoot?.querySelector("svg");
|
||||
expect(svg).not.toBeNull();
|
||||
|
||||
// Neither sub-section is rendered when nothing is wrong.
|
||||
expect(container.querySelector('[data-testid="validation-errors"]')).toBeNull();
|
||||
expect(container.querySelector('[data-testid="validation-warnings"]')).toBeNull();
|
||||
|
||||
unmount();
|
||||
});
|
||||
|
||||
it("test_errors_only_renders_errors_subsection", () => {
|
||||
const { container, unmount } = renderIntoContainer(
|
||||
<ValidationPanel
|
||||
validation={makeValidation({
|
||||
passed: false,
|
||||
errors: [
|
||||
makeIssue({
|
||||
rule: "R050_diagnosis_present",
|
||||
message: "Primary diagnosis is required",
|
||||
severity: "error",
|
||||
}),
|
||||
],
|
||||
})}
|
||||
/>
|
||||
);
|
||||
|
||||
const errorsBlock = container.querySelector('[data-testid="validation-errors"]');
|
||||
expect(errorsBlock).not.toBeNull();
|
||||
|
||||
// Red left-border token applied to the inner block — sniff the className.
|
||||
const cls = errorsBlock?.className ?? "";
|
||||
expect(cls).toContain("border-[color:var(--m-error)]");
|
||||
expect(cls).toContain("border-l-2");
|
||||
|
||||
// Rule code + message visible in the rendered text.
|
||||
const text = container.textContent ?? "";
|
||||
expect(text).toContain("R050_diagnosis_present");
|
||||
expect(text).toContain("Primary diagnosis is required");
|
||||
|
||||
// No warnings sub-section when only errors are present.
|
||||
expect(container.querySelector('[data-testid="validation-warnings"]')).toBeNull();
|
||||
// And no all-passed pill.
|
||||
expect(container.querySelector('[data-testid="validation-passed"]')).toBeNull();
|
||||
|
||||
unmount();
|
||||
});
|
||||
|
||||
it("test_warnings_only_renders_warnings_subsection", () => {
|
||||
const { container, unmount } = renderIntoContainer(
|
||||
<ValidationPanel
|
||||
validation={makeValidation({
|
||||
passed: true,
|
||||
warnings: [
|
||||
makeIssue({
|
||||
rule: "R200_units_recommended",
|
||||
message: "Units reported as 0",
|
||||
severity: "warning",
|
||||
}),
|
||||
],
|
||||
})}
|
||||
/>
|
||||
);
|
||||
|
||||
const warningsBlock = container.querySelector('[data-testid="validation-warnings"]');
|
||||
expect(warningsBlock).not.toBeNull();
|
||||
|
||||
// Amber left-border token applied to the inner block.
|
||||
const cls = warningsBlock?.className ?? "";
|
||||
expect(cls).toContain("border-[color:var(--m-warning)]");
|
||||
expect(cls).toContain("border-l-2");
|
||||
|
||||
const text = container.textContent ?? "";
|
||||
expect(text).toContain("R200_units_recommended");
|
||||
expect(text).toContain("Units reported as 0");
|
||||
|
||||
// No errors sub-section when only warnings are present.
|
||||
expect(container.querySelector('[data-testid="validation-errors"]')).toBeNull();
|
||||
|
||||
unmount();
|
||||
});
|
||||
|
||||
it("test_both_errors_and_warnings_renders_both", () => {
|
||||
const { container, unmount } = renderIntoContainer(
|
||||
<ValidationPanel
|
||||
validation={makeValidation({
|
||||
passed: false,
|
||||
errors: [
|
||||
makeIssue({
|
||||
rule: "R050_diagnosis_present",
|
||||
message: "Primary diagnosis is required",
|
||||
}),
|
||||
],
|
||||
warnings: [
|
||||
makeIssue({
|
||||
rule: "R200_units_recommended",
|
||||
message: "Units reported as 0",
|
||||
severity: "warning",
|
||||
}),
|
||||
],
|
||||
})}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(container.querySelector('[data-testid="validation-errors"]')).not.toBeNull();
|
||||
expect(container.querySelector('[data-testid="validation-warnings"]')).not.toBeNull();
|
||||
|
||||
// Errors sub-section appears before warnings sub-section (blocking
|
||||
// issues first, then advisories).
|
||||
const errorsEl = container.querySelector('[data-testid="validation-errors"]');
|
||||
const warningsEl = container.querySelector('[data-testid="validation-warnings"]');
|
||||
expect(errorsEl).not.toBeNull();
|
||||
expect(warningsEl).not.toBeNull();
|
||||
expect(
|
||||
errorsEl!.compareDocumentPosition(warningsEl!) & Node.DOCUMENT_POSITION_FOLLOWING
|
||||
).toBeTruthy();
|
||||
|
||||
unmount();
|
||||
});
|
||||
|
||||
it("test_errors_are_grouped_by_rule_with_count", () => {
|
||||
const { container, unmount } = renderIntoContainer(
|
||||
<ValidationPanel
|
||||
validation={makeValidation({
|
||||
passed: false,
|
||||
errors: [
|
||||
makeIssue({
|
||||
rule: "R050_diagnosis_present",
|
||||
message: "Primary diagnosis is required",
|
||||
}),
|
||||
makeIssue({
|
||||
rule: "R050_diagnosis_present",
|
||||
message: "Diagnosis qualifier is required",
|
||||
}),
|
||||
],
|
||||
})}
|
||||
/>
|
||||
);
|
||||
|
||||
const errorsBlock = container.querySelector('[data-testid="validation-errors"]');
|
||||
expect(errorsBlock).not.toBeNull();
|
||||
|
||||
const text = errorsBlock?.textContent ?? "";
|
||||
|
||||
// Header should show the rule code with the grouped count "(2)".
|
||||
expect(text).toContain("R050_diagnosis_present");
|
||||
expect(text).toContain("(2)");
|
||||
|
||||
// Both messages appear underneath the group header.
|
||||
expect(text).toContain("Primary diagnosis is required");
|
||||
expect(text).toContain("Diagnosis qualifier is required");
|
||||
|
||||
unmount();
|
||||
});
|
||||
|
||||
it("test_passed_with_warnings_still_shows_warnings", () => {
|
||||
// The "all checks passed" pill is reserved for passed && no-warnings;
|
||||
// passed=true with warnings present should still surface the warnings
|
||||
// sub-section so the user notices the advisories.
|
||||
const { container, unmount } = renderIntoContainer(
|
||||
<ValidationPanel
|
||||
validation={makeValidation({
|
||||
passed: true,
|
||||
warnings: [
|
||||
makeIssue({
|
||||
rule: "R200_units_recommended",
|
||||
message: "Units reported as 0",
|
||||
severity: "warning",
|
||||
}),
|
||||
],
|
||||
})}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(container.querySelector('[data-testid="validation-warnings"]')).not.toBeNull();
|
||||
expect(container.querySelector('[data-testid="validation-passed"]')).toBeNull();
|
||||
|
||||
unmount();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,187 @@
|
||||
import { AlertCircle, AlertTriangle, CheckCircle2 } from "lucide-react";
|
||||
import type { ClaimDetail } from "@/types";
|
||||
|
||||
type ValidationPanelProps = {
|
||||
validation: ClaimDetail["validation"];
|
||||
};
|
||||
|
||||
type IssueList = ClaimDetail["validation"]["errors"];
|
||||
|
||||
/**
|
||||
* Group issues by their `rule` field, preserving insertion order so the
|
||||
* backend's surface order is respected on screen. Returns an array of
|
||||
* `[rule, issues]` pairs — Maps aren't a great fit for JSX iteration here.
|
||||
*/
|
||||
function groupByRule(issues: IssueList): Array<[string, IssueList]> {
|
||||
const groups = new Map<string, IssueList>();
|
||||
for (const issue of issues) {
|
||||
const bucket = groups.get(issue.rule);
|
||||
if (bucket) {
|
||||
bucket.push(issue);
|
||||
} else {
|
||||
groups.set(issue.rule, [issue]);
|
||||
}
|
||||
}
|
||||
return Array.from(groups.entries());
|
||||
}
|
||||
|
||||
/**
|
||||
* One rule-group block: header with rule code + count chip, followed by
|
||||
* the list of messages underneath.
|
||||
*/
|
||||
function IssueGroup({
|
||||
rule,
|
||||
issues,
|
||||
testId,
|
||||
}: {
|
||||
rule: string;
|
||||
issues: IssueList;
|
||||
testId: string;
|
||||
}) {
|
||||
const Icon = testId === "validation-errors" ? AlertCircle : AlertTriangle;
|
||||
const iconColor =
|
||||
testId === "validation-errors"
|
||||
? "text-[color:var(--m-error)]"
|
||||
: "text-[color:var(--m-warning)]";
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className="font-mono text-[12px] font-semibold tracking-tight text-[color:var(--m-ink-primary)]"
|
||||
style={{ fontFamily: "var(--m-font-mono)" }}
|
||||
>
|
||||
{rule}
|
||||
</span>
|
||||
<span
|
||||
className="inline-flex items-center rounded-full bg-[color:var(--m-ink-tertiary)]/15 px-1.5 text-[10.5px] font-medium text-[color:var(--m-ink-secondary)] tabular-nums"
|
||||
data-testid={`${testId}-count`}
|
||||
>
|
||||
({issues.length})
|
||||
</span>
|
||||
</div>
|
||||
<ul className="flex flex-col gap-1.5 pl-1">
|
||||
{issues.map((issue, idx) => (
|
||||
<li
|
||||
key={`${rule}-${idx}`}
|
||||
className="flex items-start gap-2 text-[13px] leading-snug text-[color:var(--m-ink-secondary)]"
|
||||
data-testid={`${testId}-message`}
|
||||
>
|
||||
<Icon
|
||||
className={`mt-0.5 h-3.5 w-3.5 shrink-0 ${iconColor}`}
|
||||
strokeWidth={1.75}
|
||||
aria-hidden
|
||||
/>
|
||||
<span>{issue.message}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Validation section of the claim detail drawer (SP4).
|
||||
*
|
||||
* Three states:
|
||||
* - passed && warnings.length === 0 → "All checks passed" pill
|
||||
* - errors and/or warnings present → grouped sub-sections
|
||||
*
|
||||
* Issues are grouped by their `rule` field (e.g. R050_diagnosis_present)
|
||||
* with a per-group count, so repeated violations of the same rule don't
|
||||
* drown out other rules. Errors render before warnings so the user sees
|
||||
* blocking issues first.
|
||||
*/
|
||||
export function ValidationPanel({ validation }: ValidationPanelProps) {
|
||||
const allPassed = validation.passed && validation.warnings.length === 0;
|
||||
|
||||
if (allPassed) {
|
||||
return (
|
||||
<section
|
||||
data-testid="validation-passed"
|
||||
className="flex items-center gap-2 px-6 py-3"
|
||||
>
|
||||
<CheckCircle2
|
||||
className="h-4 w-4 text-[color:var(--m-success)]"
|
||||
strokeWidth={1.75}
|
||||
aria-hidden
|
||||
/>
|
||||
<span className="text-[13px] font-medium text-[color:var(--m-ink-primary)]">
|
||||
All checks passed
|
||||
</span>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
const errorGroups = groupByRule(validation.errors);
|
||||
const warningGroups = groupByRule(validation.warnings);
|
||||
|
||||
return (
|
||||
<section
|
||||
className="flex flex-col gap-3 px-6 py-4 bg-[color:var(--m-surface)]"
|
||||
data-testid="validation-panel"
|
||||
>
|
||||
<span className="text-[10.5px] font-semibold uppercase tracking-[0.18em] text-[color:var(--m-ink-tertiary)]">
|
||||
Validation
|
||||
</span>
|
||||
|
||||
{validation.errors.length > 0 ? (
|
||||
<div
|
||||
data-testid="validation-errors"
|
||||
data-rule-group="errors"
|
||||
className="flex flex-col gap-2 border-l-2 border-[color:var(--m-error)] bg-[color:var(--m-error-bg)] px-3 py-2.5"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<AlertCircle
|
||||
className="h-3.5 w-3.5 text-[color:var(--m-error)]"
|
||||
strokeWidth={1.75}
|
||||
aria-hidden
|
||||
/>
|
||||
<span className="text-[10.5px] font-semibold uppercase tracking-[0.14em] text-[color:var(--m-error)]">
|
||||
Errors ({validation.errors.length})
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3">
|
||||
{errorGroups.map(([rule, issues]) => (
|
||||
<IssueGroup
|
||||
key={rule}
|
||||
rule={rule}
|
||||
issues={issues}
|
||||
testId="validation-errors"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{validation.warnings.length > 0 ? (
|
||||
<div
|
||||
data-testid="validation-warnings"
|
||||
data-rule-group="warnings"
|
||||
className="flex flex-col gap-2 border-l-2 border-[color:var(--m-warning)] bg-[color:var(--m-warning-bg)] px-3 py-2.5"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<AlertTriangle
|
||||
className="h-3.5 w-3.5 text-[color:var(--m-warning)]"
|
||||
strokeWidth={1.75}
|
||||
aria-hidden
|
||||
/>
|
||||
<span className="text-[10.5px] font-semibold uppercase tracking-[0.14em] text-[color:var(--m-warning)]">
|
||||
Warnings ({validation.warnings.length})
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-3">
|
||||
{warningGroups.map(([rule, issues]) => (
|
||||
<IssueGroup
|
||||
key={rule}
|
||||
rule={rule}
|
||||
issues={issues}
|
||||
testId="validation-warnings"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user