gloomberb 0.6.1 → 0.7.1

package/src/components/command-bar/command-bar.test.tsx

@@ -1,14 +1,15 @@
 import { afterEach, describe, expect, test } from "bun:test";
 import { act, useReducer } from "react";
-import { testRender } from "../../renderers/opentui/test-utils";
-import { DialogProvider } from "@opentui-ui/dialog/react";
+import { TestDialogProvider, testRender } from "../../renderers/opentui/test-utils";
 import { CommandBar } from "./command-bar";
-import { AppContext, type AppState, appReducer, createInitialState, getEffectiveThemeId } from "../../state/app-context";
+import { AppContext, type AppAction, type AppState, appReducer, createInitialState, getEffectiveThemeId } from "../../state/app-context";
 import { createTestDataProvider } from "../../test-support/data-provider";
+import { ThemeProvider, useThemeId } from "../../theme/theme-context";
 import { cloneLayout, createDefaultConfig, type AppConfig } from "../../types/config";
 import type { DataProvider } from "../../types/data-provider";
 import type { TickerRecord } from "../../types/ticker";
 import type { PluginRegistry } from "../../plugins/registry";
+import type { PaneTemplateCreateOptions } from "../../types/plugin";
 
 let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
 
@@ -162,7 +163,7 @@ function makePluginRegistry(hasPaneSettings: (paneId: string) => boolean = () =>
         paneId: "chat",
         label: "New Chat Pane",
         description: "Open another floating chat window",
-        shortcut: { prefix: "CHAT" },
+        shortcut: { prefix: "CHAT", argPlaceholder: "channel", argKind: "text" },
       }],
       ["quote-monitor-pane", {
         id: "quote-monitor-pane",
@@ -213,9 +214,9 @@ function makePluginRegistry(hasPaneSettings: (paneId: string) => boolean = () =>
     getPluginPaneTemplateIds: () => [],
     hasPaneSettings,
     events: { emit: () => {} },
-    hideWidget: () => {},
+    hidePane: () => {},
     pinTicker: () => {},
-    showWidget: () => {},
+    showPane: () => {},
     updateLayoutFn: () => {},
     getTermSizeFn: () => ({ width: 80, height: 24 }),
     notify: () => {},
@@ -231,6 +232,10 @@ function makePluginRegistry(hasPaneSettings: (paneId: string) => boolean = () =>
   } as unknown as PluginRegistry;
 }
 
+function ThemeProbe() {
+  return <text>{`theme:${useThemeId()}`}</text>;
+}
+
 function CommandBarHarness({
   query,
   disabledPlugins = [],
@@ -245,6 +250,7 @@ function CommandBarHarness({
   dataProvider = makeDataProvider(),
   hasPaneSettings,
   onCheckForUpdates,
+  onAction,
 }: {
   query: string;
   disabledPlugins?: string[];
@@ -259,6 +265,7 @@ function CommandBarHarness({
   dataProvider?: DataProvider;
   hasPaneSettings?: (paneId: string) => boolean;
   onCheckForUpdates?: () => void | Promise<void>;
+  onAction?: (action: AppAction) => void;
 }) {
   let config = {
     ...createDefaultConfig("/tmp/gloomberb-test"),
@@ -273,6 +280,7 @@ function CommandBarHarness({
     ...createInitialState(config),
     commandBarOpen: true,
     commandBarQuery: query,
+    focusedPaneId: "portfolio-list:main",
     tickers: new Map(tickers.map((ticker) => [ticker.metadata.ticker, ticker])),
     config: { ...config, disabledPlugins },
     paneState: selectedTicker
@@ -300,24 +308,31 @@ function CommandBarHarness({
   configurePluginRegistry?.(pluginRegistry);
   const [liveState, dispatch] = useReducer(appReducer, state);
   const currentState = live ? liveState : state;
-  const currentDispatch = live ? dispatch : () => {};
+  const currentDispatch = live
+    ? (action: AppAction) => {
+      onAction?.(action);
+      dispatch(action);
+    }
+    : (_action: AppAction) => {};
 
   return (
-    <AppContext value={{ state: currentState, dispatch: currentDispatch }}>
-      <DialogProvider dialogOptions={{ style: { backgroundColor: "#000000", borderColor: "#ffffff", borderStyle: "single" } }}>
-        {live && <text>{`theme:${getEffectiveThemeId(currentState)}`}</text>}
-        {showQueryState && <text>{`query:${currentState.commandBarQuery}`}</text>}
-        {currentState.commandBarOpen && (
-          <CommandBar
-            dataProvider={dataProvider}
-            tickerRepository={tickerRepository as any}
-            pluginRegistry={pluginRegistry}
-            quitApp={() => {}}
-            onCheckForUpdates={onCheckForUpdates}
-          />
-        )}
-      </DialogProvider>
-    </AppContext>
+    <ThemeProvider themeId={getEffectiveThemeId(currentState)}>
+      <AppContext value={{ state: currentState, dispatch: currentDispatch }}>
+        <TestDialogProvider>
+          {live && <ThemeProbe />}
+          {showQueryState && <text>{`query:${currentState.commandBarQuery}`}</text>}
+          {currentState.commandBarOpen && (
+            <CommandBar
+              dataProvider={dataProvider}
+              tickerRepository={tickerRepository as any}
+              pluginRegistry={pluginRegistry}
+              quitApp={() => {}}
+              onCheckForUpdates={onCheckForUpdates}
+            />
+          )}
+        </TestDialogProvider>
+      </AppContext>
+    </ThemeProvider>
   );
 }
 
@@ -334,7 +349,7 @@ describe("CommandBar", () => {
   });
 
   test("runs check for updates from the command bar", async () => {
-    const calls = [];
+    const calls: number[] = [];
 
     testSetup = await testRender(<CommandBarHarness query="check for updates" live onCheckForUpdates={() => { calls.push(Date.now()); }} />, {
       width: 80,
@@ -739,8 +754,12 @@ describe("CommandBar", () => {
     const frame = testSetup.captureCharFrame();
     expect(frame).toContain("Commands");
     expect(frame).toContain("TH");
-    expect(frame).toContain("Themes");
-    expect(frame).toMatchSnapshot();
+    expect(frame).toContain("Amber");
+    expect(frame).toContain("Paper");
+    expect(frame).toContain("GitHub Light");
+    expect(frame).toContain("Solarized Light");
+    expect(frame).toContain("Gruvbox Light");
+    expect(frame).toContain("Nord Light");
   });
 
   test("renders plugin toggle state", async () => {
@@ -793,6 +812,7 @@ describe("CommandBar", () => {
     await testSetup.renderOnce();
     await act(async () => {
       testSetup!.mockInput.pressArrow("down");
+      await Bun.sleep(220);
       await testSetup!.renderOnce();
     });
     await testSetup.renderOnce();
@@ -801,6 +821,38 @@ describe("CommandBar", () => {
     expect(frame).toContain("theme:green");
   });
 
+  test("debounces rapid keyboard theme previews", async () => {
+    const actions: AppAction[] = [];
+    testSetup = await testRender(
+      <CommandBarHarness query="TH " live onAction={(action) => actions.push(action)} />,
+      { width: 80, height: 24 },
+    );
+
+    await testSetup.renderOnce();
+    await act(async () => {
+      for (let index = 0; index < 6; index++) {
+        testSetup!.mockInput.pressArrow("down");
+      }
+      await testSetup!.renderOnce();
+    });
+
+    expect(actions.filter((action) => action.type === "PREVIEW_THEME")).toHaveLength(0);
+
+    await act(async () => {
+      await Bun.sleep(100);
+      await testSetup!.renderOnce();
+    });
+
+    expect(actions.filter((action) => action.type === "PREVIEW_THEME")).toHaveLength(0);
+
+    await act(async () => {
+      await Bun.sleep(150);
+      await testSetup!.renderOnce();
+    });
+
+    expect(actions.filter((action) => action.type === "PREVIEW_THEME")).toHaveLength(1);
+  });
+
   test("does not preview a theme from mouse hover alone", async () => {
     testSetup = await testRender(<CommandBarHarness query="TH " live />, {
       width: 80,
@@ -836,6 +888,7 @@ describe("CommandBar", () => {
     await testSetup.renderOnce();
     await act(async () => {
       testSetup!.mockInput.pressArrow("down");
+      await Bun.sleep(220);
       await testSetup!.renderOnce();
     });
     await testSetup.renderOnce();
@@ -883,8 +936,10 @@ describe("CommandBar", () => {
     await testSetup.renderOnce();
     await act(async () => {
       testSetup!.mockInput.pressArrow("down");
+      await Bun.sleep(220);
       await testSetup!.renderOnce();
     });
+    await testSetup.renderOnce();
     expect(testSetup.captureCharFrame()).toContain("theme:green");
 
     await emitKeypress(testSetup, { name: "u", ctrl: true });
@@ -952,7 +1007,7 @@ describe("CommandBar", () => {
   });
 
   test("typing a shorthand and pressing enter executes the inferred quote monitor shortcut", async () => {
-    const created: Array<{ templateId: string; options?: Record<string, unknown> }> = [];
+    const created: Array<{ templateId: string; options?: PaneTemplateCreateOptions }> = [];
 
     testSetup = await testRender(<CommandBarHarness
       query=""
@@ -987,6 +1042,39 @@ describe("CommandBar", () => {
     }]);
   });
 
+  test("typing a chat channel shortcut opens that channel directly", async () => {
+    const created: Array<{ templateId: string; options?: PaneTemplateCreateOptions }> = [];
+
+    testSetup = await testRender(<CommandBarHarness
+      query=""
+      live
+      configurePluginRegistry={(pluginRegistry) => {
+        pluginRegistry.createPaneFromTemplateAsyncFn = async (templateId, options) => {
+          created.push({ templateId, options });
+        };
+      }}
+    />, {
+      width: 100,
+      height: 20,
+    });
+
+    await testSetup.renderOnce();
+
+    await act(async () => {
+      await testSetup!.mockInput.typeText("CHAT help");
+      testSetup!.mockInput.pressEnter();
+      await Bun.sleep(0);
+      await testSetup!.renderOnce();
+    });
+
+    expect(created).toEqual([{
+      templateId: "new-chat-pane",
+      options: {
+        arg: "help",
+      },
+    }]);
+  });
+
   test("clears the root query with cmd-backspace", async () => {
     testSetup = await testRender(<CommandBarHarness query="DES AMD" />, {
       width: 80,
@@ -1649,7 +1737,6 @@ describe("CommandBar", () => {
     await testSetup.renderOnce();
     const initialFrame = testSetup.captureCharFrame();
     expect(initialFrame).toContain("Delete Layout");
-    expect(initialFrame).toContain("Danger");
 
     await act(async () => {
       testSetup!.mockInput.pressEnter();
@@ -1900,7 +1987,7 @@ describe("CommandBar", () => {
   });
 
   test("does not treat no-argument shortcut prefixes as typed pane names", async () => {
-    const created: Array<{ templateId: string; options?: Record<string, unknown> }> = [];
+    const created: Array<{ templateId: string; options?: PaneTemplateCreateOptions }> = [];
 
     testSetup = await testRender(<CommandBarHarness
       query="Top News"
@@ -2086,7 +2173,7 @@ describe("CommandBar", () => {
   });
 
   test("QQ MSFT executes directly without opening a secondary workflow", async () => {
-    const created: Array<{ templateId: string; options?: Record<string, unknown> }> = [];
+    const created: Array<{ templateId: string; options?: PaneTemplateCreateOptions }> = [];
 
     testSetup = await testRender(<CommandBarHarness
       query="QQ MSFT"
@@ -2119,7 +2206,7 @@ describe("CommandBar", () => {
   });
 
   test("CMP AAPL,MSFT creates the comparison chart directly", async () => {
-    const created: Array<{ templateId: string; options?: Record<string, unknown> }> = [];
+    const created: Array<{ templateId: string; options?: PaneTemplateCreateOptions }> = [];
 
     testSetup = await testRender(<CommandBarHarness
       query="CMP AAPL,MSFT"
@@ -2197,8 +2284,52 @@ describe("CommandBar", () => {
     expect(frame).toContain("AAPL,");
   });
 
+  test("CMP with one resolved ticker opens inline completion instead of creating a one-symbol chart", async () => {
+    const created: Array<{ templateId: string; options?: PaneTemplateCreateOptions }> = [];
+
+    testSetup = await testRender(<CommandBarHarness
+      query="CMP AMD"
+      extraTickers={[makeTicker("AMD", "Advanced Micro Devices")]}
+      configurePluginRegistry={(pluginRegistry) => {
+        (pluginRegistry.panes as Map<string, any>).set("comparison-chart", {
+          id: "comparison-chart",
+          name: "Comparison Chart",
+          component: () => null,
+          defaultPosition: "right",
+        });
+        (pluginRegistry.paneTemplates as Map<string, any>).set("comparison-chart-pane", {
+          id: "comparison-chart-pane",
+          paneId: "comparison-chart",
+          label: "Comparison Chart",
+          description: "Compare multiple symbols in one pane",
+          shortcut: { prefix: "CMP", argPlaceholder: "tickers", argKind: "ticker-list" },
+          wizard: [{ key: "tickers", label: "Tickers", type: "text" }],
+          canCreate: (_context: unknown, options?: { symbols?: string[] | null }) => !options?.symbols || options.symbols.length >= 2,
+        });
+        pluginRegistry.createPaneFromTemplateAsyncFn = async (templateId, options) => {
+          created.push({ templateId, options });
+        };
+      }}
+    />, {
+      width: 100,
+      height: 20,
+    });
+
+    await testSetup.renderOnce();
+    await act(async () => {
+      testSetup!.mockInput.pressEnter();
+      await Bun.sleep(0);
+      await testSetup!.renderOnce();
+    });
+
+    const frame = await waitForFrameToContain("Tickers");
+    expect(created).toEqual([]);
+    expect(frame).toContain("Comparison Chart");
+    expect(frame).toContain("AMD");
+  });
+
   test("AI <prompt> opens the inline workflow and prefills the textarea prompt", async () => {
-    const created: Array<{ templateId: string; options?: Record<string, unknown> }> = [];
+    const created: Array<{ templateId: string; options?: PaneTemplateCreateOptions }> = [];
 
     testSetup = await testRender(<CommandBarHarness
       query="AI quality compounders"
@@ -2254,7 +2385,7 @@ describe("CommandBar", () => {
   });
 
   test("submits typed AI screener prompts from the textarea field", async () => {
-    const created: Array<{ templateId: string; options?: Record<string, unknown> }> = [];
+    const created: Array<{ templateId: string; options?: PaneTemplateCreateOptions }> = [];
 
     testSetup = await testRender(<CommandBarHarness
       query="AI"
@@ -2608,7 +2739,15 @@ describe("CommandBar", () => {
   });
 
   test("matches the direct help command", async () => {
-    testSetup = await testRender(<CommandBarHarness query="help" />, {
+    const openedPanes: string[] = [];
+    testSetup = await testRender(<CommandBarHarness
+      query="help"
+      configurePluginRegistry={(pluginRegistry) => {
+        pluginRegistry.showPane = (paneId: string) => {
+          openedPanes.push(paneId);
+        };
+      }}
+    />, {
       width: 80,
       height: 18,
     });
@@ -2618,6 +2757,13 @@ describe("CommandBar", () => {
     const frame = testSetup.captureCharFrame();
     expect(frame).toContain("Help");
     expect(frame).toContain("Navigation");
+
+    await act(async () => {
+      testSetup!.mockInput.pressEnter();
+      await testSetup!.renderOnce();
+    });
+
+    expect(openedPanes).toEqual(["help"]);
   });
 
   test("skips pane templates whose canCreate throws", async () => {
@@ -2686,7 +2832,7 @@ describe("CommandBar", () => {
         query="auth login"
         live
         configurePluginRegistry={(pluginRegistry) => {
-          pluginRegistry.commands.set("auth-login", {
+          (pluginRegistry.commands as Map<string, any>).set("auth-login", {
             id: "auth-login",
             label: "Auth Login",
             description: "Log in to your account",
@@ -2726,7 +2872,7 @@ describe("CommandBar", () => {
         query="workspace"
         live
         configurePluginRegistry={(pluginRegistry) => {
-          pluginRegistry.commands.set("new-workspace", {
+          (pluginRegistry.commands as Map<string, any>).set("new-workspace", {
             id: "new-workspace",
             label: "Workspace",
             description: "Create a workspace",
@@ -2736,7 +2882,7 @@ describe("CommandBar", () => {
             wizard: [
               { key: "name", label: "Name", type: "text", placeholder: "Research" },
             ],
-            execute: async (values) => {
+            execute: async (values?: Record<string, string>) => {
               submitted.push(values);
             },
           } as any);