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

import { Button, IconButton } from "..";

const example = (
  <>
    <Button>Button 1</Button>
    <Button href="#">Anchor</Button>
    <form>
      <Button htmlType="submit">Submit button</Button>
    </form>
    <form>
      <Button htmlType="submit" isDisabled>
        Disabled submit button
      </Button>
    </form>
    <Button isDisabled>Disabled</Button>
    <IconButton iconName="accessibility">Icon button</IconButton>
    <IconButton iconName="accessibility" isSquare>
      Square icon button
    </IconButton>
  </>
);

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

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