Run prettier

tests/e2e/header.responsive.spec.js

@@ -20,13 +20,13 @@ test.describe("Header responsive behavior", () => {
 
       // All breakpoints should have navigation items
       await expect(
-        page.getByRole("menuitem", { name: /use cases/i })
+        page.getByRole("menuitem", { name: /use cases/i }),
       ).toBeVisible();
       await expect(
-        page.getByRole("menuitem", { name: /learn/i })
+        page.getByRole("menuitem", { name: /learn/i }),
       ).toBeVisible();
       await expect(
-        page.getByRole("menuitem", { name: /about/i })
+        page.getByRole("menuitem", { name: /about/i }),
       ).toBeVisible();
     });
 
@@ -38,14 +38,14 @@ test.describe("Header responsive behavior", () => {
 
       // All breakpoints should have login button
       await expect(
-        page.getByRole("menuitem", { name: /log in to your account/i })
+        page.getByRole("menuitem", { name: /log in to your account/i }),
       ).toBeVisible();
 
       // All breakpoints should have create rule button
       await expect(
         page.getByRole("button", {
           name: /create a new rule with avatar decoration/i,
-        })
+        }),
       ).toBeVisible();
     });
 
@@ -187,7 +187,9 @@ test.describe("Header responsive behavior", () => {
       });
 
       // Should not have active outline (may have default browser outline)
-      expect(linkStyles.outline).toMatch(/^(none|0px|rgb\(0, 0, 0\) none 0px|rgb\(0, 0, 0\) 0px)$/);
+      expect(linkStyles.outline).toMatch(
+        /^(none|0px|rgb\(0, 0, 0\) none 0px|rgb\(0, 0, 0\) 0px)$/,
+      );
     });
   });
 });

tests/unit/BlogPage.test.jsx

@@ -130,7 +130,7 @@ describe("BlogPostPage", () => {
     expect(mainContainer).toHaveClass(
       "min-h-screen",
       "relative",
-      "overflow-hidden"
+      "overflow-hidden",
     );
     // Background color is applied via inline style from frontmatter hex
     expect(mainContainer).toHaveStyle({ backgroundColor: expect.any(String) });
@@ -145,7 +145,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();
   });
 
@@ -159,7 +159,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
@@ -189,7 +189,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();
   });
@@ -221,7 +221,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]");
@@ -268,7 +268,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);
 
@@ -286,7 +286,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();
   });
 
@@ -298,7 +298,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
@@ -323,7 +323,7 @@ describe("BlogPostPage", () => {
       "top-1/4",
       "right-0",
       "pointer-events-none",
-      "z-10"
+      "z-10",
     );
 
     // Second shape (left side)
@@ -335,7 +335,7 @@ describe("BlogPostPage", () => {
       "top-1/2",
       "left-0",
       "pointer-events-none",
-      "z-10"
+      "z-10",
     );
   });
 

tests/unit/ContentBanner.test.jsx

@@ -45,7 +45,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(
@@ -60,7 +60,7 @@ describe("ContentBanner", () => {
       "xl:h-[504px]",
       "relative",
       "w-full",
-      "sm:overflow-hidden"
+      "sm:overflow-hidden",
     );
   });
 
@@ -69,7 +69,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(
@@ -79,7 +79,7 @@ describe("ContentBanner", () => {
       "h-full",
       "bg-cover",
       "bg-no-repeat",
-      "aspect-[320/225.5]"
+      "aspect-[320/225.5]",
     );
   });
 
@@ -88,7 +88,7 @@ describe("ContentBanner", () => {
 
     // Check for the md+ background div with banner image
     const mdBackgroundDiv = document.querySelector(
-      "div[style*='test-article-banner.svg']"
+      "div[style*='test-article-banner.svg']",
     );
     expect(mdBackgroundDiv).toBeInTheDocument();
     expect(mdBackgroundDiv).toHaveClass("hidden", "md:block");
@@ -104,7 +104,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();
   });
 
