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,116 @@
+/**
+ * @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(() => ({
+  getItem: vi.fn(async () => null),
+  setItem: vi.fn(async () => {}),
+}));
+
+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, useSidebarCallouts } from "@/contexts/sidebar-callout-context";
+import { SidebarCalloutSlot } from "./sidebar-callout-slot";
+
+function RegisterCallout() {
+  const callouts = useSidebarCallouts();
+  useEffect(
+    () =>
+      callouts.show({
+        id: "slot-test",
+        title: "Update available",
+        description: "v1 is ready.",
+        testID: "slot-test-callout",
+      }),
+    [callouts],
+  );
+  return null;
+}
+
+describe("SidebarCalloutSlot", () => {
+  let root: Root | null = null;
+  let container: HTMLElement | null = null;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    if (root) {
+      act(() => {
+        root?.unmount();
+      });
+    }
+    root = null;
+    container?.remove();
+    container = null;
+  });
+
+  it("renders the active sidebar callout", async () => {
+    await act(async () => {
+      root?.render(
+        <SidebarCalloutProvider>
+          <RegisterCallout />
+          <SidebarCalloutSlot />
+        </SidebarCalloutProvider>,
+      );
+      await Promise.resolve();
+    });
+
+    expect(container?.textContent).toContain("Update available");
+    expect(container?.textContent).toContain("v1 is ready.");
+  });
+
+  it("renders nothing when there is no active callout", async () => {
+    await act(async () => {
+      root?.render(
+        <SidebarCalloutProvider>
+          <SidebarCalloutSlot />
+        </SidebarCalloutProvider>,
+      );
+      await Promise.resolve();
+    });
+
+    expect(container?.querySelector('[data-testid="slot-test-callout"]')).toBeNull();
+  });
+});