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

// Mock Tooltip komponent
vi.mock("../../Tooltip", () => ({
  InfoTooltip: ({ children, placement, className = "", ...props }) => (
    <span
      className={`tooltip ${className}`.trim()}
      data-tooltip-placement={placement}
      {...props}
    >
      <svg className="bold" />
      {children}
    </span>
  ),
}));

import { Item } from "../Item";

describe("rendering Item", () => {
  describe("initial state", () => {
    it("child div has default class icon-list__content", () => {
      const { container } = render(
        <>
          <div id="root">
            <Item icon="test-name">test</Item>
          </div>
          <div id="root-tooltips" />
        </>,
      );
      expect(container.querySelector("li").querySelector("div")).toHaveClass(
        "icon-list__content",
      );
    });
    it("icon has additional class icon-list__icon", () => {
      const { container } = render(
        <>
          <div id="root">
            <Item icon="test-name">test</Item>
          </div>
          <div id="root-tooltips" />
        </>,
      );
      expect(container.querySelector("svg")).toHaveClass("icon-list__icon");
    });
    it("icon has additional class icon--medium", () => {
      const { container } = render(
        <>
          <div id="root">
            <Item icon="test-name">test</Item>
          </div>
          <div id="root-tooltips" />
        </>,
      );
      expect(container.querySelector("svg")).toHaveClass("icon--medium");
    });
  });

  describe("passed props", () => {
    it("renders children", () => {
      const { getByText } = render(
        <>
          <div id="root">
            <Item data-testid="test-id" id="test" icon="test-name">
              test
            </Item>
          </div>
          <div id="root-tooltips" />
        </>,
      );
      expect(getByText("test")).toBeInTheDocument();
    });
    it("passes other props", () => {
      const { getByTestId } = render(
        <>
          <div id="root">
            <Item data-testid="test-id" icon="test-name">
              test
            </Item>
          </div>
          <div id="root-tooltips" />
        </>,
      );
      expect(getByTestId("test-id")).toBeInTheDocument();
    });
    it("use element has /sprite.svg#test-name xlinkhref when icon prop is set to test-name", () => {
      const { container } = render(
        <>
          <div id="root">
            <Item icon="test-name">test</Item>
          </div>
          <div id="root-tooltips" />
        </>,
      );
      const use = container.querySelector("use");
      expect(use.getAttribute("xlink:href")).toEqual("/sprite.svg#test-name");
    });
    it("tooltip prop is rendered", () => {
      const { getByText } = render(
        <>
          <div id="root">
            <Item tooltip={<p>test-tooltip</p>} icon="test-name">
              test
            </Item>
          </div>
          <div id="root-tooltips" />
        </>,
      );
      expect(getByText("test-tooltip")).toBeInTheDocument();
    });
    it("svg element with class bold is rendered inside InfoTooltip component", () => {
      const { container } = render(
        <>
          <div id="root">
            <Item tooltip={<p>test-tooltip</p>} icon="test-name">
              test
            </Item>
          </div>
          <div id="root-tooltips" />
        </>,
      );
      const svg = container.querySelectorAll("svg");
      expect(svg.length).toBe(2);
      expect(svg[1]).toHaveClass("bold");
    });
    it('span element with class "tooltip" rendered inside InfoTooltip component has property data-tooltip-placement="right"', () => {
      const { container } = render(
        <>
          <div id="root">
            <Item tooltip="test-tooltip" icon="test-name">
              test
            </Item>
          </div>
          <div id="root-tooltips" />
        </>,
      );
      const tooltipElement = container.querySelector(".tooltip");
      expect(tooltipElement).toBeInTheDocument();
      expect(tooltipElement.getAttribute("data-tooltip-placement")).toBe(
        "right",
      );
    });
  });
});