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

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

@@ -8,12 +8,19 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { appEvents, AppEvent } from '../../utils/events.js';
 import {
   profiler,
+  DebugProfiler,
   ACTION_TIMESTAMP_CAPACITY,
   FRAME_TIMESTAMP_CAPACITY,
 } from './DebugProfiler.js';
+import { render } from '../../test-utils/render.js';
+import { useUIState, type UIState } from '../contexts/UIStateContext.js';
 import { FixedDeque } from 'mnemonist';
 import { debugState } from '../debug.js';
 
+vi.mock('../contexts/UIStateContext.js', () => ({
+  useUIState: vi.fn(),
+}));
+
 describe('DebugProfiler', () => {
   beforeEach(() => {
     vi.useFakeTimers();
@@ -214,3 +221,49 @@ describe('DebugProfiler', () => {
     expect(profiler.totalIdleFrames).toBe(0);
   });
 });
+
+describe('DebugProfiler Component', () => {
+  beforeEach(() => {
+    // Reset the mock implementation before each test
+    vi.mocked(useUIState).mockReturnValue({
+      showDebugProfiler: false,
+      constrainHeight: false,
+    } as unknown as UIState);
+
+    // Mock process.stdin and stdout
+    // We need to be careful not to break the test runner's own output
+    // So we might want to skip mocking them if they are not strictly needed for the simple render test
+    // or mock them safely.
+    // For now, let's assume the component uses them in useEffect.
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('should return null when showDebugProfiler is false', () => {
+    vi.mocked(useUIState).mockReturnValue({
+      showDebugProfiler: false,
+      constrainHeight: false,
+    } as unknown as UIState);
+    const { lastFrame } = render(<DebugProfiler />);
+    expect(lastFrame()).toBe('');
+  });
+
+  it('should render stats when showDebugProfiler is true', () => {
+    vi.mocked(useUIState).mockReturnValue({
+      showDebugProfiler: true,
+      constrainHeight: false,
+    } as unknown as UIState);
+    profiler.numFrames = 10;
+    profiler.totalIdleFrames = 5;
+    profiler.totalFlickerFrames = 2;
+
+    const { lastFrame } = render(<DebugProfiler />);
+    const output = lastFrame();
+
+    expect(output).toContain('Renders: 10 (total)');
+    expect(output).toContain('5 (idle)');
+    expect(output).toContain('2 (flicker)');
+  });
+});