fix(filters): the year dialog fits a tablet, walks by arrow keys, names one year once

- a decade cell is a 36-high box with its count under the year (owner A) - arrow keys walk the cells: along a decade, then to the nearest year below - clearing the kept older year hands the focus on instead of dropping it - More... shows while a year with titles is hidden, as a plain chip - the decade caption is not read twice; the Plex range fields have names - one Plex year is labelled 1999, not 1999-1999, via oneYear/singleYear - tests for the Plex wiring and the feed year clearing the upload date
2026-11-14 17:56:37 +01:00
parent 02714e4986
commit 0eca18bcb4
20 changed files with 393 additions and 109 deletions
@@ -0,0 +1,72 @@
+// @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 { 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("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();
+  });
+});