Add integration tests for content

2025-09-12 10:44:45 -06:00
parent c8f63ca39a
commit 6319d549df
3 changed files with 483 additions and 0 deletions
@@ -0,0 +1,171 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import RelatedArticles from "../../app/components/RelatedArticles";
+
+// Mock ContentThumbnailTemplate with a simple implementation
+vi.mock("../../app/components/ContentThumbnailTemplate", () => ({
+  default: ({ post, variant }) => (
+    <div data-testid={`thumbnail-${post.slug}`} data-variant={variant}>
+      <a href={`/blog/${post.slug}`}>
+        <h3>{post.frontmatter?.title || "Untitled"}</h3>
+        <p>{post.frontmatter?.description || "No description"}</p>
+      </a>
+    </div>
+  ),
+}));
+
+// Mock blog post data
+const mockRelatedPosts = [
+  {
+    slug: "resolving-active-conflicts",
+    frontmatter: {
+      title: "Resolving Active Conflicts",
+      description:
+        "Practical steps for resolving conflicts while maintaining trust",
+      author: "Test Author",
+      date: "2025-04-15",
+    },
+  },
+  {
+    slug: "operational-security-mutual-aid",
+    frontmatter: {
+      title: "Operational Security for Mutual Aid",
+      description:
+        "Tactics to protect members, secure communication, and prevent infiltration",
+      author: "Test Author",
+      date: "2025-04-14",
+    },
+  },
+  {
+    slug: "making-decisions-without-hierarchy",
+    frontmatter: {
+      title: "Making Decisions Without Hierarchy",
+      description:
+        "A brief guide to collaborative nonhierarchical decision making",
+      author: "Test Author",
+      date: "2025-04-13",
+    },
+  },
+];
+
+describe("Blog Core Integration", () => {
+  beforeEach(() => {
+    // Mock window.innerWidth for responsive tests
+    Object.defineProperty(window, "innerWidth", {
+      writable: true,
+      configurable: true,
+      value: 1024, // Desktop width
+    });
+  });
+
+  it("should render RelatedArticles component with correct structure", () => {
+    render(
+      <RelatedArticles
+        relatedPosts={mockRelatedPosts}
+        currentPostSlug="resolving-active-conflicts"
+      />
+    );
+
+    // Verify the section exists
+    expect(screen.getByRole("heading", { level: 2 })).toHaveTextContent(
+      "Related Articles"
+    );
+
+    // Verify thumbnails are rendered
+    expect(
+      screen.getByTestId("thumbnail-operational-security-mutual-aid")
+    ).toBeInTheDocument();
+    expect(
+      screen.getByTestId("thumbnail-making-decisions-without-hierarchy")
+    ).toBeInTheDocument();
+
+    // Current post should not be displayed
+    expect(
+      screen.queryByTestId("thumbnail-resolving-active-conflicts")
+    ).not.toBeInTheDocument();
+  });
+
+  it("should filter out current post from related articles", () => {
+    render(
+      <RelatedArticles
+        relatedPosts={mockRelatedPosts}
+        currentPostSlug="resolving-active-conflicts"
+      />
+    );
+
+    // Current post should not be displayed
+    expect(
+      screen.queryByTestId("thumbnail-resolving-active-conflicts")
+    ).not.toBeInTheDocument();
+
+    // Other posts should be displayed
+    expect(
+      screen.getByTestId("thumbnail-operational-security-mutual-aid")
+    ).toBeInTheDocument();
+    expect(
+      screen.getByTestId("thumbnail-making-decisions-without-hierarchy")
+    ).toBeInTheDocument();
+  });
+
+  it("should display all posts when no current post is specified", () => {
+    render(<RelatedArticles relatedPosts={mockRelatedPosts} />);
+
+    // All posts should be displayed
+    expect(
+      screen.getByTestId("thumbnail-resolving-active-conflicts")
+    ).toBeInTheDocument();
+    expect(
+      screen.getByTestId("thumbnail-operational-security-mutual-aid")
+    ).toBeInTheDocument();
+    expect(
+      screen.getByTestId("thumbnail-making-decisions-without-hierarchy")
+    ).toBeInTheDocument();
+  });
+
+  it("should handle empty related posts array", () => {
+    const { container } = render(
+      <RelatedArticles relatedPosts={[]} currentPostSlug="test-post" />
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("should create correct links for each thumbnail", () => {
+    render(
+      <RelatedArticles
+        relatedPosts={mockRelatedPosts}
+        currentPostSlug="resolving-active-conflicts"
+      />
+    );
+
+    // Verify links are created correctly
+    const operationalLink = screen
+      .getByTestId("thumbnail-operational-security-mutual-aid")
+      .querySelector("a");
+    const hierarchyLink = screen
+      .getByTestId("thumbnail-making-decisions-without-hierarchy")
+      .querySelector("a");
+
+    expect(operationalLink).toHaveAttribute(
+      "href",
+      "/blog/operational-security-mutual-aid"
+    );
+    expect(hierarchyLink).toHaveAttribute(
+      "href",
+      "/blog/making-decisions-without-hierarchy"
+    );
+  });
+
+  it("should display section heading", () => {
+    render(
+      <RelatedArticles
+        relatedPosts={mockRelatedPosts}
+        currentPostSlug="resolving-active-conflicts"
+      />
+    );
+
+    expect(screen.getByRole("heading", { level: 2 })).toHaveTextContent(
+      "Related Articles"
+    );
+  });
+});