mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-12 06:06:10 +00:00
BernhardBuckel
eaced8226b
The review dialog silently dropped any selected reading that could not be written (no date, no unit, no value) and saved the rest. When nothing was left it showed "Select at least one reading to save", which described a different situation and said nothing about what was missing. A save is now all-or-nothing over the selected readings. When one is incomplete, nothing is written; the dialog states how many readings need attention, marks each missing field (aria-invalid, inline message, red border, required marker on the label) and moves focus to the first one. Marks appear after a save attempt and follow the edits. The "nothing selected" message is kept for that case only. Validation is a pure function next to the payload mapping, so the rule that blocks a save and the rule that builds the payload cannot drift apart. Adds EN and DE strings; the other locales are left to the maintainers. Refs #1055
85 lines
2.7 KiB
TypeScript
85 lines
2.7 KiB
TypeScript
import { renderToStaticMarkup } from "react-dom/server";
|
|
import { describe, expect, it } from "vitest";
|
|
|
|
import { I18nProvider } from "@/lib/i18n/context";
|
|
|
|
import type { OcrReviewRow } from "../ocr-review-types";
|
|
import { OcrRowEditor } from "../ocr-row-editor";
|
|
|
|
const baseRow: OcrReviewRow = {
|
|
key: "LDL-0",
|
|
analyte: "LDL",
|
|
value: 2.4,
|
|
valueText: null,
|
|
unit: "mmol/L",
|
|
referenceLow: 0,
|
|
referenceHigh: 3,
|
|
referenceText: null,
|
|
takenAt: null,
|
|
confidence: { analyte: 1, value: 1, unit: 1, range: 1 },
|
|
biomarkerMatch: "existing",
|
|
duplicateOf: null,
|
|
confirmed: true,
|
|
};
|
|
|
|
function render(
|
|
errors: Parameters<typeof OcrRowEditor>[0]["errors"],
|
|
locale: "en" | "de" = "en",
|
|
row: OcrReviewRow = baseRow,
|
|
): string {
|
|
return renderToStaticMarkup(
|
|
<I18nProvider initialLocale={locale}>
|
|
<OcrRowEditor row={row} onChange={() => {}} errors={errors} />
|
|
</I18nProvider>,
|
|
);
|
|
}
|
|
|
|
describe("<OcrRowEditor> required-field marking", () => {
|
|
it("shows no error state before a save was attempted", () => {
|
|
const html = render(undefined);
|
|
expect(html).not.toContain('aria-invalid="true"');
|
|
expect(html).not.toContain('role="alert"');
|
|
});
|
|
|
|
it("marks the missing date, states why, and links the message to the field", () => {
|
|
const html = render({ date: true });
|
|
const invalid = html.match(/<input[^>]*aria-invalid="true"[^>]*>/g) ?? [];
|
|
expect(invalid).toHaveLength(1);
|
|
const describedBy = invalid[0].match(/aria-describedby="([^"]+)"/)?.[1];
|
|
expect(describedBy).toBeTruthy();
|
|
expect(html).toContain(`id="${describedBy}"`);
|
|
expect(html).toContain("Add the sample date.");
|
|
expect(html).toContain('role="alert"');
|
|
// The bordered wrapper is what the eye sees.
|
|
expect(html).toContain("border-destructive");
|
|
});
|
|
|
|
it("marks only the fields that are wrong", () => {
|
|
const html = render({ unit: true });
|
|
expect(html.match(/aria-invalid="true"/g)).toHaveLength(1);
|
|
expect(html).toContain("Add a unit.");
|
|
expect(html).not.toContain("Add the sample date.");
|
|
});
|
|
|
|
it("marks a blank qualitative result", () => {
|
|
const html = render({ valueText: true }, "en", {
|
|
...baseRow,
|
|
value: null,
|
|
valueText: "",
|
|
unit: null,
|
|
});
|
|
expect(html).toContain("Add a result.");
|
|
expect(html.match(/aria-invalid="true"/g)).toHaveLength(1);
|
|
});
|
|
|
|
it("carries a visible required marker on the fields a row needs", () => {
|
|
const html = render(undefined);
|
|
// Value, unit and date on a numeric row.
|
|
expect(html.match(/text-destructive"[^>]*> \*</g)).toHaveLength(3);
|
|
});
|
|
|
|
it("speaks German too", () => {
|
|
expect(render({ date: true }, "de")).toContain("Bitte ein Datum angeben.");
|
|
});
|
|
});
|