From e34f39ac75be678e729be4b5795bc73d88cbfdaf Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Tue, 21 Jan 2025 17:45:10 -0300
Subject: [PATCH] test: update data-testid attributes for chat memory and
 OpenAI model elements (#5823)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🐛 (generalBugs-shard-9.spec.ts): fix incorrect test selector for elementChatMemoryOutput to match updated element ID
🐛 (generalBugs-shard-3.spec.ts): fix incorrect test selector for elementsOpenAiOutput to match updated element ID

* 📝 (refreshButton.tsx): add data-testid attribute to RefreshButton component for testing purposes
🐛 (Vector Store.spec.ts): fix import statement to include 'expect' in Playwright test file
🐛 (Vector Store.spec.ts): remove unnecessary test.skip block for ASTRA_DB_API_ENDPOINT
🐛 (Vector Store.spec.ts): fix selectors and interactions for refresh buttons and dropdown options in Playwright test file

* ✨ (freeze-path.spec.ts): refactor test cases to use a new helper function moveSlider for interacting with slider elements in a more efficient and readable way
---
 .../src/components/ui/refreshButton.tsx       |  1 +
 .../tests/core/features/freeze-path.spec.ts   | 40 ++++++++-----
 .../core/integrations/Vector Store.spec.ts    | 57 +++++++++++++++----
 3 files changed, 72 insertions(+), 26 deletions(-)

diff --git a/src/frontend/src/components/ui/refreshButton.tsx b/src/frontend/src/components/ui/refreshButton.tsx
index f0797f5d3..0439eafc5 100644
--- a/src/frontend/src/components/ui/refreshButton.tsx
+++ b/src/frontend/src/components/ui/refreshButton.tsx
@@ -48,6 +48,7 @@ function RefreshButton({
       id={id}
       size={"icon"}
       loading={isLoading}
+      data-testid={id}
     >
       {button_text && <span className="mr-1">{button_text}</span>}
       <IconComponent
diff --git a/src/frontend/tests/core/features/freeze-path.spec.ts b/src/frontend/tests/core/features/freeze-path.spec.ts
index b2ed3cd91..43dbcac5b 100644
--- a/src/frontend/tests/core/features/freeze-path.spec.ts
+++ b/src/frontend/tests/core/features/freeze-path.spec.ts
@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test";
+import { expect, Page, test } from "@playwright/test";
 import * as dotenv from "dotenv";
 import path from "path";
 import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
@@ -45,14 +45,6 @@ test(
       .getByTestId("default_slider_display_value")
       .click({ force: true });
 
-    await evaluateReactStateChanges(
-      page,
-      '[data-testid="slider_input"]',
-      "1.0",
-    );
-
-    await page.keyboard.press("Enter");
-
     await page.waitForSelector('[data-testid="button_run_chat output"]', {
       timeout: 1000,
     });
@@ -84,11 +76,7 @@ test(
       timeout: 1000,
     });
 
-    await evaluateReactStateChanges(
-      page,
-      '[data-testid="slider_input"]',
-      "1.2",
-    );
+    await moveSlider(page, "right", false);
 
     await page.waitForSelector('[data-testid="button_run_chat output"]', {
       timeout: 1000,
@@ -172,3 +160,27 @@ test(
     expect(secondRandomTextGeneratedByAI).toEqual(thirdRandomTextGeneratedByAI);
   },
 );
+
+async function moveSlider(
+  page: Page,
+  side: "left" | "right",
+  advanced: boolean = false,
+) {
+  const thumbSelector = `slider_thumb${advanced ? "_advanced" : ""}`;
+  const trackSelector = `slider_track${advanced ? "_advanced" : ""}`;
+
+  await page.getByTestId(thumbSelector).click();
+
+  const trackBoundingBox = await page.getByTestId(trackSelector).boundingBox();
+
+  if (trackBoundingBox) {
+    const moveDistance =
+      trackBoundingBox.width * 0.1 * (side === "left" ? -1 : 1);
+    const centerX = trackBoundingBox.x + trackBoundingBox.width / 2;
+    const centerY = trackBoundingBox.y + trackBoundingBox.height / 2;
+
+    await page.mouse.move(centerX + moveDistance, centerY);
+    await page.mouse.down();
+    await page.mouse.up();
+  }
+}
diff --git a/src/frontend/tests/core/integrations/Vector Store.spec.ts b/src/frontend/tests/core/integrations/Vector Store.spec.ts
index c1e0ff7dd..352508519 100644
--- a/src/frontend/tests/core/integrations/Vector Store.spec.ts	
+++ b/src/frontend/tests/core/integrations/Vector Store.spec.ts	
@@ -1,4 +1,4 @@
-import { Page, test } from "@playwright/test";
+import { expect, Page, test } from "@playwright/test";
 import path from "path";
 import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
 import { extractAndCleanCode } from "../../utils/extract-and-clean-code";
@@ -11,10 +11,7 @@ test(
       !process?.env?.OPENAI_API_KEY,
       "OPENAI_API_KEY required to run this test",
     );
-    test.skip(
-      !process?.env?.ASTRA_DB_API_ENDPOINT,
-      "ASTRA_DB_API_ENDPOINT required to run this test",
-    );
+
     test.skip(
       !process?.env?.ASTRA_DB_APPLICATION_TOKEN,
       "ASTRA_DB_APPLICATION_TOKEN required to run this test",
@@ -99,15 +96,51 @@ test(
       .getByTestId("popover-anchor-input-token")
       .nth(1)
       .fill(process.env.ASTRA_DB_APPLICATION_TOKEN ?? "");
-    // Astra DB endpoints
+
     await page
-      .getByTestId("popover-anchor-input-api_endpoint")
-      .nth(0)
-      .fill(process.env.ASTRA_DB_API_ENDPOINT ?? "");
+      .getByTestId("popover-anchor-input-collection_name_new")
+      .first()
+      .fill("fe_tests");
     await page
-      .getByTestId("popover-anchor-input-api_endpoint")
-      .nth(1)
-      .fill(process.env.ASTRA_DB_API_ENDPOINT ?? "");
+      .getByTestId("popover-anchor-input-collection_name_new")
+      .last()
+      .fill("fe_tests");
+
+    await page.waitForTimeout(500);
+
+    // Click first refresh button and wait for disabled->enabled transition
+    await page.getByTestId("refresh-button-api_endpoint").first().click();
+    await expect(
+      page.getByTestId("refresh-button-api_endpoint").first(),
+    ).toHaveAttribute("disabled", "");
+    await expect(
+      page.getByTestId("refresh-button-api_endpoint").first(),
+    ).not.toHaveAttribute("disabled", "");
+
+    // Click second refresh button and wait for disabled->enabled transition
+    await page.getByTestId("refresh-button-api_endpoint").last().click();
+    await expect(
+      page.getByTestId("refresh-button-api_endpoint").last(),
+    ).toHaveAttribute("disabled", "");
+    await expect(
+      page.getByTestId("refresh-button-api_endpoint").last(),
+    ).not.toHaveAttribute("disabled", "");
+
+    await page.getByTestId("dropdown_str_api_endpoint").first().click();
+
+    await page.waitForSelector('[data-testid="langflow-1-option"]', {
+      timeout: 100000,
+    });
+
+    await page.getByTestId("langflow-1-option").last().click();
+
+    await page.getByTestId("dropdown_str_api_endpoint").last().click();
+
+    await page.waitForSelector('[data-testid="langflow-1-option"]', {
+      timeout: 100000,
+    });
+
+    await page.getByTestId("langflow-1-option").last().click();
 
     const fileChooserPromise = page.waitForEvent("filechooser");
     await page.getByTestId("input-file-component").last().click();