import { render, screen, within } from "@testing-library/react";
import ClientStrip from "./ClientStrip";

const clients = [
  { id: "sev-modaintima", name: "SEV Moda Íntima" },
  { id: "lavacao-047", name: "Lavação 047" },
];

it("lists each client as a link to its case", () => {
  render(<ClientStrip clients={clients} />);

  expect(screen.getByText("Já entregue para:")).toBeInTheDocument();
  const list = screen.getByRole("list");
  const links = within(list).getAllByRole("link");
  expect(links.map((link) => link.textContent)).toEqual([
    "SEV Moda Íntima",
    "Lavação 047",
  ]);
  expect(links.map((link) => link.getAttribute("href"))).toEqual([
    "/cases/sev-modaintima",
    "/cases/lavacao-047",
  ]);
});

it("renders nothing without clients", () => {
  const { container } = render(<ClientStrip clients={[]} />);
  expect(container).toBeEmptyDOMElement();

  const withoutProp = render(<ClientStrip />);
  expect(withoutProp.container).toBeEmptyDOMElement();
});

it("puts the years of experience in the same line, after the clients", () => {
  render(<ClientStrip clients={clients} years={5} />);

  const experience = screen.getByText("anos de experiência");
  expect(screen.getByText("5")).toBeInTheDocument();
  const lastClient = screen.getByRole("link", { name: "Lavação 047" });
  expect(
    lastClient.compareDocumentPosition(experience) &
      Node.DOCUMENT_POSITION_FOLLOWING,
  ).toBeTruthy();
  expect(experience.closest("div")).toBe(
    screen.getByText("Já entregue para:").parentElement,
  );
});

it("shows only the experience when there are no clients, and nothing without either", () => {
  const only = render(<ClientStrip years={5} />);
  expect(screen.queryByText("Já entregue para:")).toBeNull();
  expect(screen.getByText("anos de experiência")).toBeInTheDocument();
  only.unmount();

  const none = render(<ClientStrip years={0} />);
  expect(none.container).toBeEmptyDOMElement();
});

it("gives every client link a touch target of at least 44 px (min-h-11)", () => {
  render(<ClientStrip clients={clients} />);

  for (const link of screen.getAllByRole("link")) {
    expect(link).toHaveClass("min-h-11");
  }
});

it("keeps the separator after the last client when the years follow, and none when they do not", () => {
  const withYears = render(<ClientStrip clients={clients} years={5} />);
  const separators = withYears.container.querySelectorAll(
    "li [aria-hidden='true']",
  );
  expect(separators).toHaveLength(clients.length);
  withYears.unmount();

  // zero anos não escreve um "0" solto nem um ponto a mais
  const zero = render(<ClientStrip clients={clients} years={0} />);
  expect(
    zero.container.querySelectorAll("li [aria-hidden='true']"),
  ).toHaveLength(clients.length - 1);
  expect(zero.container).not.toHaveTextContent(/anos de experiência/);
  expect(screen.queryByText("0")).toBeNull();
});