Improve test coverage for cli/src/ui/components (#13598)

Author: megha1188

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

@@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { render } from '../../test-utils/render.js';
+import { AboutBox } from './AboutBox.js';
+import { describe, it, expect, vi } from 'vitest';
+
+// Mock GIT_COMMIT_INFO
+vi.mock('../../generated/git-commit.js', () => ({
+  GIT_COMMIT_INFO: 'mock-commit-hash',
+}));
+
+describe('AboutBox', () => {
+  const defaultProps = {
+    cliVersion: '1.0.0',
+    osVersion: 'macOS',
+    sandboxEnv: 'default',
+    modelVersion: 'gemini-pro',
+    selectedAuthType: 'oauth',
+    gcpProject: '',
+    ideClient: '',
+  };
+
+  it('renders with required props', () => {
+    const { lastFrame } = render(<AboutBox {...defaultProps} />);
+    const output = lastFrame();
+    expect(output).toContain('About Gemini CLI');
+    expect(output).toContain('1.0.0');
+    expect(output).toContain('mock-commit-hash');
+    expect(output).toContain('gemini-pro');
+    expect(output).toContain('default');
+    expect(output).toContain('macOS');
+    expect(output).toContain('OAuth');
+  });
+
+  it.each([
+    ['userEmail', '[email protected]', 'User Email'],
+    ['gcpProject', 'my-project', 'GCP Project'],
+    ['ideClient', 'vscode', 'IDE Client'],
+  ])('renders optional prop %s', (prop, value, label) => {
+    const props = { ...defaultProps, [prop]: value };
+    const { lastFrame } = render(<AboutBox {...props} />);
+    const output = lastFrame();
+    expect(output).toContain(label);
+    expect(output).toContain(value);
+  });
+
+  it('renders Auth Method correctly when not oauth', () => {
+    const props = { ...defaultProps, selectedAuthType: 'api-key' };
+    const { lastFrame } = render(<AboutBox {...props} />);
+    const output = lastFrame();
+    expect(output).toContain('api-key');
+  });
+});

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

@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { render } from '../../test-utils/render.js';
+import { AutoAcceptIndicator } from './AutoAcceptIndicator.js';
+import { describe, it, expect } from 'vitest';
+import { ApprovalMode } from '@google/gemini-cli-core';
+
+describe('AutoAcceptIndicator', () => {
+  it('renders correctly for AUTO_EDIT mode', () => {
+    const { lastFrame } = render(
+      <AutoAcceptIndicator approvalMode={ApprovalMode.AUTO_EDIT} />,
+    );
+    const output = lastFrame();
+    expect(output).toContain('accepting edits');
+    expect(output).toContain('(shift + tab to toggle)');
+  });
+
+  it('renders correctly for YOLO mode', () => {
+    const { lastFrame } = render(
+      <AutoAcceptIndicator approvalMode={ApprovalMode.YOLO} />,
+    );
+    const output = lastFrame();
+    expect(output).toContain('YOLO mode');
+    expect(output).toContain('(ctrl + y to toggle)');
+  });
+
+  it('renders nothing for DEFAULT mode', () => {
+    const { lastFrame } = render(
+      <AutoAcceptIndicator approvalMode={ApprovalMode.DEFAULT} />,
+    );
+    const output = lastFrame();
+    expect(output).not.toContain('accepting edits');
+    expect(output).not.toContain('YOLO mode');
+  });
+});

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

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { render } from '../../test-utils/render.js';
+import { Banner } from './Banner.js';
+import { describe, it, expect } from 'vitest';
+
+describe('Banner', () => {
+  it.each([
+    ['warning mode', true, 'Warning Message'],
+    ['info mode', false, 'Info Message'],
+  ])('renders in %s', (_, isWarning, text) => {
+    const { lastFrame } = render(
+      <Banner bannerText={text} isWarning={isWarning} width={80} />,
+    );
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('handles newlines in text', () => {
+    const text = 'Line 1\\nLine 2';
+    const { lastFrame } = render(
+      <Banner bannerText={text} isWarning={false} width={80} />,
+    );
+    expect(lastFrame()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,117 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { act } from 'react';
+import { render } from '../../test-utils/render.js';
+import { ConfigInitDisplay } from './ConfigInitDisplay.js';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { AppEvent } from '../../utils/events.js';
+import { MCPServerStatus, type McpClient } from '@google/gemini-cli-core';
+import { Text } from 'ink';
+
+// Mock GeminiSpinner
+vi.mock('./GeminiRespondingSpinner.js', () => ({
+  GeminiSpinner: () => <Text>Spinner</Text>,
+}));
+
+// Mock appEvents
+const { mockOn, mockOff, mockEmit } = vi.hoisted(() => ({
+  mockOn: vi.fn(),
+  mockOff: vi.fn(),
+  mockEmit: vi.fn(),
+}));
+
+vi.mock('../../utils/events.js', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('../../utils/events.js')>();
+  return {
+    ...actual,
+    appEvents: {
+      on: mockOn,
+      off: mockOff,
+      emit: mockEmit,
+    },
+  };
+});
+
+describe('ConfigInitDisplay', () => {
+  beforeEach(() => {
+    mockOn.mockClear();
+    mockOff.mockClear();
+    mockEmit.mockClear();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('renders initial state', () => {
+    const { lastFrame } = render(<ConfigInitDisplay />);
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('updates message on McpClientUpdate event', async () => {
+    let listener: ((clients?: Map<string, McpClient>) => void) | undefined;
+    mockOn.mockImplementation((event, fn) => {
+      if (event === AppEvent.McpClientUpdate) {
+        listener = fn;
+      }
+    });
+
+    const { lastFrame } = render(<ConfigInitDisplay />);
+
+    // Wait for listener to be registered
+    await vi.waitFor(() => {
+      if (!listener) throw new Error('Listener not registered yet');
+    });
+
+    const mockClient1 = {
+      getStatus: () => MCPServerStatus.CONNECTED,
+    } as McpClient;
+    const mockClient2 = {
+      getStatus: () => MCPServerStatus.CONNECTING,
+    } as McpClient;
+    const clients = new Map<string, McpClient>([
+      ['server1', mockClient1],
+      ['server2', mockClient2],
+    ]);
+
+    // Trigger the listener manually since we mocked the event emitter
+    act(() => {
+      listener!(clients);
+    });
+
+    // Wait for the UI to update
+    await vi.waitFor(() => {
+      expect(lastFrame()).toMatchSnapshot();
+    });
+  });
+
+  it('handles empty clients map', async () => {
+    let listener: ((clients?: Map<string, McpClient>) => void) | undefined;
+    mockOn.mockImplementation((event, fn) => {
+      if (event === AppEvent.McpClientUpdate) {
+        listener = fn;
+      }
+    });
+
+    const { lastFrame } = render(<ConfigInitDisplay />);
+
+    await vi.waitFor(() => {
+      if (!listener) throw new Error('Listener not registered yet');
+    });
+
+    if (listener) {
+      const safeListener = listener;
+      act(() => {
+        safeListener(new Map());
+      });
+    }
+
+    await vi.waitFor(() => {
+      expect(lastFrame()).toMatchSnapshot();
+    });
+  });
+});

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

@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { render } from '../../test-utils/render.js';
+import { ConsoleSummaryDisplay } from './ConsoleSummaryDisplay.js';
+import { describe, it, expect } from 'vitest';
+
+describe('ConsoleSummaryDisplay', () => {
+  it('renders nothing when errorCount is 0', () => {
+    const { lastFrame } = render(<ConsoleSummaryDisplay errorCount={0} />);
+    expect(lastFrame()).toBe('');
+  });
+
+  it.each([
+    [1, '1 error'],
+    [5, '5 errors'],
+  ])('renders correct message for %i errors', (count, expectedText) => {
+    const { lastFrame } = render(<ConsoleSummaryDisplay errorCount={count} />);
+    const output = lastFrame();
+    expect(output).toContain(expectedText);
+    expect(output).toContain('✖');
+    expect(output).toContain('(F12 for details)');
+  });
+});

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

@@ -0,0 +1,61 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { render } from '../../test-utils/render.js';
+import { ContextUsageDisplay } from './ContextUsageDisplay.js';
+import { describe, it, expect, vi } from 'vitest';
+
+vi.mock('@google/gemini-cli-core', () => ({
+  tokenLimit: () => 10000,
+}));
+
+vi.mock('../../config/settings.js', () => ({
+  DEFAULT_MODEL_CONFIGS: {},
+  LoadedSettings: class {
+    constructor() {
+      // this.merged = {};
+    }
+  },
+}));
+
+describe('ContextUsageDisplay', () => {
+  it('renders correct percentage left', () => {
+    const { lastFrame } = render(
+      <ContextUsageDisplay
+        promptTokenCount={5000}
+        model="gemini-pro"
+        terminalWidth={120}
+      />,
+    );
+    const output = lastFrame();
+    expect(output).toContain('50% context left');
+  });
+
+  it('renders short label when terminal width is small', () => {
+    const { lastFrame } = render(
+      <ContextUsageDisplay
+        promptTokenCount={2000}
+        model="gemini-pro"
+        terminalWidth={80}
+      />,
+    );
+    const output = lastFrame();
+    expect(output).toContain('80%');
+    expect(output).not.toContain('context left');
+  });
+
+  it('renders 0% when full', () => {
+    const { lastFrame } = render(
+      <ContextUsageDisplay
+        promptTokenCount={10000}
+        model="gemini-pro"
+        terminalWidth={120}
+      />,
+    );
+    const output = lastFrame();
+    expect(output).toContain('0% context left');
+  });
+});

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

@@ -0,0 +1,37 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { render } from '../../test-utils/render.js';
+import { CopyModeWarning } from './CopyModeWarning.js';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { useUIState, type UIState } from '../contexts/UIStateContext.js';
+
+vi.mock('../contexts/UIStateContext.js');
+
+describe('CopyModeWarning', () => {
+  const mockUseUIState = vi.mocked(useUIState);
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders nothing when copy mode is disabled', () => {
+    mockUseUIState.mockReturnValue({
+      copyModeEnabled: false,
+    } as unknown as UIState);
+    const { lastFrame } = render(<CopyModeWarning />);
+    expect(lastFrame()).toBe('');
+  });
+
+  it('renders warning when copy mode is enabled', () => {
+    mockUseUIState.mockReturnValue({
+      copyModeEnabled: true,
+    } as unknown as UIState);
+    const { lastFrame } = render(<CopyModeWarning />);
+    expect(lastFrame()).toContain('In Copy Mode');
+    expect(lastFrame()).toContain('Press any key to exit');
+  });
+});