community-rule/tests/components/CommunityRule.test.tsx

import { describe, expect, it } from "vitest";
import { render, screen } from "@testing-library/react";
import {
  componentTestSuite,
  type ComponentTestSuiteConfig,
} from "../utils/componentTestSuite";
import CommunityRule from "../../app/components/type/CommunityRule";

type Props = React.ComponentProps<typeof CommunityRule>;

const sampleSections = [
  {
    categoryName: "Decision making",
    entries: [
      {
        title: "How proposals pass",
        body: "Important decisions require unanimous agreement.",
      },
    ],
  },
];

const config: ComponentTestSuiteConfig<Props> = {
  component: CommunityRule,
  name: "CommunityRule",
  props: {
    sections: sampleSections,
  } as Props,
  requiredProps: ["sections"],
  testCases: {
    renders: true,
    accessibility: true,
  },
};

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

  it("uses cardAccentColor for the card left border when useCardStyle is true", () => {
    const { container } = render(
      <CommunityRule
        sections={sampleSections}
        useCardStyle
        cardAccentColor="var(--color-surface-invert-brand-lavender)"
      />,
    );
    const root = container.firstElementChild as HTMLElement;
    expect(root.style.boxShadow).toBe(
      "inset 4px 0 0 0 var(--color-surface-invert-brand-lavender)",
    );
    expect(screen.getByText("How proposals pass")).toBeInTheDocument();
  });

  it("renders entry body together with labeled blocks", () => {
    render(
      <CommunityRule
        sections={[
          {
            categoryName: "Decision-making",
            entries: [
              {
                title: "Forum proposals",
                body: "Anyone can start a thread.",
                blocks: [{ label: "Quorum", body: "60%" }],
              },
            ],
          },
        ]}
      />,
    );
    expect(screen.getByText("Anyone can start a thread.")).toBeInTheDocument();
    expect(screen.getByText("Quorum")).toBeInTheDocument();
    expect(screen.getByText("60%")).toBeInTheDocument();
  });

  it("exposes category, entry, and block labels as headings and entries as a list", () => {
    render(
      <CommunityRule
        sections={[
          {
            categoryName: "Membership",
            entries: [
              {
                title: "Joining",
                body: "Ask existing members.",
              },
              {
                title: "Leaving",
                body: "Give two weeks notice.",
                blocks: [{ label: "Notice", body: "Written." }],
              },
            ],
          },
        ]}
      />,
    );
    expect(
      screen.getByRole("heading", { level: 2, name: "Membership" }),
    ).toBeInTheDocument();
    expect(
      screen.getByRole("heading", { level: 3, name: "Joining" }),
    ).toBeInTheDocument();
    expect(
      screen.getByRole("heading", { level: 3, name: "Leaving" }),
    ).toBeInTheDocument();
    expect(
      screen.getByRole("heading", { level: 4, name: "Notice" }),
    ).toBeInTheDocument();
    expect(screen.getAllByRole("list").length).toBeGreaterThanOrEqual(1);
    expect(screen.getAllByRole("listitem")).toHaveLength(3);
  });
});