Fix failing about/calculator page tests

__tests__/about-page.test.tsx

@@ -1,7 +1,6 @@
 /** @jest-environment jsdom */
-
 import React from "react";
-import { render } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import AboutPage from "@/app/about/page";
 
 jest.setTimeout(10_000);
@@ -63,58 +62,94 @@ jest.mock("next/navigation", () => ({
   useParams: () => ({}),
 }));
 
+const mockAboutPayload = {
+  mission: "Build reliable defaults for every autonomous software agent.",
+  team: [
+    {
+      name: "Kai",
+      role: "Founder",
+      bio: "Builds product direction and platform roadmap.",
+      avatarUrl: "https://example.com/kai.png",
+      socialLinks: { GitHub: "https://github.com/kai" },
+    },
+    {
+      name: "Scout",
+      role: "Developer Relations",
+      bio: "Supports contributors and documentation quality.",
+      avatarUrl: "https://example.com/scout.png",
+      socialLinks: { X: "https://x.com/scout" },
+    },
+  ],
+  milestones: [
+    {
+      date: "2025-01-10",
+      title: "Public launch",
+      description: "Opened contributions to the wider agent ecosystem.",
+    },
+  ],
+  stats: {
+    launchDate: "2025-01-01",
+    totalSkills: 42,
+    totalAgents: 150,
+    contributorsCount: 18,
+  },
+};
+
 describe("/about page", () => {
-  test("renders without crashing", () => {
-    const { container } = render(<AboutPage />);
-    expect(container).toBeInTheDocument();
-  });
+  let rafTime = 0;
 
-  test("displays hero section with tagline", () => {
-    const { getByText } = render(<AboutPage />);
-    expect(getByText("Built by agents, for agents")).toBeInTheDocument();
-  });
+  beforeEach(() => {
+    rafTime = 0;
 
-  test("displays story section", () => {
-    const { getByText } = render(<AboutPage />);
-    expect(getByText("📖 Our Story")).toBeInTheDocument();
-  });
+    jest.spyOn(window, "requestAnimationFrame").mockImplementation((cb: FrameRequestCallback) => {
+      rafTime += 1500;
+      return window.setTimeout(() => cb(rafTime), 0);
+    });
 
-  test("displays team section with all members", () => {
-    const { getByText } = render(<AboutPage />);
-    expect(getByText("👥 The Team")).toBeInTheDocument();
-    expect(getByText("Kai")).toBeInTheDocument();
-    expect(getByText("Scout")).toBeInTheDocument();
-    expect(getByText("Link")).toBeInTheDocument();
-    expect(getByText("Echo")).toBeInTheDocument();
+    jest.spyOn(global, "fetch").mockResolvedValue({
+      ok: true,
+      json: async () => mockAboutPayload,
+    } as Response);
   });
 
-  test("displays stats section", () => {
-    const { getByText } = render(<AboutPage />);
-    expect(getByText("📊 By The Numbers")).toBeInTheDocument();
-    expect(getByText("Skills Listed")).toBeInTheDocument();
-    expect(getByText("Agents Registered")).toBeInTheDocument();
+  afterEach(() => {
+    jest.restoreAllMocks();
   });
 
-  test("displays values section", () => {
-    const { getByText } = render(<AboutPage />);
-    expect(getByText("💎 Our Values")).toBeInTheDocument();
-    expect(getByText("Open Source")).toBeInTheDocument();
-    expect(getByText("Agent-First")).toBeInTheDocument();
-    expect(getByText("Security")).toBeInTheDocument();
-    expect(getByText("Community")).toBeInTheDocument();
-  });
+  test("renders hero and mission content from live payload", async () => {
+    const { container } = render(<AboutPage />);
+    expect(container).toBeInTheDocument();
 
-  test("displays timeline section", () => {
-    const { getByText } = render(<AboutPage />);
-    expect(getByText("📅 Timeline")).toBeInTheDocument();
-    expect(getByText("Born")).toBeInTheDocument();
-    expect(getByText("First Launch")).toBeInTheDocument();
-    expect(getByText("100 PRs Milestone")).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByText("Built by agents, for agents")).toBeInTheDocument();
+    });
+
+    expect(screen.getByText("Live platform data")).toBeInTheDocument();
+    expect(screen.getByText("Mission")).toBeInTheDocument();
+    expect(screen.getByText(mockAboutPayload.mission)).toBeInTheDocument();
   });
 
-  test("displays Join Us CTA section", () => {
-    const { getByText } = render(<AboutPage />);
-    expect(getByText("Join Us")).toBeInTheDocument();
-    expect(getByText("Submit a Skill")).toBeInTheDocument();
+  test("renders stats, team, milestones, and CTA sections", async () => {
+    render(<AboutPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Platform Stats")).toBeInTheDocument();
+    });
+
+    expect(screen.getByText("Skills")).toBeInTheDocument();
+    expect(screen.getByText("Agents")).toBeInTheDocument();
+    expect(screen.getByText("Contributors")).toBeInTheDocument();
+    expect(screen.getByText("Days since launch")).toBeInTheDocument();
+
+    expect(screen.getByText("Team")).toBeInTheDocument();
+    expect(screen.getByText("Kai")).toBeInTheDocument();
+    expect(screen.getByText("Scout")).toBeInTheDocument();
+
+    expect(screen.getByText("Milestones")).toBeInTheDocument();
+    expect(screen.getByText("Public launch")).toBeInTheDocument();
+
+    expect(screen.getByText("Build with us")).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: "Submit a Skill" })).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: "Contribute on GitHub" })).toBeInTheDocument();
   });
 });

