peter
7dd50db9b7
A failed facets load put the same muted line in up to five sections with nothing to press (the query never retries by itself), and only the Year section announced it, so a reader who hid that section heard nothing. The rail now shows one StateMessage with Retry, in the Year section or in its foot when Year is hidden; the facet sections wait for their data as before.
83 lines
3.0 KiB
TypeScript
83 lines
3.0 KiB
TypeScript
// @vitest-environment jsdom
|
|
//
|
|
// The rail's Year section: a year from the picker is a range of one (both ends), the picker shows a
|
|
// range of one as its selected year, and the two range fields carry a name of their own.
|
|
import { describe, it, expect, vi, afterEach } from "vitest";
|
|
import { render, cleanup, screen, fireEvent } from "@testing-library/react";
|
|
|
|
vi.mock("react-i18next", async (importOriginal) => {
|
|
const actual = await importOriginal<typeof import("react-i18next")>();
|
|
return {
|
|
...actual,
|
|
useTranslation: () => ({ t: (key: string) => key, i18n: { language: "en" } }),
|
|
};
|
|
});
|
|
vi.mock("./plexContext", () => ({
|
|
usePlex: () => ({}),
|
|
usePlexActions: () => ({ setPlaylistOpen: vi.fn() }),
|
|
}));
|
|
|
|
import { FacetsStatus, PlexYearFilter } from "./PlexSidebar";
|
|
import { EMPTY_PLEX_FILTERS, type PlexFacets } from "../../lib/api";
|
|
|
|
afterEach(cleanup);
|
|
|
|
const FACETS = {
|
|
years: [
|
|
{ year: 2001, count: 4 },
|
|
{ year: 1999, count: 2 },
|
|
],
|
|
year_min: 1999,
|
|
year_max: 2001,
|
|
} as unknown as PlexFacets;
|
|
|
|
describe("the Plex rail's Year section", () => {
|
|
it("picks a year as a range of one, and clears both ends again", () => {
|
|
const patch = vi.fn();
|
|
const { rerender } = render(
|
|
<PlexYearFilter filters={EMPTY_PLEX_FILTERS} facets={FACETS} patch={patch} />,
|
|
);
|
|
fireEvent.click(screen.getByRole("button", { name: /1999/ }));
|
|
expect(patch).toHaveBeenLastCalledWith({ yearMin: 1999, yearMax: 1999 });
|
|
|
|
rerender(
|
|
<PlexYearFilter
|
|
filters={{ ...EMPTY_PLEX_FILTERS, yearMin: 1999, yearMax: 1999 }}
|
|
facets={FACETS}
|
|
patch={patch}
|
|
/>,
|
|
);
|
|
const on = screen.getByRole("button", { pressed: true });
|
|
expect(on.textContent).toContain("1999");
|
|
fireEvent.click(on);
|
|
expect(patch).toHaveBeenLastCalledWith({ yearMin: null, yearMax: null });
|
|
});
|
|
|
|
it("a wider range selects no year", () => {
|
|
render(
|
|
<PlexYearFilter
|
|
filters={{ ...EMPTY_PLEX_FILTERS, yearMin: 1999, yearMax: 2001 }}
|
|
facets={FACETS}
|
|
patch={() => {}}
|
|
/>,
|
|
);
|
|
expect(screen.queryByRole("button", { pressed: true })).toBeNull();
|
|
});
|
|
|
|
it("says the facets are loading, or failed with a way to try again, rather than showing none", () => {
|
|
const retry = vi.fn();
|
|
const { rerender } = render(<FacetsStatus failed={false} onRetry={retry} />);
|
|
expect(screen.getByRole("status").textContent).toBe("common.loading");
|
|
rerender(<FacetsStatus failed onRetry={retry} />);
|
|
expect(screen.getByRole("alert").textContent).toContain("common.loadError");
|
|
fireEvent.click(screen.getByRole("button", { name: "common.retry" }));
|
|
expect(retry).toHaveBeenCalledOnce();
|
|
});
|
|
|
|
it("names the range fields", () => {
|
|
render(<PlexYearFilter filters={EMPTY_PLEX_FILTERS} facets={FACETS} patch={() => {}} />);
|
|
expect(screen.getByRole("spinbutton", { name: "plex.filter.yearFrom" })).toBeTruthy();
|
|
expect(screen.getByRole("spinbutton", { name: "plex.filter.yearTo" })).toBeTruthy();
|
|
});
|
|
});
|