@fibery/ui-kit 1.40.3 → 1.41.0

package/src/root-theme-provider.test.tsx

@@ -0,0 +1,411 @@
+import {act, render, screen} from "@testing-library/react";
+import {
+  RootThemeProvider,
+  ThemeProvider,
+  useThematic,
+  useTheme,
+  useThemeMenuPreference,
+  useThemeMode,
+  useThemePreference,
+} from "./theme-provider";
+import type {ThemePalette} from "./palette-generator";
+import {defaultDarkTheme, defaultLightTheme, defaultPalette} from "./theme-styles";
+import {createInlineStyles, getThemeColors} from "./design-system";
+import {storeWarmPreference} from "./theme-settings";
+
+function ThemeDisplay({testId = "theme-display"}: {testId?: string}) {
+  const theme = useTheme();
+  const mode = useThemeMode();
+  return (
+    <div data-testid={testId} data-mode={mode} data-primary={theme.primary}>
+      {theme.key}
+    </div>
+  );
+}
+
+function PreferenceDisplay() {
+  const preference = useThemePreference();
+  const menuPreference = useThemeMenuPreference();
+  return (
+    <div data-testid="preferences" data-preference={preference} data-menu-preference={menuPreference}>
+      {preference}/{menuPreference}
+    </div>
+  );
+}
+
+function ThematicDisplay() {
+  const {palette, setPalette} = useThematic();
+  return (
+    <div data-testid="thematic" data-has-palette={Boolean(palette)} data-has-setter={typeof setPalette === "function"}>
+      thematic
+    </div>
+  );
+}
+
+describe("RootThemeProvider", () => {
+  beforeEach(() => {
+    document.documentElement.className = "";
+    document.documentElement.style.colorScheme = "";
+    localStorage.clear();
+  });
+
+  describe("context provision", () => {
+    it("provides theme via useTheme", () => {
+      render(
+        <RootThemeProvider initialThemeMode="light" initialPreference="light" initialMenuPreference="auto">
+          <ThemeDisplay />
+        </RootThemeProvider>
+      );
+      expect(screen.getByTestId("theme-display")).toHaveAttribute("data-mode", "light");
+    });
+
+    it("provides dark theme when initialThemeMode is dark", () => {
+      render(
+        <RootThemeProvider initialThemeMode="dark" initialPreference="dark" initialMenuPreference="dark">
+          <ThemeDisplay />
+        </RootThemeProvider>
+      );
+      expect(screen.getByTestId("theme-display")).toHaveAttribute("data-mode", "dark");
+    });
+
+    it("provides themePreference via useThemePreference", () => {
+      render(
+        <RootThemeProvider initialThemeMode="light" initialPreference="auto" initialMenuPreference="auto">
+          <PreferenceDisplay />
+        </RootThemeProvider>
+      );
+      expect(screen.getByTestId("preferences")).toHaveAttribute("data-preference", "auto");
+    });
+
+    it("provides themeMenuPreference via useThemeMenuPreference", () => {
+      render(
+        <RootThemeProvider initialThemeMode="light" initialPreference="light" initialMenuPreference="dark">
+          <PreferenceDisplay />
+        </RootThemeProvider>
+      );
+      expect(screen.getByTestId("preferences")).toHaveAttribute("data-menu-preference", "dark");
+    });
+
+    it("provides thematic context with palette and setPalette", () => {
+      render(
+        <RootThemeProvider initialThemeMode="light" initialPreference="light" initialMenuPreference="auto">
+          <ThematicDisplay />
+        </RootThemeProvider>
+      );
+      const el = screen.getByTestId("thematic");
+      expect(el).toHaveAttribute("data-has-palette", "true");
+      expect(el).toHaveAttribute("data-has-setter", "true");
+    });
+  });
+
+  describe("base context for diff optimization", () => {
+    it("sets light base context in light mode", () => {
+      const {container} = render(
+        <RootThemeProvider initialThemeMode="light" initialPreference="light" initialMenuPreference="auto">
+          <ThemeProvider theme={defaultLightTheme}>
+            <span data-testid="inner">inner</span>
+          </ThemeProvider>
+        </RootThemeProvider>
+      );
+
+      // Inner ThemeProvider with same light theme should have empty diff
+      const divs = Array.from(container.querySelectorAll("div")).filter((d) => d.hasAttribute("style"));
+      // The innermost div (from nested ThemeProvider) should have no styles
+      const innerMostDiv = divs[divs.length - 1];
+      const style = innerMostDiv?.getAttribute("style") || "";
+      expect(style).toBe("");
+    });
+
+    it("sets dark base context in dark mode", () => {
+      const {container} = render(
+        <RootThemeProvider initialThemeMode="dark" initialPreference="dark" initialMenuPreference="dark">
+          <ThemeProvider theme={defaultDarkTheme}>
+            <span data-testid="inner">inner</span>
+          </ThemeProvider>
+        </RootThemeProvider>
+      );
+
+      // Inner ThemeProvider with same dark theme should have empty diff
+      const divs = Array.from(container.querySelectorAll("div")).filter((d) => d.hasAttribute("style"));
+      const innerMostDiv = divs[divs.length - 1];
+      const style = innerMostDiv?.getAttribute("style") || "";
+      expect(style).toBe("");
+    });
+
+    it("nested light ThemeProvider in dark RootThemeProvider produces diff", () => {
+      const {container} = render(
+        <RootThemeProvider initialThemeMode="dark" initialPreference="dark" initialMenuPreference="dark">
+          <ThemeProvider theme={defaultLightTheme}>
+            <span data-testid="inner">inner</span>
+          </ThemeProvider>
+        </RootThemeProvider>
+      );
+
+      // Inner ThemeProvider with light theme should have diff (dark->light)
+      const divs = Array.from(container.querySelectorAll("div")).filter((d) => d.hasAttribute("style"));
+      const innerMostDiv = divs[divs.length - 1];
+      const style = innerMostDiv?.getAttribute("style") || "";
+      expect(style.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe("document element classes", () => {
+    it("adds dark-theme class in dark mode", () => {
+      render(
+        <RootThemeProvider initialThemeMode="dark" initialPreference="dark" initialMenuPreference="dark">
+          <div>content</div>
+        </RootThemeProvider>
+      );
+      expect(document.documentElement.classList.contains("dark-theme")).toBe(true);
+    });
+
+    it("does not add dark-theme class in light mode", () => {
+      render(
+        <RootThemeProvider initialThemeMode="light" initialPreference="light" initialMenuPreference="auto">
+          <div>content</div>
+        </RootThemeProvider>
+      );
+      expect(document.documentElement.classList.contains("dark-theme")).toBe(false);
+    });
+
+    it("adds light-theme-and-dark-menu class in light2 mode", () => {
+      render(
+        <RootThemeProvider initialThemeMode="light2" initialPreference="light" initialMenuPreference="dark">
+          <div>content</div>
+        </RootThemeProvider>
+      );
+      expect(document.documentElement.classList.contains("light-theme-and-dark-menu")).toBe(true);
+    });
+
+    it("sets colorScheme to dark in dark mode", () => {
+      render(
+        <RootThemeProvider initialThemeMode="dark" initialPreference="dark" initialMenuPreference="dark">
+          <div>content</div>
+        </RootThemeProvider>
+      );
+      expect(document.documentElement.style.colorScheme).toBe("dark");
+    });
+
+    it("sets colorScheme to light in light mode", () => {
+      render(
+        <RootThemeProvider initialThemeMode="light" initialPreference="light" initialMenuPreference="auto">
+          <div>content</div>
+        </RootThemeProvider>
+      );
+      expect(document.documentElement.style.colorScheme).toBe("light");
+    });
+  });
+
+  describe("diff optimization integrity", () => {
+    it("RootThemeProvider internal ThemeProvider only sets diff from base", () => {
+      const lightStyles = createInlineStyles(defaultLightTheme);
+      const lightTheme = getThemeColors(null, "light", defaultPalette);
+      const actualStyles = createInlineStyles(lightTheme);
+
+      // Count expected diff (theme from getThemeColors vs defaultLightTheme)
+      let expectedDiffCount = 0;
+      for (const key in actualStyles) {
+        if (actualStyles[key] !== lightStyles[key]) {
+          expectedDiffCount++;
+        }
+      }
+
+      const {container} = render(
+        <RootThemeProvider initialThemeMode="light" initialPreference="light" initialMenuPreference="auto">
+          <span>content</span>
+        </RootThemeProvider>
+      );
+
+      // Get the ThemeProvider's div style
+      const divs = Array.from(container.querySelectorAll("div")).filter((d) => d.hasAttribute("style"));
+      if (divs.length > 0) {
+        const style = divs[0].getAttribute("style") || "";
+        const actualCount = style.split(";").filter((s) => s.includes(":")).length;
+        // Actual diff should match expected diff count (or be close)
+        expect(actualCount).toBeLessThanOrEqual(expectedDiffCount + 5);
+      }
+    });
+
+    it("deeply nested ThemeProviders accumulate correct diffs", () => {
+      const {container} = render(
+        <RootThemeProvider initialThemeMode="light" initialPreference="light" initialMenuPreference="auto">
+          <ThemeProvider mode="dark">
+            <ThemeProvider mode="light">
+              <span data-testid="deepest">deep</span>
+            </ThemeProvider>
+          </ThemeProvider>
+        </RootThemeProvider>
+      );
+
+      // Each transition (light->dark, dark->light) should produce diffs
+      const divs = Array.from(container.querySelectorAll("div")).filter((d) => d.hasAttribute("style"));
+      // Should have multiple styled divs (root's ThemeProvider + nested ones)
+      expect(divs.length).toBeGreaterThanOrEqual(2);
+    });
+  });
+
+  describe("setPalette", () => {
+    it("setPalette updates theme colors", () => {
+      let capturedSetPalette: (p: ThemePalette | null) => void = () => {};
+
+      function ThemeCapture() {
+        const {setPalette} = useThematic();
+        const theme = useTheme();
+        capturedSetPalette = setPalette;
+        return <div data-testid="capture" data-card-bg={theme.cardBg} />;
+      }
+
+      render(
+        <RootThemeProvider initialThemeMode="light" initialPreference="light" initialMenuPreference="auto">
+          <ThemeCapture />
+        </RootThemeProvider>
+      );
+
+      const initialCardBg = screen.getByTestId("capture").getAttribute("data-card-bg");
+
+      // cardBg in light mode = white, so modify white
+      const newPalette = {...defaultPalette, key: "test-palette", white: "oklch(0.9 0.05 200)"};
+
+      act(() => capturedSetPalette(newPalette));
+
+      const updatedCardBg = screen.getByTestId("capture").getAttribute("data-card-bg");
+      expect(updatedCardBg).toBe("oklch(0.9 0.05 200)");
+      expect(updatedCardBg).not.toBe(initialCardBg);
+    });
+
+    it("nested ThemeProvider inherits updated palette", () => {
+      let capturedSetPalette: (p: ThemePalette | null) => void = () => {};
+
+      function PaletteControl() {
+        const {setPalette} = useThematic();
+        capturedSetPalette = setPalette;
+        return null;
+      }
+
+      function NestedTheme() {
+        const theme = useTheme();
+        return <div data-testid="nested" data-card-bg={theme.cardBg} />;
+      }
+
+      render(
+        <RootThemeProvider initialThemeMode="light" initialPreference="light" initialMenuPreference="auto">
+          <PaletteControl />
+          <ThemeProvider mode="light">
+            <NestedTheme />
+          </ThemeProvider>
+        </RootThemeProvider>
+      );
+
+      const initialCardBg = screen.getByTestId("nested").getAttribute("data-card-bg");
+
+      const newPalette = {...defaultPalette, key: "test-palette-2", white: "oklch(0.8 0.02 100)"};
+
+      act(() => capturedSetPalette(newPalette));
+
+      const updatedCardBg = screen.getByTestId("nested").getAttribute("data-card-bg");
+      expect(updatedCardBg).toBe("oklch(0.8 0.02 100)");
+      expect(updatedCardBg).not.toBe(initialCardBg);
+    });
+
+    it("setPalette(null) resets to default palette", () => {
+      let capturedSetPalette: (p: ThemePalette | null) => void = () => {};
+
+      function ThemeCapture() {
+        const {setPalette} = useThematic();
+        const theme = useTheme();
+        capturedSetPalette = setPalette;
+        return <div data-testid="capture" data-card-bg={theme.cardBg} />;
+      }
+
+      render(
+        <RootThemeProvider initialThemeMode="light" initialPreference="light" initialMenuPreference="auto">
+          <ThemeCapture />
+        </RootThemeProvider>
+      );
+
+      const initialCardBg = screen.getByTestId("capture").getAttribute("data-card-bg");
+
+      const newPalette = {...defaultPalette, key: "test-override", white: "oklch(0.9 0.05 200)"};
+      act(() => capturedSetPalette(newPalette));
+      expect(screen.getByTestId("capture").getAttribute("data-card-bg")).toBe("oklch(0.9 0.05 200)");
+
+      act(() => capturedSetPalette(null));
+      expect(screen.getByTestId("capture").getAttribute("data-card-bg")).toBe(initialCardBg);
+    });
+
+    it("override palette takes precedence over warm preference", () => {
+      let capturedSetPalette: (p: ThemePalette | null) => void = () => {};
+
+      function PaletteKeyDisplay() {
+        const {palette, setPalette} = useThematic();
+        capturedSetPalette = setPalette;
+        return <div data-testid="palette-key" data-key={palette.key} />;
+      }
+
+      render(
+        <RootThemeProvider initialThemeMode="light" initialPreference="light" initialMenuPreference="auto">
+          <PaletteKeyDisplay />
+        </RootThemeProvider>
+      );
+
+      const overridePalette = {...defaultPalette, key: "custom-override"};
+      act(() => capturedSetPalette(overridePalette));
+      expect(screen.getByTestId("palette-key").getAttribute("data-key")).toBe("custom-override");
+
+      // Changing warm preference doesn't affect override
+      act(() => storeWarmPreference(true));
+      expect(screen.getByTestId("palette-key").getAttribute("data-key")).toBe("custom-override");
+
+      // Clearing override picks up current warm preference
+      act(() => capturedSetPalette(null));
+      expect(screen.getByTestId("palette-key").getAttribute("data-key")).toBe("warm-user");
+    });
+  });
+
+  describe("warm preference / isArchitect", () => {
+    function PaletteKeyDisplay() {
+      const {palette} = useThematic();
+      return <div data-testid="palette-key" data-key={palette.key} />;
+    }
+
+    it("uses default palette when warm is off and not architect", () => {
+      render(
+        <RootThemeProvider initialThemeMode="light" initialPreference="light" initialMenuPreference="auto">
+          <PaletteKeyDisplay />
+        </RootThemeProvider>
+      );
+      expect(screen.getByTestId("palette-key").getAttribute("data-key")).toBe("default");
+    });
+
+    it("uses warm palette when warm preference is stored", () => {
+      storeWarmPreference(true);
+      render(
+        <RootThemeProvider initialThemeMode="light" initialPreference="light" initialMenuPreference="auto">
+          <PaletteKeyDisplay />
+        </RootThemeProvider>
+      );
+      expect(screen.getByTestId("palette-key").getAttribute("data-key")).toBe("warm-user");
+    });
+
+    it("uses architect palette when isArchitect is true", () => {
+      render(
+        <RootThemeProvider initialThemeMode="light" initialPreference="light" initialMenuPreference="auto" isArchitect>
+          <PaletteKeyDisplay />
+        </RootThemeProvider>
+      );
+      expect(screen.getByTestId("palette-key").getAttribute("data-key")).toBe("slate-arch");
+    });
+
+    it("reacts to warm preference change at runtime", () => {
+      render(
+        <RootThemeProvider initialThemeMode="light" initialPreference="light" initialMenuPreference="auto" isArchitect>
+          <PaletteKeyDisplay />
+        </RootThemeProvider>
+      );
+      expect(screen.getByTestId("palette-key").getAttribute("data-key")).toBe("slate-arch");
+
+      act(() => storeWarmPreference(true));
+      expect(screen.getByTestId("palette-key").getAttribute("data-key")).toBe("warm-arch");
+    });
+  });
+});