polymorph-sdk 0.2.3 → 0.2.4

package/src/__tests__/IdentityForm.test.tsx

@@ -0,0 +1,146 @@
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { IdentityForm } from "../IdentityForm";
+
+afterEach(() => {
+  cleanup();
+});
+
+function renderForm(
+  overrides: {
+    collectEmail?: "required" | "optional" | "hidden";
+    collectPhone?: "required" | "optional" | "hidden";
+    onSubmit?: (u: { name?: string; email?: string; phone?: string }) => void;
+  } = {},
+) {
+  const onSubmit = overrides.onSubmit ?? vi.fn();
+  render(
+    <IdentityForm
+      collectEmail={overrides.collectEmail ?? "hidden"}
+      collectPhone={overrides.collectPhone ?? "hidden"}
+      primaryColor="#000"
+      onSubmit={onSubmit}
+    />,
+  );
+  return { onSubmit };
+}
+
+describe("IdentityForm", () => {
+  // ── Rendering ──
+
+  it("always shows a name field", () => {
+    renderForm();
+    expect(screen.getByPlaceholderText("Your name")).toBeInTheDocument();
+  });
+
+  it("shows email field when collectEmail is not hidden", () => {
+    renderForm({ collectEmail: "required" });
+    expect(screen.getByPlaceholderText("you@example.com")).toBeInTheDocument();
+  });
+
+  it("hides email field when collectEmail is hidden", () => {
+    renderForm({ collectEmail: "hidden" });
+    expect(
+      screen.queryByPlaceholderText("you@example.com"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("shows phone field when collectPhone is not hidden", () => {
+    renderForm({ collectPhone: "optional" });
+    expect(
+      screen.getByPlaceholderText("+1 (555) 123-4567"),
+    ).toBeInTheDocument();
+  });
+
+  it("hides phone field when collectPhone is hidden", () => {
+    renderForm({ collectPhone: "hidden" });
+    expect(
+      screen.queryByPlaceholderText("+1 (555) 123-4567"),
+    ).not.toBeInTheDocument();
+  });
+
+  // ── Validation ──
+
+  it("shows error and does not call onSubmit when name is empty", () => {
+    const { onSubmit } = renderForm();
+    fireEvent.click(screen.getByRole("button", { name: "Start Chat" }));
+    expect(screen.getByText("Name is required")).toBeInTheDocument();
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  it("shows error when required email is missing", () => {
+    const { onSubmit } = renderForm({ collectEmail: "required" });
+    fireEvent.change(screen.getByPlaceholderText("Your name"), {
+      target: { value: "Jane" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Start Chat" }));
+    expect(screen.getByText("Email is required")).toBeInTheDocument();
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  it("shows error for invalid email format", () => {
+    const { onSubmit } = renderForm({ collectEmail: "optional" });
+    fireEvent.change(screen.getByPlaceholderText("Your name"), {
+      target: { value: "Jane" },
+    });
+    fireEvent.change(screen.getByPlaceholderText("you@example.com"), {
+      target: { value: "not-an-email" },
+    });
+    // Use fireEvent.submit to bypass native <input type="email"> validation in jsdom
+    fireEvent.submit(
+      screen.getByRole("button", { name: "Start Chat" }).closest("form")!,
+    );
+    expect(screen.getByText("Invalid email format")).toBeInTheDocument();
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  it("shows error for invalid phone number (too few digits)", () => {
+    const { onSubmit } = renderForm({ collectPhone: "optional" });
+    fireEvent.change(screen.getByPlaceholderText("Your name"), {
+      target: { value: "Jane" },
+    });
+    fireEvent.change(screen.getByPlaceholderText("+1 (555) 123-4567"), {
+      target: { value: "123" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Start Chat" }));
+    expect(
+      screen.getByText("Enter a valid phone number (7–15 digits)"),
+    ).toBeInTheDocument();
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  it("shows error when both optional and neither provided", () => {
+    const { onSubmit } = renderForm({
+      collectEmail: "optional",
+      collectPhone: "optional",
+    });
+    fireEvent.change(screen.getByPlaceholderText("Your name"), {
+      target: { value: "Jane" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Start Chat" }));
+    expect(
+      screen.getByText("Please provide either an email or phone number"),
+    ).toBeInTheDocument();
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  it("calls onSubmit with valid data", () => {
+    const onSubmit = vi.fn();
+    renderForm({
+      collectEmail: "optional",
+      collectPhone: "hidden",
+      onSubmit,
+    });
+    fireEvent.change(screen.getByPlaceholderText("Your name"), {
+      target: { value: "Jane" },
+    });
+    fireEvent.change(screen.getByPlaceholderText("you@example.com"), {
+      target: { value: "jane@test.com" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Start Chat" }));
+    expect(onSubmit).toHaveBeenCalledWith({
+      name: "Jane",
+      email: "jane@test.com",
+    });
+  });
+});

package/src/__tests__/PolymorphWidget.test.tsx

@@ -0,0 +1,173 @@
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { PolymorphWidget } from "../PolymorphWidget";
+
+// Mock LiveKitRoom to avoid real WebSocket connections
+vi.mock("@livekit/components-react", () => ({
+  LiveKitRoom: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+}));
+
+vi.mock("../RoomHandler", () => ({
+  RoomHandler: () => null,
+}));
+
+// Mock MantineProvider to avoid jsdom getComputedStyle issues
+vi.mock("@mantine/core", async () => {
+  const actual = await vi.importActual("@mantine/core");
+  return {
+    ...actual,
+    MantineProvider: ({ children }: { children: React.ReactNode }) => (
+      <>{children}</>
+    ),
+  };
+});
+
+const RESOLVE_RESPONSE = {
+  id: "cfg-1",
+  title: "Widget Title",
+  subtitle: "Widget Subtitle",
+  primary_color: "#ff0000",
+  position: "bottom-right",
+  dark_mode: false,
+  enable_voice: true,
+  greeting: "Welcome!",
+  collect_email: "hidden",
+  collect_phone: "hidden",
+};
+
+let fetchMock: ReturnType<typeof vi.fn>;
+
+beforeEach(() => {
+  fetchMock = vi.fn().mockImplementation((url: string) => {
+    if (url.includes("/widget-configs/resolve")) {
+      return Promise.resolve({
+        ok: true,
+        json: () => Promise.resolve(RESOLVE_RESPONSE),
+      });
+    }
+    return Promise.resolve({
+      ok: false,
+      status: 404,
+      text: () => Promise.resolve(""),
+    });
+  });
+  vi.stubGlobal("fetch", fetchMock);
+  sessionStorage.clear();
+  localStorage.clear();
+});
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+describe("PolymorphWidget", () => {
+  it("renders FAB button on mount", () => {
+    render(<PolymorphWidget apiBaseUrl="http://test" apiKey="key" />);
+    expect(screen.getByTitle("Chat")).toBeInTheDocument();
+  });
+
+  it("clicking FAB opens the panel", async () => {
+    render(<PolymorphWidget apiBaseUrl="http://test" apiKey="key" />);
+    const fab = screen.getByTitle("Chat").closest("button")!;
+    fireEvent.click(fab);
+    await waitFor(() => {
+      expect(
+        document.querySelector("[aria-hidden='false']"),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it("clicking FAB again closes the panel", async () => {
+    render(<PolymorphWidget apiBaseUrl="http://test" apiKey="key" />);
+    const fab = screen.getByTitle("Chat").closest("button")!;
+
+    // Open
+    fireEvent.click(fab);
+    await waitFor(() => {
+      expect(
+        document.querySelector("[aria-hidden='false']"),
+      ).toBeInTheDocument();
+    });
+
+    // The FAB now shows a Close icon — find the FAB button specifically
+    // (not the panel header close button) by its CSS class
+    const fabButtons = screen
+      .getAllByTitle("Close")
+      .map((el) => el.closest("button")!);
+    const fabBtn = fabButtons.find((btn) => btn.className.includes("fab"))!;
+    fireEvent.click(fabBtn);
+    await waitFor(() => {
+      expect(
+        document.querySelector("[aria-hidden='true']"),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it("shows greeting message after config loads", async () => {
+    render(<PolymorphWidget apiBaseUrl="http://test" apiKey="key" />);
+    await waitFor(() => {
+      expect(screen.getByText("Welcome!")).toBeInTheDocument();
+    });
+  });
+
+  it("applies correct position class from config", async () => {
+    const leftResponse = { ...RESOLVE_RESPONSE, position: "bottom-left" };
+    fetchMock.mockImplementation((url: string) => {
+      if (url.includes("/widget-configs/resolve")) {
+        return Promise.resolve({
+          ok: true,
+          json: () => Promise.resolve(leftResponse),
+        });
+      }
+      return Promise.resolve({
+        ok: false,
+        status: 404,
+        text: () => Promise.resolve(""),
+      });
+    });
+
+    render(<PolymorphWidget apiBaseUrl="http://test" apiKey="key" />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Welcome!")).toBeInTheDocument();
+    });
+
+    const root = document.querySelector(".polymorph-widget")!;
+    expect(root.className).toContain("bottomLeft");
+  });
+
+  it("dark mode applies correct color scheme", async () => {
+    const darkResponse = { ...RESOLVE_RESPONSE, dark_mode: true };
+    fetchMock.mockImplementation((url: string) => {
+      if (url.includes("/widget-configs/resolve")) {
+        return Promise.resolve({
+          ok: true,
+          json: () => Promise.resolve(darkResponse),
+        });
+      }
+      return Promise.resolve({
+        ok: false,
+        status: 404,
+        text: () => Promise.resolve(""),
+      });
+    });
+
+    render(<PolymorphWidget apiBaseUrl="http://test" apiKey="key" />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Welcome!")).toBeInTheDocument();
+    });
+
+    const root = document.querySelector(".polymorph-widget")!;
+    expect((root as HTMLElement).style.colorScheme).toBe("dark");
+  });
+});

package/src/__tests__/integration.test.ts

@@ -0,0 +1,58 @@
+import { describe, expect, it } from "vitest";
+
+const API_URL = process.env.DEMO_RESEARCHER_API_URL;
+const API_KEY = process.env.INTEGRATION_TEST_API_KEY;
+
+const shouldRun = API_URL && API_KEY;
+
+describe.skipIf(!shouldRun)("SDK integration against demo", () => {
+  it("resolves widget config", async () => {
+    const res = await fetch(`${API_URL}/widget-configs/resolve`, {
+      headers: { Authorization: `Bearer ${API_KEY}` },
+    });
+    expect(res.status).toBe(200);
+    const data = await res.json();
+    expect(data).toHaveProperty("id");
+    expect(data).toHaveProperty("title");
+    expect(data).toHaveProperty("greeting");
+  });
+
+  it("starts a voice room session", async () => {
+    const res = await fetch(`${API_URL}/voice-rooms/start`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${API_KEY}`,
+      },
+      body: JSON.stringify({
+        agent_name: "custom-voice-agent",
+      }),
+    });
+    expect(res.status).toBe(200);
+    const data = await res.json();
+    expect(data).toHaveProperty("token");
+    expect(data).toHaveProperty("livekit_url");
+  });
+
+  it("resolved config has all expected fields", async () => {
+    const res = await fetch(`${API_URL}/widget-configs/resolve`, {
+      headers: { Authorization: `Bearer ${API_KEY}` },
+    });
+    const data = await res.json();
+    const expectedFields = [
+      "id",
+      "title",
+      "subtitle",
+      "primary_color",
+      "position",
+      "dark_mode",
+      "enable_voice",
+      "greeting",
+      "collect_email",
+      "collect_phone",
+    ];
+    for (const field of expectedFields) {
+      expect(data).toHaveProperty(field);
+    }
+  });
+});