MediaMetz/gemini-cli
1
0
Fork 0
mirror of https://github.com/google-gemini/gemini-cli.git synced 2026-03-11 06:31:01 -07:00
Code Issues Packages Projects Releases Wiki Activity

test(ui): add SVG snapshots for BaseSelectionList and BaseSettingsDialog

Browse Source
This commit is contained in:
Mark McLaughlin
2026-03-06 16:13:36 -08:00
parent cb9cc88478
commit be1129aee5
8 changed files with 288 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/cli/src/ui/components/shared/BaseSelectionList.test.tsx
View File

@@ -126,13 +126,16 @@ describe('BaseSelectionList', () => {
});
it('should render the selection indicator (● or space) and layout', async () => {
const { lastFrame, unmount } = await renderComponent({}, 0);
const result = await renderComponent({}, 0);
const { lastFrame, unmount } = result;
const output = lastFrame();
// Use regex to assert the structure: Indicator + Whitespace + Number + Label
expect(output).toMatch(/●\s+1\.\s+Item A/);
expect(output).toMatch(/\s+2\.\s+Item B/);
expect(output).toMatch(/\s+3\.\s+Item C/);
await expect(result).toMatchSvgSnapshot();
unmount();
});
@@ -540,18 +543,14 @@ describe('BaseSelectionList', () => {
rows: 40,
});
const { lastFrame, unmount, waitUntilReady } = await renderComponent(
{},
0,
); // Item A selected
const result = await renderComponent({}, 0); // Item A selected
const { lastFrame, unmount, waitUntilReady } = result;
await waitUntilReady();
const output = lastFrame();
expect(output).toContain('Item A');
// Since we can't easily inspect Box props from lastFrame(),
// this test confirms it doesn't crash and renders correctly.
// In a real scenario, we'd use a custom renderer or inspect the tree if possible.
await expect(result).toMatchSvgSnapshot();
unmount();
});

12
packages/cli/src/ui/components/shared/BaseSettingsDialog.test.tsx
View File

