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

// @vitest-environment jsdom
//
// Contract of a video's details panel (opened from the video's menu): 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, 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, 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 VideoDetailsAt 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(), onClose = vi.fn()) => {
  const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
  const anchor = document.createElement("div");
  document.body.appendChild(anchor);
  render(
    <QueryClientProvider client={qc}>
      <FloatingTree>
        <VideoDetailsAt video={v} anchor={anchor} onClose={onClose} />
      </FloatingTree>
    </QueryClientProvider>,
  );
  return { onClose };
};

describe("VideoDetailsAt", () => {
  // Escape is measured in the browser: jsdom has no layout, so the anchor reads as hidden and the
  // layer stack never takes the panel's Escape.
  it("is a named dialog", async () => {
    videoDetail.mockResolvedValue({ id: "v1", description: null });
    channelDetail.mockResolvedValue({ id: "c1", tag_ids: [] });
    tags.mockResolvedValue([]);
    open();
    await screen.findByText("The full untruncated title");
    // Named by its aria-label (the role query cannot see into the unpositioned, hidden surface).
    expect(document.querySelector("[role=dialog]")?.getAttribute("aria-label")).toBe("card.info");
  });

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