mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-15 15:02:04 +00:00
Extract shared BackLink and adopt on detail pages
The workout, values, score, and medication detail pages each hand-rolled the same ghost Button + Link + ArrowLeft back-nav block. Fold it into a single BackLink (href + label + optional data-slot) so the affordance reads identically — same hit area, icon, and left-bleed alignment — on every page and lives in one place. Each page passes its existing label translation, so no new i18n keys are introduced and the markup stays byte-identical.
This commit is contained in:
1 parent
cc34cbd03d
commit
e2f37bbe40
6 files changed
+109
-55
No files matched your search
@@ -0,0 +1,38 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { renderToStaticMarkup } from "react-dom/server";
|
||||
|
||||
import { BackLink } from "../back-link";
|
||||
|
||||
describe("<BackLink>", () => {
|
||||
it("renders an anchor to the href carrying the label", () => {
|
||||
const html = renderToStaticMarkup(
|
||||
<BackLink href="/insights/workouts" label="Back to workouts" />,
|
||||
);
|
||||
expect(html).toContain('href="/insights/workouts"');
|
||||
expect(html).toContain("Back to workouts");
|
||||
// The decorative chevron is hidden from screen readers; the label
|
||||
// carries the meaning.
|
||||
expect(html).toContain('aria-hidden="true"');
|
||||
});
|
||||
|
||||
it("keeps the shared left-bleed alignment on the control", () => {
|
||||
const html = renderToStaticMarkup(
|
||||
<BackLink href="/medications" label="Back" />,
|
||||
);
|
||||
// The `-ml-2 w-fit` left-bleed is the standard back-nav placement; it
|
||||
// must survive on every adopting page.
|
||||
expect(html).toContain("-ml-2");
|
||||
expect(html).toContain("w-fit");
|
||||
});
|
||||
|
||||
it("threads the optional data-slot for e2e/visual targeting", () => {
|
||||
const html = renderToStaticMarkup(
|
||||
<BackLink
|
||||
href="/insights"
|
||||
label="Back"
|
||||
dataSlot="composite-score-back"
|
||||
/>,
|
||||
);
|
||||
expect(html).toContain('data-slot="composite-score-back"');
|
||||
});
|
||||
});
|
||||
Reference in new issue
Block a user