gerbeur/src/test/components/dump/RichContentCard.test.tsx

import { describe, expect, test, vi } from "vitest";
import { screen } from "@testing-library/react";
import { userEvent } from "@testing-library/user-event";
import { RichContentCard } from "../../../components/dump/RichContentCard.tsx";
import { renderWithContexts } from "../../render.tsx";
import type { RichContent } from "../../../../shared/dump.ts";

describe("RichContentCard", () => {
  const yt = {
    type: "youtube",
    url: "https://youtube.com/watch?v=x",
    title: "A video",
    siteName: "YouTube",
    description: "About it",
    thumbnailUrl: "https://i.ytimg.com/x.jpg",
    embedUrl: "https://www.youtube.com/embed/x",
  } satisfies RichContent;

  test("full card: play button, source link and details", async () => {
    const play = vi.fn();
    renderWithContexts(
      <RichContentCard richContent={yt} dumpHref="/dumps/d" />,
      {
        player: { play },
      },
    );
    expect(screen.getByRole("link", { name: /A video/ })).toHaveAttribute(
      "href",
      yt.url,
    );
    expect(screen.getByText("About it")).toBeInTheDocument();
    await userEvent.click(screen.getByRole("button", { name: "Play" }));
    expect(play).toHaveBeenCalledWith(expect.objectContaining({
      kind: "embed",
      embedUrl: yt.embedUrl,
      dumpHref: "/dumps/d",
    }));
  });

  test("compact: shows Pause while this card plays", () => {
    renderWithContexts(<RichContentCard richContent={yt} compact />, {
      player: {
        playing: true,
        current: { kind: "embed", embedUrl: yt.embedUrl, type: "youtube" },
      },
    });
    expect(screen.getByRole("button", { name: "Pause" })).toHaveClass(
      "is-playing",
    );
  });

  test("compact and unplayable: a link to the source", () => {
    renderWithContexts(
      <RichContentCard
        richContent={{
          type: "generic",
          url: "https://blog.test/p",
          siteName: "Blog",
        }}
        compact
      />,
    );
    expect(screen.getByRole("link", { name: "Open on Blog" })).toHaveAttribute(
      "href",
      "https://blog.test/p",
    );
  });

  test("a dump thumbnail overrides the provider's", () => {
    renderWithContexts(
      <RichContentCard
        richContent={yt}
        thumbnailOverrideUrl="http://localhost:8000/api/dumps/d/thumbnail"
      />,
    );
    expect(screen.getByRole("img", { name: "A video" })).toHaveAttribute(
      "src",
      "http://localhost:8000/api/dumps/d/thumbnail",
    );
  });

  test("a native stream that is the active item toggles instead of restarting", async () => {
    const togglePlay = vi.fn();
    const play = vi.fn();
    const bc = {
      type: "bandcamp",
      url: "https://a.bandcamp.com/album/x",
      embedUrl: "https://bandcamp.com/EmbeddedPlayer/1",
    } satisfies RichContent;
    renderWithContexts(<RichContentCard richContent={bc} compact />, {
      player: {
        togglePlay,
        play,
        playing: true,
        current: {
          kind: "stream",
          type: "bandcamp",
          streamUrl: "s",
          resolveUrl: bc.url,
          resolveIndex: 0,
          resolvedAt: 0,
        },
      },
    });
    await userEvent.click(screen.getByRole("button", { name: "Pause" }));
    expect(togglePlay).toHaveBeenCalled();
    expect(play).not.toHaveBeenCalled();
  });
});