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

import { BlockActionOverride } from "../../../BlockAction";
import { Expander } from "../../../Expander";
import { SelectionTile } from "..";

it("is valid and accessible with radio, checkbox, and Expander content", async () => {
  const { container } = render(
    <fieldset>
      <legend>Choose options</legend>
      <SelectionTile
        type="radio"
        id="radio-a"
        name="options"
        label="Radio option"
      >
        <BlockActionOverride>
          <Expander summary="Detail">Radio details</Expander>
        </BlockActionOverride>
      </SelectionTile>
      <SelectionTile type="checkbox" id="check-a" label="Checkbox option">
        Checkbox details
      </SelectionTile>
    </fieldset>,
  );

  expect(container).toHTMLValidate({
    rules: { "element-permitted-content": "off" },
  });
  expect(await axe(container)).toHaveNoViolations();
});