fix: flakey CLI tests (#8124)

fix: flakey test with waitForNextRender

Author: tingwai

extensions/cli/src/ui/__tests__/TUIChat.fileSearch.test.tsx

@@ -1,4 +1,5 @@
 import { renderInMode, testSingleMode } from "./TUIChat.dualModeHelper.js";
+import { waitForNextRender } from "./TUIChat.testHelper.js";
 
 describe("TUIChat - @ File Search Tests", () => {
   testSingleMode("shows @ character when user types @", "local", async () => {
@@ -56,9 +57,8 @@ describe("TUIChat - @ File Search Tests", () => {
 
     // Type multiple @ characters
     stdin.write("@@test");
-
     // Wait for UI update
-    await new Promise((resolve) => setTimeout(resolve, 500));
+    await waitForNextRender();
 
     const frame = lastFrame();
 

extensions/cli/src/ui/__tests__/TUIChat.input.test.tsx

@@ -1,10 +1,12 @@
-import { testBothModes, renderInMode } from "./TUIChat.dualModeHelper.js";
+import { renderInMode, testBothModes } from "./TUIChat.dualModeHelper.js";
+import { waitForNextRender } from "./TUIChat.testHelper.js";
 
 describe("TUIChat - User Input Tests", () => {
-  testBothModes("shows typed text in input field", (mode) => {
+  testBothModes("shows typed text in input field", async (mode) => {
     const { lastFrame, stdin } = renderInMode(mode);
 
     stdin.write("Testing 123");
+    await waitForNextRender();
 
     const frame = lastFrame();
     // The input might be in a different format, let's be more flexible
@@ -23,13 +25,14 @@ describe("TUIChat - User Input Tests", () => {
   testBothModes("handles Enter key to submit", async (mode) => {
     const { lastFrame, stdin } = renderInMode(mode);
 
+    await waitForNextRender();
     const beforeEnter = lastFrame();
     expect(beforeEnter).toContain("Ask anything");
 
     stdin.write("\r");
 
     // Wait for the UI to update after pressing enter
-    await new Promise((resolve) => setTimeout(resolve, 50));
+    await new Promise((resolve) => setTimeout(resolve, 500));
 
     const afterEnter = lastFrame();
 
@@ -46,20 +49,22 @@ describe("TUIChat - User Input Tests", () => {
 
   testBothModes(
     "handles special characters in input without crashing",
-    (mode) => {
+    async (mode) => {
       const { lastFrame, stdin } = renderInMode(mode);
 
       // Try typing various special characters
       stdin.write("!@#$%^&*()");
+      await waitForNextRender();
 
       const frame = lastFrame();
 
       // Should handle special characters without crashing
       expect(frame).toBeDefined();
       expect(frame).not.toBe("");
 
-      // UI should still be functional
-      expect(frame).toContain("Ask anything");
+      // UI should still be functional and show the typed special characters
+      // Note: "Ask anything" placeholder is replaced when text is typed
+      expect(frame).toContain("!@#$%^&*()");
 
       // Mode-specific UI elements
       if (mode === "remote") {

extensions/cli/src/ui/__tests__/TUIChat.slashCommands.test.tsx

@@ -1,14 +1,13 @@
 import { renderInMode, testBothModes } from "./TUIChat.dualModeHelper.js";
+import { waitForNextRender } from "./TUIChat.testHelper.js";
 
 describe("TUIChat - Slash Commands Tests", () => {
   testBothModes("shows slash when user types /", async (mode) => {
     const { lastFrame, stdin } = renderInMode(mode);
 
     // Type / to trigger slash command
     stdin.write("/");
-
-    // Wait a bit for the UI to update
-    await new Promise((resolve) => setTimeout(resolve, 200));
+    await waitForNextRender();
 
     const frame = lastFrame();
 
@@ -29,9 +28,7 @@ describe("TUIChat - Slash Commands Tests", () => {
 
     // Type /exi to trigger slash command filtering
     stdin.write("/exi");
-
-    // Wait a bit for the UI to update (allow extra time in both modes)
-    await new Promise((resolve) => setTimeout(resolve, 600));
+    await waitForNextRender();
 
     const frame = lastFrame();
 
@@ -52,12 +49,10 @@ describe("TUIChat - Slash Commands Tests", () => {
 
     // Type /exi and then tab
     stdin.write("/exi");
-
-    await new Promise((resolve) => setTimeout(resolve, 200));
+    await waitForNextRender();
 
     stdin.write("\t");
-
-    await new Promise((resolve) => setTimeout(resolve, 200));
+    await waitForNextRender();
 
     const frameAfterTab = lastFrame();
 
@@ -80,8 +75,7 @@ describe("TUIChat - Slash Commands Tests", () => {
 
     // Type just /
     stdin.write("/");
-
-    await new Promise((resolve) => setTimeout(resolve, 600));
+    await waitForNextRender();
 
     const frame = lastFrame();
 
@@ -113,8 +107,7 @@ describe("TUIChat - Slash Commands Tests", () => {
 
       // Type a complete command name first
       stdin.write("/title");
-
-      await new Promise((resolve) => setTimeout(resolve, 200));
+      await waitForNextRender();
 
       const frameAfterCommand = lastFrame();
       if (mode === "remote") {
@@ -127,8 +120,7 @@ describe("TUIChat - Slash Commands Tests", () => {
 
       // Now add a space and arguments
       stdin.write(" My Session Title");
-
-      await new Promise((resolve) => setTimeout(resolve, 200));
+      await waitForNextRender();
 
       const frameAfterArgs = lastFrame();
 
@@ -151,17 +143,15 @@ describe("TUIChat - Slash Commands Tests", () => {
 
       // Type a complete command with arguments
       stdin.write("/title Test Session");
-
-      await new Promise((resolve) => setTimeout(resolve, 200));
+      await waitForNextRender();
 
       const frameBeforeEnter = lastFrame();
       expect(frameBeforeEnter).toContain("/title");
       expect(frameBeforeEnter).toContain("Test Session");
 
       // Press Enter - this should execute the command, not try to autocomplete
       stdin.write("\r");
-
-      await new Promise((resolve) => setTimeout(resolve, 300));
+      await waitForNextRender();
 
       const frameAfterEnter = lastFrame();
 

extensions/cli/src/ui/__tests__/TUIChat.testHelper.ts

@@ -422,6 +422,20 @@ export async function sendMessage(
   await new Promise((resolve) => setTimeout(resolve, waitTime));
 }
 
+/**
+ * Helper to wait for next render cycle to complete
+ * Use this after stdin.write() to ensure at least one render has occurred
+ * This prevents flaky tests caused by calling lastFrame() before React renders
+ */
+export async function waitForNextRender(): Promise<void> {
+  // Wait for multiple ticks to ensure render completes
+  await new Promise((resolve) => setImmediate(resolve));
+  await new Promise((resolve) => setImmediate(resolve));
+  // Add a delay to allow Ink terminal UI to render
+  // CI environments are slower, so we need a longer delay
+  await new Promise((resolve) => setTimeout(resolve, 500));
+}
+
 /**
  * Helper to check if UI shows remote mode indicators
  */