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

// Mock Tooltip komponent
vi.mock("../../Tooltip", () => ({
  InfoTooltip: ({ children, ...props }) => (
    <div data-testid="info-tooltip" {...props}>
      {children}
    </div>
  ),
}));

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

const items = [
  {
    icon: "test-icon",
    content: <p>test-content</p>,
    tooltip: <p>test-tooltip</p>,
  },
];

describe("rendering IconList", () => {
  describe("initial state", () => {
    it("div has default class icon-list", () => {
      const { getByTestId } = render(
        <>
          <div id="root">
            <IconList data-testid="test-id" items={[]} />
          </div>
          <div id="root-tooltips" />
        </>,
      );
      expect(getByTestId("test-id")).toHaveClass("icon-list");
    });
  });

  describe("passed props", () => {
    let iconList;

    beforeEach(() => {
      iconList = render(
        <>
          <div id="root">
            <IconList
              data-testid="test-id"
              items={items}
              className="test-class"
            />
          </div>
          <div id="root-tooltips" />
        </>,
      );
    });
    it("has additional class when className is set", () => {
      const { getByTestId } = iconList;
      expect(getByTestId("test-id")).toHaveClass("icon-list");
      expect(getByTestId("test-id")).toHaveClass("test-class");
    });
    it("renders items[index].content inside Item component", () => {
      const { container } = render(
        <>
          <div id="root">
            <IconList data-testid="test-id" items={items} />
          </div>
          <div id="root-tooltips" />
        </>,
      );
      const item = container.querySelector("li").querySelector("div");
      expect(item).toHaveClass("icon-list__content");
      expect(item.querySelector("p").textContent).toBe("test-content");
    });
    it("renders icon with /sprite.svg#test-icon xlinkhref when icon prop is set to test-icon", () => {
      const { container } = iconList;
      const use = container.querySelector("li").querySelector("use");
      expect(use.getAttribute("xlink:href")).toEqual("/sprite.svg#test-icon");
    });
    it("renders items[index].tooltip", () => {
      const { getByText } = iconList;
      expect(getByText("test-tooltip")).toBeInTheDocument();
    });
  });
});