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

import { Bar, BarItem } from "../";

const example = (
  <>
    <Bar>
      <BarItem>Lorem</BarItem>
      <BarItem isFilling>ipsum</BarItem>
    </Bar>
    <Bar tag="span">
      <BarItem tag="span">Lorem</BarItem>
      <BarItem tag="span" isFilling>
        ipsum
      </BarItem>
    </Bar>
  </>
);

it("is valid html", () => {
  const { container } = render(example);
  expect(container).toHTMLValidate();
});

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