Update learn page

2026-05-20 22:17:00 -06:00
parent 7ee6282c1a
commit 1688ac85c9
45 changed files with 1203 additions and 350 deletions
@@ -0,0 +1,113 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { screen, within } from "@testing-library/react";
+import { renderWithProviders as render } from "../utils/test-utils";
+import LearnPage from "../../app/(marketing)/learn/page";
+
+vi.mock("../../lib/content", () => ({
+  getAllBlogPosts: vi.fn(),
+}));
+
+vi.mock("../../app/components/sections/AskOrganizer", () => ({
+  default: ({
+    title,
+    subtitle,
+    buttonText,
+  }: {
+    title: string;
+    subtitle: string;
+    buttonText: string;
+  }) => (
+    <div data-testid="ask-organizer">
+      <h2>{title}</h2>
+      <p>{subtitle}</p>
+      <button type="button">{buttonText}</button>
+    </div>
+  ),
+}));
+
+const mockPosts = [
+  {
+    slug: "resolving-active-conflicts",
+    frontmatter: {
+      title: "Resolving Active Conflicts",
+      description: "Practical steps for resolving conflicts",
+      author: "Author name",
+      date: "2025-04-15",
+      thumbnail: {
+        vertical: "resolving-active-conflicts-vertical.svg",
+        horizontal: "resolving-active-conflicts-horizontal.svg",
+      },
+    },
+    content: "",
+    htmlContent: "",
+    filePath: "resolving-active-conflicts.md",
+    lastModified: new Date(),
+  },
+  {
+    slug: "operational-security-mutual-aid",
+    frontmatter: {
+      title: "Operational Security for Mutual Aid",
+      description: "Tactics to protect members",
+      author: "Author name",
+      date: "2025-04-10",
+      thumbnail: {
+        vertical: "operational-security-mutual-aid-vertical.svg",
+        horizontal: "operational-security-mutual-aid-horizontal.svg",
+      },
+    },
+    content: "",
+    htmlContent: "",
+    filePath: "operational-security-mutual-aid.md",
+    lastModified: new Date(),
+  },
+];
+
+describe("LearnPage", () => {
+  beforeEach(async () => {
+    vi.clearAllMocks();
+    const { getAllBlogPosts } = await import("../../lib/content");
+    vi.mocked(getAllBlogPosts).mockReturnValue(mockPosts);
+  });
+
+  it("renders content lockup and ask organizer copy", () => {
+    render(<LearnPage />);
+
+    expect(screen.getByText("Organizing is hard")).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        /Find answers to your questions and see how other groups/,
+      ),
+    ).toBeInTheDocument();
+    expect(screen.getByTestId("ask-organizer")).toBeInTheDocument();
+    expect(screen.getByText("Still have questions?")).toBeInTheDocument();
+  });
+
+  it("renders one card per post in each layout region without duplication", () => {
+    const { container } = render(<LearnPage />);
+
+    const mobileRegion = container.querySelector(".smd\\:hidden");
+    const desktopRegion = container.querySelector(".smd\\:grid");
+
+    expect(mobileRegion).toBeTruthy();
+    expect(desktopRegion).toBeTruthy();
+
+    const mobileLinks = within(mobileRegion as HTMLElement).getAllByRole(
+      "link",
+    );
+    const desktopLinks = within(desktopRegion as HTMLElement).getAllByRole(
+      "link",
+    );
+
+    expect(mobileLinks).toHaveLength(mockPosts.length);
+    expect(desktopLinks).toHaveLength(mockPosts.length);
+
+    expect(mobileLinks[0]).toHaveAttribute(
+      "href",
+      "/blog/resolving-active-conflicts",
+    );
+    expect(desktopLinks[1]).toHaveAttribute(
+      "href",
+      "/blog/operational-security-mutual-aid",
+    );
+  });
+});