__tests__/calculator-page.test.tsx

@@ -1,7 +1,6 @@
 /** @jest-environment jsdom */
-
 import React from "react";
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import CalculatorPage from "../src/app/calculator/page";
 
 type LinkProps = {
@@ -19,34 +18,65 @@ jest.mock("next/link", () => {
   return LinkMock;
 });
 
+const mockPresets = [
+  {
+    id: "preset-startup",
+    name: "Startup Team",
+    description: "Small team with fast automation wins",
+    inputs: {
+      agents: 4,
+      hoursSavedPerAgentPerDay: 1.5,
+      hourlyRate: 80,
+      monthlyToolCosts: 499,
+    },
+  },
+];
+
 describe("Calculator Page", () => {
-  it("renders the calculator page", () => {
-    const { container } = render(<CalculatorPage />);
-    expect(container).toBeInTheDocument();
+  beforeEach(() => {
+    jest.spyOn(global, "fetch").mockResolvedValue({
+      ok: true,
+      json: async () => ({ presets: mockPresets }),
+    } as Response);
   });
 
-  it("displays the page title", () => {
-    render(<CalculatorPage />);
-    expect(screen.getByText("AI Agent Cost Calculator")).toBeInTheDocument();
+  afterEach(() => {
+    jest.restoreAllMocks();
   });
 
-  it("displays configuration section", () => {
-    render(<CalculatorPage />);
-    expect(screen.getByText("Configuration")).toBeInTheDocument();
-  });
+  it("renders the updated calculator hero and primary sections", async () => {
+    const { container } = render(<CalculatorPage />);
+    expect(container).toBeInTheDocument();
 
-  it("displays estimated costs section", () => {
-    render(<CalculatorPage />);
-    expect(screen.getByText("Estimated Costs")).toBeInTheDocument();
-  });
+    expect(screen.getByText("Agent ROI Calculator")).toBeInTheDocument();
 
-  it("displays model comparison section", () => {
-    render(<CalculatorPage />);
-    expect(screen.getByText("Model Comparison")).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByRole("button", { name: "Startup Team" })).toBeInTheDocument();
+    });
+
+    expect(screen.getByText("Inputs")).toBeInTheDocument();
+    expect(screen.getByText("Computed ROI")).toBeInTheDocument();
   });
 
-  it("displays optimization tips section", () => {
+  it("renders the current calculator input labels and ROI metrics", async () => {
     render(<CalculatorPage />);
-    expect(screen.getByText("Cost Optimization Tips")).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(screen.getByText("Number of Agents")).toBeInTheDocument();
+    });
+
+    expect(screen.getByText("Hours Saved per Agent per Day")).toBeInTheDocument();
+    expect(screen.getByText("Average Hourly Rate (USD)")).toBeInTheDocument();
+    expect(screen.getByText("Monthly Tool Costs (USD)")).toBeInTheDocument();
+
+    expect(screen.getByText("Monthly Productivity Value")).toBeInTheDocument();
+    expect(screen.getByText("Monthly Savings")).toBeInTheDocument();
+    expect(screen.getByText("Annual ROI")).toBeInTheDocument();
+    expect(screen.getByText("Payback Period")).toBeInTheDocument();
+    expect(screen.getByText("Efficiency Gain")).toBeInTheDocument();
+
+    const formulaText = screen.getByText(/Formula used:/i);
+    expect(formulaText).toBeInTheDocument();
+    expect(formulaText).toHaveTextContent(/agents × hours saved × hourly rate × 22\s*days/i);
   });
 });