/**
 * @vitest-environment jsdom
 */
import { cleanup, fireEvent, render, screen } from "@testing-library/react";
import { afterEach, describe, expect, test } from "vitest";
import FoldableBorderedContainerWithCaption from "./FoldableBorderedContainerWithCaption";

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

describe("FoldableBorderedContainerWithCaption", () => {
  test("renders caption", () => {
    render(
      <FoldableBorderedContainerWithCaption caption="Foldable Title">
        Content
      </FoldableBorderedContainerWithCaption>,
    );
    expect(screen.getByText("Foldable Title")).toBeDefined();
  });

  test("shows children by default (open state)", () => {
    render(
      <FoldableBorderedContainerWithCaption caption="Title">
        <div data-testid="child">Visible</div>
      </FoldableBorderedContainerWithCaption>,
    );
    const child = screen.getByTestId("child");
    expect(child.parentElement?.className).not.toContain("hidden");
  });

  test("hides children when toggle button is clicked", () => {
    render(
      <FoldableBorderedContainerWithCaption caption="Title">
        <div data-testid="child">Content</div>
      </FoldableBorderedContainerWithCaption>,
    );
    const toggleButton = screen.getByRole("button");
    fireEvent.click(toggleButton);
    const child = screen.getByTestId("child");
    expect(child.parentElement?.className).toContain("hidden");
  });

  test("shows children again when toggle button is clicked twice", () => {
    render(
      <FoldableBorderedContainerWithCaption caption="Title">
        <div data-testid="child">Content</div>
      </FoldableBorderedContainerWithCaption>,
    );
    const toggleButton = screen.getByRole("button");
    fireEvent.click(toggleButton);
    fireEvent.click(toggleButton);
    const child = screen.getByTestId("child");
    expect(child.parentElement?.className).not.toContain("hidden");
  });
});
