test: Enhance test stability (langflow-ai#4566)

* 🐛 (genericIconComponent/index.tsx): fix optional chaining for split and map functions to prevent errors
🐛 (actionsMainPage-shard-1.spec.ts): remove redundant zoom_out click
🐛 (auto-login-off.spec.ts): reduce wait time from 2000ms to 1000ms
🐛 (freeze-path.spec.ts): change click target from "openai" to "OpenAI" for consistency
🐛 (freeze.spec.ts): change click target from "Split Text" to "Split Text" for consistency
🐛 (Dynamic Agent.spec.ts): skip test execution
🐛 (Hierarchical Agent.spec.ts): skip test execution
🐛 (Sequential Task Agent.spec.ts): skip test execution
🐛 (Simple Agent.spec.ts): skip test execution
🐛 (decisionFlow.spec.ts): change search input from "conditional router" to "if else"
🐛 (similarity.spec.ts): change search input from "openai" to "openai embedding"
🐛 (fileUploadComponent.spec.ts): enable test for file upload functionality

📝 (deleteComponents.spec.ts): Remove commented out code and enable test for deleting a component
📝 (deleteFlows.spec.ts): Enable test for deleting a flow
📝 (starter-projects.spec.ts): Enable test for interacting with starter projects
📝 (store-shard-3.spec.ts): Enable tests for ordering visualization and filtering by type
📝 (generalBugs-shard-13.spec.ts): Enable test for sharing a component on the store

* ⬆️ (typescript_test.yml): update matrix configuration to run tests on multiple shards for better parallelization
🔧 (typescript_test.yml): enable playwright test execution with shard index and total for parallel test execution

* 🐛 (genericIconComponent/index.tsx): fix optional chaining for split and map functions to prevent errors
🐛 (actionsMainPage-shard-1.spec.ts): remove redundant zoom_out click
🐛 (auto-login-off.spec.ts): reduce wait time from 2000ms to 1000ms
🐛 (freeze-path.spec.ts): change click target from "openai" to "OpenAI" for consistency
🐛 (freeze.spec.ts): change click target from "Split Text" to "Split Text" for consistency
🐛 (Dynamic Agent.spec.ts): skip test execution
🐛 (Hierarchical Agent.spec.ts): skip test execution
🐛 (Sequential Task Agent.spec.ts): skip test execution
🐛 (Simple Agent.spec.ts): skip test execution
🐛 (decisionFlow.spec.ts): change search input from "conditional router" to "if else"
🐛 (similarity.spec.ts): change search input from "openai" to "openai embedding"
🐛 (fileUploadComponent.spec.ts): enable test for file upload functionality

📝 (deleteComponents.spec.ts): Remove commented out code and enable test for deleting a component
📝 (deleteFlows.spec.ts): Enable test for deleting a flow
📝 (starter-projects.spec.ts): Enable test for interacting with starter projects
📝 (store-shard-3.spec.ts): Enable tests for ordering visualization and filtering by type
📝 (generalBugs-shard-13.spec.ts): Enable test for sharing a component on the store

* ⬆️ (typescript_test.yml): update matrix configuration to run tests on multiple shards for better parallelization
🔧 (typescript_test.yml): enable playwright test execution with shard index and total for parallel test execution

* 🐛 (Travel Planning Agent.spec.ts): Fix issue with setting API keys for OpenAI models and Search API
🐛 (Travel Planning Agent.spec.ts): Fix issue with clicking the wrong button for running chat output
🐛 (Travel Planning Agent.spec.ts): Fix issue with checking rate limit and skipping test logic
🐛 (Travel Planning Agent.spec.ts): Fix issue with checking output text for lowercase city names
🐛 (Vector Store.spec.ts): Fix issue with clicking the wrong button for creating a new flow
🐛 (Vector Store.spec.ts): Fix issue with filling the wrong input field for collection name in Vector Store RAG test

* 🔧 (generalBugs-shard-4.spec.ts): skip test case temporarily due to functionality not working with uplift designs

* Update test to use 'message history' instead of 'chat memory' in sidebar search input

* Update test selectors and expected values in dropdownComponent.spec.ts

* 📝 (Simple Agent.spec.ts): Remove unnecessary test.skip and commented out code
📝 (dropdownComponent.spec.ts): Update dropdown selection to match new text
📝 (starter-projects.spec.ts): Remove unused template IDs
📝 (store-shard-1.spec.ts): Update test.skip to test.skip for consistency
📝 (generalBugs-shard-10.spec.ts): Refactor test cases for promptText and newPromptText
📝 (generalBugs-shard-6.spec.ts): Add delay before interacting with elements to ensure stability

* Refactor tests to use `ControlOrMeta` for cross-platform keyboard shortcuts

* ✅ (Simple Agent.spec.ts): update timeout value for waitForSelector to improve test reliability and prevent false negatives

* Handle undefined stars in GithubStarComponent to prevent errors

* Add waitForSelector to ensure sidebar search input is visible before interaction in chatInputOutput test

* ✅ (Simple Agent.spec.ts): update timeout value to 5 minutes for "built successfully" message to allow for longer build times
✨ (Simple Agent.spec.ts): add additional test cases to check for the presence of "apple" in chat messages and ensure the total length of chat messages is greater than 100 characters

* 🐛 (Simple Agent.spec.ts): reduce timeout for "built successfully" text to improve test efficiency

* ✅ (auto-login-off.spec.ts): add delay before checking visibility of elements to ensure proper rendering and improve test reliability

* Fix indentation in TypeScript test workflow file

* Update test IDs and expected values in dropdownComponent.spec.ts

* 📝 (playground.spec.ts): remove redundant code related to zooming out and dragging elements in the playground test
📝 (deleteComponents.spec.ts): update selectors for clicking buttons and elements in the deleteComponents test
📝 (deleteFlows.spec.ts): update selectors for clicking buttons and elements in the deleteFlows test
📝 (starter-projects.spec.ts): update selectors for starter projects in the extended features test to match changes in the application's UI.

* ✅ (playground.spec.ts): remove skip from the test case to enable it to run during testing.

* Refactor timeout in playground test for better stability

---------

Co-authored-by: Gabriel Luiz Freitas Almeida <[email protected]>
Co-authored-by: anovazzi1 <[email protected]>

.github/workflows/typescript_test.yml

@@ -39,10 +39,9 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        #        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
-        #        shardTotal: [10]
-        shardIndex: [1]
-        shardTotal: [1]
+        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+        shardTotal: [10]
+
     env:
       OPENAI_API_KEY: ${{ inputs.openai_api_key || secrets.OPENAI_API_KEY }}
       STORE_API_KEY: ${{ inputs.store_api_key || secrets.STORE_API_KEY }}
@@ -121,8 +120,8 @@ jobs:
           max_attempts: 2
           command: |
             cd src/frontend
-      #            npx playwright test ${{ inputs.tests_folder }} --shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --list
-      #            npx playwright test ${{ inputs.tests_folder }} --trace on --shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --workers 2
+            npx playwright test ${{ inputs.tests_folder }} --shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --list
+            npx playwright test ${{ inputs.tests_folder }} --trace on --shard ${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --workers 2
 
       - name: Upload blob report to GitHub Actions Artifacts
         if: always()

src/frontend/src/components/appHeaderComponent/components/GithubStarButton/index.tsx

@@ -3,15 +3,15 @@ import { useDarkStore } from "@/stores/darkStore";
 import { FaGithub } from "react-icons/fa";
 
 export const GithubStarComponent = () => {
-  const stars = useDarkStore((state) => state.stars);
+  const stars: number | undefined = useDarkStore((state) => state.stars);
 
   return (
     <ShadTooltip content="Go to Github repo" side="bottom" styleClasses="z-10">
       <div className="group inline-flex h-8 items-center justify-center gap-1 rounded-md border bg-muted px-2 pr-0 hover:border-input hover:bg-secondary-hover">
         <FaGithub className="h-4 w-4" />
         <div className="hidden text-xs font-semibold lg:block">Star</div>
         <div className="-mr-px ml-1 flex h-8 items-center justify-center rounded-md rounded-l-none border bg-background px-2 text-xs font-semibold text-secondary-foreground group-hover:border-input">
-          {stars.toLocaleString() ?? 0}
+          {stars?.toLocaleString() ?? 0}
         </div>
       </div>
     </ShadTooltip>

src/frontend/src/components/genericIconComponent/index.tsx

@@ -36,9 +36,9 @@ export const ForwardedIconComponent = memo(
         nodeIconsLucide[name] ||
         nodeIconsLucide[
           name
-            .split("-")
-            .map((x) => String(x[0]).toUpperCase() + String(x).slice(1))
-            .join("")
+            ?.split("-")
+            ?.map((x) => String(x[0]).toUpperCase() + String(x).slice(1))
+            ?.join("")
         ];
       if (!TargetIcon) {
         if (!dynamicIconImports[name]) {

src/frontend/tests/core/features/actionsMainPage-shard-1.spec.ts

@@ -141,9 +141,9 @@ test("search components", async ({ page }) => {
   await page.getByTestId("fit_view").click();
   await page.getByTestId("zoom_out").click();
   await page.getByTestId("zoom_out").click();
-  await page.getByTestId("zoom_out").click();
 
   await page.getByText("Chat Input").first().click();
+  await page.waitForTimeout(500);
   await page.getByTestId("more-options-modal").click();
 
   await page.getByTestId("icon-SaveAll").first().click();

src/frontend/tests/core/features/auto-login-off.spec.ts

@@ -55,6 +55,8 @@ test("when auto_login is false, admin can CRUD user's and should see just your o
 
   await page.waitForSelector("text=new user added", { timeout: 30000 });
 
+  await page.waitForTimeout(1000);
+
   expect(await page.getByText(randomName, { exact: true }).isVisible()).toBe(
     true,
   );
@@ -64,6 +66,8 @@ test("when auto_login is false, admin can CRUD user's and should see just your o
 
   await page.waitForSelector("text=user deleted", { timeout: 30000 });
 
+  await page.waitForTimeout(1000);
+
   expect(await page.getByText(randomName, { exact: true }).isVisible()).toBe(
     false,
   );
@@ -147,7 +151,7 @@ test("when auto_login is false, admin can CRUD user's and should see just your o
     state: "visible",
   });
 
-  await page.waitForTimeout(2000);
+  await page.waitForTimeout(1000);
 
   await page.getByTestId("icon-ChevronLeft").first().click();
 
@@ -156,10 +160,14 @@ test("when auto_login is false, admin can CRUD user's and should see just your o
     state: "visible",
   });
 
+  await page.waitForTimeout(2000);
+
   expect(
     await page.getByText(randomFlowName, { exact: true }).last().isVisible(),
   ).toBe(true);
 
+  await page.waitForTimeout(500);
+
   await page.getByTestId("user-profile-settings").click();
 
   await page.getByText("Logout", { exact: true }).click();
@@ -232,6 +240,8 @@ test("when auto_login is false, admin can CRUD user's and should see just your o
     await page.getByText(secondRandomFlowName, { exact: true }).isVisible(),
   ).toBe(true);
 
+  await page.waitForTimeout(500);
+
   expect(
     await page.getByText(randomFlowName, { exact: true }).isVisible(),
   ).toBe(false);
@@ -258,6 +268,8 @@ test("when auto_login is false, admin can CRUD user's and should see just your o
   expect(
     await page.getByText(secondRandomFlowName, { exact: true }).isVisible(),
   ).toBe(false);
+  await page.waitForTimeout(500);
+
   expect(
     await page.getByText(randomFlowName, { exact: true }).isVisible(),
   ).toBe(true);

src/frontend/tests/core/features/freeze-path.spec.ts

@@ -129,7 +129,7 @@ test("user must be able to freeze a path", async ({ page }) => {
 
   await page.waitForTimeout(3000);
 
-  await page.getByText("openai").first().click();
+  await page.getByText("OpenAI", { exact: true }).last().click();
 
   await page.waitForTimeout(1000);
 

src/frontend/tests/core/features/freeze.spec.ts

@@ -255,7 +255,7 @@ test("user must be able to freeze a component", async ({ page }) => {
   await page.getByText("Close").last().click();
   await page.getByText("Close").last().click();
 
-  await page.getByText("Split Text", { exact: true }).click();
+  await page.getByText("Split Text", { exact: true }).last().click();
 
   await page.waitForTimeout(1000);
 

src/frontend/tests/core/features/playground.spec.ts

@@ -269,7 +269,7 @@ test("fresh start playground", async ({ page }) => {
   await page.getByTestId("input-chat-playground").click();
   await page.getByTestId("input-chat-playground").fill("second session");
   await page.keyboard.press("Enter");
-  await page.waitForTimeout(500);
+  await page.waitForTimeout(5000);
 
   await page.getByTestId("chat-message-User-second session").click();
   await page

src/frontend/tests/core/features/stop-building.spec.ts

@@ -25,11 +25,6 @@ test("user must be able to stop a building", async ({ page }) => {
 
   const getUA = await page.evaluate(() => navigator.userAgent);
   const userAgentInfo = uaParser(getUA);
-  let control = "Control";
-
-  if (userAgentInfo.os.name.includes("Mac")) {
-    control = "Meta";
-  }
 
   await page.getByTestId("blank-flow").click();
 
@@ -255,7 +250,7 @@ class CustomComponent(Component):
   await page.getByTestId("code-button-modal").click();
   await page.waitForTimeout(500);
 
-  await page.locator("textarea").last().press(`${control}+a`);
+  await page.locator("textarea").last().press(`ControlOrMeta+a`);
   await page.keyboard.press("Backspace");
   await page.locator("textarea").last().fill(timerCode);
   await page.locator('//*[@id="checkAndSaveBtn"]').click();

src/frontend/tests/core/integrations/Blog Writer.spec.ts

@@ -112,29 +112,4 @@ test("Blog Writer", async ({ page }) => {
   await page.getByText("turtles").last().isVisible();
   await page.getByText("sea").last().isVisible();
   await page.getByText("survival").last().isVisible();
-
-  //commented out for now because text input is not available in the playground
-
-  // await page.getByText("Instructions").last().click();
-
-  // const value = await page
-  //   .getByPlaceholder("Enter text...")
-  //   .last()
-  //   .inputValue();
-
-  // expect(value).toBe(
-  //   "Use the references above for style to write a new blog/tutorial about turtles. Suggest non-covered topics.",
-  // );
-
-  // await page.getByTestId("icon-ExternalLink").last().click();
-
-  // const count = await page
-  //   .getByText(
-  //     "Use the references above for style to write a new blog/tutorial about turtles. Suggest non-covered topics.",
-  //   )
-  //   .count();
-
-  // if (count <= 1) {
-  //   expect(false).toBe(true);
-  // }
 });

src/frontend/tests/core/integrations/Dynamic Agent.spec.ts

@@ -2,7 +2,7 @@ import { expect, test } from "@playwright/test";
 import * as dotenv from "dotenv";
 import path from "path";
 
-test("Dynamic Agent", async ({ page }) => {
+test.skip("Dynamic Agent", async ({ page }) => {
   test.skip(
     !process?.env?.OPENAI_API_KEY,
     "OPENAI_API_KEY required to run this test",

src/frontend/tests/core/integrations/Hierarchical Agent.spec.ts

@@ -3,7 +3,7 @@ import * as dotenv from "dotenv";
 import path from "path";
 import uaParser from "ua-parser-js";
 
-test("Hierarchical Tasks Agent", async ({ page }) => {
+test.skip("Hierarchical Tasks Agent", async ({ page }) => {
   test.skip(
     !process?.env?.OPENAI_API_KEY,
     "OPENAI_API_KEY required to run this test",
@@ -45,11 +45,6 @@ test("Hierarchical Tasks Agent", async ({ page }) => {
 
   const getUA = await page.evaluate(() => navigator.userAgent);
   const userAgentInfo = uaParser(getUA);
-  let control = "Control";
-
-  if (userAgentInfo.os.name.includes("Mac")) {
-    control = "Meta";
-  }
 
   await page.getByTestId("side_nav_options_all-templates").click();
   await page

src/frontend/tests/core/integrations/Sequential Task Agent.spec.ts

@@ -3,7 +3,7 @@ import * as dotenv from "dotenv";
 import path from "path";
 import uaParser from "ua-parser-js";
 
-test("Sequential Task Agent", async ({ page }) => {
+test.skip("Sequential Task Agent", async ({ page }) => {
   test.skip(
     !process?.env?.OPENAI_API_KEY,
     "OPENAI_API_KEY required to run this test",
@@ -40,11 +40,6 @@ test("Sequential Task Agent", async ({ page }) => {
 
   const getUA = await page.evaluate(() => navigator.userAgent);
   const userAgentInfo = uaParser(getUA);
-  let control = "Control";
-
-  if (userAgentInfo.os.name.includes("Mac")) {
-    control = "Meta";
-  }
 
   await page.getByTestId("side_nav_options_all-templates").click();
   await page

src/frontend/tests/core/integrations/Simple Agent.spec.ts

@@ -40,11 +40,6 @@ test("Simple Agent", async ({ page }) => {
 
   const getUA = await page.evaluate(() => navigator.userAgent);
   const userAgentInfo = uaParser(getUA);
-  let control = "Control";
-
-  if (userAgentInfo.os.name.includes("Mac")) {
-    control = "Meta";
-  }
 
   await page.getByTestId("side_nav_options_all-templates").click();
   await page.getByRole("heading", { name: "Simple Agent" }).first().click();
@@ -82,71 +77,22 @@ test("Simple Agent", async ({ page }) => {
   await page.getByTestId("dropdown_str_model_name").click();
   await page.getByTestId("gpt-4o-1-option").click();
 
-  await page.waitForTimeout(1000);
-
-  await page
-    .getByTestId("textarea_str_input_value")
-    .fill(
-      "Use the Python REPL tool to create a python function that calculates 4 + 4 and stores it in a variable.",
-    );
-
-  await page.getByTestId("button_run_chat output").click();
-  await page.waitForSelector("text=built successfully", { timeout: 30000 });
-
-  await page.getByText("built successfully").last().click({
-    timeout: 15000,
-  });
-
-  await page.getByText("Playground", { exact: true }).last().click();
-
-  await page.waitForSelector(
-    "text=Use the Python REPL tool to create a python function that calculates 4 + 4 and stores it in a variable.",
-    {
-      timeout: 30000,
-    },
-  );
-
-  await page.waitForTimeout(1000);
-
-  expect(page.getByText("User")).toBeVisible();
-
-  let pythonWords = await page.getByText("4 + 4").count();
-
-  expect(pythonWords).toBe(2);
-
-  await page
-    .getByPlaceholder("Send a message...")
-    .fill("write short python script to say hello world");
-
-  await page.getByTestId("button-send").last().click();
-
-  await page.waitForSelector(
-    "text=write short python script to say hello world",
-    {
-      timeout: 30000,
-    },
-  );
-
-  await page.waitForSelector('[data-testid="copy-code-button"]', {
-    timeout: 100000,
-    state: "visible",
-  });
-
-  await page.waitForTimeout(1000);
-
-  await page.getByTestId("copy-code-button").last().click();
-
   await page.waitForTimeout(500);
 
-  await page.getByPlaceholder("Send a message...").click();
+  await page.getByTestId("button_run_chat output").last().click();
 
-  await page.waitForTimeout(500);
+  await page.waitForSelector("text=built successfully", {
+    timeout: 10000 * 60 * 3,
+  });
 
-  await page.keyboard.press(`${control}+V`);
+  await page.getByTestId("playground-btn-flow-io").click();
 
-  await page.waitForTimeout(500);
+  const textContents = await page
+    .getByTestId("div-chat-message")
+    .allTextContents();
 
-  pythonWords = await page.getByText("print(").count();
+  const concatAllText = textContents.join(" ").toLowerCase();
 
-  expect(pythonWords).toBeGreaterThanOrEqual(1);
+  expect(concatAllText).toContain("apple");
+  expect(concatAllText.length).toBeGreaterThan(100);
 });