tests: stabilize ToolBaseGenUIPage haiku comparison

Author: contextablemark

typescript-sdk/apps/dojo/e2e/featurePages/ToolBaseGenUIPage.ts

@@ -85,60 +85,55 @@ export class ToolBaseGenUIPage {
   }
 
   async extractMainDisplayHaikuContent(page: Page): Promise<string> {
-    // Wait for main haiku lines to be present
-    const mainDisplayLines = page.locator('[data-testid="main-haiku-line"]');
-    const mainCount = await mainDisplayLines.count();
+    const activeCard = page.locator('[data-testid="main-haiku-display"].active').last();
+
+    try {
+      await activeCard.waitFor({ state: 'visible', timeout: 5000 });
+    } catch (error) {
+      // Fallback to any visible haiku lines if the active card isn't available yet
+      const fallbackLines = page.locator('[data-testid="main-haiku-line"]');
+      const fallbackCount = await fallbackLines.count();
+      if (fallbackCount === 0) {
+        return '';
+      }
+
+      const fallbackLineTexts: string[] = [];
+      for (let i = 0; i < fallbackCount; i++) {
+        const fallbackLine = fallbackLines.nth(i);
+        const japaneseText = await fallbackLine.locator('p').first().innerText();
+        fallbackLineTexts.push(japaneseText);
+      }
+
+      return fallbackLineTexts.join('').replace(/\s/g, '');
+    }
 
-    if (mainCount === 0) {
+    const mainDisplayLines = activeCard.locator('[data-testid="main-haiku-line"]');
+    const count = await mainDisplayLines.count();
+    if (count === 0) {
       return '';
     }
 
-    // Take only the last 3 lines (most recent haiku)
-    // Haikus are 3 lines, and they're appended in order
-    const startIndex = Math.max(0, mainCount - 3);
     const lines: string[] = [];
-
-    for (let i = startIndex; i < mainCount; i++) {
+    for (let i = 0; i < count; i++) {
       const haikuLine = mainDisplayLines.nth(i);
       const japaneseText = await haikuLine.locator('p').first().innerText();
       lines.push(japaneseText);
     }
 
-    const mainHaikuContent = lines.join("").replace(/\s/g, "");
-    return mainHaikuContent;
+    return lines.join('').replace(/\s/g, '');
   }
 
   async checkHaikuDisplay(page: Page): Promise<void> {
     const chatHaikuContent = await this.extractChatHaikuContent(page);
 
-    await page.waitForTimeout(3000);
-
-    // Check that the haiku exists somewhere in the carousel
-    const carousel = page.locator('[data-testid="haiku-carousel"]');
-    await carousel.waitFor({ state: "visible", timeout: 10000 });
-
-    const allCarouselCards = carousel.locator('[data-testid="haiku-card"]');
-    const cardCount = await allCarouselCards.count();
-
-    let foundMatch = false;
-    for (let i = 0; i < cardCount; i++) {
-      const card = allCarouselCards.nth(i);
-      const lines = card.locator('[data-testid="haiku-japanese-line"]');
-      const lineCount = await lines.count();
-      const cardLines: string[] = [];
-
-      for (let j = 0; j < lineCount; j++) {
-        const text = await lines.nth(j).innerText();
-        cardLines.push(text);
-      }
-
-      const cardContent = cardLines.join("").replace(/\s/g, "");
-      if (cardContent === chatHaikuContent) {
-        foundMatch = true;
-        break;
-      }
-    }
-
-    expect(foundMatch).toBe(true);
+    await expect
+      .poll(async () => {
+        const content = await this.extractMainDisplayHaikuContent(page);
+        return content;
+      }, {
+        timeout: 10000,
+        message: 'Main display did not match the latest chat haiku',
+      })
+      .toBe(chatHaikuContent);
   }
 }