@handled-ai/design-system 0.17.1 → 0.18.1

package/src/components/__tests__/contextual-quick-action-launcher.test.tsx

@@ -1,193 +1,104 @@
-import { describe, it, expect, vi } from "vitest";
-import React from "react";
-import { fireEvent, render, screen } from "@testing-library/react";
-
-import {
-  ContextualQuickActionLauncher,
-  type ContextualQuickActionItem,
-} from "../contextual-quick-action-launcher";
-
-vi.mock("../dropdown-menu", async () => {
-  const ReactMod = await import("react");
-
-  /* eslint-disable @typescript-eslint/no-explicit-any */
-  const DropdownMenu = ({ children, open, defaultOpen, onOpenChange }: any) => {
-    const [internalOpen, setInternalOpen] = ReactMod.useState(defaultOpen ?? false);
-    const isControlled = open !== undefined;
-    const currentOpen = isControlled ? open : internalOpen;
-    const setOpen = (nextOpen: boolean) => {
-      if (!isControlled) setInternalOpen(nextOpen);
-      onOpenChange?.(nextOpen);
-    };
-
-    return ReactMod.createElement(
-      "div",
-      {
-        "data-slot": "dropdown-menu",
-        "data-open": currentOpen ? "true" : "false",
-      },
-      ReactMod.Children.map(children, (child: any) => {
-        if (!ReactMod.isValidElement(child)) return child;
-        return ReactMod.cloneElement(child, { __open: currentOpen, __setOpen: setOpen } as any);
-      })
-    );
-  };
-
-  const DropdownMenuTrigger = ({ children, asChild, __open, __setOpen, ...props }: any) => {
-    const childProps = {
-      "data-slot": "dropdown-menu-trigger",
-      "aria-expanded": __open ? "true" : "false",
-      onClick: () => __setOpen?.(!__open),
-      ...props,
-    };
-    if (asChild && ReactMod.isValidElement(children)) {
-      return ReactMod.cloneElement(children, childProps);
-    }
-    return ReactMod.createElement("button", childProps, children);
-  };
-
-  const DropdownMenuContent = ({
-    children,
-    __open,
-    __setOpen: _setOpen,
-    className,
-    align: _align,
-    side: _side,
-    sideOffset: _sideOffset,
-    ...props
-  }: any) => {
-    if (!__open) return null;
-    return ReactMod.createElement(
-      "div",
-      { "data-slot": "dropdown-menu-content", role: "menu", className, ...props },
-      children
-    );
-  };
-
-  const DropdownMenuItem = ({ children, onSelect, disabled, className, ...props }: any) =>
-    ReactMod.createElement(
-      "button",
-      {
-        "data-slot": "dropdown-menu-item",
-        role: "menuitem",
-        type: "button",
-        disabled,
-        className,
-        onClick: (event: any) => onSelect?.(event),
-        ...props,
-      },
-      children
-    );
-
-  const DropdownMenuSeparator = ({ className, ...props }: any) =>
-    ReactMod.createElement("div", { "data-slot": "dropdown-menu-separator", className, ...props });
-  /* eslint-enable @typescript-eslint/no-explicit-any */
-
-  return {
-    DropdownMenu,
-    DropdownMenuTrigger,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuSeparator,
-  };
-});
-
-const items: ContextualQuickActionItem[] = [
-  {
-    id: "create-opportunity",
-    label: "Create an opportunity",
-    description: "New sales or expansion deal",
-    icon: <span data-testid="salesforce-icon">SF</span>,
-  },
+import { fireEvent, render, screen } from "@testing-library/react"
+import { describe, expect, it, vi } from "vitest"
+
+import { ContextualQuickActionLauncher } from "../contextual-quick-action-launcher"
+
+const items = [
+  { id: "log-feedback", label: "Log feedback", description: "Capture product feedback" },
   {
-    id: "update-opportunity",
-    label: "Update an opportunity",
-    description: "Edit stage, close date, or details",
+    id: "support",
+    label: "Submit support request",
+    description: "Submit a case",
     disabled: true,
-    disabledReason: "No opportunity",
+    disabledReason: "Coming soon",
   },
-];
-
-function renderLauncher(
-  props: Partial<React.ComponentProps<typeof ContextualQuickActionLauncher>> = {}
-) {
-  return render(
-    <ContextualQuickActionLauncher
-      contextLabel="Supabase"
-      contextSecondary="Account"
-      items={items}
-      onSelect={() => {}}
-      {...props}
-    />
-  );
-}
+]
 
 describe("ContextualQuickActionLauncher", () => {
-  it("renders the accessible trigger name", () => {
-    renderLauncher();
-
-    expect(screen.getByRole("button", { name: /quick action/i })).not.toBeNull();
-  });
-
-  it("opens and closes in uncontrolled mode", () => {
-    renderLauncher();
-
-    expect(screen.queryByText("Acting on")).toBeNull();
-
-    fireEvent.click(screen.getByRole("button", { name: /quick action/i }));
-    expect(screen.getByText("Acting on")).not.toBeNull();
-    expect(screen.getByText("Supabase")).not.toBeNull();
-
-    fireEvent.click(screen.getByRole("button", { name: /quick action/i }));
-    expect(screen.queryByText("Acting on")).toBeNull();
-  });
-
-  it("selects enabled items and closes the menu", () => {
-    const onSelect = vi.fn();
-    renderLauncher({ onSelect });
-
-    fireEvent.click(screen.getByRole("button", { name: /quick action/i }));
-    fireEvent.click(screen.getByRole("menuitem", { name: /create an opportunity/i }));
-
-    expect(onSelect).toHaveBeenCalledTimes(1);
-    expect(onSelect).toHaveBeenCalledWith(items[0]);
-    expect(screen.queryByText("Acting on")).toBeNull();
-  });
-
-  it("does not select disabled items", () => {
-    const onSelect = vi.fn();
-    renderLauncher({ onSelect });
-
-    fireEvent.click(screen.getByRole("button", { name: /quick action/i }));
-    fireEvent.click(screen.getByRole("menuitem", { name: /update an opportunity/i }));
-
-    expect(onSelect).not.toHaveBeenCalled();
-    expect(screen.getByText("No opportunity")).not.toBeNull();
-  });
-
-  it("calls browse all and closes the menu", () => {
-    const onBrowseAll = vi.fn();
-    renderLauncher({ onBrowseAll });
-
-    fireEvent.click(screen.getByRole("button", { name: /quick action/i }));
-    fireEvent.click(screen.getByRole("button", { name: /browse all actions/i }));
-
-    expect(onBrowseAll).toHaveBeenCalledTimes(1);
-    expect(screen.queryByText("Acting on")).toBeNull();
-  });
-
-  it("renders optional hint text", () => {
-    renderLauncher({ showHint: true });
-
-    expect(screen.getByText(/or press/i)).not.toBeNull();
-    expect(screen.getByText("⌘K")).not.toBeNull();
-    expect(screen.getByText(/for all actions/i)).not.toBeNull();
-  });
-
-  it("uses pointer-events-auto on portalled content", () => {
-    renderLauncher({ defaultOpen: true });
-
-    const content = document.querySelector('[data-slot="dropdown-menu-content"]');
-    expect(content?.className).toContain("pointer-events-auto");
-  });
-});
+  it("renders contextual actions with context label when open", () => {
+    render(
+      <ContextualQuickActionLauncher
+        contextLabel="Acme Corp"
+        contextSecondary="Account"
+        items={items}
+        onSelect={() => {}}
+        open
+      />,
+    )
+
+    expect(screen.getByRole("menu", { name: /quick action/i })).toBeTruthy()
+    expect(screen.getByText("Acting on")).toBeTruthy()
+    expect(screen.getByText("Acme Corp")).toBeTruthy()
+    expect(screen.getByText("Log feedback")).toBeTruthy()
+    expect(screen.getByText("Coming soon")).toBeTruthy()
+  })
+
+  it("calls onSelect for enabled items and closes the menu", () => {
+    const onSelect = vi.fn()
+    const onOpenChange = vi.fn()
+
+    render(
+      <ContextualQuickActionLauncher
+        contextLabel="Acme Corp"
+        items={items}
+        onSelect={onSelect}
+        onOpenChange={onOpenChange}
+        open
+      />,
+    )
+
+    fireEvent.click(screen.getByText("Log feedback"))
+
+    expect(onSelect).toHaveBeenCalledWith(items[0])
+    expect(onOpenChange).toHaveBeenCalledWith(false)
+  })
+
+  it("does not call onSelect for disabled items", () => {
+    const onSelect = vi.fn()
+    render(
+      <ContextualQuickActionLauncher
+        contextLabel="Acme Corp"
+        items={items}
+        onSelect={onSelect}
+        open
+      />,
+    )
+
+    fireEvent.click(screen.getByText("Submit support request"))
+
+    expect(onSelect).not.toHaveBeenCalled()
+  })
+
+  it("calls Browse all actions callback", () => {
+    const onBrowseAll = vi.fn()
+    const onOpenChange = vi.fn()
+    render(
+      <ContextualQuickActionLauncher
+        contextLabel="Acme Corp"
+        items={items}
+        onSelect={() => {}}
+        onBrowseAll={onBrowseAll}
+        onOpenChange={onOpenChange}
+        open
+      />,
+    )
+
+    fireEvent.click(screen.getByRole("button", { name: /browse all actions/i }))
+
+    expect(onBrowseAll).toHaveBeenCalledTimes(1)
+    expect(onOpenChange).toHaveBeenCalledWith(false)
+  })
+
+  it("renders optional hint outside the menu", () => {
+    render(
+      <ContextualQuickActionLauncher
+        contextLabel="Acme Corp"
+        items={items}
+        onSelect={() => {}}
+        showHint
+      />,
+    )
+
+    expect(screen.getByText(/for all actions/i)).toBeTruthy()
+  })
+})