import { describe, expect, it } from "vitest";
import { screen } from "@testing-library/react";
import {
  componentTestSuite,
  type ComponentTestSuiteConfig,
} from "../utils/componentTestSuite";
import { renderWithProviders as render } from "../utils/test-utils";
import { GovernanceTemplateGrid } from "../../app/components/sections/GovernanceTemplateGrid";
import { GOVERNANCE_TEMPLATE_CATALOG } from "../../lib/templates/governanceTemplateCatalog";
import "@testing-library/jest-dom/vitest";

type Props = React.ComponentProps<typeof GovernanceTemplateGrid>;

const config: ComponentTestSuiteConfig<Props> = {
  component: GovernanceTemplateGrid,
  name: "GovernanceTemplateGrid",
  props: {
    entries: GOVERNANCE_TEMPLATE_CATALOG.slice(0, 2),
    hrefForTemplate: (slug: string) => `/create/review-template/${slug}`,
  } as Props,
  requiredProps: ["entries", "hrefForTemplate"],
  primaryRole: "link",
  testCases: {
    renders: true,
    accessibility: true,
  },
};

describe("GovernanceTemplateGrid", () => {
  componentTestSuite<Props>(config);

  it("renders each catalog card as a link to template review", () => {
    const entries = GOVERNANCE_TEMPLATE_CATALOG.slice(0, 2);
    render(
      <GovernanceTemplateGrid
        entries={entries}
        hrefForTemplate={(slug) => `/create/review-template/${slug}`}
      />,
    );

    for (const entry of entries) {
      expect(
        screen.getByRole("link", { name: new RegExp(entry.title, "i") }),
      ).toHaveAttribute("href", `/create/review-template/${entry.slug}`);
    }
    expect(screen.queryByRole("button")).not.toBeInTheDocument();
  });
});