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

@@ -13,8 +13,8 @@ describe('ExpandableText', () => {
const color = 'white';
const flat = (s: string | undefined) => (s ?? '').replace(/\n/g, '');
it('renders plain label when no match (short label)', () => {
const { lastFrame, unmount } = render(
it('renders plain label when no match (short label)', async () => {
const { lastFrame, waitUntilReady, unmount } = render(
<ExpandableText
label="simple command"
userInput=""
@@ -23,13 +23,14 @@ describe('ExpandableText', () => {
isExpanded={false}
/>,
);
await waitUntilReady();
expect(lastFrame()).toMatchSnapshot();
unmount();
});
it('truncates long label when collapsed and no match', () => {
it('truncates long label when collapsed and no match', async () => {
const long = 'x'.repeat(MAX_WIDTH + 25);
const { lastFrame, unmount } = render(
const { lastFrame, waitUntilReady, unmount } = render(
<ExpandableText
label={long}
userInput=""
@@ -37,6 +38,7 @@ describe('ExpandableText', () => {
isExpanded={false}
/>,
);
await waitUntilReady();
const out = lastFrame();
const f = flat(out);
expect(f.endsWith('...')).toBe(true);
@@ -45,9 +47,9 @@ describe('ExpandableText', () => {
unmount();
});
it('shows full long label when expanded and no match', () => {
it('shows full long label when expanded and no match', async () => {
const long = 'y'.repeat(MAX_WIDTH + 25);
const { lastFrame, unmount } = render(
const { lastFrame, waitUntilReady, unmount } = render(
<ExpandableText
label={long}
userInput=""
@@ -55,6 +57,7 @@ describe('ExpandableText', () => {
isExpanded={true}
/>,
);
await waitUntilReady();
const out = lastFrame();
const f = flat(out);
expect(f.length).toBe(long.length);
@@ -62,11 +65,11 @@ describe('ExpandableText', () => {
unmount();
});
it('highlights matched substring when expanded (text only visible)', () => {
it('highlights matched substring when expanded (text only visible)', async () => {
const label = 'run: git commit -m "feat: add search"';
const userInput = 'commit';
const matchedIndex = label.indexOf(userInput);
const { lastFrame, unmount } = render(
const { lastFrame, waitUntilReady, unmount } = render(
<ExpandableText
label={label}
userInput={userInput}
@@ -76,18 +79,19 @@ describe('ExpandableText', () => {
/>,
100,
);
await waitUntilReady();
expect(lastFrame()).toMatchSnapshot();
expect(lastFrame()).toContain(chalk.inverse(userInput));
unmount();
});
it('creates centered window around match when collapsed', () => {
it('creates centered window around match when collapsed', async () => {
const prefix = 'cd_/very/long/path/that/keeps/going/'.repeat(3);
const core = 'search-here';
const suffix = '/and/then/some/more/components/'.repeat(3);
const label = prefix + core + suffix;
const matchedIndex = prefix.length;
const { lastFrame, unmount } = render(
const { lastFrame, waitUntilReady, unmount } = render(
<ExpandableText
label={label}
userInput={core}
@@ -97,6 +101,7 @@ describe('ExpandableText', () => {
/>,
100,
);
await waitUntilReady();
const out = lastFrame();
const f = flat(out);
expect(f.includes(core)).toBe(true);
@@ -106,13 +111,13 @@ describe('ExpandableText', () => {
unmount();
});
it('truncates match itself when match is very long', () => {
it('truncates match itself when match is very long', async () => {
const prefix = 'find ';
const core = 'x'.repeat(MAX_WIDTH + 25);
const suffix = ' in this text';
const label = prefix + core + suffix;
const matchedIndex = prefix.length;
const { lastFrame, unmount } = render(
const { lastFrame, waitUntilReady, unmount } = render(
<ExpandableText
label={label}
userInput={core}
@@ -121,6 +126,7 @@ describe('ExpandableText', () => {
isExpanded={false}
/>,
);
await waitUntilReady();
const out = lastFrame();
const f = flat(out);
expect(f.includes('...')).toBe(true);
@@ -131,10 +137,10 @@ describe('ExpandableText', () => {
unmount();
});
it('respects custom maxWidth', () => {
it('respects custom maxWidth', async () => {
const customWidth = 50;
const long = 'z'.repeat(100);
const { lastFrame, unmount } = render(
const { lastFrame, waitUntilReady, unmount } = render(
<ExpandableText
label={long}
userInput=""
@@ -143,6 +149,7 @@ describe('ExpandableText', () => {
maxWidth={customWidth}
/>,
);
await waitUntilReady();
const out = lastFrame();
const f = flat(out);
expect(f.endsWith('...')).toBe(true);