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

import { Field } from "../";

const example = (
  <>
    <Field label="Field Label" control={{ type: "textarea" }} />
    <Field
      label="Field Label"
      control={{ type: "textarea" }}
      tooltip="info tooltip"
    />
    <Field
      label="Field Label"
      hint="Field hint with long text"
      control={{ type: "textarea" }}
    />
    <Field
      label="Field Label"
      control={{ type: "textarea" }}
      messages={[
        { type: "info", text: "Info message with lorem ipsum long text ipsum" },
      ]}
    />
    <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();
});