peter
efd95fca01
Deep-review R6 — the small items: - The video card's channel name was still a <button> (pre-existing): ctrl/middle-click did nothing there while the title above it and the player's channel name honoured them. It renders through ChannelNameLink now, which grew a forwarded ref (the clamp measurement), pass-through attributes, a `tooltip`, and an opt-in `stopPropagation` so no click reaches the card's row. - ChannelNameLink rendered an empty, still-tabbable <a> for a channel with no title yet (a stub first seen through a live search; pre-existing at this site). It falls back to the translated "Channel". - The feed's SortKey→SortOption mapping existed twice in Feed.tsx; one `feedSortOptions` in feedSort.ts serves both modes (DIRECTIONLESS is module-private again). - The backfill refresh's comment claimed a one-page cost. It refetches every loaded page of the grid, and that is the right price: backfilled videos are older, so they land below the head. Tests for call sites that could be deleted with every lane green: the channel page running the backfill refresh (knip had been blinded by the hook test's import), Feed handing the grid the live results in the chosen key AND direction, the card using the link. Plus the alt-click arm of the shared click predicate, and a plex filter-chip test that claimed it made no request while firing a real one. Verified on localdev: the feed's channel names are anchors (same 14 px muted look), a plain click opens the channel in-app. 7 mutations, each red on its assertion.
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("./NavigationProvider", () => ({
|
|
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");
|
|
});
|
|
});
|