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

describe("FeatureAccordion conformance", () => {
  it("renders valid HTML structure", () => {
    const { container } = render(
      <FeatureAccordion>
        <FeatureAccordionItem
          id="item-1"
          title="Item 1"
          imageUrl="/img1.png"
          imageAlt="Image 1"
        >
          Content 1
        </FeatureAccordionItem>
        <FeatureAccordionItem
          id="item-2"
          title="Item 2"
          imageUrl="/img2.png"
          imageAlt="Image 2"
        >
          Content 2
        </FeatureAccordionItem>
      </FeatureAccordion>,
    );
    expect(container).toHTMLValidate({
      rules: {
        "attribute-boolean-style": "off",
        "prefer-native-element": "off",
        "attribute-empty-style": "off",
      },
    });
  });

  it("has no accessibility violations", async () => {
    const { container } = render(
      <FeatureAccordion>
        <FeatureAccordionItem
          id="item-1"
          title="Item 1"
          imageUrl="/img1.png"
          imageAlt="Image 1"
        >
          Content 1
        </FeatureAccordionItem>
        <FeatureAccordionItem
          id="item-2"
          title="Item 2"
          imageUrl="/img2.png"
          imageAlt="Image 2"
        >
          Content 2
        </FeatureAccordionItem>
      </FeatureAccordion>,
    );
    const results = await axe(container);
    expect(results).toHaveNoViolations();
  });

  it("applies default and custom className", () => {
    const { container } = render(
      <FeatureAccordion className="custom-class">
        <FeatureAccordionItem
          id="item-1"
          title="Item 1"
          imageUrl="/img1.png"
          imageAlt="Image 1"
        >
          Content 1
        </FeatureAccordionItem>
      </FeatureAccordion>,
    );
    expect(container.firstChild).toHaveClass("feature-accordion");
    expect(container.firstChild).toHaveClass("custom-class");
  });

  it("forwards props to the root element", () => {
    const { container } = render(
      <FeatureAccordion data-testid="fa-root">
        <FeatureAccordionItem
          id="item-1"
          title="Item 1"
          imageUrl="/img1.png"
          imageAlt="Image 1"
        >
          Content 1
        </FeatureAccordionItem>
      </FeatureAccordion>,
    );
    expect(container.firstChild).toHaveAttribute("data-testid", "fa-root");
  });
});