@@ -120,7 +120,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(
@@ -128,7 +128,7 @@ describe("ContentBanner", () => {
       "z-10",
       "h-full",
       "flex",
-      "flex-col"
+      "flex-col",
     );
   });
 
@@ -141,7 +141,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");
@@ -150,7 +150,7 @@ describe("ContentBanner", () => {
       "font-normal",
       "text-[12px]",
       "leading-[16px]",
-      "text-[var(--color-content-inverse-brand-royal)]"
+      "text-[var(--color-content-inverse-brand-royal)]",
     );
   });
 
@@ -163,7 +163,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");
@@ -172,7 +172,7 @@ describe("ContentBanner", () => {
       "font-normal",
       "text-[10px]",
       "leading-[14px]",
-      "text-[var(--color-content-inverse-brand-royal)]"
+      "text-[var(--color-content-inverse-brand-royal)]",
     );
   });
 
@@ -181,7 +181,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)]");
   });
@@ -190,13 +190,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]",
     );
   });
 
@@ -227,7 +227,7 @@ describe("ContentBanner", () => {
 
     // Should use thumbnail.horizontal for md+ breakpoint
     const mdBackgroundDiv = document.querySelector(
-      "div[style*='test-article-horizontal.svg'][class*='md:block']"
+      "div[style*='test-article-horizontal.svg'][class*='md:block']",
     );
     expect(mdBackgroundDiv).toBeInTheDocument();
     expect(mdBackgroundDiv).toHaveClass("hidden", "md:block");
@@ -247,7 +247,7 @@ describe("ContentBanner", () => {
 
     // Should use default banner for md+ breakpoint
     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");
@@ -261,7 +261,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");
@@ -269,7 +269,7 @@ describe("ContentBanner", () => {
       "sm:text-[14px]",
       "md:text-[14px]",
       "lg:text-[18px]",
-      "xl:text-[24px]"
+      "xl:text-[24px]",
     );
   });
 

tests/unit/ContentThumbnailTemplate.test.jsx

@@ -53,7 +53,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();
     });
 
@@ -77,7 +77,7 @@ describe("ContentThumbnailTemplate", () => {
       expect(thumbnailDiv).toHaveClass(
         "min-w-[320px]",
         "max-w-[800px]",
-        "h-[225.5px]"
+        "h-[225.5px]",
       );
     });
 
@@ -86,7 +86,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();
     });
@@ -95,7 +95,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");
@@ -144,7 +144,7 @@ describe("ContentThumbnailTemplate", () => {
 
       // Check that the background image uses the article-specific thumbnail
       const backgroundImg = document.querySelector(
-        "img[alt*='Background for']"
+        "img[alt*='Background for']",
       );
       expect(backgroundImg).toBeInTheDocument();
       expect(backgroundImg.src).toContain("test-post-vertical.svg");
@@ -155,7 +155,7 @@ describe("ContentThumbnailTemplate", () => {
 
       // Check that the background image uses the article-specific horizontal thumbnail
       const backgroundImg = document.querySelector(
-        "img[alt*='Background for']"
+        "img[alt*='Background for']",
       );
       expect(backgroundImg).toBeInTheDocument();
       expect(backgroundImg.src).toContain("test-post-horizontal.svg");

tests/unit/Header.test.jsx

@@ -19,14 +19,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");
@@ -38,15 +38,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);
     });
   });
@@ -56,7 +56,7 @@ describe("Header", () => {
       render(<Header />);
 
       const script = document.querySelector(
-        'script[type="application/ld+json"]'
+        'script[type="application/ld+json"]',
       );
       expect(script).toBeInTheDocument();
 
@@ -293,7 +293,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);
     });
@@ -304,7 +304,7 @@ describe("Header", () => {
       const { container } = render(<Header />);
 
       const header = container.querySelector(
-        '[role="banner"][aria-label="Main navigation header"]'
+        '[role="banner"][aria-label="Main navigation header"]',
       );
       expect(header).toHaveClass("sticky", "top-0", "z-50");
     });
@@ -315,17 +315,17 @@ describe("Header", () => {
       const { container } = render(<Header />);
 
       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");