init

client/src/tests/theme.test.tsx

@@ -0,0 +1,52 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it } from "vitest";
+
+import { ThemeProvider } from "../theme/ThemeProvider";
+import { ThemeToggle } from "../components/ThemeToggle";
+
+describe("ThemeToggle", () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+    document.documentElement.removeAttribute("style");
+    document.documentElement.classList.remove("dark");
+  });
+
+  it("toggles the html dark class", () => {
+    render(
+      <ThemeProvider>
+        <ThemeToggle />
+      </ThemeProvider>
+    );
+
+    fireEvent.click(screen.getByRole("button"));
+
+    expect(document.documentElement.classList.contains("dark")).toBe(true);
+  });
+
+  it("hydrates persisted brand theme values on startup", async () => {
+    window.localStorage.setItem(
+      "mrp.theme.brand-profile",
+      JSON.stringify({
+        theme: {
+          primaryColor: "#112233",
+          accentColor: "#445566",
+          surfaceColor: "#778899",
+          fontFamily: "Manrope",
+        },
+      })
+    );
+
+    render(
+      <ThemeProvider>
+        <div>Theme</div>
+      </ThemeProvider>
+    );
+
+    await waitFor(() => {
+      expect(document.documentElement.style.getPropertyValue("--color-brand")).toBe("17 34 51");
+      expect(document.documentElement.style.getPropertyValue("--color-accent")).toBe("68 85 102");
+      expect(document.documentElement.style.getPropertyValue("--color-surface-brand")).toBe("119 136 153");
+      expect(document.documentElement.style.getPropertyValue("--font-family")).toBe("Manrope");
+    });
+  });
+});