import { Tooltip } from "./index";

import { render, screen } from "@testing-library/react";

describe("Tooltip", () => {
  it("renders children", () => {
    render(<Tooltip tooltipMsg="Info">Hover me</Tooltip>);
    expect(screen.getByText("Hover me")).toBeInTheDocument();
  });

  it("sets data-text attribute with tooltip message", () => {
    render(<Tooltip tooltipMsg="Helpful tip">Content</Tooltip>);
    const span = screen.getByText("Content");
    expect(span).toHaveAttribute("data-text", "Helpful tip");
  });

  it("applies tooltip-custom class to the span", () => {
    render(<Tooltip tooltipMsg="Tip">Child</Tooltip>);
    const span = screen.getByText("Child");
    expect(span).toHaveClass("tooltip-custom");
  });

  it("applies custom className when provided", () => {
    render(
      <Tooltip tooltipMsg="Tip" className="extra-class">
        Child
      </Tooltip>
    );
    const span = screen.getByText("Child");
    expect(span).toHaveClass("tooltip-custom");
    expect(span).toHaveClass("extra-class");
  });

  it("does not add undefined to class when className is not provided", () => {
    render(<Tooltip tooltipMsg="Tip">Child</Tooltip>);
    const span = screen.getByText("Child");
    expect(span.className).not.toContain("undefined");
  });

  it("injects a style element", () => {
    const { container } = render(<Tooltip tooltipMsg="Tip">Child</Tooltip>);
    const style = container.querySelector("style");
    expect(style).toBeInTheDocument();
    expect(style?.textContent).toContain(".tooltip-custom");
  });

  it("has the correct displayName", () => {
    expect(Tooltip.displayName).toBe("Tooltip");
  });
});