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

import { Card, CardProductHeader, CardSection } from "../";

const example = (
  <>
    <Card>
      <CardSection>Card example 1</CardSection>
    </Card>
    <Card>
      <CardSection>Card example 2</CardSection>
      <CardSection>With two section</CardSection>
    </Card>
    <Card>
      <CardProductHeader>Card product header example</CardProductHeader>
      <CardSection>Card example 3</CardSection>
      <CardSection>With product header and two section</CardSection>
    </Card>
  </>
);

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

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