peter
b605c28b32
Ships the E5 sprint stack (S1–S7): field-scoped Plex search + typeahead, cast & crew pages, the HU-overlay Hungarian metadata + language-aware serving, the IMDb/audience rating split, the toolbar relocation, and the narrow/mobile header fix — plus the underlying Plex-module refactors (feedquery/plex.cards/plex.query extraction, db.query→2.0 select). - VERSION 0.65.2 → 0.66.0 - releaseNotes.ts: 0.66.0 user-facing entry - prettier-format the E5-touched frontend files (release hygiene) Merged main (0.65.2 download-gc hotfix) in first; no code conflicts (E5 is Plex-only, the hotfix was notifications/downloads).
27 lines
1.5 KiB
TypeScript
27 lines
1.5 KiB
TypeScript
// @vitest-environment jsdom
|
|
//
|
|
// E5 S7: locks the container-query classes on the shared search box that fix the narrow-header
|
|
// collapse — the box must WRAP to its own line (not shrink the input to ~0) when the content column
|
|
// (@container/appmain) is narrow. jsdom does no layout, but the class presence is the contract these
|
|
// rules depend on, so a refactor that drops them fails here instead of only on a hand-resized window.
|
|
import { describe, expect, it, vi } from "vitest";
|
|
import { render } from "@testing-library/react";
|
|
import SearchBar from "./SearchBar";
|
|
|
|
vi.mock("react-i18next", async (importOriginal) => {
|
|
const actual = await importOriginal<typeof import("react-i18next")>();
|
|
return { ...actual, useTranslation: () => ({ t: (key: string) => key }) };
|
|
});
|
|
|
|
describe("SearchBar responsive wrapper (E5 S7)", () => {
|
|
it("carries the container-query classes that make it wrap instead of collapsing", () => {
|
|
const { container } = render(<SearchBar value="" onChange={() => {}} placeholder="Search…" />);
|
|
const cls = (container.firstElementChild as HTMLElement).className;
|
|
// A usable min-width floor once the column has room → the box wraps via flex-wrap, never ~0:
|
|
expect(cls).toContain("@min-[420px]/appmain:min-w-[15rem]");
|
|
// On a narrow column it takes a full line of its own and sorts last (small pills share the row above):
|
|
expect(cls).toContain("@max-[640px]/appmain:basis-full");
|
|
expect(cls).toContain("@max-[640px]/appmain:order-last");
|
|
});
|
|
});
|