peter
63a0fecc8b
A pure move (git mv, history kept): 333 files leave components/, which now holds only the platform layer (ui/) and the legal pages. The shell is the frame (App, header, nav rail, palette, boot); each page lives in modules/<page>/ with its rail, store and tests; what several pages share sits in features/<name>/; the shared-link page is watch/. Domain-free helpers went straight to ui/ (ViewSwitcher, FilterRail, the confirm dialog, the language switcher, the copy rows). Every relative specifier was rewritten (imports, dynamic imports, vi.mock, new URL), and the contract tests that scan sources now scan the whole app source, not only components/ — each glob was counted before and after so none went green over fewer files. The locale-format rule matched `/src/components/` only, so the move would have taken ~300 files out from under its i18n-singleton check; it now covers every folder that holds components, with a test per folder.
102 lines
4.0 KiB
TypeScript
102 lines
4.0 KiB
TypeScript
// @vitest-environment jsdom
|
|
//
|
|
// Contract of the shared library search-and-pick list (F6): it owns the debounced query and the
|
|
// full loading/error/empty/no-results/list state machine so the two callers (AddItemPanel in
|
|
// PlexCollectionView, NewCollectionPanel in plexBrowseLists) can't drift. The two things a caller
|
|
// steers — the `enabled` gate (NewCollectionPanel holds it off until the collection name is valid)
|
|
// and the `emptyHint` shown before a term is typed — are the pieces with no test before this file, so
|
|
// they're covered here. i18n is key-passthrough and api/debounce are mocked so the test drives state
|
|
// directly.
|
|
import { type ComponentProps } from "react";
|
|
import { describe, it, expect, afterEach, beforeEach, vi } from "vitest";
|
|
import { render, screen, cleanup, waitFor } from "@testing-library/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 }) };
|
|
});
|
|
// Identity debounce so a passed term is reflected immediately.
|
|
vi.mock("../../lib/useDebounced", () => ({ useDebounced: (v: unknown) => v }));
|
|
|
|
// api.plexLibrary stub — returns whatever the current test queued.
|
|
const plexLibrary = vi.fn();
|
|
vi.mock("../../lib/api", () => ({ api: { plexLibrary: (...a: unknown[]) => plexLibrary(...a) } }));
|
|
|
|
import PlexLibraryPicker from "./PlexLibraryPicker";
|
|
|
|
const card = (id: string, title: string, year = 2000) => ({
|
|
id,
|
|
type: "movie" as const,
|
|
title,
|
|
year,
|
|
thumb: `/api/plex/image/${id}`,
|
|
});
|
|
const result = (items: ReturnType<typeof card>[]) => ({
|
|
scope: "both",
|
|
total: items.length,
|
|
offset: 0,
|
|
limit: 12,
|
|
items,
|
|
episodes: [],
|
|
});
|
|
|
|
beforeEach(() => {
|
|
plexLibrary.mockReset();
|
|
plexLibrary.mockResolvedValue(result([]));
|
|
});
|
|
afterEach(cleanup);
|
|
|
|
const renderPicker = (props: Partial<ComponentProps<typeof PlexLibraryPicker>> = {}) => {
|
|
const qc = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
|
return render(
|
|
<QueryClientProvider client={qc}>
|
|
<PlexLibraryPicker
|
|
scope="both"
|
|
term=""
|
|
renderAction={(c) => <button>act:{c.id}</button>}
|
|
{...props}
|
|
/>
|
|
</QueryClientProvider>,
|
|
);
|
|
};
|
|
|
|
describe("PlexLibraryPicker", () => {
|
|
it("renders nothing and fires no query while disabled, even with a term", () => {
|
|
const { container } = renderPicker({ enabled: false, term: "matrix" });
|
|
expect(container.firstChild).toBeNull();
|
|
expect(plexLibrary).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it("shows the emptyHint (and fires no query) before a term is typed", () => {
|
|
renderPicker({ term: "", emptyHint: <p>EMPTY_HINT</p> });
|
|
expect(screen.getByText("EMPTY_HINT")).toBeTruthy();
|
|
expect(plexLibrary).not.toHaveBeenCalled();
|
|
});
|
|
|
|
it("queries the library once enabled + a term are both present and renders the rows via renderAction", async () => {
|
|
plexLibrary.mockResolvedValue(result([card("m1", "The Matrix"), card("m2", "Reloaded")]));
|
|
renderPicker({ term: "matrix" });
|
|
|
|
await waitFor(() => expect(screen.getByText("act:m1")).toBeTruthy());
|
|
expect(screen.getByText("act:m2")).toBeTruthy();
|
|
expect(screen.getByText("The Matrix")).toBeTruthy();
|
|
expect(plexLibrary).toHaveBeenCalledWith({ scope: "both", q: "matrix", limit: 12 });
|
|
});
|
|
|
|
it("renders the honest error state (not an empty/no-results state) when the query fails", async () => {
|
|
plexLibrary.mockRejectedValue(new Error("boom"));
|
|
renderPicker({ term: "matrix" });
|
|
|
|
await waitFor(() => expect(screen.getByText("common.loadError")).toBeTruthy());
|
|
expect(screen.queryByText("plex.collection.addNoResults")).toBeNull();
|
|
});
|
|
|
|
it("shows the no-results message when the query returns an empty list", async () => {
|
|
plexLibrary.mockResolvedValue(result([]));
|
|
renderPicker({ term: "zzzz" });
|
|
|
|
await waitFor(() => expect(screen.getByText("plex.collection.addNoResults")).toBeTruthy());
|
|
});
|
|
});
|