Fix bottom border rendering for search and add a regression test. (#20517)

2026-04-20 10:10:56 -07:00 · 2026-02-26 20:55:21 -08:00
parent 83a3851dfd
commit 82336de7a4
9 changed files with 597 additions and 53 deletions
@@ -0,0 +1,157 @@
+/**
+ * @license
+ * Copyright 2026 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { describe, expect, it } from 'vitest';
+import { getToolGroupBorderAppearance } from './borderStyles.js';
+import { CoreToolCallStatus } from '@google/gemini-cli-core';
+import { theme } from '../semantic-colors.js';
+import type { IndividualToolCallDisplay } from '../types.js';
+import { renderWithProviders } from '../../test-utils/render.js';
+import { MainContent } from '../components/MainContent.js';
+
+describe('getToolGroupBorderAppearance', () => {
+  it('should use warning color for pending non-shell tools', () => {
+    const item = {
+      type: 'tool_group' as const,
+      tools: [
+        {
+          name: 'google_web_search',
+          status: CoreToolCallStatus.Executing,
+          resultDisplay: '',
+          callId: 'call-1',
+        },
+      ] as IndividualToolCallDisplay[],
+    };
+    const appearance = getToolGroupBorderAppearance(item, undefined, false, []);
+    expect(appearance.borderColor).toBe(theme.status.warning);
+    expect(appearance.borderDimColor).toBe(true);
+  });
+
+  it('should use correct color for empty slice by looking at pending items', () => {
+    const pendingItem = {
+      type: 'tool_group' as const,
+      tools: [
+        {
+          name: 'google_web_search',
+          status: CoreToolCallStatus.Executing,
+          resultDisplay: '',
+          callId: 'call-1',
+        },
+      ] as IndividualToolCallDisplay[],
+    };
+    const sliceItem = {
+      type: 'tool_group' as const,
+      tools: [] as IndividualToolCallDisplay[],
+    };
+    const allPendingItems = [pendingItem, sliceItem];
+
+    const appearance = getToolGroupBorderAppearance(
+      sliceItem,
+      undefined,
+      false,
+      allPendingItems,
+    );
+
+    // It should match the pendingItem appearance
+    expect(appearance.borderColor).toBe(theme.status.warning);
+    expect(appearance.borderDimColor).toBe(true);
+  });
+
+  it('should use symbol color for shell tools', () => {
+    const item = {
+      type: 'tool_group' as const,
+      tools: [
+        {
+          name: 'run_shell_command',
+          status: CoreToolCallStatus.Executing,
+          resultDisplay: '',
+          callId: 'call-1',
+        },
+      ] as IndividualToolCallDisplay[],
+    };
+    const appearance = getToolGroupBorderAppearance(item, undefined, false, []);
+    expect(appearance.borderColor).toBe(theme.ui.symbol);
+    expect(appearance.borderDimColor).toBe(true);
+  });
+});
+
+describe('MainContent tool group border SVG snapshots', () => {
+  it('should render SVG snapshot for a pending search dialog (google_web_search)', async () => {
+    const renderResult = renderWithProviders(<MainContent />, {
+      uiState: {
+        history: [],
+        pendingHistoryItems: [
+          {
+            type: 'tool_group',
+            tools: [
+              {
+                name: 'google_web_search',
+                status: CoreToolCallStatus.Executing,
+                resultDisplay: 'Searching...',
+                callId: 'call-1',
+              } as unknown as IndividualToolCallDisplay,
+            ],
+          },
+        ],
+      },
+    });
+
+    await renderResult.waitUntilReady();
+    await expect(renderResult).toMatchSvgSnapshot();
+  });
+
+  it('should render SVG snapshot for an empty slice following a search tool', async () => {
+    const renderResult = renderWithProviders(<MainContent />, {
+      uiState: {
+        history: [],
+        pendingHistoryItems: [
+          {
+            type: 'tool_group',
+            tools: [
+              {
+                name: 'google_web_search',
+                status: CoreToolCallStatus.Executing,
+                resultDisplay: 'Searching...',
+                callId: 'call-1',
+              } as unknown as IndividualToolCallDisplay,
+            ],
+          },
+          {
+            type: 'tool_group',
+            tools: [],
+          },
+        ],
+      },
+    });
+
+    await renderResult.waitUntilReady();
+    await expect(renderResult).toMatchSvgSnapshot();
+  });
+
+  it('should render SVG snapshot for a shell tool', async () => {
+    const renderResult = renderWithProviders(<MainContent />, {
+      uiState: {
+        history: [],
+        pendingHistoryItems: [
+          {
+            type: 'tool_group',
+            tools: [
+              {
+                name: 'run_shell_command',
+                status: CoreToolCallStatus.Executing,
+                resultDisplay: 'Running command...',
+                callId: 'call-1',
+              } as unknown as IndividualToolCallDisplay,
+            ],
+          },
+        ],
+      },
+    });
+
+    await renderResult.waitUntilReady();
+    await expect(renderResult).toMatchSvgSnapshot();
+  });
+});