Unit tests for main index components

tests/unit/HeroBanner.test.jsx

@@ -0,0 +1,142 @@
+import { render, screen, cleanup } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { vi, describe, test, expect, afterEach } from "vitest";
+import HeroBanner from "../../app/components/HeroBanner";
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("HeroBanner Component", () => {
+  test("renders with all props", () => {
+    render(
+      <HeroBanner
+        title="Welcome to CommunityRule"
+        subtitle="Build better communities"
+        description="Create and manage community rules with ease"
+        ctaText="Get Started"
+        ctaHref="/signup"
+      />
+    );
+
+    expect(
+      screen.getByRole("heading", { name: "Welcome to CommunityRule" })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", { name: "Build better communities" })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText("Create and manage community rules with ease")
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Get Started" })
+    ).toBeInTheDocument();
+  });
+
+  test("renders with minimal props", () => {
+    render(<HeroBanner title="Minimal" />);
+
+    expect(
+      screen.getByRole("heading", { name: "Minimal" })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("img", { name: "Hero illustration" })
+    ).toBeInTheDocument();
+  });
+
+  test("renders hero image", () => {
+    render(<HeroBanner title="Test" />);
+
+    const heroImage = screen.getByRole("img", { name: "Hero illustration" });
+    expect(heroImage).toBeInTheDocument();
+    expect(heroImage).toHaveAttribute("src", "assets/HeroImage.png");
+  });
+
+  test("applies correct CSS classes", () => {
+    render(<HeroBanner title="Test" />);
+
+    const section = document.querySelector("section");
+    expect(section).toHaveClass("bg-transparent");
+
+    const contentLockup = screen
+      .getByRole("heading", { name: "Test" })
+      .closest("div");
+    expect(contentLockup).toHaveClass("md:flex-1");
+  });
+
+  test("renders ContentLockup with correct props", () => {
+    render(
+      <HeroBanner
+        title="Test Title"
+        subtitle="Test Subtitle"
+        description="Test Description"
+        ctaText="Test CTA"
+        ctaHref="/test"
+      />
+    );
+
+    // Check that ContentLockup receives the props correctly
+    expect(
+      screen.getByRole("heading", { name: "Test Title" })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", { name: "Test Subtitle" })
+    ).toBeInTheDocument();
+    expect(screen.getByText("Test Description")).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Test CTA" })
+    ).toBeInTheDocument();
+  });
+
+  test("renders HeroDecor component", () => {
+    render(<HeroBanner title="Test" />);
+
+    // HeroDecor should be present (it's a decorative component)
+    const heroDecor = document.querySelector(
+      '[class*="pointer-events-none absolute z-0"]'
+    );
+    expect(heroDecor).toBeInTheDocument();
+  });
+
+  test("has proper semantic structure", () => {
+    render(<HeroBanner title="Test" />);
+
+    const section = document.querySelector("section");
+    expect(section).toBeInTheDocument();
+
+    // Should have proper heading structure
+    const heading = screen.getByRole("heading", { name: "Test" });
+    expect(heading).toBeInTheDocument();
+  });
+
+  test("handles empty title gracefully", () => {
+    render(<HeroBanner title="" />);
+
+    // Should still render the structure even with empty title
+    const section = screen.getByRole("region");
+    expect(section).toBeInTheDocument();
+  });
+
+  test("applies responsive design classes", () => {
+    render(<HeroBanner title="Test" />);
+
+    const section = document.querySelector("section");
+    expect(section).toHaveClass(
+      "px-[var(--spacing-scale-008)]",
+      "sm:px-[var(--spacing-scale-010)]"
+    );
+  });
+
+  test("renders with design tokens", () => {
+    render(<HeroBanner title="Test" />);
+
+    const section = document.querySelector("section");
+    expect(section).toHaveClass("bg-transparent");
+
+    // Check for design token usage in the component structure
+    const container = section.querySelector(
+      '[class*="bg-[var(--color-surface-inverse-brand-primary)]"]'
+    );
+    expect(container).toBeInTheDocument();
+  });
+});