feat(ui): add visual indicators for hook execution (#15408)

packages/cli/src/ui/components/ContextSummaryDisplay.test.tsx

@@ -6,7 +6,7 @@
 
 import type React from 'react';
 import { render } from '../../test-utils/render.js';
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect, vi, afterEach } from 'vitest';
 import { ContextSummaryDisplay } from './ContextSummaryDisplay.js';
 import * as useTerminalSize from '../hooks/useTerminalSize.js';
 
@@ -16,6 +16,11 @@ vi.mock('../hooks/useTerminalSize.js', () => ({
 
 const useTerminalSizeMock = vi.mocked(useTerminalSize.useTerminalSize);
 
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.useRealTimers();
+});
+
 const renderWithWidth = (
   width: number,
   props: React.ComponentProps<typeof ContextSummaryDisplay>,
@@ -26,48 +31,68 @@ const renderWithWidth = (
 
 describe('<ContextSummaryDisplay />', () => {
   const baseProps = {
-    geminiMdFileCount: 1,
-    contextFileNames: ['GEMINI.md'],
-    mcpServers: { 'test-server': { command: 'test' } },
+    geminiMdFileCount: 0,
+    contextFileNames: [],
+    mcpServers: {},
     ideContext: {
       workspaceState: {
-        openFiles: [{ path: '/a/b/c', timestamp: Date.now() }],
+        openFiles: [],
       },
     },
     skillCount: 1,
   };
 
   it('should render on a single line on a wide screen', () => {
-    const { lastFrame, unmount } = renderWithWidth(120, baseProps);
-    const output = lastFrame()!;
-    expect(output).toContain(
-      '1 open file (ctrl+g to view) | 1 GEMINI.md file | 1 MCP server | 1 skill',
-    );
-    expect(output).not.toContain('Using:');
-    // Check for absence of newlines
-    expect(output.includes('\n')).toBe(false);
+    const props = {
+      ...baseProps,
+      geminiMdFileCount: 1,
+      contextFileNames: ['GEMINI.md'],
+      mcpServers: { 'test-server': { command: 'test' } },
+      ideContext: {
+        workspaceState: {
+          openFiles: [{ path: '/a/b/c', timestamp: Date.now() }],
+        },
+      },
+    };
+    const { lastFrame, unmount } = renderWithWidth(120, props);
+    expect(lastFrame()).toMatchSnapshot();
     unmount();
   });
 
   it('should render on multiple lines on a narrow screen', () => {
-    const { lastFrame, unmount } = renderWithWidth(60, baseProps);
-    const output = lastFrame()!;
-    const expectedLines = [
-      ' - 1 open file (ctrl+g to view)',
-      ' - 1 GEMINI.md file',
-      ' - 1 MCP server',
-      ' - 1 skill',
-    ];
-    const actualLines = output.split('\n');
-    expect(actualLines).toEqual(expectedLines);
+    const props = {
+      ...baseProps,
+      geminiMdFileCount: 1,
+      contextFileNames: ['GEMINI.md'],
+      mcpServers: { 'test-server': { command: 'test' } },
+      ideContext: {
+        workspaceState: {
+          openFiles: [{ path: '/a/b/c', timestamp: Date.now() }],
+        },
+      },
+    };
+    const { lastFrame, unmount } = renderWithWidth(60, props);
+    expect(lastFrame()).toMatchSnapshot();
     unmount();
   });
 
   it('should switch layout at the 80-column breakpoint', () => {
+    const props = {
+      ...baseProps,
+      geminiMdFileCount: 1,
+      contextFileNames: ['GEMINI.md'],
+      mcpServers: { 'test-server': { command: 'test' } },
+      ideContext: {
+        workspaceState: {
+          openFiles: [{ path: '/a/b/c', timestamp: Date.now() }],
+        },
+      },
+    };
+
     // At 80 columns, should be on one line
     const { lastFrame: wideFrame, unmount: unmountWide } = renderWithWidth(
       80,
-      baseProps,
+      props,
     );
     expect(wideFrame()!.includes('\n')).toBe(false);
     unmountWide();
@@ -75,13 +100,12 @@ describe('<ContextSummaryDisplay />', () => {
     // At 79 columns, should be on multiple lines
     const { lastFrame: narrowFrame, unmount: unmountNarrow } = renderWithWidth(
       79,
-      baseProps,
+      props,
     );
     expect(narrowFrame()!.includes('\n')).toBe(true);
     expect(narrowFrame()!.split('\n').length).toBe(4);
     unmountNarrow();
   });
-
   it('should not render empty parts', () => {
     const props = {
       ...baseProps,
@@ -89,11 +113,14 @@ describe('<ContextSummaryDisplay />', () => {
       contextFileNames: [],
       mcpServers: {},
       skillCount: 0,
+      ideContext: {
+        workspaceState: {
+          openFiles: [{ path: '/a/b/c', timestamp: Date.now() }],
+        },
+      },
     };
     const { lastFrame, unmount } = renderWithWidth(60, props);
-    const expectedLines = [' - 1 open file (ctrl+g to view)'];
-    const actualLines = lastFrame()!.split('\n');
-    expect(actualLines).toEqual(expectedLines);
+    expect(lastFrame()).toMatchSnapshot();
     unmount();
   });
 });