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

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

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

const example = (
  <>
    <div id="root">
      <IconList
        items={[
          {
            icon: "accessibility",
            content: "Icon list example",
          },
          {
            icon: "internet-usage",
            content: "2 GB mesačne",
          },
          {
            icon: "mobile-applications",
            content: "Nonstop dátový balík Čet",
            tooltip:
              "Dáta z týchto aplikácií sa neodpočítajú z vášho predplateného objemu dát: Messenger, WhatsApp, Viber, Telegram, Skype, Správy, Pokec, Samsung Messages.",
          },
        ]}
      />
    </div>
    <div id="root-tooltips" />
  </>
);

it("is valid html", () => {
  const { container } = render(example);
  expect(container).toHTMLValidate({
    rules: {
      "no-inline-style": "off",
    },
  });
});

it("is accessible", async () => {
  const { container } = render(example);
  expect(await axe(container)).toHaveNoViolations();
});