Fix: Centralize blog link generation to handle external URLs correctly

- Created getBlogPostLink() function to centralize link generation logic
- Posts with external_url now link directly to that URL instead of creating research links
- Fixed SmallBlogPreview, MediumBlogPreview, and FeaturedBlogPreview components
- Added comprehensive tests for external URL redirect behavior

This fixes the issue where clicking OBBBA tile was going to /us/research/obbba-household-by-household-dummy
instead of /us/obbba-household-by-household

Author: MaxGhenis

src/__tests__/posts/externalUrlRedirect.test.js

@@ -0,0 +1,111 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import {
+  MediumBlogPreview,
+  SmallBlogPreview,
+  FeaturedBlogPreview,
+} from "../../pages/home/HomeBlogPreview";
+import posts from "../../posts/posts.json";
+
+// Mock the image loader
+jest.mock(
+  "../../images/posts/obbba-household-by-household.png",
+  () => "mocked-image",
+  { virtual: true },
+);
+
+// Mock the postTransformers to ensure slug is set
+jest.mock("../../posts/postTransformers", () => {
+  const actualPosts = require("../../posts/posts.json");
+  const postsSorted = actualPosts.sort((a, b) => (a.date < b.date ? 1 : -1));
+
+  for (let post of postsSorted) {
+    if (post.filename) {
+      post.slug = post.filename.substring(0, post.filename.indexOf("."));
+    } else if (post.external_url) {
+      post.slug = post.title
+        .toLowerCase()
+        .replace(/\s+/g, "-")
+        .replace(/[^a-z0-9-]/g, "");
+    }
+  }
+
+  return {
+    posts: postsSorted,
+    locationLabels: {},
+    locationTags: [],
+    topicLabels: {},
+    topicTags: [],
+  };
+});
+
+describe("External URL redirect behavior", () => {
+  const obbbaPost = posts.find(
+    (post) => post.external_url === "/us/obbba-household-by-household",
+  );
+
+  beforeEach(() => {
+    // Ensure the post has a slug for testing
+    if (obbbaPost && !obbbaPost.slug) {
+      obbbaPost.slug = "obbba-household-by-household-dummy";
+    }
+  });
+
+  test("MediumBlogPreview should link directly to external URL", () => {
+    expect(obbbaPost).toBeDefined();
+
+    const { container } = render(
+      <MemoryRouter>
+        <MediumBlogPreview blog={obbbaPost} minHeight={300} />
+      </MemoryRouter>,
+    );
+
+    const linkElement = container.querySelector("a");
+    expect(linkElement).toBeTruthy();
+    expect(linkElement.getAttribute("href")).toBe(
+      "/us/obbba-household-by-household",
+    );
+    expect(linkElement.getAttribute("href")).not.toBe(
+      "/us/research/obbba-household-by-household-dummy",
+    );
+  });
+
+  test("SmallBlogPreview should link directly to external URL", () => {
+    expect(obbbaPost).toBeDefined();
+
+    const { container } = render(
+      <MemoryRouter>
+        <SmallBlogPreview blog={obbbaPost} />
+      </MemoryRouter>,
+    );
+
+    const linkElement = container.querySelector("a");
+    expect(linkElement).toBeTruthy();
+    expect(linkElement.getAttribute("href")).toBe(
+      "/us/obbba-household-by-household",
+    );
+    expect(linkElement.getAttribute("href")).not.toBe(
+      "/us/research/obbba-household-by-household-dummy",
+    );
+  });
+
+  test("FeaturedBlogPreview should link directly to external URL", () => {
+    expect(obbbaPost).toBeDefined();
+
+    const { container } = render(
+      <MemoryRouter>
+        <FeaturedBlogPreview blogs={obbbaPost} width="100%" imageHeight={200} />
+      </MemoryRouter>,
+    );
+
+    const linkElement = container.querySelector("a");
+    expect(linkElement).toBeTruthy();
+    expect(linkElement.getAttribute("href")).toBe(
+      "/us/obbba-household-by-household",
+    );
+    expect(linkElement.getAttribute("href")).not.toBe(
+      "/us/research/obbba-household-by-household-dummy",
+    );
+  });
+});

src/pages/home/HomeBlogPreview.jsx

@@ -9,6 +9,18 @@ import { formatFullDate } from "../../lang/format";
 import EmphasisedLink from "../../layout/EmphasisedLink";
 import { FileImageOutlined } from "@ant-design/icons";
 
+// Centralized function to get the link for a blog post
+export function getBlogPostLink(blog, countryId) {
+  // If the post has an external URL, use it directly
+  if (blog.external_url) {
+    return blog.external_url;
+  }
+
+  // Otherwise, create a research page link from the slug
+  const slug = blog.slug || (blog.filename ? blog.filename.split(".")[0] : "");
+  return `/${countryId}/research/${slug}`;
+}
+
 export default function HomeBlogPreview() {
   const countryId = useCountryId();
   const featuredPosts = posts
@@ -338,7 +350,7 @@ export function FeaturedBlogPreview({ blogs, width, imageHeight }) {
   const countryId = useCountryId();
   const postDate = formatFullDate(moment(currentBlog.date), countryId);
 
-  const link = `/${countryId}/research/${currentBlog.slug}`;
+  const link = getBlogPostLink(currentBlog, countryId);
   return (
     <div
       style={{
@@ -403,8 +415,7 @@ export function FeaturedBlogPreview({ blogs, width, imageHeight }) {
 export function MediumBlogPreview({ blog, minHeight }) {
   const displayCategory = useDisplayCategory();
   const countryId = useCountryId();
-  const slug = blog.filename ? blog.filename.split(".")[0] : blog.slug;
-  const link = blog.external_url || `/${countryId}/research/${slug}`;
+  const link = getBlogPostLink(blog, countryId);
 
   const imageUrl = blog.image ? handleImageLoad(blog.image) : "";
 
@@ -529,9 +540,7 @@ export function SmallBlogPreview({ blog }) {
     left = <SideTags tags={blog.tags} />;
   }
 
-  const slug = blog.filename.split(".")[0];
-  const link = `/${countryId}/research/${slug}`;
-
+  const link = getBlogPostLink(blog, countryId);
   const postDate = formatFullDate(moment(blog.date), countryId);
 
   return (