peter
1b946113c6
- Channels: the row's full-history, hide and unsubscribe buttons become its "…" at the row end (useChannelActions: open, pin, YouTube, copy name / link, full history or the admin reset, hide with an undo toast, unsubscribe behind its danger confirm); the card layout docks the "…" beside the name (ChannelLayoutGrid moreKey). The admin reset's confirm now names the reset. - Plex playlist page: a title, a show group and a season each open the page's one row menu (a title's is its usePlexCardActions list plus the removal); no X at rest; removals take an undo toast whose Undo puts every row back at its own index in one request (bulk add `positions`); j/k walk the visible rows, Delete removes the walked one; rename and delete in the header's "…". - notify: a toast with an action lives at least 8 s (the owner's call), whatever the toast setting.
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 (E11 S4c): 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 "./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("./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 "./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);
|
|
});
|
|
});
|