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

import { Button } from "../../Button";
import { Tooltip } from "../";

const example = (
  <>
    <div id="root">
      <Tooltip
        id="tooltip-example"
        dialog="But I do provide further explanation"
      >
        This is not clear enough
      </Tooltip>

      <Tooltip tag="div" dialog={<p>Love is on my left side</p>}>
        This is not clear enough
      </Tooltip>

      <Tooltip
        dialog="This explains a lot"
        renderTrigger={(props) => <Button {...props} />}
      >
        You might not know what does this button do
      </Tooltip>

      {/* <InfoTooltip>Look here for more information</InfoTooltip> */}
    </div>
    <div id="root-tooltips" />
  </>
);

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

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