initiative/apps/web/src/hooks/__tests__/use-theme.test.ts

// @vitest-environment jsdom
import { act, renderHook } from "@testing-library/react";
import { afterEach, describe, expect, it } from "vitest";
import { useTheme } from "../use-theme.js";

const STORAGE_KEY = "initiative:theme";

describe("useTheme", () => {
	afterEach(() => {
		// Reset to default
		const { result } = renderHook(() => useTheme());
		act(() => result.current.setPreference("system"));
		localStorage.removeItem(STORAGE_KEY);
	});

	it("defaults to system preference", () => {
		const { result } = renderHook(() => useTheme());
		expect(result.current.preference).toBe("system");
	});

	it("setPreference updates to light", () => {
		const { result } = renderHook(() => useTheme());

		act(() => result.current.setPreference("light"));

		expect(result.current.preference).toBe("light");
		expect(result.current.resolved).toBe("light");
	});

	it("setPreference updates to dark", () => {
		const { result } = renderHook(() => useTheme());

		act(() => result.current.setPreference("dark"));

		expect(result.current.preference).toBe("dark");
		expect(result.current.resolved).toBe("dark");
	});

	it("persists preference to localStorage", () => {
		const { result } = renderHook(() => useTheme());

		act(() => result.current.setPreference("light"));

		expect(localStorage.getItem(STORAGE_KEY)).toBe("light");
	});

	it("applies theme to document element", () => {
		const { result } = renderHook(() => useTheme());

		act(() => result.current.setPreference("light"));

		expect(document.documentElement.dataset.theme).toBe("light");
	});

	it("multiple hooks stay in sync", () => {
		const { result: r1 } = renderHook(() => useTheme());
		const { result: r2 } = renderHook(() => useTheme());

		act(() => r1.current.setPreference("dark"));

		expect(r2.current.preference).toBe("dark");
	});
});