Feature/quota visibility 16795 (#18203)

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

@@ -1,10 +1,10 @@
 /**
  * @license
- * Copyright 2025 Google LLC
+ * Copyright 2026 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { renderWithProviders } from '../../test-utils/render.js';
 import { createMockSettings } from '../../test-utils/settings.js';
 import { Footer } from './Footer.js';
@@ -131,6 +131,69 @@ describe('<Footer />', () => {
     expect(lastFrame()).toMatch(/\(\d+% context left\)/);
   });
 
+  it('displays the usage indicator when usage is low', () => {
+    const { lastFrame } = renderWithProviders(<Footer />, {
+      width: 120,
+      uiState: {
+        sessionStats: mockSessionStats,
+        quota: {
+          userTier: undefined,
+          stats: {
+            remaining: 15,
+            limit: 100,
+            resetTime: undefined,
+          },
+          proQuotaRequest: null,
+          validationRequest: null,
+        },
+      },
+    });
+    expect(lastFrame()).toContain('15%');
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('hides the usage indicator when usage is not near limit', () => {
+    const { lastFrame } = renderWithProviders(<Footer />, {
+      width: 120,
+      uiState: {
+        sessionStats: mockSessionStats,
+        quota: {
+          userTier: undefined,
+          stats: {
+            remaining: 85,
+            limit: 100,
+            resetTime: undefined,
+          },
+          proQuotaRequest: null,
+          validationRequest: null,
+        },
+      },
+    });
+    expect(lastFrame()).not.toContain('Usage remaining');
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
+  it('displays "Limit reached" message when remaining is 0', () => {
+    const { lastFrame } = renderWithProviders(<Footer />, {
+      width: 120,
+      uiState: {
+        sessionStats: mockSessionStats,
+        quota: {
+          userTier: undefined,
+          stats: {
+            remaining: 0,
+            limit: 100,
+            resetTime: undefined,
+          },
+          proQuotaRequest: null,
+          validationRequest: null,
+        },
+      },
+    });
+    expect(lastFrame()).toContain('Limit reached');
+    expect(lastFrame()).toMatchSnapshot();
+  });
+
   it('displays the model name and abbreviated context percentage', () => {
     const { lastFrame } = renderWithProviders(<Footer />, {
       width: 99,