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

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

type Props = React.ComponentProps<typeof TextBlock>;

const config: ComponentTestSuiteConfig<Props> = {
  component: TextBlock,
  name: "TextBlock",
  props: {
    title: "Policy title",
    body: "Supporting text for the policy.",
  } as Props,
  requiredProps: ["title"],
  testCases: {
    renders: true,
    accessibility: true,
  },
};

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

  it("renders labeled row imageUrl as img", () => {
    render(
      <TextBlock
        title="Entry"
        rows={[
          {
            label: "Photo",
            body: "",
            imageUrl: "/api/uploads/aaaaaaaa-bbbb-4ccc-dddd-eeeeeeeeeeee",
          },
        ]}
      />,
    );
    const img = screen.getByRole("img", { name: "Photo" });
    expect(img).toHaveAttribute(
      "src",
      "/api/uploads/aaaaaaaa-bbbb-4ccc-dddd-eeeeeeeeeeee",
    );
  });

  it("renders body paragraphs above labeled rows when both are set", () => {
    render(
      <TextBlock
        title="Forum proposals"
        body="Anyone can start a thread."
        rows={[{ label: "Quorum", body: "60%" }]}
      />,
    );
    expect(screen.getByText("Anyone can start a thread.")).toBeInTheDocument();
    expect(screen.getByText("Quorum")).toBeInTheDocument();
    expect(screen.getByText("60%")).toBeInTheDocument();
  });

  it("renders the title as a level-3 heading and labeled rows as a list", () => {
    render(
      <TextBlock
        title="Forum proposals"
        body="Anyone can start a thread."
        rows={[
          { label: "Quorum", body: "60%" },
          { label: "Threshold", body: "75%" },
        ]}
      />,
    );
    expect(
      screen.getByRole("heading", { level: 3, name: "Forum proposals" }),
    ).toBeInTheDocument();
    expect(
      screen.getByRole("heading", { level: 4, name: "Quorum" }),
    ).toBeInTheDocument();
    expect(screen.getAllByRole("listitem")).toHaveLength(2);
  });
});