Files
siftlode/frontend/src/components/PlexPersonView.dom.test.tsx
T
peter 187b8007f8 E5 S6: enriched person page (TMDB bio + birth facts + Known-for rail)
The person page now leads with a TMDB bio, lazily fetched the first time it's
opened (off the S2-linked `tmdb_person_id`) and then served from the row:

- Migration 0072: ADD-only nullable person columns on plex_people — biography,
  birthday, deathday, place_of_birth, known_for_department, also_known_as,
  known_for ([{tmdb_id, media_type, title}]), tmdb_enriched_at.
- tmdb.py: TmdbClient.fetch_person (/person/{id}+combined_credits), parse_person
  (bio + a popularity-ranked, deduped known_for), apply_person, enrich_person
  (lazy one-shot, key+id guarded, commits, 404 stamps the watermark).
- people.py person_detail: loads the full person row, lazily enriches (best-effort
  — never fails the page), serves the bio fields + resolves known_for to library
  rows by guid (in-library only, popularity order).
- FE PlexPersonView: bio/birth-facts/aka hero + a "Known for" Carousel rail above
  the existing Movies/Shows filmography; PlexPersonDetail type + i18n (en+hu).

Tests: test_plex_person_bio.py (6: parse / lazy-enrich guards / serve) + extended
PlexPersonView.dom.test.tsx + the unknown-name contract in test_plex_person.py.
Browser-E2E'd on Jim Carrey (live TMDB enrich → bio 1937 chars, born 1962-01-17
Newmarket, Known-for resolved). Gate: vitest 337, backend lane 402.
2026-08-21 00:08:19 +02:00

149 lines
5.2 KiB
TypeScript

// @vitest-environment jsdom
//
// E5 S4: the actor detail page. Covers the two pieces the /code-review flagged as untested — the
// cast-row rewiring (a cast click now OPENS the person page via onOpenPerson, falling back to the old
// filter gesture only when no onOpenPerson is wired) and PlexPersonView's render (headshot/name hero,
// the Movies/Shows sections, and the "filter library by this person" action). i18n is key-passthrough
// and the api is mocked so the query resolves synchronously in the test.
import { describe, it, expect, afterEach, beforeAll, vi } from "vitest";
import { render, screen, fireEvent, cleanup } from "@testing-library/react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
beforeAll(() => {
// CastStrip now scrolls inside a Carousel, whose useHScroll wires a ResizeObserver; jsdom ships none.
class Stub {
observe() {}
unobserve() {}
disconnect() {}
takeRecords() {
return [];
}
}
globalThis.ResizeObserver ??= Stub as unknown as typeof ResizeObserver;
});
vi.mock("react-i18next", async (importOriginal) => {
const actual = await importOriginal<typeof import("react-i18next")>();
return { ...actual, useTranslation: () => ({ t: (key: string) => key }) };
});
const plexPerson = vi.fn();
const plexSetState = vi.fn((..._a: unknown[]) => Promise.resolve());
vi.mock("../lib/api", () => ({
api: {
plexPerson: (...a: unknown[]) => plexPerson(...a),
plexSetState: (...a: unknown[]) => plexSetState(...a),
},
EMPTY_PLEX_FILTERS: {},
plexFilterCount: () => 0,
}));
import { CastStrip } from "./plexCards";
import { PlexPersonView } from "./plexViews";
afterEach(cleanup);
const card = (id: string, title: string, type: "movie" | "show" = "movie") => ({
id,
type,
title,
year: 2000,
duration_seconds: 3600,
thumb: `/api/plex/image/${id}`,
playable: "direct",
status: "new",
position_seconds: 0,
});
function wrap(ui: React.ReactElement) {
const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
return render(<QueryClientProvider client={qc}>{ui}</QueryClientProvider>);
}
describe("CastStrip cast click", () => {
it("opens the person page (onOpenPerson) rather than filtering, when both are wired", () => {
const onOpenPerson = vi.fn();
const onFilter = vi.fn();
render(
<CastStrip cast={[{ name: "Jane Doe" }]} onOpenPerson={onOpenPerson} onFilter={onFilter} />,
);
fireEvent.click(screen.getByTitle("plex.info.viewPerson"));
expect(onOpenPerson).toHaveBeenCalledWith("Jane Doe");
expect(onFilter).not.toHaveBeenCalled();
});
it("falls back to the filter gesture when only onFilter is wired (e.g. the overlay)", () => {
const onFilter = vi.fn();
render(<CastStrip cast={[{ name: "Jane Doe" }]} onFilter={onFilter} />);
fireEvent.click(screen.getByTitle("plex.info.filterActor"));
expect(onFilter).toHaveBeenCalledWith({ actors: ["Jane Doe"] });
});
});
describe("PlexPersonView", () => {
it("renders the Movies + Shows sections and the filter-by-person action", async () => {
plexPerson.mockResolvedValue({
name: "Jane Doe",
photo: null,
biography: "A celebrated actor.",
birthday: "1970-01-01",
place_of_birth: "Springfield",
known_for_department: "Acting",
also_known_as: ["Janie D"],
known_for: [card("kf1", "Famous Film")],
movies: [card("m1", "Movie One")],
shows: [card("s1", "Show One", "show")],
});
const onFilter = vi.fn();
wrap(
<PlexPersonView
name="Jane Doe"
onBack={() => {}}
onOpenCard={() => {}}
onInfoCard={() => {}}
onFilter={onFilter}
/>,
);
// Both section grids render their cards once the mocked query resolves.
await screen.findByText("Movie One");
expect(screen.getByText("Show One")).toBeTruthy();
expect(screen.getByText("plex.person.movies")).toBeTruthy(); // section headings (key passthrough)
expect(screen.getByText("plex.person.shows")).toBeTruthy();
// E5 S6 bio hero: department, biography, birth facts, aka.
expect(screen.getByText("Acting")).toBeTruthy();
expect(screen.getByText("A celebrated actor.")).toBeTruthy();
expect(screen.getByText(/1970-01-01/)).toBeTruthy();
expect(screen.getByText(/plex\.person\.aka/)).toBeTruthy();
expect(screen.getByText(/Janie D/)).toBeTruthy();
// "Known for" rail renders its card.
expect(screen.getByText("plex.person.knownFor")).toBeTruthy();
expect(screen.getAllByText("Famous Film").length).toBeGreaterThan(0);
fireEvent.click(screen.getByText("plex.person.filterBy"));
expect(onFilter).toHaveBeenCalledWith({ actors: ["Jane Doe"] });
expect(plexPerson).toHaveBeenCalledWith("Jane Doe");
});
it("shows the empty message when the person has no titles", async () => {
plexPerson.mockResolvedValue({
name: "Nobody",
photo: null,
also_known_as: [],
known_for: [],
movies: [],
shows: [],
});
wrap(
<PlexPersonView
name="Nobody"
onBack={() => {}}
onOpenCard={() => {}}
onInfoCard={() => {}}
onFilter={() => {}}
/>,
);
await screen.findByText("plex.person.empty");
});
});