import {
  cleanup,
  render,
  screen,
} from "@testing-library/react";
import assert from "node:assert";
import {
  afterEach,
  describe,
  test,
} from "node:test";
import { Section } from "./index";

describe("Section", () => {
  afterEach(() => {
    cleanup();
  });

  test("renders section with header, content and footer", () => {
    const { container } = render(
      <Section
        id={"main-section"}
        slotHeader={<h2>Header</h2>}
        slotFooter={<span>Footer</span>}
      >
        <p>Content</p>
      </Section>
    );

    assert.notStrictEqual(container.querySelector("section#main-section"), null);
    assert.notStrictEqual(screen.queryByText("Header"), null);
    assert.notStrictEqual(screen.queryByText("Content"), null);
    assert.notStrictEqual(screen.queryByText("Footer"), null);
  });
});