diff --git a/lib/nthul/src/client/color-switch/color-switch.test.tsx b/lib/nthul/src/client/color-switch/color-switch.test.tsx
index 2ff11953..ffd37a35 100644
--- a/lib/nthul/src/client/color-switch/color-switch.test.tsx
+++ b/lib/nthul/src/client/color-switch/color-switch.test.tsx
@@ -1,7 +1,7 @@
import { act, cleanup, fireEvent, render, renderHook, screen } from "@testing-library/react";
-import { ColorSwitch } from "./color-switch";
import { afterEach, describe, test } from "vitest";
import { useTheme } from "../../hooks/use-theme";
+import { ColorSwitch } from "./color-switch";
describe("color-switch", () => {
afterEach(cleanup);
@@ -19,4 +19,19 @@ describe("color-switch", () => {
await act(() => fireEvent.click(element));
expect(hook.result.current.colorSchemePreference).toBe("dark");
});
+
+ test("color-scheme-toggle with skip system", async ({ expect }) => {
+ const hook = renderHook(() => useTheme());
+ act(() => {
+ hook.result.current.setColorSchemePreference("system");
+ });
+ render();
+ const element = screen.getByTestId("color-switch");
+ await act(() => fireEvent.click(element));
+ expect(hook.result.current.colorSchemePreference).toBe("dark");
+ await act(() => fireEvent.click(element));
+ expect(hook.result.current.colorSchemePreference).toBe("light");
+ await act(() => fireEvent.click(element));
+ expect(hook.result.current.colorSchemePreference).toBe("dark");
+ });
});
diff --git a/lib/nthul/src/client/theme-switcher/theme-switcher.test.tsx b/lib/nthul/src/client/theme-switcher/theme-switcher.test.tsx
index f29ee3a5..7174f943 100644
--- a/lib/nthul/src/client/theme-switcher/theme-switcher.test.tsx
+++ b/lib/nthul/src/client/theme-switcher/theme-switcher.test.tsx
@@ -2,6 +2,7 @@ import { act, cleanup, fireEvent, render, renderHook } from "@testing-library/re
import { afterEach, beforeEach, describe, test } from "vitest";
import { useTheme } from "../../hooks/use-theme";
import { DEFAULT_ID } from "../../constants";
+import { ServerTarget } from "../../server";
import { ThemeSwitcher } from "./theme-switcher";
describe("theme-switcher", () => {
@@ -52,7 +53,7 @@ describe("theme-switcher", () => {
test.todo("test media change event -- not supported by fireEvent");
});
-describe("test theme-switcher with props", () => {
+describe("test theme-switcher with props and server target", () => {
afterEach(cleanup);
test("test dontSync", async ({ expect }) => {
@@ -72,4 +73,24 @@ describe("test theme-switcher with props", () => {
test.todo("test invalid targetId", ({ expect }) => {
expect(render()).toThrow("id can not be an empty string");
});
+
+ test("test with confined server target", ({ expect }) => {
+ const THEME = "my-theme-with-server";
+ const COLOR_SCHEME = "dark";
+ const targetId = "my-custom-target";
+ globalThis.cookies = {
+ [targetId]: {
+ value: `${THEME},${COLOR_SCHEME}`,
+ },
+ };
+ render();
+ render();
+ const { result } = renderHook(() => useTheme(targetId));
+ const NEW_THEME = "new-theme";
+ act(() => {
+ result.current.setTheme(NEW_THEME);
+ });
+ expect(document.cookie).not.toContain(THEME);
+ expect(document.cookie).toContain(NEW_THEME);
+ });
});