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

import { Field } from "../";

const getConfig = () => ({
  connect: [true, false],
  range: {
    max: 50,
    min: 0,
  },
  start: [0],
  handleAttributes: [{ "aria-label": "Handle" }],
});

const example = (
  <>
    <Field
      id="range-1"
      label="Field Label"
      control={{ type: "range", config: getConfig("range-1-label") }}
    />
    <Field
      id="range-2"
      label="Field Label"
      control={{ type: "range", config: getConfig("range-2-label") }}
      tooltip="info tooltip"
    />
    <Field
      id="range-3"
      label="Field Label"
      hint="Field hint with long text"
      control={{ type: "range", config: getConfig("range-3-label") }}
    />
    <Field
      id="range-4"
      label="Field Label"
      control={{ type: "range", config: getConfig("range-4-label") }}
      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();
});