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

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

View File

@@ -68,10 +68,11 @@ const createTestMetrics = (
});
describe('<StatsDisplay />', () => {
it('renders only the Performance section in its zero state', () => {
it('renders only the Performance section in its zero state', async () => {
const zeroMetrics = createTestMetrics();
const { lastFrame } = renderWithMockedStats(zeroMetrics);
const { lastFrame, waitUntilReady } = renderWithMockedStats(zeroMetrics);
await waitUntilReady();
const output = lastFrame();
expect(output).toContain('Performance');
@@ -79,7 +80,7 @@ describe('<StatsDisplay />', () => {
expect(output).toMatchSnapshot();
});
it('renders a table with two models correctly', () => {
it('renders a table with two models correctly', async () => {
const metrics = createTestMetrics({
models: {
'gemini-2.5-pro': {
@@ -111,7 +112,8 @@ describe('<StatsDisplay />', () => {
},
});
const { lastFrame } = renderWithMockedStats(metrics);
const { lastFrame, waitUntilReady } = renderWithMockedStats(metrics);
await waitUntilReady();
const output = lastFrame();
expect(output).toContain('gemini-2.5-pro');
@@ -121,7 +123,7 @@ describe('<StatsDisplay />', () => {
expect(output).toMatchSnapshot();
});
it('renders all sections when all data is present', () => {
it('renders all sections when all data is present', async () => {
const metrics = createTestMetrics({
models: {
'gemini-2.5-pro': {
@@ -166,7 +168,8 @@ describe('<StatsDisplay />', () => {
},
});
const { lastFrame } = renderWithMockedStats(metrics);
const { lastFrame, waitUntilReady } = renderWithMockedStats(metrics);
await waitUntilReady();
const output = lastFrame();
expect(output).toContain('Performance');
@@ -177,7 +180,7 @@ describe('<StatsDisplay />', () => {
});
describe('Conditional Rendering Tests', () => {
it('hides User Agreement when no decisions are made', () => {
it('hides User Agreement when no decisions are made', async () => {
const metrics = createTestMetrics({
tools: {
totalCalls: 2,
@@ -207,7 +210,8 @@ describe('<StatsDisplay />', () => {
},
});
const { lastFrame } = renderWithMockedStats(metrics);
const { lastFrame, waitUntilReady } = renderWithMockedStats(metrics);
await waitUntilReady();
const output = lastFrame();
expect(output).toContain('Interaction Summary');
@@ -216,7 +220,7 @@ describe('<StatsDisplay />', () => {
expect(output).toMatchSnapshot();
});
it('hides Efficiency section when cache is not used', () => {
it('hides Efficiency section when cache is not used', async () => {
const metrics = createTestMetrics({
models: {
'gemini-2.5-pro': {
@@ -235,7 +239,8 @@ describe('<StatsDisplay />', () => {
},
});
const { lastFrame } = renderWithMockedStats(metrics);
const { lastFrame, waitUntilReady } = renderWithMockedStats(metrics);
await waitUntilReady();
const output = lastFrame();
expect(output).toMatchSnapshot();
@@ -243,7 +248,7 @@ describe('<StatsDisplay />', () => {
});
describe('Conditional Color Tests', () => {
it('renders success rate in green for high values', () => {
it('renders success rate in green for high values', async () => {
const metrics = createTestMetrics({
tools: {
totalCalls: 10,
@@ -259,11 +264,12 @@ describe('<StatsDisplay />', () => {
byName: {},
},
});
const { lastFrame } = renderWithMockedStats(metrics);
const { lastFrame, waitUntilReady } = renderWithMockedStats(metrics);
await waitUntilReady();
expect(lastFrame()).toMatchSnapshot();
});
it('renders success rate in yellow for medium values', () => {
it('renders success rate in yellow for medium values', async () => {
const metrics = createTestMetrics({
tools: {
totalCalls: 10,
@@ -279,11 +285,12 @@ describe('<StatsDisplay />', () => {
byName: {},
},
});
const { lastFrame } = renderWithMockedStats(metrics);
const { lastFrame, waitUntilReady } = renderWithMockedStats(metrics);
await waitUntilReady();
expect(lastFrame()).toMatchSnapshot();
});
it('renders success rate in red for low values', () => {
it('renders success rate in red for low values', async () => {
const metrics = createTestMetrics({
tools: {
totalCalls: 10,
@@ -299,13 +306,14 @@ describe('<StatsDisplay />', () => {
byName: {},
},
});
const { lastFrame } = renderWithMockedStats(metrics);
const { lastFrame, waitUntilReady } = renderWithMockedStats(metrics);
await waitUntilReady();
expect(lastFrame()).toMatchSnapshot();
});
});
describe('Code Changes Display', () => {
it('displays Code Changes when line counts are present', () => {
it('displays Code Changes when line counts are present', async () => {
const metrics = createTestMetrics({
tools: {
totalCalls: 1,
@@ -326,7 +334,8 @@ describe('<StatsDisplay />', () => {
},
});
const { lastFrame } = renderWithMockedStats(metrics);
const { lastFrame, waitUntilReady } = renderWithMockedStats(metrics);
await waitUntilReady();
const output = lastFrame();
expect(output).toContain('Code Changes:');
@@ -335,7 +344,7 @@ describe('<StatsDisplay />', () => {
expect(output).toMatchSnapshot();
});
it('hides Code Changes when no lines are added or removed', () => {
it('hides Code Changes when no lines are added or removed', async () => {
const metrics = createTestMetrics({
tools: {
totalCalls: 1,
@@ -352,7 +361,8 @@ describe('<StatsDisplay />', () => {
},
});
const { lastFrame } = renderWithMockedStats(metrics);
const { lastFrame, waitUntilReady } = renderWithMockedStats(metrics);
await waitUntilReady();
const output = lastFrame();
expect(output).not.toContain('Code Changes:');
@@ -363,15 +373,16 @@ describe('<StatsDisplay />', () => {
describe('Title Rendering', () => {
const zeroMetrics = createTestMetrics();
it('renders the default title when no title prop is provided', () => {
const { lastFrame } = renderWithMockedStats(zeroMetrics);
it('renders the default title when no title prop is provided', async () => {
const { lastFrame, waitUntilReady } = renderWithMockedStats(zeroMetrics);
await waitUntilReady();
const output = lastFrame();
expect(output).toContain('Session Stats');
expect(output).not.toContain('Agent powering down');
expect(output).toMatchSnapshot();
});
it('renders the custom title when a title prop is provided', () => {
it('renders the custom title when a title prop is provided', async () => {
useSessionStatsMock.mockReturnValue({
stats: {
sessionId: 'test-session-id',
@@ -385,10 +396,11 @@ describe('<StatsDisplay />', () => {
startNewPrompt: vi.fn(),
});
const { lastFrame } = renderWithProviders(
const { lastFrame, waitUntilReady } = renderWithProviders(
<StatsDisplay duration="1s" title="Agent powering down. Goodbye!" />,
{ width: 100 },
);
await waitUntilReady();
const output = lastFrame();
expect(output).toContain('Agent powering down. Goodbye!');
expect(output).not.toContain('Session Stats');
@@ -397,7 +409,7 @@ describe('<StatsDisplay />', () => {
});
describe('Quota Display', () => {
it('renders quota information when quotas are provided', () => {
it('renders quota information when quotas are provided', async () => {
const now = new Date('2025-01-01T12:00:00Z');
vi.useFakeTimers();
vi.setSystemTime(now);
@@ -446,10 +458,11 @@ describe('<StatsDisplay />', () => {
startNewPrompt: vi.fn(),
});
const { lastFrame } = renderWithProviders(
const { lastFrame, waitUntilReady } = renderWithProviders(
<StatsDisplay duration="1s" quotas={quotas} />,
{ width: 100 },
);
await waitUntilReady();
const output = lastFrame();
expect(output).toContain('Usage remaining');
@@ -460,7 +473,7 @@ describe('<StatsDisplay />', () => {
vi.useRealTimers();
});
it('renders pooled quota information for auto mode', () => {
it('renders pooled quota information for auto mode', async () => {
const now = new Date('2025-01-01T12:00:00Z');
vi.useFakeTimers();
vi.setSystemTime(now);
@@ -493,7 +506,7 @@ describe('<StatsDisplay />', () => {
startNewPrompt: vi.fn(),
});
const { lastFrame } = renderWithProviders(
const { lastFrame, waitUntilReady } = renderWithProviders(
<StatsDisplay
duration="1s"
quotas={quotas}
@@ -505,6 +518,7 @@ describe('<StatsDisplay />', () => {
/>,
{ width: 100 },
);
await waitUntilReady();
const output = lastFrame();
// (10 + 700) / (100 + 1000) = 710 / 1100 = 64.5%
@@ -515,7 +529,7 @@ describe('<StatsDisplay />', () => {
vi.useRealTimers();
});
it('renders quota information for unused models', () => {
it('renders quota information for unused models', async () => {
const now = new Date('2025-01-01T12:00:00Z');
vi.useFakeTimers();
vi.setSystemTime(now);
@@ -548,10 +562,11 @@ describe('<StatsDisplay />', () => {
startNewPrompt: vi.fn(),
});
const { lastFrame } = renderWithProviders(
const { lastFrame, waitUntilReady } = renderWithProviders(
<StatsDisplay duration="1s" quotas={quotas} />,
{ width: 100 },
);
await waitUntilReady();
const output = lastFrame();
expect(output).toContain('gemini-2.5-flash');
@@ -565,7 +580,7 @@ describe('<StatsDisplay />', () => {
});
describe('User Identity Display', () => {
it('renders User row with Auth Method and Tier', () => {
it('renders User row with Auth Method and Tier', async () => {
const metrics = createTestMetrics();
useSessionStatsMock.mockReturnValue({
@@ -580,7 +595,7 @@ describe('<StatsDisplay />', () => {
startNewPrompt: vi.fn(),
});
const { lastFrame } = renderWithProviders(
const { lastFrame, waitUntilReady } = renderWithProviders(
<StatsDisplay
duration="1s"
selectedAuthType="oauth"
@@ -589,6 +604,7 @@ describe('<StatsDisplay />', () => {
/>,
{ width: 100 },
);
await waitUntilReady();
const output = lastFrame();
expect(output).toContain('Auth Method:');
@@ -597,7 +613,7 @@ describe('<StatsDisplay />', () => {
expect(output).toContain('Pro');
});
it('renders User row with API Key and no Tier', () => {
it('renders User row with API Key and no Tier', async () => {
const metrics = createTestMetrics();
useSessionStatsMock.mockReturnValue({
@@ -612,10 +628,11 @@ describe('<StatsDisplay />', () => {
startNewPrompt: vi.fn(),
});
const { lastFrame } = renderWithProviders(
const { lastFrame, waitUntilReady } = renderWithProviders(
<StatsDisplay duration="1s" selectedAuthType="Google API Key" />,
{ width: 100 },
);
await waitUntilReady();
const output = lastFrame();
expect(output).toContain('Auth Method:');