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

packages/cli/src/ui/utils/MarkdownDisplay.test.tsx

@@ -20,19 +20,23 @@ describe('<MarkdownDisplay />', () => {
     vi.clearAllMocks();
   });
 
-  it('renders nothing for empty text', () => {
-    const { lastFrame } = renderWithProviders(
+  it('renders nothing for empty text', async () => {
+    const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
       <MarkdownDisplay {...baseProps} text="" />,
     );
-    expect(lastFrame()).toMatchSnapshot();
+    await waitUntilReady();
+    expect(lastFrame({ allowEmpty: true })).toMatchSnapshot();
+    unmount();
   });
 
-  it('renders a simple paragraph', () => {
+  it('renders a simple paragraph', async () => {
     const text = 'Hello, world.';
-    const { lastFrame } = renderWithProviders(
+    const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
       <MarkdownDisplay {...baseProps} text={text} />,
     );
+    await waitUntilReady();
     expect(lastFrame()).toMatchSnapshot();
+    unmount();
   });
 
   const lineEndings = [
@@ -41,82 +45,96 @@ describe('<MarkdownDisplay />', () => {
   ];
 
   describe.each(lineEndings)('with $name line endings', ({ eol }) => {
-    it('renders headers with correct levels', () => {
+    it('renders headers with correct levels', async () => {
       const text = `
 # Header 1
 ## Header 2
 ### Header 3
 #### Header 4
 `.replace(/\n/g, eol);
-      const { lastFrame } = renderWithProviders(
+      const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
         <MarkdownDisplay {...baseProps} text={text} />,
       );
+      await waitUntilReady();
       expect(lastFrame()).toMatchSnapshot();
+      unmount();
     });
 
-    it('renders a fenced code block with a language', () => {
+    it('renders a fenced code block with a language', async () => {
       const text = '```javascript\nconst x = 1;\nconsole.log(x);\n```'.replace(
         /\n/g,
         eol,
       );
-      const { lastFrame } = renderWithProviders(
+      const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
         <MarkdownDisplay {...baseProps} text={text} />,
       );
+      await waitUntilReady();
       expect(lastFrame()).toMatchSnapshot();
+      unmount();
     });
 
-    it('renders a fenced code block without a language', () => {
+    it('renders a fenced code block without a language', async () => {
       const text = '```\nplain text\n```'.replace(/\n/g, eol);
-      const { lastFrame } = renderWithProviders(
+      const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
         <MarkdownDisplay {...baseProps} text={text} />,
       );
+      await waitUntilReady();
       expect(lastFrame()).toMatchSnapshot();
+      unmount();
     });
 
-    it('handles unclosed (pending) code blocks', () => {
+    it('handles unclosed (pending) code blocks', async () => {
       const text = '```typescript\nlet y = 2;'.replace(/\n/g, eol);
-      const { lastFrame } = renderWithProviders(
+      const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
         <MarkdownDisplay {...baseProps} text={text} isPending={true} />,
       );
+      await waitUntilReady();
       expect(lastFrame()).toMatchSnapshot();
+      unmount();
     });
 
-    it('renders unordered lists with different markers', () => {
+    it('renders unordered lists with different markers', async () => {
       const text = `
 - item A
 * item B
 + item C
 `.replace(/\n/g, eol);
-      const { lastFrame } = renderWithProviders(
+      const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
         <MarkdownDisplay {...baseProps} text={text} />,
       );
+      await waitUntilReady();
       expect(lastFrame()).toMatchSnapshot();
+      unmount();
     });
 
-    it('renders nested unordered lists', () => {
+    it('renders nested unordered lists', async () => {
       const text = `
 * Level 1
   * Level 2
     * Level 3
 `.replace(/\n/g, eol);
-      const { lastFrame } = renderWithProviders(
+      const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
         <MarkdownDisplay {...baseProps} text={text} />,
       );
+      await waitUntilReady();
       expect(lastFrame()).toMatchSnapshot();
+      unmount();
     });
 
-    it('renders ordered lists', () => {
+    it('renders ordered lists', async () => {
       const text = `
 1. First item
 2. Second item
 `.replace(/\n/g, eol);
-      const { lastFrame } = renderWithProviders(
+      const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
         <MarkdownDisplay {...baseProps} text={text} />,
       );
+      await waitUntilReady();
       expect(lastFrame()).toMatchSnapshot();
+      unmount();
     });
 
-    it('renders horizontal rules', () => {
+    it('renders horizontal rules', async () => {
       const text = `
 Hello
 ---
@@ -124,48 +142,56 @@ World
 ***
 Test
 `.replace(/\n/g, eol);
-      const { lastFrame } = renderWithProviders(
+      const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
         <MarkdownDisplay {...baseProps} text={text} />,
       );
+      await waitUntilReady();
       expect(lastFrame()).toMatchSnapshot();
+      unmount();
     });
 
-    it('renders tables correctly', () => {
+    it('renders tables correctly', async () => {
       const text = `
 | Header 1 | Header 2 |
 |----------|:--------:|
 | Cell 1   | Cell 2   |
 | Cell 3   | Cell 4   |
 `.replace(/\n/g, eol);
-      const { lastFrame } = renderWithProviders(
+      const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
         <MarkdownDisplay {...baseProps} text={text} />,
       );
+      await waitUntilReady();
       expect(lastFrame()).toMatchSnapshot();
+      unmount();
     });
 
-    it('handles a table at the end of the input', () => {
+    it('handles a table at the end of the input', async () => {
       const text = `
 Some text before.
 | A | B |
 |---|
 | 1 | 2 |`.replace(/\n/g, eol);
-      const { lastFrame } = renderWithProviders(
+      const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
         <MarkdownDisplay {...baseProps} text={text} />,
       );
+      await waitUntilReady();
       expect(lastFrame()).toMatchSnapshot();
+      unmount();
     });
 
-    it('inserts a single space between paragraphs', () => {
+    it('inserts a single space between paragraphs', async () => {
       const text = `Paragraph 1.
 
 Paragraph 2.`.replace(/\n/g, eol);
-      const { lastFrame } = renderWithProviders(
+      const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
         <MarkdownDisplay {...baseProps} text={text} />,
       );
+      await waitUntilReady();
       expect(lastFrame()).toMatchSnapshot();
+      unmount();
     });
 
-    it('correctly parses a mix of markdown elements', () => {
+    it('correctly parses a mix of markdown elements', async () => {
       const text = `
 # Main Title
 
@@ -180,13 +206,15 @@ some code
 
 Another paragraph.
 `.replace(/\n/g, eol);
-      const { lastFrame } = renderWithProviders(
+      const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
         <MarkdownDisplay {...baseProps} text={text} />,
       );
+      await waitUntilReady();
       expect(lastFrame()).toMatchSnapshot();
+      unmount();
     });
 
-    it('hides line numbers in code blocks when showLineNumbers is false', () => {
+    it('hides line numbers in code blocks when showLineNumbers is false', async () => {
       const text = '```javascript\nconst x = 1;\n```'.replace(/\n/g, eol);
       const settings = new LoadedSettings(
         { path: '', settings: {}, originalSettings: {} },
@@ -201,21 +229,25 @@ Another paragraph.
         [],
       );
 
-      const { lastFrame } = renderWithProviders(
+      const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
         <MarkdownDisplay {...baseProps} text={text} />,
         { settings },
       );
+      await waitUntilReady();
       expect(lastFrame()).toMatchSnapshot();
       expect(lastFrame()).not.toContain(' 1 ');
+      unmount();
     });
 
-    it('shows line numbers in code blocks by default', () => {
+    it('shows line numbers in code blocks by default', async () => {
       const text = '```javascript\nconst x = 1;\n```'.replace(/\n/g, eol);
-      const { lastFrame } = renderWithProviders(
+      const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
         <MarkdownDisplay {...baseProps} text={text} />,
       );
+      await waitUntilReady();
       expect(lastFrame()).toMatchSnapshot();
       expect(lastFrame()).toContain(' 1 ');
+      unmount();
     });
   });
 });