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

Migrate core render util to use xterm.js as part of the rendering loop. (#19044)

Browse Source
This commit is contained in:
Jacob Richman
2026-02-18 16:46:50 -08:00
committed by GitHub
parent 04c52513e7
commit 04f65f3d55
213 changed files with 7065 additions and 3852 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/cli/src/ui/components/HistoryItemDisplay.test.tsx
+73 -37
View File
@@ -33,59 +33,67 @@ describe('<HistoryItemDisplay />', () => {
config: mockConfig,
};
it('renders UserMessage for "user" type', () => {
it('renders UserMessage for "user" type', async () => {
const item: HistoryItem = {
...baseItem,
type: MessageType.USER,
text: 'Hello',
};
const { lastFrame } = renderWithProviders(
const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
<HistoryItemDisplay {...baseItem} item={item} />,
);
await waitUntilReady();
expect(lastFrame()).toContain('Hello');
unmount();
});
it('renders HintMessage for "hint" type', () => {
it('renders HintMessage for "hint" type', async () => {
const item: HistoryItem = {
...baseItem,
type: 'hint',
text: 'Try using ripgrep first',
};
const { lastFrame } = renderWithProviders(
const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
<HistoryItemDisplay {...baseItem} item={item} />,
);
await waitUntilReady();
expect(lastFrame()).toContain('Try using ripgrep first');
unmount();
});
it('renders UserMessage for "user" type with slash command', () => {
it('renders UserMessage for "user" type with slash command', async () => {
const item: HistoryItem = {
...baseItem,
type: MessageType.USER,
text: '/theme',
};
const { lastFrame } = renderWithProviders(
const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
<HistoryItemDisplay {...baseItem} item={item} />,
);
await waitUntilReady();
expect(lastFrame()).toContain('/theme');
unmount();
});
it.each([true, false])(
'renders InfoMessage for "info" type with multi-line text (alternateBuffer=%s)',
(useAlternateBuffer) => {
async (useAlternateBuffer) => {
const item: HistoryItem = {
...baseItem,
type: MessageType.INFO,
text: '⚡ Line 1\n⚡ Line 2\n⚡ Line 3',
};
const { lastFrame } = renderWithProviders(
const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
<HistoryItemDisplay {...baseItem} item={item} />,
{ useAlternateBuffer },
);
await waitUntilReady();
expect(lastFrame()).toMatchSnapshot();
unmount();
},
);
it('renders AgentsStatus for "agents_list" type', () => {
it('renders AgentsStatus for "agents_list" type', async () => {
const item: HistoryItem = {
...baseItem,
type: MessageType.AGENTS_LIST,
@@ -103,27 +111,31 @@ describe('<HistoryItemDisplay />', () => {
},
],
};
const { lastFrame } = renderWithProviders(
const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
<HistoryItemDisplay {...baseItem} item={item} />,
);
await waitUntilReady();
expect(lastFrame()).toMatchSnapshot();
unmount();
});
it('renders StatsDisplay for "stats" type', () => {
it('renders StatsDisplay for "stats" type', async () => {
const item: HistoryItem = {
...baseItem,
type: MessageType.STATS,
duration: '1s',
};
const { lastFrame } = renderWithProviders(
const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
<SessionStatsProvider>
<HistoryItemDisplay {...baseItem} item={item} />
</SessionStatsProvider>,
);
await waitUntilReady();
expect(lastFrame()).toContain('Stats');
unmount();
});
it('renders AboutBox for "about" type', () => {
it('renders AboutBox for "about" type', async () => {
const item: HistoryItem = {
...baseItem,
type: MessageType.ABOUT,
@@ -135,78 +147,88 @@ describe('<HistoryItemDisplay />', () => {
gcpProject: 'test-project',
ideClient: 'test-ide',
};
const { lastFrame } = renderWithProviders(
const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
<HistoryItemDisplay {...baseItem} item={item} />,
);
await waitUntilReady();
expect(lastFrame()).toContain('About Gemini CLI');
unmount();
});
it('renders ModelStatsDisplay for "model_stats" type', () => {
it('renders ModelStatsDisplay for "model_stats" type', async () => {
const item: HistoryItem = {
...baseItem,
type: 'model_stats',
};
const { lastFrame } = renderWithProviders(
const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
<SessionStatsProvider>
<HistoryItemDisplay {...baseItem} item={item} />
</SessionStatsProvider>,
);
await waitUntilReady();
expect(lastFrame()).toContain(
'No API calls have been made in this session.',
);
unmount();
});
it('renders ToolStatsDisplay for "tool_stats" type', () => {
it('renders ToolStatsDisplay for "tool_stats" type', async () => {
const item: HistoryItem = {
...baseItem,
type: 'tool_stats',
};
const { lastFrame } = renderWithProviders(
const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
<SessionStatsProvider>
<HistoryItemDisplay {...baseItem} item={item} />
</SessionStatsProvider>,
);
await waitUntilReady();
expect(lastFrame()).toContain(
'No tool calls have been made in this session.',
);
unmount();
});
it('renders SessionSummaryDisplay for "quit" type', () => {
it('renders SessionSummaryDisplay for "quit" type', async () => {
const item: HistoryItem = {
...baseItem,
type: 'quit',
duration: '1s',
};
const { lastFrame } = renderWithProviders(
const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
<SessionStatsProvider>
<HistoryItemDisplay {...baseItem} item={item} />
</SessionStatsProvider>,
);
await waitUntilReady();
expect(lastFrame()).toContain('Agent powering down. Goodbye!');
unmount();
});
it('should escape ANSI codes in text content', () => {
it('should escape ANSI codes in text content', async () => {
const historyItem: HistoryItem = {
id: 1,
type: 'user',
text: 'Hello, \u001b[31mred\u001b[0m world!',
};
const { lastFrame } = renderWithProviders(
const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
<HistoryItemDisplay
item={historyItem}
terminalWidth={80}
isPending={false}
/>,
);
await waitUntilReady();
// The ANSI codes should be escaped for display.
expect(lastFrame()).toContain('Hello, \\u001b[31mred\\u001b[0m world!');
// The raw ANSI codes should not be present.
expect(lastFrame()).not.toContain('Hello, \u001b[31mred\u001b[0m world!');
unmount();
});
it('should escape ANSI codes in tool confirmation details', () => {
it('should escape ANSI codes in tool confirmation details', async () => {
const historyItem: HistoryItem = {
id: 1,
type: 'tool_group',
@@ -228,13 +250,14 @@ describe('<HistoryItemDisplay />', () => {
],
};
renderWithProviders(
const { waitUntilReady, unmount } = renderWithProviders(
<HistoryItemDisplay
item={historyItem}
terminalWidth={80}
isPending={false}
/>,
);
await waitUntilReady();
const passedProps = vi.mocked(ToolGroupMessage).mock.calls[0][0];
const confirmationDetails = passedProps.toolCalls[0]
@@ -243,16 +266,17 @@ describe('<HistoryItemDisplay />', () => {
expect(confirmationDetails.command).toBe(
'echo "\\u001b[31mhello\\u001b[0m"',
);
unmount();
});
describe('thinking items', () => {
it('renders thinking item when enabled', () => {
it('renders thinking item when enabled', async () => {
const item: HistoryItem = {
...baseItem,
type: 'thinking',
thought: { subject: 'Thinking', description: 'test' },
};
const { lastFrame } = renderWithProviders(
const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
<HistoryItemDisplay {...baseItem} item={item} />,
{
settings: createMockSettings({
@@ -260,17 +284,19 @@ describe('<HistoryItemDisplay />', () => {
}),
},
);
await waitUntilReady();
expect(lastFrame()).toMatchSnapshot();
unmount();
});
it('does not render thinking item when disabled', () => {
it('does not render thinking item when disabled', async () => {
const item: HistoryItem = {
...baseItem,
type: 'thinking',
thought: { subject: 'Thinking', description: 'test' },
};
const { lastFrame } = renderWithProviders(
const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
<HistoryItemDisplay {...baseItem} item={item} />,
{
settings: createMockSettings({
@@ -278,8 +304,10 @@ describe('<HistoryItemDisplay />', () => {
}),
},
);
await waitUntilReady();
expect(lastFrame()).toBe('');
expect(lastFrame({ allowEmpty: true })).toBe('');
unmount();
});
});
@@ -292,13 +320,13 @@ describe('<HistoryItemDisplay />', () => {
Array.from({ length: 50 }, (_, i) => `Line ${i + 1}`).join('\n') +
'\n```';
it('should render a truncated gemini item', () => {
it('should render a truncated gemini item', async () => {
const item: HistoryItem = {
id: 1,
type: 'gemini',
text: longCode,
};
const { lastFrame } = renderWithProviders(
const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
<HistoryItemDisplay
item={item}
isPending={false}
@@ -307,17 +335,19 @@ describe('<HistoryItemDisplay />', () => {
/>,
{ useAlternateBuffer },
);
await waitUntilReady();
expect(lastFrame()).toMatchSnapshot();
unmount();
});
it('should render a full gemini item when using availableTerminalHeightGemini', () => {
it('should render a full gemini item when using availableTerminalHeightGemini', async () => {
const item: HistoryItem = {
id: 1,
type: 'gemini',
text: longCode,
};
const { lastFrame } = renderWithProviders(
const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
<HistoryItemDisplay
item={item}
isPending={false}
@@ -327,17 +357,19 @@ describe('<HistoryItemDisplay />', () => {
/>,
{ useAlternateBuffer },
);
await waitUntilReady();
expect(lastFrame()).toMatchSnapshot();
unmount();
});
it('should render a truncated gemini_content item', () => {
it('should render a truncated gemini_content item', async () => {
const item: HistoryItem = {
id: 1,
type: 'gemini_content',
text: longCode,
};
const { lastFrame } = renderWithProviders(
const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
<HistoryItemDisplay
item={item}
isPending={false}
@@ -346,17 +378,19 @@ describe('<HistoryItemDisplay />', () => {
/>,
{ useAlternateBuffer },
);
await waitUntilReady();
expect(lastFrame()).toMatchSnapshot();
unmount();
});
it('should render a full gemini_content item when using availableTerminalHeightGemini', () => {
it('should render a full gemini_content item when using availableTerminalHeightGemini', async () => {
const item: HistoryItem = {
id: 1,
type: 'gemini_content',
text: longCode,
};
const { lastFrame } = renderWithProviders(
const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
<HistoryItemDisplay
item={item}
isPending={false}
@@ -366,8 +400,10 @@ describe('<HistoryItemDisplay />', () => {
/>,
{ useAlternateBuffer },
);
await waitUntilReady();
expect(lastFrame()).toMatchSnapshot();
unmount();
});
},
);