feat(feed): hover infobox on feed cards — full title, description, tags (E8·S3)

2026-08-26 00:44:27 +02:00
parent edcea87ea5
commit fbb961b5b7
5 changed files with 303 additions and 5 deletions
@@ -0,0 +1,130 @@
+// @vitest-environment jsdom
+//
+// Contract of the feed-card hover infobox (E8·S3): the trigger stays closed until opened; on open the
+// header (full title + channel) renders IMMEDIATELY from the Video we already hold, while the
+// description (videoDetail) and the channel's tags (channelDetail.tag_ids resolved against the tag
+// list) fill in from their on-demand queries; an empty description falls back to the "no description"
+// line. i18n is key-passthrough and the AnchoredPopover platform is floating-ui (hover mode → open via
+// focus), so we stub the observers autoUpdate wires and wrap in a FloatingTree + QueryClient.
+import { describe, it, expect, afterEach, beforeAll, vi } from "vitest";
+import { render, screen, fireEvent, cleanup } from "@testing-library/react";
+import { FloatingTree } from "@floating-ui/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+vi.mock("react-i18next", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("react-i18next")>();
+  return {
+    ...actual,
+    useTranslation: () => ({ t: (key: string) => key, i18n: { language: "en" } }),
+  };
+});
+
+const videoDetail = vi.fn();
+const channelDetail = vi.fn();
+const tags = vi.fn();
+vi.mock("../lib/api", () => ({
+  api: {
+    videoDetail: (...a: unknown[]) => videoDetail(...a),
+    channelDetail: (...a: unknown[]) => channelDetail(...a),
+    tags: (...a: unknown[]) => tags(...a),
+  },
+}));
+
+import VideoInfoCard from "./VideoInfoCard";
+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;
+});
+
+afterEach(() => {
+  cleanup();
+  vi.clearAllMocks();
+});
+
+const video = (over: Partial<Video> = {}): Video =>
+  ({
+    id: "v1",
+    title: "The full untruncated title",
+    channel_id: "c1",
+    channel_title: "Test Channel",
+    channel_thumbnail: null,
+    channel_url: "https://youtube.com/c1",
+    published_at: "2026-02-24T00:00:00Z",
+    thumbnail_url: null,
+    duration_seconds: 754,
+    view_count: 1512,
+    is_short: false,
+    live_status: "none",
+    status: "new",
+    position_seconds: 0,
+    saved: false,
+    watch_url: "https://youtu.be/v1",
+    ...over,
+  }) as Video;
+
+const open = (v: Video = video()) => {
+  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  render(
+    <QueryClientProvider client={qc}>
+      <FloatingTree>
+        <VideoInfoCard video={v} className="info-trigger" />
+      </FloatingTree>
+    </QueryClientProvider>,
+  );
+  fireEvent.focus(screen.getByRole("button", { name: "card.info" }));
+};
+
+describe("VideoInfoCard", () => {
+  it("renders a trigger, panel closed until opened (no fetch at rest)", () => {
+    const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+    render(
+      <QueryClientProvider client={qc}>
+        <FloatingTree>
+          <VideoInfoCard video={video()} className="info-trigger" />
+        </FloatingTree>
+      </QueryClientProvider>,
+    );
+    expect(screen.getByRole("button", { name: "card.info" })).toBeTruthy();
+    expect(screen.queryByText("The full untruncated title")).toBeNull();
+    // `enabled: open` gates the queries — nothing fired while closed.
+    expect(videoDetail).not.toHaveBeenCalled();
+    expect(channelDetail).not.toHaveBeenCalled();
+  });
+
+  it("shows the header immediately from the Video, then fills in description + tags on load", async () => {
+    videoDetail.mockResolvedValue({ id: "v1", description: "A longer description snippet." });
+    channelDetail.mockResolvedValue({ id: "c1", tag_ids: [1, 3] });
+    tags.mockResolvedValue([
+      { id: 1, name: "English", category: "language" },
+      { id: 2, name: "Unused", category: "topic" },
+      { id: 3, name: "Astronomy", category: "topic" },
+    ]);
+    open();
+    // Header is from the Video prop — present without waiting on any query.
+    expect(screen.getByText("The full untruncated title")).toBeTruthy();
+    expect(screen.getByText("Test Channel")).toBeTruthy();
+    // Description + only the channel's own tags (1 + 3, not 2) once the queries resolve.
+    expect(await screen.findByText("A longer description snippet.")).toBeTruthy();
+    expect(await screen.findByText("English")).toBeTruthy();
+    expect(await screen.findByText("Astronomy")).toBeTruthy();
+    expect(screen.queryByText("Unused")).toBeNull();
+  });
+
+  it("falls back to the no-description line when the video has none", async () => {
+    videoDetail.mockResolvedValue({ id: "v1", description: null });
+    channelDetail.mockResolvedValue({ id: "c1", tag_ids: [] });
+    tags.mockResolvedValue([]);
+    open();
+    expect(await screen.findByText("card.noDescription")).toBeTruthy();
+  });
+});