Disable tips after 10 runs (#17101)

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

@@ -4,31 +4,20 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { renderWithProviders } from '../../test-utils/render.js';
+import {
+  renderWithProviders,
+  persistentStateMock,
+} from '../../test-utils/render.js';
 import { AppHeader } from './AppHeader.js';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { describe, it, expect, vi } from 'vitest';
 import { makeFakeConfig } from '@google/gemini-cli-core';
 import crypto from 'node:crypto';
 
-const persistentStateMock = vi.hoisted(() => ({
-  get: vi.fn(),
-  set: vi.fn(),
-}));
-
-vi.mock('../../utils/persistentState.js', () => ({
-  persistentState: persistentStateMock,
-}));
-
 vi.mock('../utils/terminalSetup.js', () => ({
   getTerminalProgram: () => null,
 }));
 
 describe('<AppHeader />', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    persistentStateMock.get.mockReturnValue({});
-  });
-
   it('should render the banner with default text', () => {
     const mockConfig = makeFakeConfig();
     const uiState = {
@@ -42,7 +31,10 @@ describe('<AppHeader />', () => {
 
     const { lastFrame, unmount } = renderWithProviders(
       <AppHeader version="1.0.0" />,
-      { config: mockConfig, uiState },
+      {
+        config: mockConfig,
+        uiState,
+      },
     );
 
     expect(lastFrame()).toContain('This is the default banner');
@@ -63,7 +55,10 @@ describe('<AppHeader />', () => {
 
     const { lastFrame, unmount } = renderWithProviders(
       <AppHeader version="1.0.0" />,
-      { config: mockConfig, uiState },
+      {
+        config: mockConfig,
+        uiState,
+      },
     );
 
     expect(lastFrame()).toContain('There are capacity issues');
@@ -83,7 +78,10 @@ describe('<AppHeader />', () => {
 
     const { lastFrame, unmount } = renderWithProviders(
       <AppHeader version="1.0.0" />,
-      { config: mockConfig, uiState },
+      {
+        config: mockConfig,
+        uiState,
+      },
     );
 
     expect(lastFrame()).not.toContain('Banner');
@@ -104,7 +102,10 @@ describe('<AppHeader />', () => {
 
     const { lastFrame, unmount } = renderWithProviders(
       <AppHeader version="1.0.0" />,
-      { config: mockConfig, uiState },
+      {
+        config: mockConfig,
+        uiState,
+      },
     );
 
     expect(lastFrame()).toContain('This is the default banner');
@@ -124,7 +125,10 @@ describe('<AppHeader />', () => {
 
     const { lastFrame, unmount } = renderWithProviders(
       <AppHeader version="1.0.0" />,
-      { config: mockConfig, uiState },
+      {
+        config: mockConfig,
+        uiState,
+      },
     );
 
     expect(lastFrame()).not.toContain('This is the default banner');
@@ -133,7 +137,6 @@ describe('<AppHeader />', () => {
   });
 
   it('should not render the default banner if shown count is 5 or more', () => {
-    persistentStateMock.get.mockReturnValue(5);
     const mockConfig = makeFakeConfig();
     const uiState = {
       history: [],
@@ -143,9 +146,21 @@ describe('<AppHeader />', () => {
       },
     };
 
+    persistentStateMock.setData({
+      defaultBannerShownCount: {
+        [crypto
+          .createHash('sha256')
+          .update(uiState.bannerData.defaultText)
+          .digest('hex')]: 5,
+      },
+    });
+
     const { lastFrame, unmount } = renderWithProviders(
       <AppHeader version="1.0.0" />,
-      { config: mockConfig, uiState },
+      {
+        config: mockConfig,
+        uiState,
+      },
     );
 
     expect(lastFrame()).not.toContain('This is the default banner');
@@ -154,7 +169,6 @@ describe('<AppHeader />', () => {
   });
 
   it('should increment the version count when default banner is displayed', () => {
-    persistentStateMock.get.mockReturnValue({});
     const mockConfig = makeFakeConfig();
     const uiState = {
       history: [],
@@ -164,6 +178,10 @@ describe('<AppHeader />', () => {
       },
     };
 
+    // Set tipsShown to 10 or more to prevent Tips from incrementing its count
+    // and interfering with the expected persistentState.set call.
+    persistentStateMock.setData({ tipsShown: 10 });
+
     const { unmount } = renderWithProviders(<AppHeader version="1.0.0" />, {
       config: mockConfig,
       uiState,
@@ -194,10 +212,87 @@ describe('<AppHeader />', () => {
 
     const { lastFrame, unmount } = renderWithProviders(
       <AppHeader version="1.0.0" />,
-      { config: mockConfig, uiState },
+      {
+        config: mockConfig,
+        uiState,
+      },
     );
 
     expect(lastFrame()).not.toContain('First line\\nSecond line');
     unmount();
   });
+
+  it('should render Tips when tipsShown is less than 10', () => {
+    const mockConfig = makeFakeConfig();
+    const uiState = {
+      history: [],
+      bannerData: {
+        defaultText: 'First line\\nSecond line',
+        warningText: '',
+      },
+      bannerVisible: true,
+    };
+
+    persistentStateMock.setData({ tipsShown: 5 });
+
+    const { lastFrame, unmount } = renderWithProviders(
+      <AppHeader version="1.0.0" />,
+      {
+        config: mockConfig,
+        uiState,
+      },
+    );
+
+    expect(lastFrame()).toContain('Tips');
+    expect(persistentStateMock.set).toHaveBeenCalledWith('tipsShown', 6);
+    unmount();
+  });
+
+  it('should NOT render Tips when tipsShown is 10 or more', () => {
+    const mockConfig = makeFakeConfig();
+
+    persistentStateMock.setData({ tipsShown: 10 });
+
+    const { lastFrame, unmount } = renderWithProviders(
+      <AppHeader version="1.0.0" />,
+      {
+        config: mockConfig,
+      },
+    );
+
+    expect(lastFrame()).not.toContain('Tips');
+    unmount();
+  });
+
+  it('should show tips until they have been shown 10 times (persistence flow)', () => {
+    persistentStateMock.setData({ tipsShown: 9 });
+
+    const mockConfig = makeFakeConfig();
+    const uiState = {
+      history: [],
+      bannerData: {
+        defaultText: 'First line\\nSecond line',
+        warningText: '',
+      },
+      bannerVisible: true,
+    };
+
+    // First session
+    const session1 = renderWithProviders(<AppHeader version="1.0.0" />, {
+      config: mockConfig,
+      uiState,
+    });
+
+    expect(session1.lastFrame()).toContain('Tips');
+    expect(persistentStateMock.get('tipsShown')).toBe(10);
+    session1.unmount();
+
+    // Second session - state is persisted in the fake
+    const session2 = renderWithProviders(<AppHeader version="1.0.0" />, {
+      config: mockConfig,
+    });
+
+    expect(session2.lastFrame()).not.toContain('Tips');
+    session2.unmount();
+  });
 });