mirror of
https://github.com/google-gemini/gemini-cli.git
synced 2026-08-09 16:36:40 -07:00
feat(cli): implement logical component tracking for visual journey testing
- 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
@@ -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) => {
|
||||
|
||||
@@ -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 () => {
|
||||
|
||||
+23
-23
@@ -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"> > /</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>
|
||||
|
||||
|
Before Width: | Height: | Size: 6.8 KiB After Width: | Height: | Size: 6.8 KiB |
@@ -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
|
||||
|
||||
@@ -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>('');
|
||||
|
||||
Reference in New Issue
Block a user