MediaMetz/gemini-cli
1
0
Fork 0
mirror of https://github.com/google-gemini/gemini-cli.git synced 2026-03-19 18:40:57 -07:00
Code Issues Packages Projects Releases Wiki Activity

test(ui): update snapshots and address reviewer feedback

Browse Source
This commit is contained in:
Keith Guerin
2026-02-27 16:25:23 -08:00
parent e7a2b1864b
commit f576e5b55b
8 changed files with 123 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
packages/cli/src/ui/__snapshots__/App.test.tsx.snap
View File

@@ -9,10 +9,10 @@ exports[`App > Snapshots > renders default layout correctly 1`] = `
Tips for getting started:
1. /help for more information
2. Ask coding questions, edit code or run commands
3. Be specific for the best results
1. Create GEMINI.md files to customize your interactions
2. /help for more information
3. Ask coding questions, edit code or run commands
4. Be specific for the best results
@@ -54,9 +54,10 @@ Footer
Tips for getting started:
1. /help for more information
2. Ask coding questions, edit code or run commands
3. Be specific for the best results
1. Create GEMINI.md files to customize your interactions
2. /help for more information
3. Ask coding questions, edit code or run commands
4. Be specific for the best results
Composer
"
`;
@@ -113,9 +114,10 @@ exports[`App > should render ToolConfirmationQueue along with Composer when tool
Tips for getting started:
1. /help for more information
2. Ask coding questions, edit code or run commands
3. Be specific for the best results
1. Create GEMINI.md files to customize your interactions
2. /help for more information
3. Ask coding questions, edit code or run commands
4. Be specific for the best results
HistoryItemDisplay
╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
│ Action Required │
@@ -141,7 +143,6 @@ HistoryItemDisplay
Notifications
Composer
"

20
packages/cli/src/ui/components/Tips.test.tsx
View File

@@ -1,28 +1,28 @@
/**
* @license
* Copyright 2025 Google LLC
* Copyright 2026 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
import { render } from '../../test-utils/render.js';
import { Tips } from './Tips.js';
import { describe, it, expect } from 'vitest';
import { describe, it, expect, vi } from 'vitest';
import type { Config } from '@google/gemini-cli-core';
describe('Tips', () => {
it('renders correct tips', async () => {
const config = {} as unknown as Config;
it.each([
{ fileCount: 0, description: 'renders all tips including GEMINI.md tip' },
{ fileCount: 5, description: 'renders fewer tips when GEMINI.md exists' },
])('$description', async ({ fileCount }) => {
const config = {
getGeminiMdFileCount: vi.fn().mockReturnValue(fileCount),
} as unknown as Config;
const { lastFrame, waitUntilReady, unmount } = render(
<Tips config={config} />,
);
await waitUntilReady();
const output = lastFrame();
expect(output).toContain('1. /help for more information');
expect(output).toContain(
'2. Ask coding questions, edit code or run commands',
);
expect(output).toContain('3. Be specific for the best results');
expect(lastFrame()).toMatchSnapshot();
unmount();
});
});

40
packages/cli/src/ui/components/Tips.tsx
View File

@@ -1,6 +1,6 @@
/**
* @license
* Copyright 2025 Google LLC
* Copyright 2026 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
@@ -13,15 +13,29 @@ interface TipsProps {
config: Config;
}
export const Tips: React.FC<TipsProps> = () => (
<Box flexDirection="column" marginTop={1}>
<Text color={theme.text.primary}>Tips for getting started:</Text>
<Text color={theme.text.primary}>
1. <Text color={theme.text.secondary}>/help</Text> for more information
</Text>
<Text color={theme.text.primary}>
2. Ask coding questions, edit code or run commands
</Text>
<Text color={theme.text.primary}>3. Be specific for the best results</Text>
</Box>
);
export const Tips: React.FC<TipsProps> = ({ config }) => {
const geminiMdFileCount = config.getGeminiMdFileCount();
return (
<Box flexDirection="column" marginTop={1}>
<Text color={theme.text.primary}>Tips for getting started:</Text>
{geminiMdFileCount === 0 && (
<Text color={theme.text.primary}>
1. Create <Text bold>GEMINI.md</Text> files to customize your
interactions
</Text>
)}
<Text color={theme.text.primary}>
{geminiMdFileCount === 0 ? '2.' : '1.'}{' '}
<Text color={theme.text.secondary}>/help</Text> for more information
</Text>
<Text color={theme.text.primary}>
{geminiMdFileCount === 0 ? '3.' : '2.'} Ask coding questions, edit code
or run commands
</Text>
<Text color={theme.text.primary}>
{geminiMdFileCount === 0 ? '4.' : '3.'} Be specific for the best results
</Text>
</Box>
);
};

6
packages/cli/src/ui/components/UserIdentity.tsx
View File

@@ -1,6 +1,6 @@
/**
* @license
* Copyright 2025 Google LLC
* Copyright 2026 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
@@ -42,7 +42,7 @@ export const UserIdentity: React.FC<UserIdentityProps> = ({ config }) => {
<Box flexDirection="column">
{/* User Email /auth */}
<Box>
<Text color={theme.text.primary}>
<Text color={theme.text.primary} wrap="truncate-end">
{authType === AuthType.LOGIN_WITH_GOOGLE ? (
<Text>{email ?? 'Logged in with Google'}</Text>
) : (
@@ -54,7 +54,7 @@ export const UserIdentity: React.FC<UserIdentityProps> = ({ config }) => {
{/* Tier Name /upgrade */}
<Box>
<Text color={theme.text.primary}>
<Text color={theme.text.primary} wrap="truncate-end">
{tierName ?? 'Gemini Code Assist for individuals'}
</Text>
<Text color={theme.text.secondary}> /upgrade</Text>

42
packages/cli/src/ui/components/__snapshots__/AlternateBufferQuittingDisplay.test.tsx.snap
View File

@@ -9,9 +9,10 @@ exports[`AlternateBufferQuittingDisplay > renders with a tool awaiting confirmat
Tips for getting started:
1. /help for more information
2. Ask coding questions, edit code or run commands
3. Be specific for the best results
1. Create GEMINI.md files to customize your interactions
2. /help for more information
3. Ask coding questions, edit code or run commands
4. Be specific for the best results
Action Required (was prompted):
@@ -28,9 +29,10 @@ exports[`AlternateBufferQuittingDisplay > renders with active and pending tool m
Tips for getting started:
1. /help for more information
2. Ask coding questions, edit code or run commands
3. Be specific for the best results
1. Create GEMINI.md files to customize your interactions
2. /help for more information
3. Ask coding questions, edit code or run commands
4. Be specific for the best results
╭──────────────────────────────────────────────────────────────────────────╮
│ ✓ tool1 Description for tool 1 │
│ │
@@ -51,9 +53,10 @@ exports[`AlternateBufferQuittingDisplay > renders with empty history and no pend
Tips for getting started:
1. /help for more information
2. Ask coding questions, edit code or run commands
3. Be specific for the best results
1. Create GEMINI.md files to customize your interactions
2. /help for more information
3. Ask coding questions, edit code or run commands
4. Be specific for the best results
"
`;
@@ -66,9 +69,10 @@ exports[`AlternateBufferQuittingDisplay > renders with history but no pending it
Tips for getting started:
1. /help for more information
2. Ask coding questions, edit code or run commands
3. Be specific for the best results
1. Create GEMINI.md files to customize your interactions
2. /help for more information
3. Ask coding questions, edit code or run commands
4. Be specific for the best results
╭──────────────────────────────────────────────────────────────────────────╮
│ ✓ tool1 Description for tool 1 │
│ │
@@ -89,9 +93,10 @@ exports[`AlternateBufferQuittingDisplay > renders with pending items but no hist
Tips for getting started:
1. /help for more information
2. Ask coding questions, edit code or run commands
3. Be specific for the best results
1. Create GEMINI.md files to customize your interactions
2. /help for more information
3. Ask coding questions, edit code or run commands
4. Be specific for the best results
"
`;
@@ -104,9 +109,10 @@ exports[`AlternateBufferQuittingDisplay > renders with user and gemini messages
Tips for getting started:
1. /help for more information
2. Ask coding questions, edit code or run commands
3. Be specific for the best results
1. Create GEMINI.md files to customize your interactions
2. /help for more information
3. Ask coding questions, edit code or run commands
4. Be specific for the best results
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
> Hello Gemini
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄

28
packages/cli/src/ui/components/__snapshots__/AppHeader.test.tsx.snap
View File

@@ -9,9 +9,10 @@ exports[`<AppHeader /> > should not render the banner when no flags are set 1`]
Tips for getting started:
1. /help for more information
2. Ask coding questions, edit code or run commands
3. Be specific for the best results
1. Create GEMINI.md files to customize your interactions
2. /help for more information
3. Ask coding questions, edit code or run commands
4. Be specific for the best results
"
`;
@@ -24,9 +25,10 @@ exports[`<AppHeader /> > should not render the default banner if shown count is
Tips for getting started:
1. /help for more information
2. Ask coding questions, edit code or run commands
3. Be specific for the best results
1. Create GEMINI.md files to customize your interactions
2. /help for more information
3. Ask coding questions, edit code or run commands
4. Be specific for the best results
"
`;
@@ -42,9 +44,10 @@ exports[`<AppHeader /> > should render the banner with default text 1`] = `
╰──────────────────────────────────────────────────────────────────────────────────────────────────╯
Tips for getting started:
1. /help for more information
2. Ask coding questions, edit code or run commands
3. Be specific for the best results
1. Create GEMINI.md files to customize your interactions
2. /help for more information
3. Ask coding questions, edit code or run commands
4. Be specific for the best results
"
`;
@@ -60,8 +63,9 @@ exports[`<AppHeader /> > should render the banner with warning text 1`] = `
╰──────────────────────────────────────────────────────────────────────────────────────────────────╯
Tips for getting started:
1. /help for more information
2. Ask coding questions, edit code or run commands
3. Be specific for the best results
1. Create GEMINI.md files to customize your interactions
2. /help for more information
3. Ask coding questions, edit code or run commands
4. Be specific for the best results
"
`;

20
packages/cli/src/ui/components/__snapshots__/Tips.test.tsx.snap Normal file
View File

@@ -0,0 +1,20 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Tips > 'renders all tips including GEMINI.md …' 1`] = `
"
Tips for getting started:
1. Create GEMINI.md files to customize your interactions
2. /help for more information
3. Ask coding questions, edit code or run commands
4. Be specific for the best results
"
`;
exports[`Tips > 'renders fewer tips when GEMINI.md exi…' 1`] = `
"
Tips for getting started:
1. /help for more information
2. Ask coding questions, edit code or run commands
3. Be specific for the best results
"
`;

59
packages/cli/src/ui/components/shared/HorizontalLine.tsx
View File

@@ -8,57 +8,20 @@ import type React from 'react';
import { Box } from 'ink';
import { theme } from '../../semantic-colors.js';
export type LinePosition = 'top' | 'center' | 'bottom';
interface HorizontalLineProps {
color?: string;
width?: number | string;
position?: LinePosition;
}
const overlineStyle = {
top: '‾',
bottom: '',
left: '',
right: '',
topLeft: '',
topRight: '',
bottomLeft: '',
bottomRight: '',
};
const underlineStyle = {
top: '_',
bottom: '',
left: '',
right: '',
topLeft: '',
topRight: '',
bottomLeft: '',
bottomRight: '',
};
export const HorizontalLine: React.FC<HorizontalLineProps> = ({
color = theme.border.default,
width = '100%',
position = 'center',
}) => {
const borderStyle =
position === 'top'
? overlineStyle
: position === 'bottom'
? underlineStyle
: 'single';
return (
<Box
width={width}
borderStyle={borderStyle}
borderTop
borderBottom={false}
borderLeft={false}
borderRight={false}
borderColor={color}
/>
);
};
}) => (
<Box
width="100%"
borderStyle="single"
borderTop
borderBottom={false}
borderLeft={false}
borderRight={false}
borderColor={color}
/>
);