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

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

  test("renders custom children when components are disabled", () => {
    render(
      <Typo
        components={null}
        isFormatText={false}
      >
        <p>Typo content</p>
      </Typo>
    );

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

  test("passes extra attrs to root node", () => {
    const { container } = render(
      <Typo
        components={null}
        extraAttrs={{ "data-testid": "typo-root" }}
      >
        <span>Content</span>
      </Typo>
    );

    assert.notStrictEqual(container.querySelector("[data-testid='typo-root']"), null);
  });

  test("updates rendered components when components prop changes", () => {
    const { rerender } = render(
      <Typo components={{ text: { children: <p>First text</p> } }} />
    );

    assert.notStrictEqual(screen.queryByText("First text"), null);

    rerender(<Typo components={{ text: { children: <p>Second text</p> } }} />);

    assert.strictEqual(screen.queryByText("First text"), null);
    assert.notStrictEqual(screen.queryByText("Second text"), null);
  });
});