Run lint and prettier

tests/unit/BlogPage.test.jsx

@@ -131,7 +131,7 @@ describe("BlogPostPage", () => {
       "min-h-screen",
       "bg-[#F4F3F1]",
       "relative",
-      "overflow-hidden"
+      "overflow-hidden",
     );
   });
 
@@ -144,7 +144,7 @@ describe("BlogPostPage", () => {
     expect(screen.getByTestId("content-banner")).toBeInTheDocument();
     expect(screen.getByText("Test Article Title")).toBeInTheDocument();
     expect(
-      screen.getByText("This is a test article description")
+      screen.getByText("This is a test article description"),
     ).toBeInTheDocument();
   });
 
@@ -158,7 +158,7 @@ describe("BlogPostPage", () => {
     expect(article).toBeInTheDocument();
     expect(article).toHaveClass(
       "p-[var(--spacing-scale-024)]",
-      "sm:py-[var(--spacing-scale-032)]"
+      "sm:py-[var(--spacing-scale-032)]",
     );
 
     // Check content is rendered
@@ -188,7 +188,7 @@ describe("BlogPostPage", () => {
     expect(screen.getByTestId("ask-organizer")).toBeInTheDocument();
     expect(screen.getByText("Still have questions?")).toBeInTheDocument();
     expect(
-      screen.getByText("Get answers from an experienced organizer")
+      screen.getByText("Get answers from an experienced organizer"),
     ).toBeInTheDocument();
     expect(screen.getByText("Ask an organizer")).toBeInTheDocument();
   });
@@ -220,7 +220,7 @@ describe("BlogPostPage", () => {
     expect(contentDiv).toHaveClass("post-body");
     expect(contentDiv).toHaveClass("-mt-[var(--spacing-scale-048)]");
     expect(contentDiv).toHaveClass(
-      "text-[var(--color-content-inverse-primary)]"
+      "text-[var(--color-content-inverse-primary)]",
     );
     expect(contentDiv).toHaveClass("text-[16px]");
     expect(contentDiv).toHaveClass("leading-[24px]");
@@ -267,7 +267,7 @@ describe("BlogPostPage", () => {
 
     // Check for script elements using querySelector since RTL ignores them
     const scripts = document.querySelectorAll(
-      'script[type="application/ld+json"]'
+      'script[type="application/ld+json"]',
     );
     expect(scripts).toHaveLength(2);
 
@@ -285,7 +285,7 @@ describe("BlogPostPage", () => {
     // The component should throw an error when post is null
     // This happens because notFound() is called
     await expect(
-      BlogPostPage({ params: { slug: "non-existent" } })
+      BlogPostPage({ params: { slug: "non-existent" } }),
     ).rejects.toThrow();
   });
 
@@ -297,7 +297,7 @@ describe("BlogPostPage", () => {
 
     // Current post should not appear in related articles
     expect(
-      screen.queryByTestId("related-test-article")
+      screen.queryByTestId("related-test-article"),
     ).not.toBeInTheDocument();
 
     // Other related posts should appear
@@ -322,7 +322,7 @@ describe("BlogPostPage", () => {
       "top-1/4",
       "right-0",
       "pointer-events-none",
-      "z-10"
+      "z-10",
     );
 
     // Second shape (left side)
@@ -334,7 +334,7 @@ describe("BlogPostPage", () => {
       "top-1/2",
       "left-0",
       "pointer-events-none",
-      "z-10"
+      "z-10",
     );
   });
 

tests/unit/ContentBanner.test.jsx

@@ -39,7 +39,7 @@ describe("ContentBanner", () => {
 
     // Check that the banner container exists - it's the first div with the specific classes
     const banner = document.querySelector(
-      "div[class*='pt-[var(--measures-spacing-016)]']"
+      "div[class*='pt-[var(--measures-spacing-016)]']",
     );
     expect(banner).toBeInTheDocument();
     expect(banner).toHaveClass(
@@ -54,7 +54,7 @@ describe("ContentBanner", () => {
       "xl:h-[504px]",
       "relative",
       "w-full",
-      "sm:overflow-hidden"
+      "sm:overflow-hidden",
     );
   });
 
@@ -63,7 +63,7 @@ describe("ContentBanner", () => {
 
     // Check for background div with correct styling
     const backgroundDiv = document.querySelector(
-      "div[style*='background-image']"
+      "div[style*='background-image']",
     );
     expect(backgroundDiv).toBeInTheDocument();
     expect(backgroundDiv).toHaveClass(
@@ -73,7 +73,7 @@ describe("ContentBanner", () => {
       "h-full",
       "bg-cover",
       "bg-no-repeat",
-      "aspect-[320/225.5]"
+      "aspect-[320/225.5]",
     );
   });
 
@@ -82,7 +82,7 @@ describe("ContentBanner", () => {
 
     // Check for the md+ background div
     const mdBackgroundDiv = document.querySelector(
-      "div[style*='Content_Banner_2.svg']"
+      "div[style*='Content_Banner_2.svg']",
     );
     expect(mdBackgroundDiv).toBeInTheDocument();
     expect(mdBackgroundDiv).toHaveClass("hidden", "md:block");
@@ -98,7 +98,7 @@ describe("ContentBanner", () => {
     render(<ContentBanner post={mockPost} />);
 
     expect(
-      screen.getByText("This is a test article description")
+      screen.getByText("This is a test article description"),
     ).toBeInTheDocument();
   });
 
@@ -114,7 +114,7 @@ describe("ContentBanner", () => {
 
     // Check the content container div
     const contentContainer = document.querySelector(
-      "div[class*='relative z-10']"
+      "div[class*='relative z-10']",
     );
     expect(contentContainer).toBeInTheDocument();
     expect(contentContainer).toHaveClass(
@@ -122,7 +122,7 @@ describe("ContentBanner", () => {
       "z-10",
       "h-full",
       "flex",
-      "flex-col"
+      "flex-col",
     );
   });
 
@@ -135,7 +135,7 @@ describe("ContentBanner", () => {
       "font-medium",
       "text-[18px]",
       "leading-[120%]",
-      "text-[var(--color-content-inverse-brand-royal)]"
+      "text-[var(--color-content-inverse-brand-royal)]",
     );
 
     const description = screen.getByText("This is a test article description");
@@ -144,7 +144,7 @@ describe("ContentBanner", () => {
       "font-normal",
       "text-[12px]",
       "leading-[16px]",
-      "text-[var(--color-content-inverse-brand-royal)]"
+      "text-[var(--color-content-inverse-brand-royal)]",
     );
   });
 
@@ -157,7 +157,7 @@ describe("ContentBanner", () => {
       "font-normal",
       "text-[10px]",
       "leading-[14px]",
-      "text-[var(--color-content-inverse-brand-royal)]"
+      "text-[var(--color-content-inverse-brand-royal)]",
     );
 
     const date = screen.getByText("April 2025");
@@ -166,7 +166,7 @@ describe("ContentBanner", () => {
       "font-normal",
       "text-[10px]",
       "leading-[14px]",
-      "text-[var(--color-content-inverse-brand-royal)]"
+      "text-[var(--color-content-inverse-brand-royal)]",
     );
   });
 
@@ -175,7 +175,7 @@ describe("ContentBanner", () => {
 
     // Check the ContentContainer spacing
     const contentContainer = document.querySelector(
-      "div[class*='relative z-20']"
+      "div[class*='relative z-20']",
     );
     expect(contentContainer).toHaveClass("gap-[var(--measures-spacing-012)]");
   });
@@ -184,13 +184,13 @@ describe("ContentBanner", () => {
     render(<ContentBanner post={mockPost} />);
 
     const outerContainer = document.querySelector(
-      "div[class*='pt-[var(--measures-spacing-016)]']"
+      "div[class*='pt-[var(--measures-spacing-016)]']",
     );
     expect(outerContainer).toHaveClass(
       "pt-[var(--measures-spacing-016)]",
       "md:pt-[var(--measures-spacing-008)]",
       "lg:pt-[50px]",
-      "xl:pt-[112px]"
+      "xl:pt-[112px]",
     );
   });
 
@@ -216,7 +216,7 @@ describe("ContentBanner", () => {
       "sm:text-[24px]",
       "md:text-[32px]",
       "lg:text-[44px]",
-      "xl:text-[64px]"
+      "xl:text-[64px]",
     );
 
     const description = screen.getByText("This is a test article description");
@@ -224,7 +224,7 @@ describe("ContentBanner", () => {
       "sm:text-[14px]",
       "md:text-[14px]",
       "lg:text-[18px]",
-      "xl:text-[24px]"
+      "xl:text-[24px]",
     );
   });
 

tests/unit/ContentContainer.test.jsx

@@ -36,7 +36,7 @@ describe("ContentContainer", () => {
       "z-20",
       "h-full",
       "flex",
-      "flex-col"
+      "flex-col",
     );
   });
 
@@ -59,7 +59,7 @@ describe("ContentContainer", () => {
       "font-medium",
       "text-[18px]",
       "leading-[120%]",
-      "text-[var(--color-content-inverse-brand-royal)]"
+      "text-[var(--color-content-inverse-brand-royal)]",
     );
   });
 
@@ -73,7 +73,7 @@ describe("ContentContainer", () => {
       "font-normal",
       "text-[12px]",
       "leading-[16px]",
-      "text-[var(--color-content-inverse-brand-royal)]"
+      "text-[var(--color-content-inverse-brand-royal)]",
     );
   });
 
@@ -108,7 +108,7 @@ describe("ContentContainer", () => {
 
     // Check the content container (parent of icon)
     expect(iconContainer.parentElement).toHaveClass(
-      "gap-[var(--measures-spacing-008)]"
+      "gap-[var(--measures-spacing-008)]",
     );
     // Check the text container (parent of title) - it has responsive gap classes
     expect(textContainer.parentElement).toHaveClass("flex", "flex-col");
@@ -121,7 +121,7 @@ describe("ContentContainer", () => {
     expect(metadataContainer).toHaveClass(
       "flex",
       "items-center",
-      "gap-[var(--measures-spacing-008)]"
+      "gap-[var(--measures-spacing-008)]",
     );
   });
 
@@ -134,7 +134,7 @@ describe("ContentContainer", () => {
       "font-normal",
       "text-[10px]",
       "leading-[14px]",
-      "text-[var(--color-content-inverse-brand-royal)]"
+      "text-[var(--color-content-inverse-brand-royal)]",
     );
 
     const date = screen.getByText("April 2025");
@@ -143,7 +143,7 @@ describe("ContentContainer", () => {
       "font-normal",
       "text-[10px]",
       "leading-[14px]",
-      "text-[var(--color-content-inverse-brand-royal)]"
+      "text-[var(--color-content-inverse-brand-royal)]",
     );
   });
 
@@ -229,7 +229,7 @@ describe("ContentContainer", () => {
     render(<ContentContainer post={longTitlePost} />);
 
     expect(
-      screen.getByText(/This is a very long article title/)
+      screen.getByText(/This is a very long article title/),
     ).toBeInTheDocument();
   });
 
@@ -246,7 +246,7 @@ describe("ContentContainer", () => {
     render(<ContentContainer post={longDescPost} />);
 
     expect(
-      screen.getByText(/This is a very long article description/)
+      screen.getByText(/This is a very long article description/),
     ).toBeInTheDocument();
   });
 });

tests/unit/ContentThumbnailTemplate.test.jsx

@@ -50,7 +50,7 @@ describe("ContentThumbnailTemplate", () => {
 
       expect(screen.getByText("Test Blog Post Title")).toBeInTheDocument();
       expect(
-        screen.getByText(/This is a test description/)
+        screen.getByText(/This is a test description/),
       ).toBeInTheDocument();
     });
 
@@ -79,7 +79,7 @@ describe("ContentThumbnailTemplate", () => {
 
       expect(screen.getByText("Test Blog Post Title")).toBeInTheDocument();
       expect(
-        screen.getByText(/This is a test description/)
+        screen.getByText(/This is a test description/),
       ).toBeInTheDocument();
       expect(screen.getByText("Test Author")).toBeInTheDocument();
     });
@@ -88,7 +88,7 @@ describe("ContentThumbnailTemplate", () => {
   describe("Props and Customization", () => {
     it("should apply custom className", () => {
       render(
-        <ContentThumbnailTemplate post={mockPost} className="custom-class" />
+        <ContentThumbnailTemplate post={mockPost} className="custom-class" />,
       );
 
       const container = screen.getByRole("link");

tests/unit/Footer.test.jsx

@@ -27,7 +27,7 @@ describe("Footer", () => {
     expect(schemaData.email).toBe("medlab@colorado.edu");
     expect(schemaData.url).toBe("https://communityrule.com");
     expect(schemaData.sameAs).toContain(
-      "https://bsky.app/profile/medlabboulder"
+      "https://bsky.app/profile/medlabboulder",
     );
     expect(schemaData.sameAs).toContain("https://gitlab.com/medlabboulder");
   });
@@ -36,7 +36,7 @@ describe("Footer", () => {
     render(<Footer />);
 
     expect(
-      screen.getAllByText("Media Economies Design Lab").length
+      screen.getAllByText("Media Economies Design Lab").length,
     ).toBeGreaterThan(0);
 
     const emailLinks = screen.getAllByRole("link", {
@@ -86,13 +86,13 @@ describe("Footer", () => {
     render(<Footer />);
 
     expect(
-      screen.getAllByRole("link", { name: "Use cases" }).length
+      screen.getAllByRole("link", { name: "Use cases" }).length,
     ).toBeGreaterThan(0);
     expect(
-      screen.getAllByRole("link", { name: "Learn" }).length
+      screen.getAllByRole("link", { name: "Learn" }).length,
     ).toBeGreaterThan(0);
     expect(
-      screen.getAllByRole("link", { name: "About" }).length
+      screen.getAllByRole("link", { name: "About" }).length,
     ).toBeGreaterThan(0);
   });
 
@@ -100,13 +100,13 @@ describe("Footer", () => {
     render(<Footer />);
 
     expect(
-      screen.getAllByRole("link", { name: "Privacy Policy" }).length
+      screen.getAllByRole("link", { name: "Privacy Policy" }).length,
     ).toBeGreaterThan(0);
     expect(
-      screen.getAllByRole("link", { name: "Terms of Service" }).length
+      screen.getAllByRole("link", { name: "Terms of Service" }).length,
     ).toBeGreaterThan(0);
     expect(
-      screen.getAllByRole("link", { name: "Cookies Settings" }).length
+      screen.getAllByRole("link", { name: "Cookies Settings" }).length,
     ).toBeGreaterThan(0);
   });
 
@@ -114,7 +114,7 @@ describe("Footer", () => {
     render(<Footer />);
 
     expect(screen.getAllByText("© All right reserved").length).toBeGreaterThan(
-      0
+      0,
     );
   });
 
@@ -123,7 +123,7 @@ describe("Footer", () => {
 
     // Check that logo containers exist for different breakpoints
     const logoContainers = document.querySelectorAll(
-      '[class*="block sm:hidden"], [class*="hidden sm:block lg:hidden"], [class*="hidden lg:block"]'
+      '[class*="block sm:hidden"], [class*="hidden sm:block lg:hidden"], [class*="hidden lg:block"]',
     );
     expect(logoContainers.length).toBeGreaterThan(0);
   });
@@ -147,7 +147,7 @@ describe("Footer", () => {
 
     // The Separator component should be rendered (it uses a div with border, not hr)
     const separator = document.querySelector(
-      ".bg-\\[var\\(--border-color-default-secondary\\)\\]"
+      ".bg-\\[var\\(--border-color-default-secondary\\)\\]",
     );
     expect(separator).toBeInTheDocument();
   });
@@ -263,10 +263,10 @@ describe("Footer", () => {
       expect(emailLink).toHaveClass("focus:ring-2");
       expect(emailLink).toHaveClass("focus:ring-offset-2");
       expect(emailLink).toHaveClass(
-        "focus:ring-[var(--color-content-default-primary)]"
+        "focus:ring-[var(--color-content-default-primary)]",
       );
       expect(emailLink).toHaveClass(
-        "focus:ring-offset-[var(--color-surface-default-primary)]"
+        "focus:ring-offset-[var(--color-surface-default-primary)]",
       );
     });
 
@@ -276,10 +276,10 @@ describe("Footer", () => {
       expect(link).toHaveClass("focus:ring-2");
       expect(link).toHaveClass("focus:ring-offset-2");
       expect(link).toHaveClass(
-        "focus:ring-[var(--color-content-default-primary)]"
+        "focus:ring-[var(--color-content-default-primary)]",
       );
       expect(link).toHaveClass(
-        "focus:ring-offset-[var(--color-surface-default-primary)]"
+        "focus:ring-offset-[var(--color-surface-default-primary)]",
       );
     });
   });

tests/unit/Header.test.jsx

@@ -22,14 +22,14 @@ describe("Header", () => {
 
       // Check main header structure - use container to scope the search
       const header = container.querySelector(
-        '[role="banner"][aria-label="Main navigation header"]'
+        '[role="banner"][aria-label="Main navigation header"]',
       );
       expect(header).toBeInTheDocument();
       expect(header).toHaveAttribute("aria-label", "Main navigation header");
 
       // Check navigation - use container to scope the search
       const nav = container.querySelector(
-        '[role="navigation"][aria-label="Main navigation"]'
+        '[role="navigation"][aria-label="Main navigation"]',
       );
       expect(nav).toBeInTheDocument();
       expect(nav).toHaveAttribute("aria-label", "Main navigation");
@@ -41,15 +41,15 @@ describe("Header", () => {
       // Check all navigation items have proper aria-labels - use menuitem role since they're in a menubar
       expect(
         screen.getAllByRole("menuitem", { name: "Navigate to Use cases page" })
-          .length
+          .length,
       ).toBeGreaterThan(0);
       expect(
         screen.getAllByRole("menuitem", { name: "Navigate to Learn page" })
-          .length
+          .length,
       ).toBeGreaterThan(0);
       expect(
         screen.getAllByRole("menuitem", { name: "Navigate to About page" })
-          .length
+          .length,
       ).toBeGreaterThan(0);
     });
   });
@@ -59,7 +59,7 @@ describe("Header", () => {
       render(<Header onToggle={mockOnToggle} />);
 
       const script = document.querySelector(
-        'script[type="application/ld+json"]'
+        'script[type="application/ld+json"]',
       );
       expect(script).toBeInTheDocument();
 
@@ -296,7 +296,7 @@ describe("Header", () => {
         (img) =>
           img.alt === "Avatar 1" ||
           img.alt === "Avatar 2" ||
-          img.alt === "Avatar 3"
+          img.alt === "Avatar 3",
       );
       expect(avatarImages.length).toBeGreaterThan(0);
     });
@@ -324,17 +324,17 @@ describe("Header", () => {
       const { container } = render(<Header onToggle={mockOnToggle} />);
 
       const header = container.querySelector(
-        '[role="banner"][aria-label="Main navigation header"]'
+        '[role="banner"][aria-label="Main navigation header"]',
       );
       expect(header).toHaveClass("bg-[var(--color-surface-default-primary)]");
       expect(header).toHaveClass("w-full");
       expect(header).toHaveClass("border-b");
       expect(header).toHaveClass(
-        "border-[var(--border-color-default-tertiary)]"
+        "border-[var(--border-color-default-tertiary)]",
       );
 
       const nav = container.querySelector(
-        '[role="navigation"][aria-label="Main navigation"]'
+        '[role="navigation"][aria-label="Main navigation"]',
       );
       expect(nav).toHaveClass("flex");
       expect(nav).toHaveClass("items-center");

tests/unit/Logo.test.jsx

@@ -52,13 +52,13 @@ describe("Logo Component", () => {
     const { rerender } = render(<Logo size="homeHeaderMd" />);
     let textElement = screen.getByText("CommunityRule");
     expect(textElement).toHaveClass(
-      "text-[var(--color-content-inverse-primary)]"
+      "text-[var(--color-content-inverse-primary)]",
     );
 
     rerender(<Logo size="header" />);
     textElement = screen.getByText("CommunityRule");
     expect(textElement).toHaveClass(
-      "text-[var(--color-content-default-primary)]"
+      "text-[var(--color-content-default-primary)]",
     );
   });
 

tests/unit/RelatedArticles.test.jsx

@@ -73,14 +73,14 @@ describe("RelatedArticles", () => {
       <RelatedArticles
         relatedPosts={mockRelatedPosts}
         currentPostSlug="current-article"
-      />
+      />,
     );
 
     const section = document.querySelector("section");
     expect(section).toBeInTheDocument();
     expect(section).toHaveClass(
       "py-[var(--spacing-scale-032)]",
-      "lg:py-[var(--spacing-scale-064)]"
+      "lg:py-[var(--spacing-scale-064)]",
     );
   });
 
@@ -89,7 +89,7 @@ describe("RelatedArticles", () => {
       <RelatedArticles
         relatedPosts={mockRelatedPosts}
         currentPostSlug="current-article"
-      />
+      />,
     );
 
     const heading = screen.getByRole("heading", { level: 2 });
@@ -101,7 +101,7 @@ describe("RelatedArticles", () => {
       "leading-[110%]",
       "font-medium",
       "text-[var(--color-content-inverse-primary)]",
-      "text-center"
+      "text-center",
     );
   });
 
@@ -110,17 +110,17 @@ describe("RelatedArticles", () => {
       <RelatedArticles
         relatedPosts={mockRelatedPosts}
         currentPostSlug="current-article"
-      />
+      />,
     );
 
     expect(
-      screen.getByTestId("thumbnail-related-article-1")
+      screen.getByTestId("thumbnail-related-article-1"),
     ).toBeInTheDocument();
     expect(
-      screen.getByTestId("thumbnail-related-article-2")
+      screen.getByTestId("thumbnail-related-article-2"),
     ).toBeInTheDocument();
     expect(
-      screen.getByTestId("thumbnail-related-article-3")
+      screen.getByTestId("thumbnail-related-article-3"),
     ).toBeInTheDocument();
   });
 
@@ -142,29 +142,29 @@ describe("RelatedArticles", () => {
       <RelatedArticles
         relatedPosts={postsWithCurrent}
         currentPostSlug="current-article"
-      />
+      />,
     );
 
     // Should not render the current article
     expect(
-      screen.queryByTestId("thumbnail-current-article")
+      screen.queryByTestId("thumbnail-current-article"),
     ).not.toBeInTheDocument();
 
     // Should still render the other related articles
     expect(
-      screen.getByTestId("thumbnail-related-article-1")
+      screen.getByTestId("thumbnail-related-article-1"),
     ).toBeInTheDocument();
     expect(
-      screen.getByTestId("thumbnail-related-article-2")
+      screen.getByTestId("thumbnail-related-article-2"),
     ).toBeInTheDocument();
     expect(
-      screen.getByTestId("thumbnail-related-article-3")
+      screen.getByTestId("thumbnail-related-article-3"),
     ).toBeInTheDocument();
   });
 
   it("renders nothing when no related posts", () => {
     const { container } = render(
-      <RelatedArticles relatedPosts={[]} currentPostSlug="current-article" />
+      <RelatedArticles relatedPosts={[]} currentPostSlug="current-article" />,
     );
 
     expect(container.firstChild).toBeNull();
@@ -187,7 +187,7 @@ describe("RelatedArticles", () => {
       <RelatedArticles
         relatedPosts={currentPostOnly}
         currentPostSlug="current-article"
-      />
+      />,
     );
 
     expect(container.firstChild).toBeNull();
@@ -198,7 +198,7 @@ describe("RelatedArticles", () => {
       <RelatedArticles
         relatedPosts={mockRelatedPosts}
         currentPostSlug="current-article"
-      />
+      />,
     );
 
     const container = document.querySelector("section > div");
@@ -206,7 +206,7 @@ describe("RelatedArticles", () => {
       "flex",
       "flex-col",
       "gap-[var(--spacing-scale-032)]",
-      "lg:gap-[51px]"
+      "lg:gap-[51px]",
     );
   });
 
@@ -215,14 +215,14 @@ describe("RelatedArticles", () => {
       <RelatedArticles
         relatedPosts={mockRelatedPosts}
         currentPostSlug="current-article"
-      />
+      />,
     );
 
     const articlesContainer = document.querySelector("section > div > div");
     expect(articlesContainer).toHaveClass(
       "flex",
       "justify-center",
-      "overflow-hidden"
+      "overflow-hidden",
     );
   });
 
@@ -238,17 +238,17 @@ describe("RelatedArticles", () => {
       <RelatedArticles
         relatedPosts={mockRelatedPosts}
         currentPostSlug="current-article"
-      />
+      />,
     );
 
     const carouselContainer = document.querySelector(
-      "section > div > div > div"
+      "section > div > div > div",
     );
     expect(carouselContainer).toHaveClass(
       "overflow-x-auto",
       "scrollbar-hide",
       "cursor-grab",
-      "active:cursor-grabbing"
+      "active:cursor-grabbing",
     );
   });
 
@@ -264,16 +264,16 @@ describe("RelatedArticles", () => {
       <RelatedArticles
         relatedPosts={mockRelatedPosts}
         currentPostSlug="current-article"
-      />
+      />,
     );
 
     const carouselContainer = document.querySelector(
-      "section > div > div > div"
+      "section > div > div > div",
     );
     expect(carouselContainer).toHaveClass(
       "transition-transform",
       "duration-500",
-      "ease-in-out"
+      "ease-in-out",
     );
   });
 
@@ -284,17 +284,17 @@ describe("RelatedArticles", () => {
       <RelatedArticles
         relatedPosts={singlePost}
         currentPostSlug="current-article"
-      />
+      />,
     );
 
     expect(
-      screen.getByTestId("thumbnail-related-article-1")
+      screen.getByTestId("thumbnail-related-article-1"),
     ).toBeInTheDocument();
     expect(
-      screen.queryByTestId("thumbnail-related-article-2")
+      screen.queryByTestId("thumbnail-related-article-2"),
     ).not.toBeInTheDocument();
     expect(
-      screen.queryByTestId("thumbnail-related-article-3")
+      screen.queryByTestId("thumbnail-related-article-3"),
     ).not.toBeInTheDocument();
   });
 
@@ -305,17 +305,17 @@ describe("RelatedArticles", () => {
       <RelatedArticles
         relatedPosts={twoPosts}
         currentPostSlug="current-article"
-      />
+      />,
     );
 
     expect(
-      screen.getByTestId("thumbnail-related-article-1")
+      screen.getByTestId("thumbnail-related-article-1"),
     ).toBeInTheDocument();
     expect(
-      screen.getByTestId("thumbnail-related-article-2")
+      screen.getByTestId("thumbnail-related-article-2"),
     ).toBeInTheDocument();
     expect(
-      screen.queryByTestId("thumbnail-related-article-3")
+      screen.queryByTestId("thumbnail-related-article-3"),
     ).not.toBeInTheDocument();
   });
 
@@ -324,7 +324,7 @@ describe("RelatedArticles", () => {
       <RelatedArticles
         relatedPosts={mockRelatedPosts}
         currentPostSlug="current-article"
-      />
+      />,
     );
 
     const section = document.querySelector("section");
@@ -336,11 +336,11 @@ describe("RelatedArticles", () => {
       <RelatedArticles
         relatedPosts={mockRelatedPosts}
         currentPostSlug="current-article"
-      />
+      />,
     );
 
     const carouselContainer = document.querySelector(
-      "section > div > div > div"
+      "section > div > div > div",
     );
     expect(carouselContainer).toHaveClass("gap-0");
   });
@@ -350,13 +350,13 @@ describe("RelatedArticles", () => {
 
     // Should still render all articles
     expect(
-      screen.getByTestId("thumbnail-related-article-1")
+      screen.getByTestId("thumbnail-related-article-1"),
     ).toBeInTheDocument();
     expect(
-      screen.getByTestId("thumbnail-related-article-2")
+      screen.getByTestId("thumbnail-related-article-2"),
     ).toBeInTheDocument();
     expect(
-      screen.getByTestId("thumbnail-related-article-3")
+      screen.getByTestId("thumbnail-related-article-3"),
     ).toBeInTheDocument();
   });
 
@@ -386,7 +386,7 @@ describe("RelatedArticles", () => {
       <RelatedArticles
         relatedPosts={malformedPosts}
         currentPostSlug="current-article"
-      />
+      />,
     );
 
     expect(screen.getByTestId("thumbnail-malformed-1")).toBeInTheDocument();