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

import { Field } from "../";

const options = ["option 1", "option 2", "option 3"];

const example = (
  <>
    <Field label="Field Label" control={{ type: "autocomplete", options }} />
    <Field
      label="Field Label"
      control={{ type: "autocomplete", options }}
      tooltip="info tooltip"
    />
    <Field
      label="Field Label"
      hint="Field hint with long text"
      control={{ type: "autocomplete", options }}
    />
    <Field
      label="Field Label"
      control={{ type: "autocomplete", options }}
      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",
      "prefer-native-element": "off",
      "attribute-empty-style": "off",
    },
  });
});

it("is accessible", async () => {
  const { container } = render(example);
  expect(
    await axe(container, {
      rules: {
        "aria-input-field-name": { enabled: false },
      },
    }),
  ).toHaveNoViolations();
});