import { render } from "@testing-library/react";
import fc from "fast-check";
import Footer from "./Footer";

describe("Footer responsive structure", () => {
  it("keeps the responsive design-system structure across renders", () => {
    fc.assert(
      fc.property(fc.integer({ min: 1, max: 5 }), (renderCount) => {
        for (let index = 0; index < renderCount; index += 1) {
          const { container, unmount } = render(<Footer />);
          const footer = container.querySelector("footer");
          const grid = footer?.querySelector(".ds-grid-2");

          expect(footer).toHaveClass("ds-section");
          expect(
            footer?.querySelector(".ds-section-shell"),
          ).toBeInTheDocument();
          expect(grid).toBeInTheDocument();
          expect(grid?.querySelectorAll(":scope > .ds-card")).toHaveLength(2);

          unmount();
        }
      }),
      { numRuns: 25 },
    );
  });

  it("uses the mobile-first grid primitive instead of the legacy grid contract", () => {
    const { container } = render(<Footer />);
    const grid = container.querySelector(".ds-grid-2");

    expect(grid).toBeInTheDocument();
    expect(grid).not.toHaveClass("grid-cols-1");
    expect(grid).not.toHaveClass("lg:grid-cols-3");
  });
});