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

test: support tests that include color information (#20220)

Browse Source
This commit is contained in:
Jacob Richman
2026-02-25 15:31:35 -08:00
committed by GitHub
parent 78dfe9dea8
commit f9f916e1dc
68 changed files with 2342 additions and 492 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
packages/cli/src/ui/components/shared/ExpandableText.test.tsx
View File

@@ -4,7 +4,6 @@
* SPDX-License-Identifier: Apache-2.0
*/
import chalk from 'chalk';
import { describe, it, expect } from 'vitest';
import { render } from '../../../test-utils/render.js';
import { ExpandableText, MAX_WIDTH } from './ExpandableText.js';
@@ -14,7 +13,7 @@ describe('ExpandableText', () => {
const flat = (s: string | undefined) => (s ?? '').replace(/\n/g, '');
it('renders plain label when no match (short label)', async () => {
const { lastFrame, waitUntilReady, unmount } = render(
const renderResult = render(
<ExpandableText
label="simple command"
userInput=""
@@ -23,14 +22,15 @@ describe('ExpandableText', () => {
isExpanded={false}
/>,
);
const { waitUntilReady, unmount } = renderResult;
await waitUntilReady();
expect(lastFrame()).toMatchSnapshot();
await expect(renderResult).toMatchSvgSnapshot();
unmount();
});
it('truncates long label when collapsed and no match', async () => {
const long = 'x'.repeat(MAX_WIDTH + 25);
const { lastFrame, waitUntilReady, unmount } = render(
const renderResult = render(
<ExpandableText
label={long}
userInput=""
@@ -38,18 +38,19 @@ describe('ExpandableText', () => {
isExpanded={false}
/>,
);
const { lastFrame, waitUntilReady, unmount } = renderResult;
await waitUntilReady();
const out = lastFrame();
const f = flat(out);
expect(f.endsWith('...')).toBe(true);
expect(f.length).toBe(MAX_WIDTH + 3);
expect(out).toMatchSnapshot();
await expect(renderResult).toMatchSvgSnapshot();
unmount();
});
it('shows full long label when expanded and no match', async () => {
const long = 'y'.repeat(MAX_WIDTH + 25);
const { lastFrame, waitUntilReady, unmount } = render(
const renderResult = render(
<ExpandableText
label={long}
userInput=""
@@ -57,11 +58,12 @@ describe('ExpandableText', () => {
isExpanded={true}
/>,
);
const { lastFrame, waitUntilReady, unmount } = renderResult;
await waitUntilReady();
const out = lastFrame();
const f = flat(out);
expect(f.length).toBe(long.length);
expect(out).toMatchSnapshot();
await expect(renderResult).toMatchSvgSnapshot();
unmount();
});
@@ -69,7 +71,7 @@ describe('ExpandableText', () => {
const label = 'run: git commit -m "feat: add search"';
const userInput = 'commit';
const matchedIndex = label.indexOf(userInput);
const { lastFrame, waitUntilReady, unmount } = render(
const renderResult = render(
<ExpandableText
label={label}
userInput={userInput}
@@ -79,9 +81,9 @@ describe('ExpandableText', () => {
/>,
100,
);
const { waitUntilReady, unmount } = renderResult;
await waitUntilReady();
expect(lastFrame()).toMatchSnapshot();
expect(lastFrame()).toContain(chalk.inverse(userInput));
await expect(renderResult).toMatchSvgSnapshot();
unmount();
});
@@ -91,7 +93,7 @@ describe('ExpandableText', () => {
const suffix = '/and/then/some/more/components/'.repeat(3);
const label = prefix + core + suffix;
const matchedIndex = prefix.length;
const { lastFrame, waitUntilReady, unmount } = render(
const renderResult = render(
<ExpandableText
label={label}
userInput={core}
@@ -101,13 +103,14 @@ describe('ExpandableText', () => {
/>,
100,
);
const { lastFrame, waitUntilReady, unmount } = renderResult;
await waitUntilReady();
const out = lastFrame();
const f = flat(out);
expect(f.includes(core)).toBe(true);
expect(f.startsWith('...')).toBe(true);
expect(f.endsWith('...')).toBe(true);
expect(out).toMatchSnapshot();
await expect(renderResult).toMatchSvgSnapshot();
unmount();
});
@@ -117,7 +120,7 @@ describe('ExpandableText', () => {
const suffix = ' in this text';
const label = prefix + core + suffix;
const matchedIndex = prefix.length;
const { lastFrame, waitUntilReady, unmount } = render(
const renderResult = render(
<ExpandableText
label={label}
userInput={core}
@@ -126,6 +129,7 @@ describe('ExpandableText', () => {
isExpanded={false}
/>,
);
const { lastFrame, waitUntilReady, unmount } = renderResult;
await waitUntilReady();
const out = lastFrame();
const f = flat(out);
@@ -133,14 +137,14 @@ describe('ExpandableText', () => {
expect(f.startsWith('...')).toBe(false);
expect(f.endsWith('...')).toBe(true);
expect(f.length).toBe(MAX_WIDTH + 2);
expect(out).toMatchSnapshot();
await expect(renderResult).toMatchSvgSnapshot();
unmount();
});
it('respects custom maxWidth', async () => {
const customWidth = 50;
const long = 'z'.repeat(100);
const { lastFrame, waitUntilReady, unmount } = render(
const renderResult = render(
<ExpandableText
label={long}
userInput=""
@@ -149,12 +153,13 @@ describe('ExpandableText', () => {
maxWidth={customWidth}
/>,
);
const { lastFrame, waitUntilReady, unmount } = renderResult;
await waitUntilReady();
const out = lastFrame();
const f = flat(out);
expect(f.endsWith('...')).toBe(true);
expect(f.length).toBe(customWidth + 3);
expect(out).toMatchSnapshot();
await expect(renderResult).toMatchSvgSnapshot();
unmount();
});
});

2
packages/cli/src/ui/components/shared/__snapshots__/EnumSelector.test.tsx.snap
View File

@@ -11,7 +11,7 @@ exports[`<EnumSelector /> > renders with numeric options and matches snapshot 1`
`;
exports[`<EnumSelector /> > renders with single option and matches snapshot 1`] = `
" Only Option
" Only Option
"
`;

13
packages/cli/src/ui/components/shared/__snapshots__/ExpandableText-ExpandableText-creates-centered-window-around-match-when-collapsed.snap.svg Normal file
View File

@@ -0,0 +1,13 @@
<svg xmlns="http://www.w3.org/2000/svg" width="920" height="54" viewBox="0 0 920 54">
<style>
text { font-family: Consolas, "Courier New", monospace; font-size: 14px; dominant-baseline: text-before-edge; white-space: pre; }
</style>
<rect width="920" height="54" fill="#000000" />
<g transform="translate(10, 10)">
<text x="0" y="2" fill="#e5e5e5" textLength="621" lengthAdjust="spacingAndGlyphs">...ry/long/path/that/keeps/going/cd_/very/long/path/that/keeps/going/</text>
<rect x="621" y="0" width="99" height="17" fill="#e5e5e5" />
<text x="621" y="2" fill="#000000" textLength="99" lengthAdjust="spacingAndGlyphs">search-here</text>
<text x="720" y="2" fill="#e5e5e5" textLength="180" lengthAdjust="spacingAndGlyphs">/and/then/some/more/</text>
<text x="0" y="19" fill="#e5e5e5" textLength="450" lengthAdjust="spacingAndGlyphs">components//and/then/some/more/components//and/...</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 935 B

12
packages/cli/src/ui/components/shared/__snapshots__/ExpandableText-ExpandableText-highlights-matched-substring-when-expanded-text-only-visible-.snap.svg Normal file
View File

@@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" width="920" height="37" viewBox="0 0 920 37">
<style>
text { font-family: Consolas, "Courier New", monospace; font-size: 14px; dominant-baseline: text-before-edge; white-space: pre; }
</style>
<rect width="920" height="37" fill="#000000" />
<g transform="translate(10, 10)">
<text x="0" y="2" fill="#e5e5e5" textLength="81" lengthAdjust="spacingAndGlyphs">run: git </text>
<rect x="81" y="0" width="54" height="17" fill="#e5e5e5" />
<text x="81" y="2" fill="#000000" textLength="54" lengthAdjust="spacingAndGlyphs">commit</text>
<text x="135" y="2" fill="#e5e5e5" textLength="198" lengthAdjust="spacingAndGlyphs"> -m &quot;feat: add search&quot;</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 734 B

9
packages/cli/src/ui/components/shared/__snapshots__/ExpandableText-ExpandableText-renders-plain-label-when-no-match-short-label-.snap.svg Normal file
View File

@@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" width="920" height="37" viewBox="0 0 920 37">
<style>
text { font-family: Consolas, "Courier New", monospace; font-size: 14px; dominant-baseline: text-before-edge; white-space: pre; }
</style>
<rect width="920" height="37" fill="#000000" />
<g transform="translate(10, 10)">
<text x="0" y="2" fill="#e5e5e5" textLength="126" lengthAdjust="spacingAndGlyphs">simple command</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 448 B

9
packages/cli/src/ui/components/shared/__snapshots__/ExpandableText-ExpandableText-respects-custom-maxWidth.snap.svg Normal file
View File

@@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" width="920" height="37" viewBox="0 0 920 37">
<style>
text { font-family: Consolas, "Courier New", monospace; font-size: 14px; dominant-baseline: text-before-edge; white-space: pre; }
</style>
<rect width="920" height="37" fill="#000000" />
<g transform="translate(10, 10)">
<text x="0" y="2" fill="#e5e5e5" textLength="477" lengthAdjust="spacingAndGlyphs">zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz...</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 487 B

10
packages/cli/src/ui/components/shared/__snapshots__/ExpandableText-ExpandableText-shows-full-long-label-when-expanded-and-no-match.snap.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 704 B

10
packages/cli/src/ui/components/shared/__snapshots__/ExpandableText-ExpandableText-truncates-long-label-when-collapsed-and-no-match.snap.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 682 B

12
packages/cli/src/ui/components/shared/__snapshots__/ExpandableText-ExpandableText-truncates-match-itself-when-match-is-very-long.snap.svg Normal file
View File

@@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" width="920" height="54" viewBox="0 0 920 54">
<style>
text { font-family: Consolas, "Courier New", monospace; font-size: 14px; dominant-baseline: text-before-edge; white-space: pre; }
</style>
<rect width="920" height="54" fill="#000000" />
<g transform="translate(10, 10)">
<rect x="0" y="0" width="900" height="17" fill="#e5e5e5" />
<text x="0" y="2" fill="#000000" textLength="900" lengthAdjust="spacingAndGlyphs">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</text>
<rect x="0" y="17" width="468" height="17" fill="#e5e5e5" />
<text x="0" y="19" fill="#000000" textLength="468" lengthAdjust="spacingAndGlyphs">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 810 B

27
packages/cli/src/ui/components/shared/__snapshots__/ExpandableText.test.tsx.snap
View File

@@ -2,39 +2,26 @@
exports[`ExpandableText > creates centered window around match when collapsed 1`] = `
"...ry/long/path/that/keeps/going/cd_/very/long/path/that/keeps/going/search-here/and/then/some/more/
components//and/then/some/more/components//and/...
"
components//and/then/some/more/components//and/..."
`;
exports[`ExpandableText > highlights matched substring when expanded (text only visible) 1`] = `
"run: git commit -m "feat: add search"
"
`;
exports[`ExpandableText > highlights matched substring when expanded (text only visible) 1`] = `"run: git commit -m "feat: add search""`;
exports[`ExpandableText > renders plain label when no match (short label) 1`] = `
"simple command
"
`;
exports[`ExpandableText > renders plain label when no match (short label) 1`] = `"simple command"`;
exports[`ExpandableText > respects custom maxWidth 1`] = `
"zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz...
"
`;
exports[`ExpandableText > respects custom maxWidth 1`] = `"zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz..."`;
exports[`ExpandableText > shows full long label when expanded and no match 1`] = `
"yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
"
yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy"
`;
exports[`ExpandableText > truncates long label when collapsed and no match 1`] = `
"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...
"
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx..."
`;
exports[`ExpandableText > truncates match itself when match is very long 1`] = `
"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...
"
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx..."
`;

4
packages/cli/src/ui/components/shared/__snapshots__/HalfLinePaddedBox.test.tsx.snap
View File

@@ -2,7 +2,7 @@
exports[`<HalfLinePaddedBox /> > renders iTerm2-specific blocks when iTerm2 is detected 1`] = `
"▄▄▄▄▄▄▄▄▄▄
Content
Content
▀▀▀▀▀▀▀▀▀▀
"
`;
@@ -19,7 +19,7 @@ exports[`<HalfLinePaddedBox /> > renders nothing when useBackgroundColor is fals
exports[`<HalfLinePaddedBox /> > renders standard background and blocks when not iTerm2 1`] = `
"▀▀▀▀▀▀▀▀▀▀
Content
Content
▄▄▄▄▄▄▄▄▄▄
"
`;

8
packages/cli/src/ui/components/shared/__snapshots__/SearchableList.test.tsx.snap
View File

@@ -7,7 +7,7 @@ exports[`SearchableList > should match snapshot 1`] = `
│ Search... │
╰────────────────────────────────────────────────────────────────────────────────────────────────╯
● Item One
● Item One
Description for item one
Item Two
@@ -28,7 +28,7 @@ exports[`SearchableList > should reset selection to top when items change if res
Item One
Description for item one
● Item Two
● Item Two
Description for item two
Item Three
@@ -43,7 +43,7 @@ exports[`SearchableList > should reset selection to top when items change if res
│ One │
╰────────────────────────────────────────────────────────────────────────────────────────────────╯
● Item One
● Item One
Description for item one
"
`;
@@ -55,7 +55,7 @@ exports[`SearchableList > should reset selection to top when items change if res
│ Search... │
╰────────────────────────────────────────────────────────────────────────────────────────────────╯
● Item One
● Item One
Description for item one
Item Two