test: Fix MainLayout tests by providing ThemeProvider context

frontend/src/components/layout/MainLayout.test.tsx

@@ -1,6 +1,7 @@
 import { render, screen } from "@testing-library/react"
 import { describe, it, expect, vi } from "vitest"
 import { MainLayout } from "./MainLayout"
+import { ThemeProvider } from "../theme-provider"
 
 describe("MainLayout", () => {
   const mockProps = {
@@ -14,22 +15,32 @@ describe("MainLayout", () => {
 
   it("renders children correctly", () => {
     render(
+      <ThemeProvider>
         <MainLayout {...mockProps}>
           <div data-testid="test-child">Test Content</div>
         </MainLayout>
+      </ThemeProvider>
     )
     expect(screen.getByTestId("test-child")).toBeInTheDocument()
     expect(screen.getByText("Test Content")).toBeInTheDocument()
   })
 
   it("renders the sidebar", () => {
-    render(<MainLayout {...mockProps}>Content</MainLayout>)
+    render(
+      <ThemeProvider>
+        <MainLayout {...mockProps}>Content</MainLayout>
+      </ThemeProvider>
+    )
     // Sidebar should have some identifying text or role
     expect(screen.getByRole("complementary")).toBeInTheDocument()
   })
 
   it("renders the header/navigation", () => {
-    render(<MainLayout {...mockProps}>Content</MainLayout>)
+    render(
+      <ThemeProvider>
+        <MainLayout {...mockProps}>Content</MainLayout>
+      </ThemeProvider>
+    )
     expect(screen.getByRole("navigation")).toBeInTheDocument()
   })
 })