Fix failing tests

.runner.pid

@@ -1 +1 @@
-84350
+68063

stories/ContentThumbnailTemplate.stories.js

@@ -11,6 +11,8 @@ const mockPost = {
   },
 };
 
+const mockSlugOrder = ["sample-article", "another-article", "third-article"];
+
 export default {
   title: "Components/ContentThumbnailTemplate",
   component: ContentThumbnailTemplate,
@@ -28,9 +30,8 @@ export default {
       description: "Blog post object with frontmatter",
     },
     slugOrder: {
-      control: "number",
-      description:
-        "Order index for cycling through different background and icon styles",
+      control: "object",
+      description: "Array of slugs for consistent background cycling",
     },
     variant: {
       control: { type: "select" },
@@ -43,7 +44,7 @@ export default {
 export const Vertical = {
   args: {
     post: mockPost,
-    slugOrder: 0,
+    slugOrder: mockSlugOrder,
     variant: "vertical",
   },
 };
@@ -51,23 +52,23 @@ export const Vertical = {
 export const Horizontal = {
   args: {
     post: mockPost,
-    slugOrder: 0,
+    slugOrder: mockSlugOrder,
     variant: "horizontal",
   },
 };
 
 export const SecondStyle = {
   args: {
-    post: mockPost,
-    slugOrder: 1,
+    post: { ...mockPost, slug: "another-article" },
+    slugOrder: mockSlugOrder,
     variant: "vertical",
   },
 };
 
 export const ThirdStyle = {
   args: {
-    post: mockPost,
-    slugOrder: 2,
+    post: { ...mockPost, slug: "third-article" },
+    slugOrder: mockSlugOrder,
     variant: "vertical",
   },
 };
@@ -83,7 +84,7 @@ export const LongContent = {
           "This is a longer description that tests how the component handles extended text content and ensures proper wrapping and display within the thumbnail.",
       },
     },
-    slugOrder: 0,
+    slugOrder: mockSlugOrder,
     variant: "vertical",
   },
 };

tests/e2e/visual-regression.spec.ts

@@ -380,6 +380,15 @@ test.describe("Visual Regression Tests", () => {
     // Navigate to blog listing page
     await page.goto("/blog");
     await page.waitForLoadState("networkidle");
+
+    // Wait for blog content to be fully rendered
+    await page.waitForSelector(
+      ".grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-3",
+      { timeout: 10000 },
+    );
+
+    // Additional wait for any dynamic content to render
+    await page.waitForTimeout(1000);
     await settle(page);
 
     // Take full page screenshot of blog listing
@@ -393,6 +402,12 @@ test.describe("Visual Regression Tests", () => {
     // Navigate to a specific blog post
     await page.goto("/blog/resolving-active-conflicts");
     await page.waitForLoadState("networkidle");
+
+    // Wait for blog post content to be fully rendered
+    await page.waitForSelector("main", { timeout: 10000 });
+
+    // Additional wait for any dynamic content to render
+    await page.waitForTimeout(1000);
     await settle(page);
 
     // Take full page screenshot of blog post

tests/integration/layout.integration.test.jsx

@@ -77,7 +77,7 @@ describe("Layout Integration", () => {
     const aboutLink = aboutLinks[0];
 
     expect(useCasesLink).toHaveAttribute("href", "#");
-    expect(learnLink).toHaveAttribute("href", "#");
+    expect(learnLink).toHaveAttribute("href", "/learn");
     expect(aboutLink).toHaveAttribute("href", "#");
 
     // Test button interactions

tests/unit/Header.test.jsx

@@ -80,7 +80,7 @@ describe("Header", () => {
         extraPadding: true,
       });
       expect(navigationItems[1]).toEqual({
-        href: "#",
+        href: "/learn",
         text: "Learn",
       });
       expect(navigationItems[2]).toEqual({