feat: add test for the theme wrapper

Author: Samantha-KY

__mocks__/colors.ts

@@ -0,0 +1,15 @@
+export const colors = {
+    textAccent: "--tm-text",
+  text: "--tm-text",
+  accent: "--tm-accent",
+  primary: "--tm-primary",
+  secondary: "--tm-secondary",
+  highlight: "--tm-highlight",
+  muted: "--tm-muted",
+  cover: {
+    text: "--tm-text",
+    accent: "--tm-accent",
+    primary: "--tm-primary",
+    background: "--tm-background"
+  }
+}

__tests__/components/wrappers/ThemeWrapper.test.tsx

@@ -0,0 +1,21 @@
+import ThemeWrapper from "@/components/wrappers/ThemeWrapper";
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import { colors } from "../../../__mocks__/colors";
+
+describe("ThemeWrapper", () => {
+  it("should render the theme", () => {
+    render(<ThemeWrapper>Theme wrapper</ThemeWrapper>);
+    const themeWrapper = screen.getByTestId("themeWrapper");
+
+    expect(themeWrapper).toBeInTheDocument();
+    expect(themeWrapper.textContent).toBe("Theme wrapper");
+  });
+
+  it("should apply extra props", () => {
+    render(<ThemeWrapper colors={colors}>Theme wrapper</ThemeWrapper>);
+    const themeWrapper = screen.getByTestId("themeWrapper");
+
+    expect(themeWrapper.style.cssText).toContain("--tm-");
+  });
+});

src/components/wrappers/ThemeWrapper.tsx

@@ -52,7 +52,7 @@ export default function ThemeWrapper({ colors, className = "", children }: Theme
   }, [colors]);
 
   return (
-    <div className={className} style={{ ...cssVars }}>
+    <div className={className} style={{ ...cssVars }} data-testid="themeWrapper">
       {children}
     </div>
   );