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

/**
 * Testes de caminhos-base de Section (complemento de Reveal.test.tsx): cada parte opcional do cabeçalho
 * (eyebrow, descrição, aside) aparece só quando é dada, a casca clara é a padrão e o id é opcional.
 */

describe("Section", () => {
  it("path: only the title and the body -> no eyebrow, no description, no aside", () => {
    const { container } = render(
      <Section title="Quem faz">
        <p>Corpo</p>
      </Section>,
    );

    expect(
      screen.getByRole("heading", { level: 2, name: "Quem faz" }),
    ).toBeInTheDocument();
    expect(screen.getByText("Corpo")).toBeInTheDocument();
    expect(container.querySelector(".ds-eyebrow")).toBeNull();
    expect(container.querySelector(".ds-section-description")).toBeNull();
    expect(
      container.querySelector(".ds-section-header > .ds-reveal"),
    ).toBeNull();
    // a linha que se desenha embaixo do título é sempre desenhada
    expect(container.querySelector(".ds-draw-line")).toBeInTheDocument();
  });

  it("path: light skin by default -> no dark class, and no id attribute without one", () => {
    const { container } = render(<Section title="Titulo">x</Section>);

    const section = container.querySelector("section");
    expect(section).toHaveClass("ds-section");
    expect(section).not.toHaveClass("ds-section-dark");
    expect(section).not.toHaveAttribute("id");
  });

  it("path: only the eyebrow -> the eyebrow shows, the description and the aside stay out", () => {
    const { container } = render(
      <Section title="Titulo" eyebrow="Sobre">
        x
      </Section>,
    );

    const eyebrow = screen.getByText("Sobre");
    expect(eyebrow).toHaveClass("ds-eyebrow", "ds-type");
    expect(eyebrow.style.getPropertyValue("--n")).toBe("5");
    expect(container.querySelector(".ds-section-description")).toBeNull();
    expect(
      container.querySelector(".ds-section-header > .ds-reveal"),
    ).toBeNull();
  });

  it("path: only the description -> the description shows, the eyebrow and the aside stay out", () => {
    const { container } = render(
      <Section title="Titulo" description="Texto de apoio">
        x
      </Section>,
    );

    expect(screen.getByText("Texto de apoio")).toHaveClass(
      "ds-section-description",
    );
    expect(container.querySelector(".ds-eyebrow")).toBeNull();
    expect(
      container.querySelector(".ds-section-header > .ds-reveal"),
    ).toBeNull();
  });

  it("path: only the aside -> the aside shows next to the title, the eyebrow and the description stay out", () => {
    const { container } = render(
      <Section title="Titulo" aside={<span>lateral</span>}>
        x
      </Section>,
    );

    expect(
      container.querySelector(".ds-section-header > .ds-reveal"),
    ).toHaveTextContent("lateral");
    expect(container.querySelector("aside")).toBeNull();
    expect(container.querySelector(".ds-eyebrow")).toBeNull();
    expect(container.querySelector(".ds-section-description")).toBeNull();
  });

  it("path: children animation disabled -> the body is a plain block, not inside a reveal", () => {
    const { container } = render(
      <Section title="Titulo" disableChildrenAnimation>
        <p>Corpo</p>
      </Section>,
    );

    const body = screen.getByText("Corpo").parentElement;
    expect(body?.parentElement).toHaveClass("ds-section-shell");
    expect(container.querySelectorAll(".ds-reveal")).toHaveLength(0);
  });
});