fix tests

react18-tools · Jun 15, 2024 · 3428afd · 3428afd
1 parent 6e78e24
commit 3428afd
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/lib/src/client/core/core.test.tsx b/lib/src/client/core/core.test.tsx
@@ -2,12 +2,15 @@ import { act, cleanup, fireEvent, render, renderHook } from "@testing-library/re
 import { afterEach, beforeEach, describe, test } from "vitest";
 import { Core } from "./core";
 import { useMode } from "../../hooks";
-import { COOKIE_KEY, DARK, LIGHT, MEDIA } from "../../constants";
+import { DARK, LIGHT } from "../../constants";
+import { s } from "./script";
 
+const STORAGE_KEY = "o";
 describe("theme-switcher", () => {
   afterEach(cleanup);
 
   beforeEach(() => {
+    s(STORAGE_KEY);
     render(<Core />);
   });
 
@@ -22,14 +25,14 @@ describe("theme-switcher", () => {
   test("test storing state to localStorage and DOM updates", async ({ expect }) => {
     const { result } = renderHook(() => useMode());
     act(() => result.current.setMode(LIGHT));
-    expect(localStorage.getItem(COOKIE_KEY)).toBe(LIGHT);
+    expect(localStorage.getItem(STORAGE_KEY)).toBe(LIGHT);
     expect(document.documentElement.getAttribute("data-m")).toBe(LIGHT);
   });
 
   test("Storage event", async ({ expect }) => {
     const hook = renderHook(() => useMode());
     await act(() =>
-      fireEvent(window, new StorageEvent("storage", { key: COOKIE_KEY, newValue: DARK })),
+      fireEvent(window, new StorageEvent("storage", { key: STORAGE_KEY, newValue: DARK })),
     );
     expect(hook.result.current.mode).toBe(DARK);
   });
@@ -39,7 +42,7 @@ describe("theme-switcher", () => {
     await act(() => {
       // globalThis.window.media = LIGHT as ResolvedScheme;
       // @ts-expect-error -- ok
-      matchMedia(MEDIA).onchange?.();
+      m.onchange?.();
     });
     expect(hook.result.current.mode).toBe(DARK);
   });

diff --git a/lib/src/client/core/script.ts b/lib/src/client/core/script.ts
@@ -6,7 +6,7 @@ declare global {
 }
 export const s = (storageKey: string) => {
   const [SYSTEM, DARK] = ["system", "dark"] as const;
-  u = (mode: ColorSchemePreference, systemMode: ResolvedScheme) => {
+  window.u = (mode: ColorSchemePreference, systemMode: ResolvedScheme) => {
     const resolvedMode = mode === SYSTEM ? systemMode : mode;
     const el = document.documentElement;
     if (resolvedMode === DARK) el.classList.add(DARK);
@@ -19,6 +19,6 @@ export const s = (storageKey: string) => {
     // System mode is decided by current system state and need not be stored in localStorage
     localStorage.setItem(storageKey, mode);
   };
-  m = matchMedia(`(prefers-color-scheme: ${DARK})`);
+  window.m = matchMedia(`(prefers-color-scheme: ${DARK})`);
   u((localStorage.getItem(storageKey) ?? SYSTEM) as ColorSchemePreference, m.matches ? DARK : "");
 };