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

import { Dropdown, DropdownDivider, DropdownItem } from "../";

const example = (
  <>
    <div id="root">
      <Dropdown id="dropdown-example-1" button={{ children: "toggle" }}>
        This is dropdown.
      </Dropdown>

      <Dropdown id="dropdown-example-2" button={{ children: "toggle" }}>
        <DropdownItem>1</DropdownItem>
        <DropdownItem>2</DropdownItem>
        <DropdownDivider></DropdownDivider>
        <DropdownItem>3</DropdownItem>
      </Dropdown>

      <Dropdown
        id="dropdown-example-3"
        tag="div"
        button={{ children: "toggle" }}
        hasFocusTrap
      >
        This is dropdown.
      </Dropdown>

      <Dropdown
        id="dropdown-example-4"
        dialog="This explains a lot"
        button={{ children: <span>toggle</span> }}
      >
        <p>This is dropdown.</p>
      </Dropdown>
    </div>
  </>
);

it("is valid html", () => {
  const { container } = render(example);
  expect(container).toHTMLValidate({ rules: { "no-inline-style": "off" } });
});

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