Add sidebar callout surface

2026-04-23 15:19:40 +07:00
parent e21ef2fc9b
commit 576cc0b668
15 changed files with 1812 additions and 316 deletions
@@ -0,0 +1,215 @@
+/**
+ * @vitest-environment jsdom
+ */
+import React, { act, useEffect } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const { theme } = vi.hoisted(() => ({
+  theme: {
+    spacing: { 0: 0, 1: 4, 2: 8, 3: 12, 4: 16 },
+    borderWidth: { 1: 1 },
+    borderRadius: { md: 6 },
+    fontSize: { xs: 11, sm: 13 },
+    fontWeight: { medium: "500", semibold: "600" },
+    colors: {
+      surface0: "#000",
+      foreground: "#fff",
+      foregroundMuted: "#aaa",
+      border: "#555",
+      destructive: "#f44",
+    },
+  },
+}));
+
+const asyncStorage = vi.hoisted(() => ({
+  values: new Map<string, string>(),
+  getItem: vi.fn(async (key: string) => asyncStorage.values.get(key) ?? null),
+  setItem: vi.fn(async (key: string, value: string) => {
+    asyncStorage.values.set(key, value);
+  }),
+}));
+
+vi.mock("@react-native-async-storage/async-storage", () => ({
+  default: asyncStorage,
+}));
+
+vi.mock("react-native-unistyles", () => ({
+  StyleSheet: {
+    create: (factory: unknown) =>
+      typeof factory === "function" ? (factory as (t: typeof theme) => unknown)(theme) : factory,
+  },
+  useUnistyles: () => ({ theme }),
+}));
+
+vi.mock("lucide-react-native", () => {
+  const X = (props: Record<string, unknown>) => React.createElement("span", props);
+  return { X };
+});
+
+vi.stubGlobal("React", React);
+vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+
+import {
+  SidebarCalloutProvider,
+  type SidebarCalloutsApi,
+  SidebarCalloutViewport,
+  useSidebarCallouts,
+} from "./sidebar-callout-context";
+
+function CaptureApi({ onApi }: { onApi: (api: SidebarCalloutsApi) => void }) {
+  const api = useSidebarCallouts();
+  onApi(api);
+  return null;
+}
+
+describe("SidebarCalloutProvider", () => {
+  let root: Root | null = null;
+  let container: HTMLElement | null = null;
+  let api: SidebarCalloutsApi | null = null;
+
+  beforeEach(async () => {
+    api = null;
+    asyncStorage.values.clear();
+    asyncStorage.getItem.mockClear();
+    asyncStorage.setItem.mockClear();
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+    await act(async () => {
+      root?.render(
+        <SidebarCalloutProvider>
+          <CaptureApi onApi={(nextApi) => (api = nextApi)} />
+          <SidebarCalloutViewport />
+        </SidebarCalloutProvider>,
+      );
+      await Promise.resolve();
+    });
+  });
+
+  afterEach(() => {
+    if (root) {
+      act(() => {
+        root?.unmount();
+      });
+    }
+    root = null;
+    container?.remove();
+    container = null;
+    api = null;
+  });
+
+  it("shows the highest-priority callout first, then reveals the next when dismissed", () => {
+    act(() => {
+      api?.show({ id: "onboarding", priority: 10, title: "Set up scripts" });
+      api?.show({ id: "update", priority: 200, title: "Update available" });
+    });
+
+    expect(container?.textContent).toContain("Update available");
+    expect(container?.textContent).not.toContain("Set up scripts");
+
+    act(() => {
+      api?.dismiss("update");
+    });
+
+    expect(container?.textContent).toContain("Set up scripts");
+    expect(container?.textContent).not.toContain("Update available");
+  });
+
+  it("replaces a callout by id without duplicating the queue item", () => {
+    act(() => {
+      api?.show({ id: "daemon", title: "Old daemon", description: "v1" });
+      api?.show({ id: "daemon", title: "New daemon", description: "v2" });
+    });
+
+    expect(container?.textContent).toContain("New daemon");
+    expect(container?.textContent).toContain("v2");
+    expect(container?.textContent).not.toContain("Old daemon");
+  });
+
+  it("keeps API consumers from rerendering when callout state changes", () => {
+    const renders = vi.fn();
+    function Producer() {
+      const callouts = useSidebarCallouts();
+      renders(callouts);
+      useEffect(() => {
+        callouts.show({ id: "initial", title: "Initial" });
+      }, [callouts]);
+      return null;
+    }
+
+    act(() => {
+      root?.render(
+        <SidebarCalloutProvider>
+          <Producer />
+          <CaptureApi onApi={(nextApi) => (api = nextApi)} />
+          <SidebarCalloutViewport />
+        </SidebarCalloutProvider>,
+      );
+    });
+    const firstApi = renders.mock.calls[0]?.[0];
+
+    act(() => {
+      api?.show({ id: "later", priority: 10, title: "Later" });
+    });
+
+    expect(renders).toHaveBeenCalledTimes(1);
+    expect(renders.mock.calls[0]?.[0]).toBe(firstApi);
+  });
+
+  it("unregisters only the registration returned by show", () => {
+    let unregisterOld: (() => void) | null = null;
+    act(() => {
+      unregisterOld = api?.show({ id: "update", title: "Old" }) ?? null;
+      api?.show({ id: "update", title: "New" });
+    });
+
+    act(() => {
+      unregisterOld?.();
+    });
+
+    expect(container?.textContent).toContain("New");
+  });
+
+  it("persists dismissals by dismissal key", () => {
+    act(() => {
+      api?.show({
+        id: "update",
+        dismissalKey: "desktop-update:available:1.2.3",
+        title: "Update available",
+      });
+    });
+
+    expect(container?.textContent).toContain("Update available");
+
+    act(() => {
+      api?.dismiss("update");
+    });
+
+    expect(container?.textContent).not.toContain("Update available");
+    expect(asyncStorage.setItem).toHaveBeenCalledWith(
+      "@paseo:sidebar-callout-dismissals",
+      JSON.stringify(["desktop-update:available:1.2.3"]),
+    );
+
+    act(() => {
+      api?.show({
+        id: "update",
+        dismissalKey: "desktop-update:available:1.2.3",
+        title: "Dismissed update",
+      });
+    });
+
+    expect(container?.textContent).not.toContain("Dismissed update");
+
+    act(() => {
+      api?.show({
+        id: "update",
+        dismissalKey: "desktop-update:available:1.2.4",
+        title: "New update",
+      });
+    });
+
+    expect(container?.textContent).toContain("New update");
+  });
+});