siftlode/frontend/src/components/VideoInfoCard.dom.test.tsx

// @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();
  });
});