Initial testing framework

2025-08-28 21:17:27 -06:00
parent f9ff2d0c08
commit 165f7f8179
15 changed files with 9400 additions and 60 deletions
@@ -0,0 +1,156 @@
+import { render, screen, cleanup } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { vi, describe, test, expect, afterEach } from "vitest";
+import ContentLockup from "../../app/components/ContentLockup";
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("ContentLockup Integration", () => {
+  test("renders hero variant with all content", () => {
+    render(
+      <ContentLockup
+        variant="hero"
+        title="Welcome"
+        subtitle="Get Started"
+        description="This is a description"
+        ctaText="Get Started"
+      />
+    );
+
+    expect(
+      screen.getByRole("heading", { name: "Welcome" })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", { name: "Get Started" })
+    ).toBeInTheDocument();
+    expect(screen.getByText("This is a description")).toBeInTheDocument();
+    expect(screen.getAllByRole("button", { name: "Get Started" })).toHaveLength(
+      3
+    );
+  });
+
+  test("renders feature variant with link", () => {
+    render(
+      <ContentLockup
+        variant="feature"
+        title="Feature Title"
+        subtitle="Feature Subtitle"
+        description="Feature description"
+        linkText="Learn More"
+        linkHref="/learn"
+      />
+    );
+
+    expect(
+      screen.getByRole("heading", { name: "Feature Title" })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("link", { name: "Learn More" })
+    ).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: "Learn More" })).toHaveAttribute(
+      "href",
+      "/learn"
+    );
+  });
+
+  test("renders ask variant with simplified structure", () => {
+    render(
+      <ContentLockup
+        variant="ask"
+        title="Ask Question"
+        subtitle="Ask subtitle"
+      />
+    );
+
+    expect(
+      screen.getByRole("heading", { name: "Ask Question" })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", { name: "Ask subtitle" })
+    ).toBeInTheDocument();
+    // Ask variant should not have description or CTA
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+  });
+
+  test("handles left alignment", () => {
+    render(
+      <ContentLockup
+        variant="ask"
+        title="Left Aligned"
+        subtitle="Subtitle"
+        alignment="left"
+      />
+    );
+
+    const container = screen
+      .getByRole("heading", { name: "Left Aligned" })
+      .closest("div");
+    expect(container).toHaveClass("justify-start");
+  });
+
+  test("renders responsive buttons correctly", () => {
+    render(
+      <ContentLockup variant="hero" title="Responsive" ctaText="Click Me" />
+    );
+
+    // Should render all three button variants for different breakpoints
+    const buttons = screen.getAllByRole("button", { name: "Click Me" });
+    expect(buttons).toHaveLength(3);
+  });
+
+  test("applies custom button className", () => {
+    render(
+      <ContentLockup
+        variant="hero"
+        title="Custom Button"
+        ctaText="Custom"
+        buttonClassName="custom-button-class"
+      />
+    );
+
+    const buttons = screen.getAllByRole("button", { name: "Custom" });
+    // The large button (md breakpoint) should have the custom class
+    expect(buttons[1]).toHaveClass("custom-button-class");
+  });
+
+  test("handles missing optional props gracefully", () => {
+    render(<ContentLockup variant="hero" title="Minimal" />);
+
+    expect(
+      screen.getByRole("heading", { name: "Minimal" })
+    ).toBeInTheDocument();
+    // Should not crash without subtitle, description, or CTA
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+  });
+
+  test("renders decorative shape for hero variant", () => {
+    render(<ContentLockup variant="hero" title="Hero with Shape" />);
+
+    const shape = screen.getByAltText("Decorative shapes");
+    expect(shape).toBeInTheDocument();
+    expect(shape).toHaveAttribute("src", "assets/Shapes_1.svg");
+  });
+
+  test("does not render shape for non-hero variants", () => {
+    render(<ContentLockup variant="feature" title="Feature without Shape" />);
+
+    expect(screen.queryByAltText("Decorative shapes")).not.toBeInTheDocument();
+  });
+
+  test("link has proper accessibility attributes", () => {
+    render(
+      <ContentLockup
+        variant="feature"
+        title="Accessible"
+        linkText="Accessible Link"
+        linkHref="/accessible"
+      />
+    );
+
+    const link = screen.getByRole("link", { name: "Accessible Link" });
+    expect(link).toHaveAttribute("href", "/accessible");
+    expect(link).toHaveClass("focus:outline-none", "focus:ring-2");
+  });
+});