peter
5bfcf5d83a
The app HAS a platform layer -- AnchoredPopover (22 importers, with arrows/typeahead/Escape/anchor-flip), QueryState (21), Modal (17), PageShell, DataTable, Tabs, Tooltip and ~26 more -- but it sat flat among ~160 feature components with nothing marking it as one. Several of those files describe themselves as 'the one place' or 'canonical' and were still bypassed by hand-rolled markup, because a layer nobody can see is a layer nobody uses; three separate inventory passes of this codebase misread it the same way. Moves the 33 domain-free modules into components/ui/, rewrites the imports in 89 files, and makes the boundary a lint rule rather than a convention: inside ui/ a one-level-up import (a feature component) and any lib/api slice are errors. The rule was verified to fire on both and to leave generic lib/ helpers alone. README.md states which side of the line a component belongs on and why. No behaviour change: 3x tsc, eslint, knip, prettier and 687 vitest tests all green; no backend file touched.
94 lines
3.5 KiB
TypeScript
94 lines
3.5 KiB
TypeScript
// @vitest-environment jsdom
|
|
//
|
|
// Contract of the shared horizontal rail. jsdom lays out nothing (scrollWidth/clientWidth are 0), so
|
|
// the overflow-driven scroll buttons only appear once we feed the scroller fake metrics and fire a
|
|
// scroll — which is exactly the affordance under test: a button shows ONLY on the clipped edge, and
|
|
// clicking it pages the scroller. i18n is key-passthrough, so asserted names are the i18n keys.
|
|
import { describe, it, expect, vi, beforeAll, afterEach } from "vitest";
|
|
import { render, screen, fireEvent, cleanup } from "@testing-library/react";
|
|
|
|
vi.mock("react-i18next", async (importOriginal) => {
|
|
const actual = await importOriginal<typeof import("react-i18next")>();
|
|
return { ...actual, useTranslation: () => ({ t: (k: string) => k }) };
|
|
});
|
|
|
|
import { Carousel } from "./Carousel";
|
|
|
|
beforeAll(() => {
|
|
// useHScroll wires a ResizeObserver (watch-the-children); jsdom ships none.
|
|
class Stub {
|
|
observe() {}
|
|
unobserve() {}
|
|
disconnect() {}
|
|
takeRecords() {
|
|
return [];
|
|
}
|
|
}
|
|
globalThis.ResizeObserver ??= Stub as unknown as typeof ResizeObserver;
|
|
});
|
|
|
|
afterEach(cleanup);
|
|
|
|
function setMetrics(
|
|
el: HTMLElement,
|
|
m: { scrollWidth: number; clientWidth: number; scrollLeft: number },
|
|
) {
|
|
Object.defineProperty(el, "scrollWidth", { configurable: true, value: m.scrollWidth });
|
|
Object.defineProperty(el, "clientWidth", { configurable: true, value: m.clientWidth });
|
|
Object.defineProperty(el, "scrollLeft", {
|
|
configurable: true,
|
|
writable: true,
|
|
value: m.scrollLeft,
|
|
});
|
|
}
|
|
|
|
describe("Carousel", () => {
|
|
it("renders children and an optional header with a see-all action", () => {
|
|
const onSeeAll = vi.fn();
|
|
render(
|
|
<Carousel title="Recently added" onSeeAll={onSeeAll}>
|
|
<div>card-a</div>
|
|
<div>card-b</div>
|
|
</Carousel>,
|
|
);
|
|
expect(screen.getByText("card-a")).toBeTruthy();
|
|
expect(screen.getByRole("heading", { name: "Recently added" })).toBeTruthy();
|
|
fireEvent.click(screen.getByRole("button", { name: "common.seeAll" }));
|
|
expect(onSeeAll).toHaveBeenCalledOnce();
|
|
});
|
|
|
|
it("omits the header when no title is given and names the scroll region", () => {
|
|
render(
|
|
<Carousel ariaLabel="Cast">
|
|
<div>x</div>
|
|
</Carousel>,
|
|
);
|
|
expect(screen.queryByRole("heading")).toBeNull();
|
|
expect(screen.getByRole("group", { name: "Cast" })).toBeTruthy();
|
|
});
|
|
|
|
it("shows only the clipped edge's button and pages the scroller on click", () => {
|
|
render(
|
|
<Carousel ariaLabel="rail">
|
|
<div>x</div>
|
|
</Carousel>,
|
|
);
|
|
const scroller = screen.getByRole("group", { name: "rail" });
|
|
const scrollBy = vi.fn();
|
|
scroller.scrollBy = scrollBy as unknown as typeof scroller.scrollBy;
|
|
|
|
// At the left boundary with more content to the right → only the right button.
|
|
setMetrics(scroller, { scrollWidth: 1000, clientWidth: 300, scrollLeft: 0 });
|
|
fireEvent.scroll(scroller);
|
|
expect(screen.queryByRole("button", { name: "common.scrollLeft" })).toBeNull();
|
|
fireEvent.click(screen.getByRole("button", { name: "common.scrollRight" }));
|
|
expect(scrollBy).toHaveBeenCalled();
|
|
|
|
// Scrolled into the middle → both edges clipped → both buttons.
|
|
setMetrics(scroller, { scrollWidth: 1000, clientWidth: 300, scrollLeft: 350 });
|
|
fireEvent.scroll(scroller);
|
|
expect(screen.getByRole("button", { name: "common.scrollLeft" })).toBeTruthy();
|
|
expect(screen.getByRole("button", { name: "common.scrollRight" })).toBeTruthy();
|
|
});
|
|
});
|