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

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

  test("renders asset icon with use href", () => {
    const { container } = render(<Icon src={"close"} />);

    const use = container.querySelector("use");
    assert.notStrictEqual(use, null);
    assert.strictEqual(use?.getAttribute("href"), "#icon-close");
  });

  test("renders material icon content", () => {
    render(
      <Icon
        type={"material"}
        src={"home"}
        style={"rounded"}
      />
    );

    assert.notStrictEqual(screen.queryByText("home"), null);
    const materialNode = document.querySelector(".material-symbols-rounded");
    assert.notStrictEqual(materialNode, null);
  });
});