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

import React from "react";
import { renderWithProviders as render, screen } from "../utils/test-utils";
import { describe, it, expect } from "vitest";
import HeroBanner from "../../app/components/sections/HeroBanner";
import {
  componentTestSuite,
  ComponentTestSuiteConfig,
} from "../utils/componentTestSuite";

type HeroBannerProps = React.ComponentProps<typeof HeroBanner>;

const baseProps: HeroBannerProps = {
  title: "Welcome",
};

const config: ComponentTestSuiteConfig<HeroBannerProps> = {
  component: HeroBanner,
  name: "HeroBanner",
  props: baseProps,
  optionalProps: {
    subtitle: "Subtitle",
    description: "Description",
  },
  primaryRole: "region",
  testCases: {
    renders: true,
    accessibility: true,
    keyboardNavigation: false,
    disabledState: false,
    errorState: false,
  },
};

componentTestSuite<HeroBannerProps>(config);

describe("HeroBanner (behavioral tests)", () => {
  it("renders title", () => {
    render(<HeroBanner title="Test Title" />);
    expect(
      screen.getByRole("heading", { name: "Test Title" }),
    ).toBeInTheDocument();
  });

  it("renders subtitle when provided", () => {
    render(<HeroBanner title="Test" subtitle="Subtitle" />);
    expect(
      screen.getByRole("heading", { name: "Subtitle" }),
    ).toBeInTheDocument();
  });

  it("renders the team Rule card instead of a hero photograph", () => {
    render(<HeroBanner title="Test" />);
    expect(
      screen.getByRole("heading", { name: "CommunityRule Creative Team" }),
    ).toBeInTheDocument();
    expect(
      screen.queryByRole("img", { name: "Hero illustration" }),
    ).not.toBeInTheDocument();
  });

  it("sends Talk to a facilitator to the workshops page", () => {
    render(<HeroBanner title="Test" />);
    const cta = screen.getAllByRole("link", { name: "Talk to a facilitator" })[0];
    expect(cta).toHaveAttribute("href", "/workshops");
    expect(cta?.className).toContain(
      "bg-[var(--color-surface-default-primary)]",
    );
  });

  it("renders Create rule as a button for large screens", () => {
    render(<HeroBanner title="Test" />);
    expect(
      screen.getAllByRole("button", { name: "Create rule" }).length,
    ).toBeGreaterThan(0);
  });
});