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

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

  test("renders modal wrapper by id", () => {
    const { container } = render(
      <Modal id={"main-modal"}>
        <div>Modal content</div>
      </Modal>
    );

    const modal = container.querySelector("#main-modal");
    assert.notStrictEqual(modal, null);
    assert.strictEqual(modal?.hasAttribute("data-js-modal"), true);
    assert.notStrictEqual(screen.queryByText("Modal content"), null);
  });

  test("renders custom control slot", () => {
    render(
      <Modal
        id={"ctrl-modal"}
        ctrlSlot={<button type={"button"}>Close</button>}
      />
    );

    assert.notStrictEqual(screen.queryByText("Close"), null);
  });
});