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

import { Breadcrumbs } from "../";

const example = (
  <>
    <Breadcrumbs
      label="Breadcrumbs"
      items={[
        {
          text: "Home",
          url: "/styleguide",
        },
        {
          text: "Components",
          url: "/components",
        },
        {
          text: "Breadcrumbs",
          url: "#main",
        },
      ]}
    />
    <Breadcrumbs
      label="Breadcrumbs 2"
      items={[
        {
          text: "Home",
          url: "/styleguide",
        },
        {
          text: "Components",
          url: "/components",
        },
        {
          text: "Breadcrumbs",
        },
      ]}
    />
  </>
);

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

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