@frankieai/react 0.2.16 → 0.2.18

package/src/theme-ready.test.tsx

@@ -0,0 +1,36 @@
+import { act, render, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { FrankieProvider } from "./hooks/FrankieProvider.js";
+import { FrankieWidget } from "./components/chat/FrankieWidget.js";
+import { __resetFrankieStylesForTests } from "./lib/ensure-frankie-styles.js";
+
+/** Answer the stylesheet sentinel as a browser with our CSS loaded would. */
+function stylesLoaded() {
+  const real = window.getComputedStyle.bind(window);
+  vi.spyOn(window, "getComputedStyle").mockImplementation((el: Element, pseudo?: string | null) => {
+    const style = real(el, pseudo ?? undefined);
+    return { ...style, getPropertyValue: (property: string) => (property === "--frankie-styles-ready" ? "1" : style.getPropertyValue(property)) } as CSSStyleDeclaration;
+  });
+}
+
+afterEach(() => { vi.restoreAllMocks(); __resetFrankieStylesForTests(); });
+
+describe("first paint", () => {
+  it("keeps the widget invisible until its theme is known, so OS dark mode never flashes first", async () => {
+    stylesLoaded();
+    // The visitor's OS prefers dark; the workspace says light.
+    vi.spyOn(window, "matchMedia").mockImplementation((query: string) => ({ matches: query.includes("dark"), media: query, addEventListener() {}, removeEventListener() {} }) as unknown as MediaQueryList);
+    let answer: (response: Response) => void = () => {};
+    const fetchImpl = vi.fn(() => new Promise<Response>((resolve) => { answer = resolve; }));
+    const { container } = render(<FrankieProvider publishableKey="pk_test" baseUrl="https://frankie.test" fetchImpl={fetchImpl as unknown as typeof fetch}><FrankieWidget /></FrankieProvider>);
+    const root = container.querySelector(".frankie-widget") as HTMLElement;
+    await waitFor(() => expect(root.dataset.frankieStyles).toBe("ready"));
+    expect(root.style.opacity).toBe("0");
+
+    await act(async () => {
+      answer(new Response(JSON.stringify({ tenantId: "acme", branding: { name: "Acme" }, theme: { mode: "light" }, auth: { mode: "anonymous" } }), { status: 200, headers: { "content-type": "application/json" } }));
+    });
+    await waitFor(() => expect(root.style.opacity).toBe(""));
+    expect(root.dataset.frankieMode).toBe("light");
+  });
+});