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

import { List, ListItem } from "../";

const items = [
  "Cras justo odio, dapibus ac facilisis in, egestas eget quam.",
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
  "Praesent commodo cursus magna, vel scelerisque nisl consectetur et.",
];

const defaultExample = (
  <List>
    {items.map((item) => (
      <ListItem key={item}>{item}</ListItem>
    ))}
  </List>
);

const clickableAnchor = (
  <List>
    {items.map((item) => (
      <ListItem key={item} controlProps={{ href: "#" }}>
        {item}
      </ListItem>
    ))}
  </List>
);

const clickableButton = (
  <List>
    {items.map((item) => (
      <ListItem key={item} controlProps={{}}>
        {item}
      </ListItem>
    ))}
  </List>
);

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

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

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

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

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

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