peter
c3d88d9b20
The 43 react-refresh/only-export-components warnings the gate let through meant an edit to a provider (or AnchoredPopover, Toaster, plexDetailUi, …) could not be hot-swapped: Fast Refresh reloads a module that also exports hooks or helpers. - Each provider's contexts, the types its hooks return and the hooks themselves live in a sibling context module (navigationContext.ts, channelsContext.ts, …); the provider file keeps the component. loadAccountFilters moved next to the feed filters' defaults (feedFiltersInit.ts), following navigationInit/playlistsInit. - Helpers that sat in component files have their own modules: welcomeMode, downloadTitle, plexPlayable, channelSync, ui/anchoredPopoverHooks, ui/pageToolbarSlot, ui/pagerContent, ui/toastLevels, ui/overlayOrder, ui/tableAlign, lib/plexDetail; the cells of the channel columns and the registry's page wrappers are components files of their own (channelCells, modulePages). - usePersistedTab, an alias of useAccountPersistedState, is gone; its callers use the original. npm run lint is now eslint --max-warnings 0, so a warning fails the gate like an error does.
78 lines
2.5 KiB
TypeScript
78 lines
2.5 KiB
TypeScript
// @vitest-environment jsdom
|
|
//
|
|
// The video card's channel name was a <button>: a plain click opened the channel in-app, but
|
|
// middle-click and Ctrl/Cmd-click did nothing — while the title right above it, an anchor, honoured
|
|
// them. Found by the 2026-09 bug-hunt deep-review, when the player's channel name had just become a
|
|
// real link and the card's had not. (The link's own gesture rules are pinned in
|
|
// ChannelNameLink.dom.test.tsx; this pins that the CARD uses it.)
|
|
import { describe, it, expect, vi, beforeAll, beforeEach } from "vitest";
|
|
import { render, screen, cleanup } from "@testing-library/react";
|
|
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
|
|
|
const h = vi.hoisted(() => ({ openChannel: vi.fn() }));
|
|
vi.mock("react-i18next", async (importOriginal) => ({
|
|
...(await importOriginal<typeof import("react-i18next")>()),
|
|
useTranslation: () => ({ t: (key: string) => key, i18n: { language: "en" } }),
|
|
}));
|
|
vi.mock("./navigationContext", () => ({
|
|
useNavigationActions: () => ({ openChannel: h.openChannel }),
|
|
}));
|
|
|
|
import VideoCard from "./VideoCard";
|
|
import type { Video } from "../lib/api";
|
|
|
|
beforeAll(() => {
|
|
class Stub {
|
|
observe() {}
|
|
unobserve() {}
|
|
disconnect() {}
|
|
takeRecords() {
|
|
return [];
|
|
}
|
|
}
|
|
globalThis.ResizeObserver ??= Stub as unknown as typeof ResizeObserver;
|
|
globalThis.IntersectionObserver ??= Stub as unknown as typeof IntersectionObserver;
|
|
});
|
|
|
|
const CH = "UCsXVk37bltHxD1rDPwtNM8Q";
|
|
const video = {
|
|
id: "abc123",
|
|
title: "Cicada 3301",
|
|
channel_id: CH,
|
|
channel_title: "LEMMiNO",
|
|
status: "new",
|
|
saved: false,
|
|
position_seconds: 0,
|
|
duration_seconds: 1200,
|
|
published_at: "2026-01-01T00:00:00Z",
|
|
watch_url: "https://www.youtube.com/watch?v=abc123",
|
|
thumbnail_url: "",
|
|
} as unknown as Video;
|
|
|
|
beforeEach(() => {
|
|
cleanup();
|
|
h.openChannel.mockClear();
|
|
window.history.replaceState({}, "", "/?page=feed");
|
|
});
|
|
|
|
describe("VideoCard — the channel name", () => {
|
|
it("is a real link to the channel, and a plain click still opens it in-app", () => {
|
|
render(
|
|
<QueryClientProvider client={new QueryClient()}>
|
|
<VideoCard
|
|
video={video}
|
|
view="cards"
|
|
width={320}
|
|
onState={() => {}}
|
|
onToggleSave={() => {}}
|
|
/>
|
|
</QueryClientProvider>,
|
|
);
|
|
const link = screen.getByTestId("video-card-channel");
|
|
expect(link.tagName).toBe("A");
|
|
expect(link.getAttribute("href")).toBe(`/?page=feed&chan=${CH}`);
|
|
link.click();
|
|
expect(h.openChannel).toHaveBeenCalledWith(CH, "LEMMiNO");
|
|
});
|
|
});
|