Update ToolBaseGenUIPage.ts

Attempting to resync with main again.

Author: contextablemark

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

@@ -85,55 +85,77 @@ export class ToolBaseGenUIPage {
   }
 
   async extractMainDisplayHaikuContent(page: Page): Promise<string> {
-    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 '';
+    await page.waitForTimeout(2000);
+    const carousel = page.locator('[data-testid="haiku-carousel"]');
+    await carousel.waitFor({ state: "visible", timeout: 10000 });
+
+    // Find the visible carousel item (the active slide)
+    const carouselItems = carousel.locator('[data-testid^="carousel-item-"]');
+    const itemCount = await carouselItems.count();
+    let activeCard = null;
+
+    // Find the visible/active carousel item
+    for (let i = 0; i < itemCount; i++) {
+      const item = carouselItems.nth(i);
+      const isVisible = await item.isVisible();
+      if (isVisible) {
+        activeCard = item.locator('[data-testid="haiku-card"]');
+        break;
       }
-
-      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, '');
     }
 
-    const mainDisplayLines = activeCard.locator('[data-testid="main-haiku-line"]');
-    const count = await mainDisplayLines.count();
-    if (count === 0) {
-      return '';
+    if (!activeCard) {
+      // Fallback to first card if none found visible
+      activeCard = carousel.locator('[data-testid="haiku-card"]').first();
     }
 
+    const mainDisplayLines = activeCard.locator('[data-testid="haiku-japanese-line"]');
+    const mainCount = await mainDisplayLines.count();
     const lines: string[] = [];
-    for (let i = 0; i < count; i++) {
-      const haikuLine = mainDisplayLines.nth(i);
-      const japaneseText = await haikuLine.locator('p').first().innerText();
-      lines.push(japaneseText);
+
+    if (mainCount > 0) {
+      for (let i = 0; i < mainCount; i++) {
+        const haikuLine = mainDisplayLines.nth(i);
+        const japaneseText = await haikuLine.innerText();
+        lines.push(japaneseText);
+      }
     }
 
-    return lines.join('').replace(/\s/g, '');
+    const mainHaikuContent = lines.join("").replace(/\s/g, "");
+    return mainHaikuContent;
   }
 
   async checkHaikuDisplay(page: Page): Promise<void> {
     const chatHaikuContent = await this.extractChatHaikuContent(page);
 
-    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);
+    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);
   }
 }