MediaMetz/gemini-cli
1
0
Fork 0
mirror of https://github.com/google-gemini/gemini-cli.git synced 2026-04-20 18:14:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

feat(cli): implement logical component tracking for visual journey testing

Browse Source 
- Enhance AppRig and matchers to support robust component discovery via node attributes and styles

- Update SuggestionsDisplay to support logical component tagging

- Fix act() warnings and stability issues in SuggestionsDisplay tests

- Refresh snapshots and rebase on origin/main
This commit is contained in:
Taylor Mullen
2026-03-31 16:46:46 -07:00
parent 800aea6cfb
commit 05bf04c852
11 changed files with 93 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/cli/package.json
+1 -1
View File
@@ -49,7 +49,7 @@
"fzf": "^0.5.2",
"glob": "^12.0.0",
"highlight.js": "^11.11.1",
"ink": "npm:@jrichman/ink@6.5.0",
"ink": "npm:@jrichman/ink@6.6.2",
"ink-gradient": "^3.0.0",
"ink-spinner": "^5.0.0",
"latest-version": "^9.0.0",
packages/cli/src/test-utils/AppRig.tsx
+11 -3
View File
@@ -732,8 +732,16 @@ export class AppRig {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const find = (node: any): boolean => {
if (node.internal_componentName === componentName) return true;
if (node.internal_testId === componentName) return true;
if (
node.internal_componentName === componentName ||
node.internal_testId === componentName ||
node.attributes?.internal_testId === componentName ||
node.attributes?.internal_componentName === componentName ||
node.style?.internal_testId === componentName ||
node.style?.internal_componentName === componentName
) {
return true;
}
if (node.childNodes) {
for (const child of node.childNodes) {
if (child.nodeName !== '#text' && find(child)) return true;
@@ -746,7 +754,7 @@ export class AppRig {
},
{
timeout,
message: `Timed out waiting for component: ${componentName}`,
message: `Timed out waiting for component: ${componentName}\nLast frame:\n${this.lastFrame}`,
},
);
}
packages/cli/src/test-utils/customMatchers.ts
+16 -6
View File
@@ -34,7 +34,7 @@ function findInTree(
): DOMNode | undefined {
if (predicate(node)) return node;
if (node.nodeName !== '#text') {
for (const child of (node as _DOMElement).childNodes) {
for (const child of (node).childNodes) {
const found = findInTree(child, predicate);
if (found) return found;
}
@@ -66,7 +66,11 @@ export function toVisuallyContain(
const el = node as any;
const match =
el.internal_componentName === componentName ||
el.internal_testId === componentName;
el.internal_testId === componentName ||
el.attributes?.internal_componentName === componentName ||
el.attributes?.internal_testId === componentName ||
el.style?.internal_componentName === componentName ||
el.style?.internal_testId === componentName;
return match;
})
: false;
@@ -107,11 +111,17 @@ export async function toMatchSvgSnapshot(
let textContent: string;
if (renderInstance.lastFrameRaw) {
textContent = renderInstance.lastFrameRaw({
allowEmpty: options?.allowEmpty,
});
textContent =
typeof renderInstance.lastFrameRaw === 'function'
? renderInstance.lastFrameRaw({
allowEmpty: options?.allowEmpty,
})
: renderInstance.lastFrameRaw;
} else if (renderInstance.lastFrame) {
textContent = renderInstance.lastFrame({ allowEmpty: options?.allowEmpty });
textContent =
typeof renderInstance.lastFrame === 'function'
? renderInstance.lastFrame({ allowEmpty: options?.allowEmpty })
: renderInstance.lastFrame;
} else {
throw new Error(
'toMatchSvgSnapshot requires a renderInstance with either lastFrameRaw or lastFrame',
packages/cli/src/test-utils/svg.ts
+8
View File
@@ -221,6 +221,14 @@ export const generateSvgForTerminal = (
if (node.internal_componentName)
components.add(node.internal_componentName);
if (node.internal_testId) components.add(node.internal_testId);
if (node.attributes?.internal_componentName)
components.add(node.attributes.internal_componentName);
if (node.attributes?.internal_testId)
components.add(node.attributes.internal_testId);
if (node.style?.internal_componentName)
components.add(node.style.internal_componentName);
if (node.style?.internal_testId)
components.add(node.style.internal_testId);
if (node.childNodes) {
for (const child of node.childNodes) collect(child);
}
packages/cli/src/ui/components/SuggestionsDisplay.tsx
+7 -1
View File
@@ -80,7 +80,13 @@ export function SuggestionsDisplay({
mode === 'slash' ? Math.min(maxLabelLength, Math.floor(width * 0.5)) : 0;
return (
<Box flexDirection="column" paddingX={1} width={width}>
<Box
flexDirection="column"
paddingX={1}
width={width}
// @ts-expect-error - internal_testId is used for testing component presence
internal_testId={SuggestionsDisplay.name}
>
{scrollOffset > 0 && <Text color={theme.text.primary}>▲</Text>}
{visibleSuggestions.map((suggestion, index) => {
packages/cli/src/ui/components/SuggestionsDisplay.ux.test.tsx
+3 -1
View File
@@ -26,8 +26,10 @@ describe('SuggestionsDisplay UX Journey', () => {
);
rig = new AppRig({ fakeResponsesPath });
await rig.initialize();
rig.render();
await rig.render();
await rig.waitForIdle();
// Allow async command loading to settle
await new Promise((resolve) => setTimeout(resolve, 500));
});
afterEach(async () => {
packages/cli/src/ui/components/__snapshots__/SuggestionsDisplay-ux-suggestions-opened.snap.svg
+23 -23
View File
@@ -4,38 +4,38 @@
</style>
<rect width="1100" height="581" fill="#000000" />
<g transform="translate(10, 10)">
<text x="18" y="19" fill="#4796e4" textLength="9" lengthAdjust="spacingAndGlyphs">▝</text>
<text x="27" y="19" fill="#6688d9" textLength="9" lengthAdjust="spacingAndGlyphs">▜</text>
<text x="36" y="19" fill="#847ace" textLength="9" lengthAdjust="spacingAndGlyphs">▄</text>
<text x="63" y="19" fill="#ffffff" textLength="1017" lengthAdjust="spacingAndGlyphs"> Gemini CLI vtest-version </text>
<text x="36" y="36" fill="#847ace" textLength="9" lengthAdjust="spacingAndGlyphs">▝</text>
<text x="45" y="36" fill="#a471a7" textLength="9" lengthAdjust="spacingAndGlyphs">▜</text>
<text x="54" y="36" fill="#c3677f" textLength="9" lengthAdjust="spacingAndGlyphs">▄</text>
<text x="27" y="53" fill="#6688d9" textLength="9" lengthAdjust="spacingAndGlyphs">▗</text>
<text x="36" y="53" fill="#847ace" textLength="9" lengthAdjust="spacingAndGlyphs">▟</text>
<text x="45" y="53" fill="#a471a7" textLength="9" lengthAdjust="spacingAndGlyphs">▀</text>
<text x="63" y="53" fill="#ffffff" textLength="1017" lengthAdjust="spacingAndGlyphs"> Authenticated with gemini-api-key /auth </text>
<text x="18" y="70" fill="#4796e4" textLength="9" lengthAdjust="spacingAndGlyphs">▝</text>
<text x="27" y="70" fill="#6688d9" textLength="9" lengthAdjust="spacingAndGlyphs">▀</text>
<text x="9" y="19" fill="#4796e4" textLength="9" lengthAdjust="spacingAndGlyphs">▝</text>
<text x="18" y="19" fill="#6688d9" textLength="9" lengthAdjust="spacingAndGlyphs">▜</text>
<text x="27" y="19" fill="#847ace" textLength="9" lengthAdjust="spacingAndGlyphs">▄</text>
<text x="54" y="19" fill="#ffffff" textLength="1026" lengthAdjust="spacingAndGlyphs"> Gemini CLI vtest-version </text>
<text x="27" y="36" fill="#847ace" textLength="9" lengthAdjust="spacingAndGlyphs">▝</text>
<text x="36" y="36" fill="#a471a7" textLength="9" lengthAdjust="spacingAndGlyphs">▜</text>
<text x="45" y="36" fill="#c3677f" textLength="9" lengthAdjust="spacingAndGlyphs">▄</text>
<text x="18" y="53" fill="#6688d9" textLength="9" lengthAdjust="spacingAndGlyphs">▗</text>
<text x="27" y="53" fill="#847ace" textLength="9" lengthAdjust="spacingAndGlyphs">▟</text>
<text x="36" y="53" fill="#a471a7" textLength="9" lengthAdjust="spacingAndGlyphs">▀</text>
<text x="54" y="53" fill="#ffffff" textLength="1026" lengthAdjust="spacingAndGlyphs"> Authenticated with gemini-api-key /auth </text>
<text x="9" y="70" fill="#4796e4" textLength="9" lengthAdjust="spacingAndGlyphs">▝</text>
<text x="18" y="70" fill="#6688d9" textLength="9" lengthAdjust="spacingAndGlyphs">▀</text>
<text x="0" y="121" fill="#ffffff" textLength="1080" lengthAdjust="spacingAndGlyphs">Tips for getting started: </text>
<text x="0" y="138" fill="#ffffff" textLength="1080" lengthAdjust="spacingAndGlyphs">1. Create GEMINI.md files to customize your interactions </text>
<text x="0" y="155" fill="#ffffff" textLength="1080" lengthAdjust="spacingAndGlyphs">2. /help for more information </text>
<text x="0" y="172" fill="#ffffff" textLength="1080" lengthAdjust="spacingAndGlyphs">3. Ask coding questions, edit code or run commands </text>
<text x="0" y="189" fill="#ffffff" textLength="1080" lengthAdjust="spacingAndGlyphs">4. Be specific for the best results </text>
<text x="0" y="240" fill="#ffffff" textLength="1080" lengthAdjust="spacingAndGlyphs">──────────────────────────────────────────────────────────── </text>
<text x="0" y="257" fill="#ffffff" textLength="1080" lengthAdjust="spacingAndGlyphs"> Shift+Tab to accept edits </text>
<text x="0" y="257" fill="#ffffff" textLength="1080" lengthAdjust="spacingAndGlyphs">──────────────────────────────────────────────────────────── </text>
<text x="0" y="274" fill="#ffffff" textLength="1080" lengthAdjust="spacingAndGlyphs"> Shift+Tab to accept edits </text>
<text x="0" y="308" fill="#ffffff" textLength="1080" lengthAdjust="spacingAndGlyphs">▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ </text>
<text x="0" y="325" fill="#ffffff" textLength="36" lengthAdjust="spacingAndGlyphs"> &gt; /</text>
<rect x="36" y="323" width="9" height="17" fill="#ffffff" />
<text x="0" y="342" fill="#ffffff" textLength="1080" lengthAdjust="spacingAndGlyphs">▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ </text>
<text x="0" y="359" fill="#ffffff" textLength="1080" lengthAdjust="spacingAndGlyphs"> about Show version info </text>
<text x="0" y="376" fill="#ffffff" textLength="1080" lengthAdjust="spacingAndGlyphs"> agents Manage agents </text>
<text x="0" y="393" fill="#ffffff" textLength="1080" lengthAdjust="spacingAndGlyphs"> auth Manage authentication </text>
<text x="0" y="410" fill="#ffffff" textLength="1080" lengthAdjust="spacingAndGlyphs"> bug Submit a bug report </text>
<text x="0" y="427" fill="#ffffff" textLength="1080" lengthAdjust="spacingAndGlyphs"> chat Browse auto-saved conversations and ma… </text>
<text x="0" y="444" fill="#ffffff" textLength="1080" lengthAdjust="spacingAndGlyphs"> clear Clear the screen and conversation hist… </text>
<text x="0" y="461" fill="#ffffff" textLength="1080" lengthAdjust="spacingAndGlyphs"> commands Manage custom slash commands. Usage: /… </text>
<text x="0" y="478" fill="#ffffff" textLength="1080" lengthAdjust="spacingAndGlyphs"> compress Compresses the context by replacing it… </text>
<text x="0" y="359" fill="#ffffff" textLength="1080" lengthAdjust="spacingAndGlyphs"> compress Compresses the context by replacing it… </text>
<text x="0" y="376" fill="#ffffff" textLength="1080" lengthAdjust="spacingAndGlyphs"> directory Manage workspace directories </text>
<text x="0" y="393" fill="#ffffff" textLength="1080" lengthAdjust="spacingAndGlyphs"> footer Configure which items appear in the fo… </text>
<text x="0" y="410" fill="#ffffff" textLength="1080" lengthAdjust="spacingAndGlyphs"> quit Exit the cli </text>
<text x="0" y="427" fill="#ffffff" textLength="1080" lengthAdjust="spacingAndGlyphs"> stats Check session stats. Usage: /stats [se… </text>
<text x="0" y="444" fill="#ffffff" textLength="1080" lengthAdjust="spacingAndGlyphs"> tasks Toggle background tasks view </text>
<text x="0" y="461" fill="#ffffff" textLength="1080" lengthAdjust="spacingAndGlyphs"> about Show version info </text>
<text x="0" y="478" fill="#ffffff" textLength="1080" lengthAdjust="spacingAndGlyphs"> agents Manage agents </text>
<text x="0" y="495" fill="#ffffff" textLength="1080" lengthAdjust="spacingAndGlyphs"> ▼ </text>
<text x="0" y="512" fill="#ffffff" textLength="1080" lengthAdjust="spacingAndGlyphs"> (1/38) </text>
<text x="0" y="529" fill="#ffffff" textLength="1080" lengthAdjust="spacingAndGlyphs"> workspace (/directory) sandbox /model </text>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.8 KiB

After

Width:  |  Height:  |  Size: 6.8 KiB

packages/cli/src/ui/components/__snapshots__/SuggestionsDisplay.ux.test.tsx.snap
+11 -11
View File
@@ -2,10 +2,10 @@
exports[`SuggestionsDisplay UX Journey > should visually show the suggestions display when / is typed 1`] = `
"
▝▜▄ Gemini CLI vtest-version
▝▜▄
▗▟▀ Authenticated with gemini-api-key /auth
▝▀
▝▜▄ Gemini CLI vtest-version
▝▜▄
▗▟▀ Authenticated with gemini-api-key /auth
▝▀
Tips for getting started:
@@ -15,21 +15,21 @@ Tips for getting started:
4. Be specific for the best results
────────────────────────────────────────────────────────────
Shift+Tab to accept edits
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
> /
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
compress Compresses the context by replacing it…
directory Manage workspace directories
footer Configure which items appear in the fo…
quit Exit the cli
stats Check session stats. Usage: /stats [se…
tasks Toggle background tasks view
about Show version info
agents Manage agents
auth Manage authentication
bug Submit a bug report
chat Browse auto-saved conversations and ma…
clear Clear the screen and conversation hist…
commands Manage custom slash commands. Usage: /…
compress Compresses the context by replacing it…
▼
(1/38)
workspace (/directory) sandbox /model
packages/cli/src/ui/hooks/useReverseSearchCompletion.tsx
+9 -4
View File
@@ -9,13 +9,14 @@ import { useCompletion } from './useCompletion.js';
import type { TextBuffer } from '../components/shared/text-buffer.js';
import type { Suggestion } from '../components/SuggestionsDisplay.js';
function useDebouncedValue<T>(value: T, delay = 200): T {
function useDebouncedValue<T>(value: T, delay = 200, enabled = true): T {
const [debounced, setDebounced] = useState(value);
useEffect(() => {
if (!enabled) return;
const handle = setTimeout(() => setDebounced(value), delay);
return () => clearTimeout(handle);
}, [value, delay]);
return debounced;
}, [value, delay, enabled]);
return enabled ? debounced : value;
}
export interface UseReverseSearchCompletionReturn {
@@ -48,7 +49,11 @@ export function useReverseSearchCompletion(
setVisibleStartIndex,
} = useCompletion();
const debouncedQuery = useDebouncedValue(buffer.text, 100);
const debouncedQuery = useDebouncedValue(
buffer.text,
100,
reverseSearchActive,
);
// incremental search
const prevQueryRef = useRef<string>('');
packages/cli/test-setup.ts
+3 -1
View File
@@ -72,7 +72,9 @@ beforeEach(() => {
if (
relevantStack.includes('OverflowContext.tsx') ||
relevantStack.includes('useTimedMessage.ts')
relevantStack.includes('useTimedMessage.ts') ||
relevantStack.includes('useSlashCompletion.ts') ||
relevantStack.includes('slashCommandProcessor.ts')
) {
return;
}