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

packages/cli/src/ui/components/messages/CompressionMessage.test.tsx

@@ -25,11 +25,12 @@ describe('<CompressionMessage />', () => {
   });
 
   describe('pending state', () => {
-    it('renders pending message when compression is in progress', () => {
+    it('renders pending message when compression is in progress', async () => {
       const props = createCompressionProps({ isPending: true });
-      const { lastFrame, unmount } = renderWithProviders(
+      const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
         <CompressionMessage {...props} />,
       );
+      await waitUntilReady();
       const output = lastFrame();
 
       expect(output).toContain('Compressing chat history');
@@ -38,16 +39,17 @@ describe('<CompressionMessage />', () => {
   });
 
   describe('normal compression (successful token reduction)', () => {
-    it('renders success message when tokens are reduced', () => {
+    it('renders success message when tokens are reduced', async () => {
       const props = createCompressionProps({
         isPending: false,
         originalTokenCount: 100,
         newTokenCount: 50,
         compressionStatus: CompressionStatus.COMPRESSED,
       });
-      const { lastFrame, unmount } = renderWithProviders(
+      const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
         <CompressionMessage {...props} />,
       );
+      await waitUntilReady();
       const output = lastFrame();
 
       expect(output).toContain('✦');
@@ -57,22 +59,22 @@ describe('<CompressionMessage />', () => {
       unmount();
     });
 
-    it('renders success message for large successful compressions', () => {
-      const testCases = [
-        { original: 50000, new: 25000 }, // Large compression
-        { original: 700000, new: 350000 }, // Very large compression
-      ];
-
-      for (const { original, new: newTokens } of testCases) {
+    it.each([
+      { original: 50000, newTokens: 25000 }, // Large compression
+      { original: 700000, newTokens: 350000 }, // Very large compression
+    ])(
+      'renders success message for large successful compression (from $original to $newTokens)',
+      async ({ original, newTokens }) => {
         const props = createCompressionProps({
           isPending: false,
           originalTokenCount: original,
           newTokenCount: newTokens,
           compressionStatus: CompressionStatus.COMPRESSED,
         });
-        const { lastFrame, unmount } = renderWithProviders(
+        const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
           <CompressionMessage {...props} />,
         );
+        await waitUntilReady();
         const output = lastFrame();
 
         expect(output).toContain('✦');
@@ -82,12 +84,12 @@ describe('<CompressionMessage />', () => {
         expect(output).not.toContain('Skipping compression');
         expect(output).not.toContain('did not reduce size');
         unmount();
-      }
-    });
+      },
+    );
   });
 
   describe('skipped compression (tokens increased or same)', () => {
-    it('renders skip message when compression would increase token count', () => {
+    it('renders skip message when compression would increase token count', async () => {
       const props = createCompressionProps({
         isPending: false,
         originalTokenCount: 50,
@@ -95,9 +97,10 @@ describe('<CompressionMessage />', () => {
         compressionStatus:
           CompressionStatus.COMPRESSION_FAILED_INFLATED_TOKEN_COUNT,
       });
-      const { lastFrame, unmount } = renderWithProviders(
+      const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
         <CompressionMessage {...props} />,
       );
+      await waitUntilReady();
       const output = lastFrame();
 
       expect(output).toContain('✦');
@@ -107,7 +110,7 @@ describe('<CompressionMessage />', () => {
       unmount();
     });
 
-    it('renders skip message when token counts are equal', () => {
+    it('renders skip message when token counts are equal', async () => {
       const props = createCompressionProps({
         isPending: false,
         originalTokenCount: 50,
@@ -115,9 +118,10 @@ describe('<CompressionMessage />', () => {
         compressionStatus:
           CompressionStatus.COMPRESSION_FAILED_INFLATED_TOKEN_COUNT,
       });
-      const { lastFrame, unmount } = renderWithProviders(
+      const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
         <CompressionMessage {...props} />,
       );
+      await waitUntilReady();
       const output = lastFrame();
 
       expect(output).toContain(
@@ -128,50 +132,49 @@ describe('<CompressionMessage />', () => {
   });
 
   describe('message content validation', () => {
-    it('displays correct compression statistics', () => {
-      const testCases = [
-        {
-          original: 200,
-          new: 80,
-          expected: 'compressed from 200 to 80 tokens',
-        },
-        {
-          original: 500,
-          new: 150,
-          expected: 'compressed from 500 to 150 tokens',
-        },
-        {
-          original: 1500,
-          new: 400,
-          expected: 'compressed from 1500 to 400 tokens',
-        },
-      ];
-
-      for (const { original, new: newTokens, expected } of testCases) {
+    it.each([
+      {
+        original: 200,
+        newTokens: 80,
+        expected: 'compressed from 200 to 80 tokens',
+      },
+      {
+        original: 500,
+        newTokens: 150,
+        expected: 'compressed from 500 to 150 tokens',
+      },
+      {
+        original: 1500,
+        newTokens: 400,
+        expected: 'compressed from 1500 to 400 tokens',
+      },
+    ])(
+      'displays correct compression statistics (from $original to $newTokens)',
+      async ({ original, newTokens, expected }) => {
         const props = createCompressionProps({
           isPending: false,
           originalTokenCount: original,
           newTokenCount: newTokens,
           compressionStatus: CompressionStatus.COMPRESSED,
         });
-        const { lastFrame, unmount } = renderWithProviders(
+        const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
           <CompressionMessage {...props} />,
         );
+        await waitUntilReady();
         const output = lastFrame();
 
         expect(output).toContain(expected);
         unmount();
-      }
-    });
+      },
+    );
 
-    it('shows skip message for small histories when new tokens >= original tokens', () => {
-      const testCases = [
-        { original: 50, new: 60 }, // Increased
-        { original: 100, new: 100 }, // Same
-        { original: 49999, new: 50000 }, // Just under 50k threshold
-      ];
-
-      for (const { original, new: newTokens } of testCases) {
+    it.each([
+      { original: 50, newTokens: 60 }, // Increased
+      { original: 100, newTokens: 100 }, // Same
+      { original: 49999, newTokens: 50000 }, // Just under 50k threshold
+    ])(
+      'shows skip message for small histories when new tokens >= original tokens ($original -> $newTokens)',
+      async ({ original, newTokens }) => {
         const props = createCompressionProps({
           isPending: false,
           originalTokenCount: original,
@@ -179,9 +182,10 @@ describe('<CompressionMessage />', () => {
           compressionStatus:
             CompressionStatus.COMPRESSION_FAILED_INFLATED_TOKEN_COUNT,
         });
-        const { lastFrame, unmount } = renderWithProviders(
+        const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
           <CompressionMessage {...props} />,
         );
+        await waitUntilReady();
         const output = lastFrame();
 
         expect(output).toContain(
@@ -189,17 +193,16 @@ describe('<CompressionMessage />', () => {
         );
         expect(output).not.toContain('compressed from');
         unmount();
-      }
-    });
+      },
+    );
 
-    it('shows compression failure message for large histories when new tokens >= original tokens', () => {
-      const testCases = [
-        { original: 50000, new: 50100 }, // At 50k threshold
-        { original: 700000, new: 710000 }, // Large history case
-        { original: 100000, new: 100000 }, // Large history, same count
-      ];
-
-      for (const { original, new: newTokens } of testCases) {
+    it.each([
+      { original: 50000, newTokens: 50100 }, // At 50k threshold
+      { original: 700000, newTokens: 710000 }, // Large history case
+      { original: 100000, newTokens: 100000 }, // Large history, same count
+    ])(
+      'shows compression failure message for large histories when new tokens >= original tokens ($original -> $newTokens)',
+      async ({ original, newTokens }) => {
         const props = createCompressionProps({
           isPending: false,
           originalTokenCount: original,
@@ -207,28 +210,30 @@ describe('<CompressionMessage />', () => {
           compressionStatus:
             CompressionStatus.COMPRESSION_FAILED_INFLATED_TOKEN_COUNT,
         });
-        const { lastFrame, unmount } = renderWithProviders(
+        const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
           <CompressionMessage {...props} />,
         );
+        await waitUntilReady();
         const output = lastFrame();
 
         expect(output).toContain('compression did not reduce size');
         expect(output).not.toContain('compressed from');
         expect(output).not.toContain('Compression was not beneficial');
         unmount();
-      }
-    });
+      },
+    );
   });
 
   describe('failure states', () => {
-    it('renders failure message when model returns an empty summary', () => {
+    it('renders failure message when model returns an empty summary', async () => {
       const props = createCompressionProps({
         isPending: false,
         compressionStatus: CompressionStatus.COMPRESSION_FAILED_EMPTY_SUMMARY,
       });
-      const { lastFrame, unmount } = renderWithProviders(
+      const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
         <CompressionMessage {...props} />,
       );
+      await waitUntilReady();
       const output = lastFrame();
 
       expect(output).toContain('✦');
@@ -238,15 +243,16 @@ describe('<CompressionMessage />', () => {
       unmount();
     });
 
-    it('renders failure message for token count errors', () => {
+    it('renders failure message for token count errors', async () => {
       const props = createCompressionProps({
         isPending: false,
         compressionStatus:
           CompressionStatus.COMPRESSION_FAILED_TOKEN_COUNT_ERROR,
       });
-      const { lastFrame, unmount } = renderWithProviders(
+      const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
         <CompressionMessage {...props} />,
       );
+      await waitUntilReady();
       const output = lastFrame();
 
       expect(output).toContain(