peter
63a0fecc8b
A pure move (git mv, history kept): 333 files leave components/, which now holds only the platform layer (ui/) and the legal pages. The shell is the frame (App, header, nav rail, palette, boot); each page lives in modules/<page>/ with its rail, store and tests; what several pages share sits in features/<name>/; the shared-link page is watch/. Domain-free helpers went straight to ui/ (ViewSwitcher, FilterRail, the confirm dialog, the language switcher, the copy rows). Every relative specifier was rewritten (imports, dynamic imports, vi.mock, new URL), and the contract tests that scan sources now scan the whole app source, not only components/ — each glob was counted before and after so none went green over fewer files. The locale-format rule matched `/src/components/` only, so the move would have taken ~300 files out from under its i18n-singleton check; it now covers every folder that holds components, with a test per folder.
105 lines
3.6 KiB
TypeScript
105 lines
3.6 KiB
TypeScript
// @vitest-environment jsdom
|
|
//
|
|
// The channel manager's card layout as a keyboard list: each card is an item, and Enter opens
|
|
// the channel through the name ChannelLink renders. VirtualGrid is replaced by a stand-in that mounts
|
|
// every item — jsdom has no layout for the virtualizer to measure — and registers with listNav exactly
|
|
// when the real one would: when it is asked to (`keyboardNav`).
|
|
import { Fragment, useRef } from "react";
|
|
import { afterEach, describe, expect, it, vi } from "vitest";
|
|
import { act, cleanup, render } from "@testing-library/react";
|
|
import type { VirtualGridProps } from "../../components/ui/VirtualGrid";
|
|
|
|
vi.mock("react-i18next", async (importOriginal) => {
|
|
const actual = await importOriginal<typeof import("react-i18next")>();
|
|
return { ...actual, useTranslation: () => ({ t: (key: string) => key }) };
|
|
});
|
|
vi.mock("../../components/ui/VirtualGrid", async () => {
|
|
const { useListNav } = await import("../../lib/listNav");
|
|
return {
|
|
default: function GridStandIn({
|
|
items,
|
|
getKey,
|
|
renderItem,
|
|
keyboardNav,
|
|
}: VirtualGridProps<unknown>) {
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
useListNav(ref, { enabled: !!keyboardNav });
|
|
return (
|
|
<div ref={ref}>
|
|
{items.map((item, i) => (
|
|
<Fragment key={getKey(item)}>{renderItem(item, 0, i)}</Fragment>
|
|
))}
|
|
</div>
|
|
);
|
|
},
|
|
};
|
|
});
|
|
|
|
import ChannelLayoutGrid from "./ChannelLayoutGrid";
|
|
import ChannelLink from "./ChannelLink";
|
|
import { type Column } from "../../components/ui/DataTable";
|
|
|
|
afterEach(cleanup);
|
|
|
|
type Ch = { id: string; title: string };
|
|
const rows: Ch[] = [
|
|
{ id: "UCa", title: "Alpha" },
|
|
{ id: "UCb", title: "Beta" },
|
|
];
|
|
|
|
function press(key: string) {
|
|
act(() => {
|
|
(document.activeElement ?? document.body).dispatchEvent(
|
|
new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true }),
|
|
);
|
|
});
|
|
}
|
|
|
|
const focusedTitle = () =>
|
|
(document.activeElement as HTMLElement).querySelector("[data-nav-open]")?.textContent;
|
|
|
|
describe("ChannelLayoutGrid · keyboard", () => {
|
|
it("walks the cards with j/k and opens the channel on Enter", () => {
|
|
const opened: string[] = [];
|
|
const columns: Column<Ch>[] = [
|
|
{
|
|
key: "channel",
|
|
header: "Channel",
|
|
cardPrimary: true,
|
|
render: (c) => (
|
|
<ChannelLink
|
|
id={c.id}
|
|
title={c.title}
|
|
thumbnailUrl={null}
|
|
onView={() => opened.push(c.id)}
|
|
/>
|
|
),
|
|
},
|
|
];
|
|
render(<ChannelLayoutGrid rows={rows} columns={columns} rowKey={(c) => c.id} />);
|
|
press("j");
|
|
expect(focusedTitle()).toBe("Alpha");
|
|
press("j");
|
|
expect(focusedTitle()).toBe("Beta");
|
|
press("Enter");
|
|
expect(opened).toEqual(["UCb"]);
|
|
});
|
|
});
|
|
|
|
describe('ChannelLayoutGrid · the card\'s "…"', () => {
|
|
it("docks it in the heading row beside the name, not in the meta line", () => {
|
|
const columns: Column<Ch>[] = [
|
|
{ key: "channel", header: "Channel", cardPrimary: true, render: (c) => <b>{c.title}</b> },
|
|
{ key: "stored", header: "Stored", render: () => <i>12</i> },
|
|
{ key: "actions", header: "", render: (c) => <u data-testid={`more-${c.id}`}>…</u> },
|
|
];
|
|
const { getByTestId, getByText } = render(
|
|
<ChannelLayoutGrid rows={rows} columns={columns} rowKey={(c) => c.id} moreKey="actions" />,
|
|
);
|
|
const heading = getByText("Alpha").closest("div")!.parentElement!;
|
|
expect(heading.contains(getByTestId("more-UCa"))).toBe(true);
|
|
// Exactly once: a slotted column is not also painted in the meta line.
|
|
expect(document.querySelectorAll('[data-testid="more-UCa"]')).toHaveLength(1);
|
|
});
|
|
});
|