import { render, screen, within } from "@testing-library/react";
import { serviceOffers } from "@/lib/site-content";
import { ServiceDeliverables } from "./ServiceDeliverables";

describe("ServiceDeliverables", () => {
  it("shows 'O que você recebe' with the deliverables of the offer, then 'Primeiro passo' with its first step", () => {
    const [offer] = serviceOffers;
    render(<ServiceDeliverables offer={offer} />);

    const receives = screen.getByRole("heading", {
      level: 2,
      name: "O que você recebe",
    });
    const list = within(receives.closest("article") as HTMLElement).getByRole(
      "list",
    );
    expect(
      within(list)
        .getAllByRole("listitem")
        .map((item) => item.textContent),
    ).toEqual(offer.deliverables);

    const firstStep = screen.getByRole("heading", {
      level: 2,
      name: "Primeiro passo",
    });
    expect(
      receives.compareDocumentPosition(firstStep) &
        Node.DOCUMENT_POSITION_FOLLOWING,
    ).toBeTruthy();
    expect(screen.getByText(offer.firstStep)).toBeVisible();
  });

  it("names the section by its heading and has no contact button or link of its own", () => {
    const { container } = render(
      <ServiceDeliverables offer={serviceOffers[1]} />,
    );

    expect(
      screen.getByRole("region", { name: "O que você recebe" }),
    ).toBeVisible();
    expect(container.querySelectorAll("a")).toHaveLength(0);
  });
});