// @vitest-environment jsdom
//
// Loop 8: `hidden` an Section/PlaceholderSection blendet am Bildschirm aus,
// entfernt aber nichts aus dem DOM.
//
// Warum dieser Test existiert: die Klasse wird an einen Template-String
// angehängt, und beim Formatieren ist das trennende Leerzeichen einmal
// verlorengegangen ("scroll-mt-14hidden"). Das rendert ohne Fehler, ohne
// Warnung, und die Reiter hätten schlicht nichts ausgeblendet. `classList`
// prüft die Klasse als eigenes Token — verklebt fällt sie durch.

import { afterEach, describe, expect, it } from "vitest"
import { cleanup, render, screen } from "@testing-library/react"
import {
  Section,
  PlaceholderSection,
} from "@/components/qaf-differences/qaf-section"

afterEach(() => {
  cleanup()
})

describe("Section — hidden", () => {
  it("setzt hidden und print:block als eigene Klassen, nicht am Nachbarn klebend", () => {
    const { container } = render(
      <Section title="Testsektion" hidden>
        <p>Inhalt</p>
      </Section>
    )
    const section = container.querySelector("section")!
    expect(section.classList.contains("hidden")).toBe(true)
    expect(section.classList.contains("print:block")).toBe(true)
    // Die Nachbarklasse muss unversehrt sein — sie ist die Stelle, an der das
    // Leerzeichen verlorenging.
    expect(section.classList.contains("scroll-mt-14")).toBe(true)
  })

  it("blendet ohne hidden nichts aus (Bestandsverhalten aller Alt-Aufrufer)", () => {
    const { container } = render(
      <Section title="Testsektion">
        <p>Inhalt</p>
      </Section>
    )
    const section = container.querySelector("section")!
    expect(section.classList.contains("hidden")).toBe(false)
    expect(section.classList.contains("scroll-mt-14")).toBe(true)
  })

  it("behält den Inhalt im DOM — ausgeblendet ist nicht entfernt", () => {
    render(
      <Section title="Testsektion" hidden>
        <p>Diese Zeile muss im Ausdruck erscheinen</p>
      </Section>
    )
    expect(
      screen.getByText("Diese Zeile muss im Ausdruck erscheinen")
    ).toBeTruthy()
  })
})

describe("PlaceholderSection — hidden", () => {
  it("setzt hidden und print:block als eigene Klassen", () => {
    const { container } = render(
      <PlaceholderSection title="Platzhalter" reason="kein Grund" hidden />
    )
    const section = container.querySelector("section")!
    expect(section.classList.contains("hidden")).toBe(true)
    expect(section.classList.contains("print:block")).toBe(true)
    expect(section.classList.contains("border-dashed")).toBe(true)
  })

  it("bleibt ohne hidden sichtbar", () => {
    const { container } = render(
      <PlaceholderSection title="Platzhalter" reason="kein Grund" />
    )
    expect(container.querySelector("section")!.classList.contains("hidden")).toBe(false)
  })
})