@@ -132,13 +132,16 @@ describe('BaseSettingsDialog', () => {
});
it('should render all items', async () => {
const { lastFrame, unmount } = await renderDialog();
const result = await renderDialog();
const { lastFrame, unmount } = result;
const frame = lastFrame();
expect(frame).toContain('Boolean Setting');
expect(frame).toContain('String Setting');
expect(frame).toContain('Number Setting');
expect(frame).toContain('Enum Setting');
await expect(result).toMatchSvgSnapshot();
unmount();
});
@@ -201,8 +204,8 @@ describe('BaseSettingsDialog', () => {
});
it('should navigate down with arrow key', async () => {
const { lastFrame, stdin, waitUntilReady, unmount } =
await renderDialog();
const result = await renderDialog();
const { lastFrame, stdin, waitUntilReady, unmount } = result;
// Initially first item is active (indicated by bullet point)
const initialFrame = lastFrame();
@@ -215,10 +218,11 @@ describe('BaseSettingsDialog', () => {
await waitUntilReady();
// Navigation should move to next item
await waitFor(() => {
await waitFor(async () => {
const frame = lastFrame();
// The active indicator should now be on a different row
expect(frame).toContain('String Setting');
await expect(result).toMatchSvgSnapshot();
});
unmount();
});

11
packages/cli/src/ui/components/shared/__snapshots__/BaseSelectionList-BaseSelectionList-Rendering-and-Structure-should-render-the-selection-indicator-or-space-and-layout.snap.svg Normal file
View File

@@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" width="920" height="71" viewBox="0 0 920 71">
<style>
text { font-family: Consolas, "Courier New", monospace; font-size: 14px; dominant-baseline: text-before-edge; white-space: pre; }
</style>
<rect width="920" height="71" fill="#000000" />
<g transform="translate(10, 10)">
<text x="0" y="2" fill="#ffffff" textLength="900" lengthAdjust="spacingAndGlyphs">● 1. Item A </text>
<text x="0" y="19" fill="#ffffff" textLength="900" lengthAdjust="spacingAndGlyphs"> 2. Item B </text>
<text x="0" y="36" fill="#ffffff" textLength="900" lengthAdjust="spacingAndGlyphs"> 3. Item C </text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 926 B

11
packages/cli/src/ui/components/shared/__snapshots__/BaseSelectionList-BaseSelectionList-Scroll-Arrows-showScrollArrows-should-apply-full-width-highlight-and-offset-when-horizontally-shifted.snap.svg Normal file
View File

@@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" width="920" height="71" viewBox="0 0 920 71">
<style>
text { font-family: Consolas, "Courier New", monospace; font-size: 14px; dominant-baseline: text-before-edge; white-space: pre; }
</style>
<rect width="920" height="71" fill="#000000" />
<g transform="translate(10, 10)">
<text x="0" y="2" fill="#ffffff" textLength="900" lengthAdjust="spacingAndGlyphs">● 1. Item A </text>
<text x="0" y="19" fill="#ffffff" textLength="900" lengthAdjust="spacingAndGlyphs"> 2. Item B </text>
<text x="0" y="36" fill="#ffffff" textLength="900" lengthAdjust="spacingAndGlyphs"> 3. Item C </text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 926 B

12
packages/cli/src/ui/components/shared/__snapshots__/BaseSelectionList.test.tsx.snap
View File

@@ -1,5 +1,17 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`BaseSelectionList > Rendering and Structure > should render the selection indicator (● or space) and layout 1`] = `
"● 1. Item A
2. Item B
3. Item C"
`;
exports[`BaseSelectionList > Scroll Arrows (showScrollArrows) > should apply full-width highlight and offset when horizontally shifted 1`] = `
"● 1. Item A
2. Item B
3. Item C"
`;
exports[`BaseSelectionList > Scroll Arrows (showScrollArrows) > should not show arrows when list fits entirely 1`] = `
"● 1. Item A
2. Item B

91
packages/cli/src/ui/components/shared/__snapshots__/BaseSettingsDialog-BaseSettingsDialog-keyboard-navigation-should-navigate-down-with-arrow-key.snap.svg Normal file
View File

@@ -0,0 +1,91 @@
<svg xmlns="http://www.w3.org/2000/svg" width="920" height="445" viewBox="0 0 920 445">
<style>
text { font-family: Consolas, "Courier New", monospace; font-size: 14px; dominant-baseline: text-before-edge; white-space: pre; }
</style>
<rect width="920" height="445" fill="#000000" />
<g transform="translate(10, 10)">
<text x="0" y="2" fill="#878787" textLength="900" lengthAdjust="spacingAndGlyphs">╭──────────────────────────────────────────────────────────────────────────────────────────────────╮</text>
<text x="0" y="19" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="19" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="36" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="27" y="36" fill="#ffffff" textLength="144" lengthAdjust="spacingAndGlyphs" font-weight="bold">&gt; Test Settings </text>
<text x="891" y="36" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="53" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="53" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="70" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="45" y="70" fill="#ffffff" textLength="135" lengthAdjust="spacingAndGlyphs">Boolean Setting</text>
<text x="333" y="70" fill="#ffffff" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<text x="891" y="70" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="87" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="45" y="87" fill="#afafaf" textLength="261" lengthAdjust="spacingAndGlyphs">A boolean setting for testing</text>
<text x="891" y="87" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="104" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="104" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="121" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="18" y="119" width="9" height="17" fill="#005f00" />
<rect x="27" y="119" width="9" height="17" fill="#005f00" />
<text x="27" y="121" fill="#d7ffd7" textLength="9" lengthAdjust="spacingAndGlyphs">●</text>
<rect x="36" y="119" width="9" height="17" fill="#005f00" />
<rect x="45" y="119" width="126" height="17" fill="#005f00" />
<text x="45" y="121" fill="#d7ffd7" textLength="126" lengthAdjust="spacingAndGlyphs">String Setting</text>
<rect x="171" y="119" width="153" height="17" fill="#005f00" />
<rect x="324" y="119" width="90" height="17" fill="#005f00" />
<text x="324" y="121" fill="#d7ffd7" textLength="90" lengthAdjust="spacingAndGlyphs">test-value</text>
<rect x="414" y="119" width="468" height="17" fill="#005f00" />
<text x="891" y="121" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="138" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="18" y="136" width="27" height="17" fill="#005f00" />
<rect x="45" y="136" width="252" height="17" fill="#005f00" />
<text x="45" y="138" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs">A string setting for testing</text>
<rect x="297" y="136" width="585" height="17" fill="#005f00" />
<text x="891" y="138" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="155" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="155" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="172" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="45" y="172" fill="#ffffff" textLength="126" lengthAdjust="spacingAndGlyphs">Number Setting</text>
<text x="324" y="172" fill="#ffffff" textLength="18" lengthAdjust="spacingAndGlyphs">42</text>
<text x="891" y="172" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="189" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="45" y="189" fill="#afafaf" textLength="252" lengthAdjust="spacingAndGlyphs">A number setting for testing</text>
<text x="891" y="189" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="206" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="206" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="223" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="45" y="223" fill="#ffffff" textLength="108" lengthAdjust="spacingAndGlyphs">Enum Setting</text>
<text x="315" y="223" fill="#ffffff" textLength="72" lengthAdjust="spacingAndGlyphs">option-a</text>
<text x="891" y="223" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="240" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="45" y="240" fill="#afafaf" textLength="243" lengthAdjust="spacingAndGlyphs">An enum setting for testing</text>
<text x="891" y="240" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="257" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="257" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="274" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="274" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="291" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="9" y="291" fill="#ffffff" textLength="882" lengthAdjust="spacingAndGlyphs"> Apply To </text>
<text x="891" y="291" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="308" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="18" y="306" width="9" height="17" fill="#005f00" />
<rect x="27" y="306" width="9" height="17" fill="#005f00" />
<text x="27" y="308" fill="#d7ffd7" textLength="9" lengthAdjust="spacingAndGlyphs">●</text>
<rect x="36" y="306" width="9" height="17" fill="#005f00" />
<rect x="45" y="306" width="117" height="17" fill="#005f00" />
<text x="45" y="308" fill="#d7ffd7" textLength="117" lengthAdjust="spacingAndGlyphs">User Settings</text>
<rect x="162" y="306" width="720" height="17" fill="#005f00" />
<text x="891" y="308" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="325" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="45" y="325" fill="#ffffff" textLength="162" lengthAdjust="spacingAndGlyphs">Workspace Settings</text>
<text x="891" y="325" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="342" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="45" y="342" fill="#ffffff" textLength="135" lengthAdjust="spacingAndGlyphs">System Settings</text>
<text x="891" y="342" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="359" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="359" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="376" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="27" y="376" fill="#afafaf" textLength="657" lengthAdjust="spacingAndGlyphs">(Use Enter to select, Ctrl+L to reset, Tab to change focus, Esc to close)</text>
<text x="891" y="376" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="393" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="393" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="410" fill="#878787" textLength="900" lengthAdjust="spacingAndGlyphs">╰──────────────────────────────────────────────────────────────────────────────────────────────────╯</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

91
packages/cli/src/ui/components/shared/__snapshots__/BaseSettingsDialog-BaseSettingsDialog-rendering-should-render-all-items.snap.svg Normal file
View File

@@ -0,0 +1,91 @@
<svg xmlns="http://www.w3.org/2000/svg" width="920" height="445" viewBox="0 0 920 445">
<style>
text { font-family: Consolas, "Courier New", monospace; font-size: 14px; dominant-baseline: text-before-edge; white-space: pre; }
</style>
<rect width="920" height="445" fill="#000000" />
<g transform="translate(10, 10)">
<text x="0" y="2" fill="#878787" textLength="900" lengthAdjust="spacingAndGlyphs">╭──────────────────────────────────────────────────────────────────────────────────────────────────╮</text>
<text x="0" y="19" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="19" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="36" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="27" y="36" fill="#ffffff" textLength="144" lengthAdjust="spacingAndGlyphs" font-weight="bold">&gt; Test Settings </text>
<text x="891" y="36" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="53" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="53" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="70" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="18" y="68" width="9" height="17" fill="#005f00" />
<rect x="27" y="68" width="9" height="17" fill="#005f00" />
<text x="27" y="70" fill="#d7ffd7" textLength="9" lengthAdjust="spacingAndGlyphs">●</text>
<rect x="36" y="68" width="9" height="17" fill="#005f00" />
<rect x="45" y="68" width="135" height="17" fill="#005f00" />
<text x="45" y="70" fill="#d7ffd7" textLength="135" lengthAdjust="spacingAndGlyphs">Boolean Setting</text>
<rect x="180" y="68" width="153" height="17" fill="#005f00" />
<rect x="333" y="68" width="36" height="17" fill="#005f00" />
<text x="333" y="70" fill="#d7ffd7" textLength="36" lengthAdjust="spacingAndGlyphs">true</text>
<rect x="369" y="68" width="513" height="17" fill="#005f00" />
<text x="891" y="70" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="87" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="18" y="85" width="27" height="17" fill="#005f00" />
<rect x="45" y="85" width="261" height="17" fill="#005f00" />
<text x="45" y="87" fill="#ffffff" textLength="261" lengthAdjust="spacingAndGlyphs">A boolean setting for testing</text>
<rect x="306" y="85" width="576" height="17" fill="#005f00" />
<text x="891" y="87" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="104" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="104" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="121" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="45" y="121" fill="#ffffff" textLength="126" lengthAdjust="spacingAndGlyphs">String Setting</text>
<text x="324" y="121" fill="#ffffff" textLength="90" lengthAdjust="spacingAndGlyphs">test-value</text>
<text x="891" y="121" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="138" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="45" y="138" fill="#afafaf" textLength="252" lengthAdjust="spacingAndGlyphs">A string setting for testing</text>
<text x="891" y="138" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="155" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="155" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="172" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="45" y="172" fill="#ffffff" textLength="126" lengthAdjust="spacingAndGlyphs">Number Setting</text>
<text x="324" y="172" fill="#ffffff" textLength="18" lengthAdjust="spacingAndGlyphs">42</text>
<text x="891" y="172" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="189" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="45" y="189" fill="#afafaf" textLength="252" lengthAdjust="spacingAndGlyphs">A number setting for testing</text>
<text x="891" y="189" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="206" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="206" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="223" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="45" y="223" fill="#ffffff" textLength="108" lengthAdjust="spacingAndGlyphs">Enum Setting</text>
<text x="315" y="223" fill="#ffffff" textLength="72" lengthAdjust="spacingAndGlyphs">option-a</text>
<text x="891" y="223" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="240" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="45" y="240" fill="#afafaf" textLength="243" lengthAdjust="spacingAndGlyphs">An enum setting for testing</text>
<text x="891" y="240" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="257" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="257" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="274" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="274" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="291" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="9" y="291" fill="#ffffff" textLength="882" lengthAdjust="spacingAndGlyphs"> Apply To </text>
<text x="891" y="291" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="308" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<rect x="18" y="306" width="9" height="17" fill="#005f00" />
<rect x="27" y="306" width="9" height="17" fill="#005f00" />
<text x="27" y="308" fill="#d7ffd7" textLength="9" lengthAdjust="spacingAndGlyphs">●</text>
<rect x="36" y="306" width="9" height="17" fill="#005f00" />
<rect x="45" y="306" width="117" height="17" fill="#005f00" />
<text x="45" y="308" fill="#d7ffd7" textLength="117" lengthAdjust="spacingAndGlyphs">User Settings</text>
<rect x="162" y="306" width="720" height="17" fill="#005f00" />
<text x="891" y="308" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="325" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="45" y="325" fill="#ffffff" textLength="162" lengthAdjust="spacingAndGlyphs">Workspace Settings</text>
<text x="891" y="325" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="342" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="45" y="342" fill="#ffffff" textLength="135" lengthAdjust="spacingAndGlyphs">System Settings</text>
<text x="891" y="342" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="359" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="359" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="376" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="27" y="376" fill="#afafaf" textLength="657" lengthAdjust="spacingAndGlyphs">(Use Enter to select, Ctrl+L to reset, Tab to change focus, Esc to close)</text>
<text x="891" y="376" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="393" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="891" y="393" fill="#878787" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
<text x="0" y="410" fill="#878787" textLength="900" lengthAdjust="spacingAndGlyphs">╰──────────────────────────────────────────────────────────────────────────────────────────────────╯</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

57
packages/cli/src/ui/components/shared/__snapshots__/BaseSettingsDialog.test.tsx.snap Normal file
View File

@@ -0,0 +1,57 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`BaseSettingsDialog > keyboard navigation > should navigate down with arrow key 1`] = `
"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ > Test Settings │
│ │
│ Boolean Setting true │
│ A boolean setting for testing │
│ │
│ ● String Setting test-value │
│ A string setting for testing │
│ │
│ Number Setting 42 │
│ A number setting for testing │
│ │
│ Enum Setting option-a │
│ An enum setting for testing │
│ │
│ │
│ Apply To │
│ ● User Settings │
│ Workspace Settings │
│ System Settings │
│ │
│ (Use Enter to select, Ctrl+L to reset, Tab to change focus, Esc to close) │
│ │
╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
`;
exports[`BaseSettingsDialog > rendering > should render all items 1`] = `
"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
│ │
│ > Test Settings │
│ │
│ ● Boolean Setting true │
│ A boolean setting for testing │
│ │
│ String Setting test-value │
│ A string setting for testing │
│ │
│ Number Setting 42 │
│ A number setting for testing │
│ │
│ Enum Setting option-a │
│ An enum setting for testing │
│ │
│ │
│ Apply To │
│ ● User Settings │
│ Workspace Settings │
│ System Settings │
│ │
│ (Use Enter to select, Ctrl+L to reset, Tab to change focus, Esc to close) │
│ │
╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
`;