@c15t/react/dist/hooks/__tests__/use-color-scheme.test.js

Developer-first CMP for React: cookie banner, consent manager, preferences centre. GDPR ready with minimal setup and rich customization

import*as e from"vitest";import*as t from"vitest-browser-react";import*as s from"../use-color-scheme.js";(0,e.describe)("useColorScheme",()=>{let o,n,c;(0,e.beforeEach)(()=>{document.documentElement.classList.remove("c15t-dark","dark"),o={matches:!1,addEventListener:e.vi.fn(),removeEventListener:e.vi.fn(),addListener:e.vi.fn(),removeListener:e.vi.fn(),dispatchEvent:e.vi.fn(),onchange:null,media:"(prefers-color-scheme: dark)"},e.vi.spyOn(window,"matchMedia").mockImplementation(()=>o),n=e.vi.spyOn(o,"addEventListener"),c=e.vi.spyOn(o,"removeEventListener")}),(0,e.afterEach)(()=>{e.vi.restoreAllMocks()}),(0,e.test)("sets light theme correctly",()=>{(0,t.renderHook)(()=>(0,s.useColorScheme)("light")),(0,e.expect)(document.documentElement.classList.contains("c15t-dark")).toBe(!1)}),(0,e.test)("sets dark theme correctly",()=>{(0,t.renderHook)(()=>(0,s.useColorScheme)("dark")),(0,e.expect)(document.documentElement.classList.contains("c15t-dark")).toBe(!0)}),(0,e.test)("responds to system preference",()=>{o.matches=!0,(0,t.renderHook)(()=>(0,s.useColorScheme)("system")),(0,e.expect)(document.documentElement.classList.contains("c15t-dark")).toBe(!0),(0,e.expect)(n).toHaveBeenCalledWith("change",e.expect.any(Function))}),(0,e.test)("cleans up system preference listener on unmount",()=>{let{unmount:o}=(0,t.renderHook)(()=>(0,s.useColorScheme)("system"));o(),(0,e.expect)(c).toHaveBeenCalled()}),(0,e.test)("updates theme when system preference changes",()=>{(0,t.renderHook)(()=>(0,s.useColorScheme)("system"));let o=n.mock.calls,c=o[0]?.[1];if(!c)throw Error("Callback not found");c({matches:!0}),(0,e.expect)(document.documentElement.classList.contains("c15t-dark")).toBe(!0)}),(0,e.test)("handles default theme based on document class",()=>{document.documentElement.classList.add("dark"),(0,t.renderHook)(()=>(0,s.useColorScheme)(null)),(0,e.expect)(document.documentElement.classList.contains("c15t-dark")).toBe(!0)}),(0,e.test)("updates theme when default theme changes",async()=>{(0,t.renderHook)(()=>(0,s.useColorScheme)(null)),document.documentElement.classList.add("dark"),await new Promise(e=>setTimeout(e,0)),(0,e.expect)(document.documentElement.classList.contains("c15t-dark")).toBe(!0)})});