diff --git a/src/components/charts/__tests__/trend-card.test.tsx b/src/components/charts/__tests__/trend-card.test.tsx index a16977ba6..926480a78 100644 --- a/src/components/charts/__tests__/trend-card.test.tsx +++ b/src/components/charts/__tests__/trend-card.test.tsx @@ -123,6 +123,93 @@ describe(" directionSentiment", () => { }); }); +describe(" value is never truncated", () => { + // v1.8.7 — the maintainer is emphatic: the numeric value must always + // render in full at any tile width (dense strip → narrowest column). + // The value span keeps its full intrinsic width (`shrink-0 + // whitespace-nowrap`) and never carries `truncate`/`min-w-0`; when + // space is tight the UNIT yields instead. These guards pin the + // contract so a future layout churn can't reintroduce the clip. + function valueSpan(html: string): string { + const marker = 'data-slot="trend-card-value"'; + const idx = html.indexOf(marker); + expect(idx).toBeGreaterThan(-1); + // Walk back to the opening "", idx); + return html.slice(open, close); + } + + it("renders the full BP value (130) — never clipped to '13'", () => { + const html = render( + , + ); + // Value span renders the full reading (formatter adds one decimal). + expect(valueSpan(html)).toContain("130.0"); + }); + + it("renders the full paired BP value (131/85)", () => { + const html = render( + , + ); + expect(valueSpan(html)).toContain("131.0/85.0"); + }); + + it("does not put truncate or min-w-0 on the value node", () => { + const html = render( + , + ); + const value = valueSpan(html); + expect(value).not.toContain("truncate"); + expect(value).not.toContain("min-w-0"); + // The value holds its width and the number stays on one line. + expect(value).toContain("shrink-0"); + expect(value).toContain("whitespace-nowrap"); + }); + + it("lets the unit yield (min-w-0 truncate) instead of the value", () => { + const html = render( + , + ); + // The unit text renders in full in the markup; the truncate is a + // density safeguard that only engages when the column is too narrow. + expect(html).toContain("mL/(kg·min)"); + }); +}); + describe(" responsive layout", () => { it("keeps long BP target tile content wrappable inside the card", () => { // v1.4.28 FB-C2 — the BD-Zielbereich tile dropped `avgAllTime` diff --git a/src/components/charts/trend-card.tsx b/src/components/charts/trend-card.tsx index 84186ff47..008640077 100644 --- a/src/components/charts/trend-card.tsx +++ b/src/components/charts/trend-card.tsx @@ -265,21 +265,30 @@ export function TrendCard({ ask: "rechts neben der Zahl … der Pfeil [ist], wie gerade der Trend ist". */}
{latest !== null ? renderPair(latest, secondary?.latest) : "—"} - + {unit}