53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
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");
|
|
});
|
|
});
|
|
});
|