// @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");
  });
});