Unit tests for main index components

tests/unit/AskOrganizer.test.jsx

@@ -0,0 +1,266 @@
+import { render, screen, cleanup } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { vi, describe, test, expect, afterEach } from "vitest";
+import AskOrganizer from "../../app/components/AskOrganizer";
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("AskOrganizer Component", () => {
+  test("renders with all props", () => {
+    render(
+      <AskOrganizer
+        title="Need help organizing?"
+        subtitle="Get expert guidance"
+        description="Our organizers can help you build better communities"
+        buttonText="Contact an organizer"
+        buttonHref="/contact"
+      />
+    );
+
+    expect(
+      screen.getByRole("heading", { name: "Need help organizing?" })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", { name: "Get expert guidance" })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText("Our organizers can help you build better communities")
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "Contact an organizer" })
+    ).toBeInTheDocument();
+  });
+
+  test("renders with default button text", () => {
+    render(<AskOrganizer title="Test" subtitle="Test" description="Test" />);
+
+    expect(
+      screen.getByRole("button", { name: "Ask an organizer" })
+    ).toBeInTheDocument();
+  });
+
+  test("renders with custom className", () => {
+    render(
+      <AskOrganizer title="Test" subtitle="Test" className="custom-class" />
+    );
+
+    const section = document.querySelector("section");
+    expect(section).toHaveClass("custom-class");
+  });
+
+  test("renders different variants", () => {
+    const { rerender } = render(
+      <AskOrganizer title="Test" subtitle="Test" variant="centered" />
+    );
+
+    // Centered variant should have center alignment
+    const container = screen
+      .getByRole("region")
+      .querySelector('[class*="text-center"]');
+    expect(container).toBeInTheDocument();
+
+    rerender(
+      <AskOrganizer title="Test" subtitle="Test" variant="left-aligned" />
+    );
+
+    // Left-aligned variant should have left alignment
+    const leftContainer = screen
+      .getByRole("region")
+      .querySelector('[class*="text-left"]');
+    expect(leftContainer).toBeInTheDocument();
+  });
+
+  test("renders ContentLockup with ask variant", () => {
+    render(
+      <AskOrganizer
+        title="Ask Title"
+        subtitle="Ask Subtitle"
+        description="Ask Description"
+      />
+    );
+
+    expect(
+      screen.getByRole("heading", { name: "Ask Title" })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", { name: "Ask Subtitle" })
+    ).toBeInTheDocument();
+    expect(screen.getByText("Ask Description")).toBeInTheDocument();
+  });
+
+  test("renders button with correct props", () => {
+    render(
+      <AskOrganizer
+        title="Test"
+        subtitle="Test"
+        buttonText="Custom Button"
+        buttonHref="/custom"
+      />
+    );
+
+    const button = screen.getByRole("button", { name: "Custom Button" });
+    expect(button).toHaveAttribute("href", "/custom");
+    expect(button).toHaveClass("size-large", "variant-default");
+  });
+
+  test("handles button click events", async () => {
+    const user = userEvent.setup();
+    const onContactClick = vi.fn();
+
+    render(
+      <AskOrganizer
+        title="Test"
+        subtitle="Test"
+        onContactClick={onContactClick}
+      />
+    );
+
+    const button = screen.getByRole("button", { name: "Ask an organizer" });
+    await user.click(button);
+
+    expect(onContactClick).toHaveBeenCalledWith({
+      event: "contact_button_click",
+      component: "AskOrganizer",
+      variant: "centered",
+      buttonText: "Ask an organizer",
+      buttonHref: "#",
+      timestamp: expect.any(String),
+    });
+  });
+
+  test("applies analytics tracking", async () => {
+    const user = userEvent.setup();
+    const gtagSpy = vi.fn();
+
+    // Mock window.gtag
+    Object.defineProperty(window, "gtag", {
+      value: gtagSpy,
+      writable: true,
+    });
+
+    render(<AskOrganizer title="Test" subtitle="Test" />);
+
+    const button = screen.getByRole("button", { name: "Ask an organizer" });
+    await user.click(button);
+
+    expect(gtagSpy).toHaveBeenCalledWith("event", "contact_button_click", {
+      event_category: "engagement",
+      event_label: "ask_organizer",
+      value: 1,
+    });
+  });
+
+  test("renders with proper accessibility attributes", () => {
+    render(
+      <AskOrganizer title="Test" subtitle="Test" buttonText="Custom Button" />
+    );
+
+    const section = document.querySelector("section");
+    expect(section).toHaveAttribute(
+      "aria-labelledby",
+      "ask-organizer-headline"
+    );
+    expect(section).toHaveAttribute("tabIndex", "-1");
+
+    const button = screen.getByRole("button", { name: "Custom Button" });
+    expect(button).toHaveAttribute(
+      "aria-label",
+      "Custom Button - Contact an organizer for help"
+    );
+  });
+
+  test("renders with design tokens", () => {
+    render(<AskOrganizer title="Test" subtitle="Test" />);
+
+    const section = document.querySelector("section");
+    expect(section).toHaveClass(
+      "py-[var(--spacing-scale-032)]",
+      "px-[var(--spacing-scale-032)]"
+    );
+  });
+
+  test("applies responsive spacing", () => {
+    render(<AskOrganizer title="Test" subtitle="Test" />);
+
+    const section = document.querySelector("section");
+    expect(section).toHaveClass(
+      "md:py-[var(--spacing-scale-096)]",
+      "md:px-[var(--spacing-scale-064)]"
+    );
+  });
+
+  test("renders with proper semantic structure", () => {
+    render(<AskOrganizer title="Test" subtitle="Test" />);
+
+    const section = document.querySelector("section");
+    expect(section).toBeInTheDocument();
+
+    // Check for proper heading structure
+    const headings = screen.getAllByRole("heading");
+    expect(headings).toHaveLength(2); // title and subtitle
+  });
+
+  test("applies variant-specific styling", () => {
+    const { rerender } = render(
+      <AskOrganizer title="Test" subtitle="Test" variant="compact" />
+    );
+
+    // Compact variant should have different padding
+    const section = screen.getByRole("region");
+    expect(section).toHaveClass(
+      "py-[var(--spacing-scale-016)]",
+      "px-[var(--spacing-scale-016)]"
+    );
+
+    rerender(
+      <AskOrganizer title="Test" subtitle="Test" variant="left-aligned" />
+    );
+
+    // Left-aligned variant should have left alignment
+    const container = section.querySelector('[class*="text-left"]');
+    expect(container).toBeInTheDocument();
+  });
+
+  test("renders button with custom styling", () => {
+    render(<AskOrganizer title="Test" subtitle="Test" />);
+
+    const button = screen.getByRole("button", { name: "Ask an organizer" });
+    expect(button).toHaveClass(
+      "xl:!px-[var(--spacing-scale-020)]",
+      "xl:!py-[var(--spacing-scale-012)]"
+    );
+  });
+
+  test("handles missing optional props gracefully", () => {
+    render(<AskOrganizer title="Test" />);
+
+    // Should still render the structure
+    const section = document.querySelector("section");
+    expect(section).toBeInTheDocument();
+
+    // Should render default button
+    expect(
+      screen.getByRole("button", { name: "Ask an organizer" })
+    ).toBeInTheDocument();
+  });
+
+  test("applies responsive button container alignment", () => {
+    render(<AskOrganizer title="Test" subtitle="Test" variant="centered" />);
+
+    const buttonContainer = screen
+      .getByRole("button", { name: "Ask an organizer" })
+      .closest("div");
+    expect(buttonContainer).toHaveClass("flex", "justify-center");
+  });
+
+  test("renders with proper content gap", () => {
+    render(<AskOrganizer title="Test" subtitle="Test" variant="compact" />);
+
+    const container = screen
+      .getByRole("region")
+      .querySelector('[class*="flex flex-col"]');
+    expect(container).toHaveClass("gap-[var(--spacing-scale-020)]");
+  });
+});