feat: Add data-testid attributes to helpful and not helpful buttons a…

…nd update test of playground to include new functionality
langflow-ai · Dec 16, 2024 · db68696 · db68696
1 parent d4693eb
commit db68696
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 16 deletions.
diff --git a/...OModal/components/chatView/chatMessage/components/editMessageButton/newMessageOptions.tsx b/...OModal/components/chatView/chatMessage/components/editMessageButton/newMessageOptions.tsx
@@ -76,6 +76,7 @@ export function EditMessageButton({
                 size="icon"
                 onClick={() => handleEvaluate(true)}
                 className="h-8 w-8"
+                data-testid="helpful-button"
               >
                 <IconComponent
                   name={evaluation === true ? "ThumbUpIconCustom" : "ThumbsUp"}
@@ -92,6 +93,7 @@ export function EditMessageButton({
                 size="icon"
                 onClick={() => handleEvaluate(false)}
                 className="h-8 w-8"
+                data-testid="not-helpful-button"
               >
                 <IconComponent
                   name={

diff --git a/src/frontend/src/modals/IOModal/components/chatView/newChatView.tsx b/src/frontend/src/modals/IOModal/components/chatView/newChatView.tsx
@@ -177,7 +177,7 @@ export default function ChatView({
                   <h3 className="mt-2 pb-2 text-2xl font-semibold text-primary">
                     New chat
                   </h3>
-                  <p className="text-lg text-muted-foreground">
+                  <p className="text-lg text-muted-foreground" data-testid="new-chat-text">
                     <TextEffectPerChar>
                       Test your flow with a chat prompt
                     </TextEffectPerChar>

diff --git a/src/frontend/tests/core/features/playground.spec.ts b/src/frontend/tests/core/features/playground.spec.ts
@@ -22,7 +22,9 @@ test(
 
     await page.getByTestId("sidebar-search-input").click();
     await page.getByTestId("sidebar-search-input").fill("chat output");
-    await page.waitForTimeout(1000);
+    await page.waitForSelector('[data-testid="outputsChat Output"]', {
+      timeout: 100000,
+    });
 
     await page
       .getByTestId("outputsChat Output")
@@ -39,7 +41,9 @@ test(
 
     await page.getByTestId("sidebar-search-input").click();
     await page.getByTestId("sidebar-search-input").fill("chat input");
-    await page.waitForTimeout(1000);
+    await page.waitForSelector('[data-testid="inputsChat Input"]', {
+      timeout: 100000,
+    });
 
     await page
       .getByTestId("inputsChat Input")
@@ -53,7 +57,9 @@ test(
 
     await page.getByTestId("sidebar-search-input").click();
     await page.getByTestId("sidebar-search-input").fill("text output");
-    await page.waitForTimeout(1000);
+    await page.waitForSelector('[data-testid="outputsText Output"]', {
+      timeout: 100000,
+    });
 
     await page
       .getByTestId("outputsText Output")
@@ -168,7 +174,6 @@ test(
       .filter({ hasText: /^Usermessage 1$/ })
       .getByTestId("icon-Pen")
       .click();
-    await page.waitForTimeout(500);
 
     await page.getByTestId("textarea").fill("edit_1");
     await page.getByTestId("save-button").click();
@@ -177,8 +182,6 @@ test(
     // check cancel edit
     await page.getByTestId("sender_name_user").hover();
     await page.getByTestId("icon-Pen").first().click();
-    await page.waitForTimeout(500);
-
     await page.getByTestId("textarea").fill("cancel_edit");
     await page.getByTestId("cancel-button").click();
     await page.getByTestId("chat-message-User-edit_1").click();
@@ -190,15 +193,13 @@ test(
       .click();
     await page.getByTestId("chat-message-AI-message 1").hover();
     await page.getByTestId("icon-Pen").last().click();
-    await page.waitForTimeout(500);
 
     await page.getByTestId("textarea").fill("edit_bot_1");
     await page.getByTestId("save-button").click();
     await page.getByText("edit_bot_1").click();
     // check cancel edit bot
     await page.getByTestId("chat-message-AI-edit_bot_1").hover();
     await page.getByTestId("icon-Pen").last().click();
-    await page.waitForTimeout(500);
 
     await page.getByTestId("textarea").fill("edit_bot_cancel");
     await page.getByTestId("cancel-button").click();
@@ -243,21 +244,59 @@ test(
 
     // check new chat
     await page.getByTestId("new-chat").click();
-    await page.waitForTimeout(5000);
-    await page.getByText("New chat").click();
+    await page.waitForSelector('[data-testid="new-chat-text"]', {
+      timeout: 100000,
+    });
     await page.getByTestId("input-chat-playground").click();
     await page.getByTestId("input-chat-playground").fill("second session");
     await page.keyboard.press("Enter");
-    await page.waitForTimeout(5000);
-
     await page.getByTestId("chat-message-User-second session").click();
     await page
       .getByTestId("chat-message-AI-second session")
       .getByText("second session")
       .click();
     expect(await page.getByTestId("session-selector").count()).toBe(2);
-
-    const sessionElements = await page.getByTestId("session-selector").all();
-    expect(sessionElements.length).toBe(2);
+    // check helpful button
+    await page.getByTestId("chat-message-AI-second session").hover();
+    await page.getByTestId("helpful-button").click();
+    await page.getByTestId("chat-message-AI-second session").hover();
+    await expect(page.getByTestId("icon-ThumbUpIconCustom")).toBeVisible({
+      timeout: 10000,
+    });
+    await page.getByTestId("helpful-button").click();
+    await page.getByTestId("chat-message-AI-second session").hover();
+    await expect(page.getByTestId("icon-ThumbUpIconCustom")).toBeVisible({
+      timeout: 10000,
+      visible: false,
+    });
+    // check not helpful button
+    await page.getByTestId("chat-message-AI-second session").hover();
+    await page.getByTestId("not-helpful-button").click();
+    await page.getByTestId("chat-message-AI-second session").hover();
+    await expect(page.getByTestId("icon-ThumbDownIconCustom")).toBeVisible({
+      timeout: 10000,
+    });
+    await page.getByTestId("not-helpful-button").click();
+    await page.getByTestId("chat-message-AI-second session").hover();
+    await expect(page.getByTestId("icon-ThumbDownIconCustom")).toBeVisible({
+      timeout: 10000,
+      visible: false,
+    });
+    // check switch feedback
+    await page.getByTestId("chat-message-AI-second session").hover();
+    await page.getByTestId("helpful-button").click();
+    await page.getByTestId("chat-message-AI-second session").hover();
+    await expect(page.getByTestId("icon-ThumbUpIconCustom")).toBeVisible({
+      timeout: 10000,
+    });
+    await page.getByTestId("not-helpful-button").click();
+    await page.getByTestId("chat-message-AI-second session").hover();
+    await expect(page.getByTestId("icon-ThumbDownIconCustom")).toBeVisible({
+      timeout: 10000,
+    });
+    await expect(page.getByTestId("icon-ThumbUpIconCustom")).toBeVisible({
+      timeout: 10000,
+      visible: false,
+    });
   },
 );