♻️ (playwright.config.ts): increase workers to 10 for faster parallel tests

♻️ (playwright.config.ts): set headless to false for better debugging

♻️ (addNewVariableButton.tsx): add data-testid to save button for testing
🐛 (addNewVariableButton.tsx): fix optional chaining in error handling

♻️ (sideBarFolderButtons/index.tsx): add data-testid to input for testing
♻️ (sideBarFolderButtons/index.tsx): remove unnecessary commas

🐛 (api.tsx): fix duplicate request check to include method "get"
♻️ (api.tsx): remove unnecessary commas in function calls

♻️ (index.tsx): reorder import statements for better readability
💡 (index.tsx): remove trailing commas to adhere to coding standards
✅ (chatInputOutput.spec.ts): update file path for ChatTest.json for consistency
🐛 (darkStore.ts): add null check for GitHub stars to prevent potential errors

✅ (tests): update chatInputOutputUser.spec.ts to add new test for output inspection
🔧 (tests): fix path for collection.json in dragAndDrop.spec.ts

✅ (filterEdge.spec.ts): fix locator strings and remove redundant code
✅ (floatComponent.spec.ts): correct checkbox state expectations and remove redundant tests

✅ (folders.spec.ts): update folder creation and editing flow for consistency
✅ (globalVariables.spec.ts): remove redundant 'Save Variable' click action
✅ (inputComponent.spec.ts): fix incorrect locator for server port and improve readability

✅ (intComponent.spec.ts): add additional test steps for more options modal
✅ (saveComponents.spec.ts): update file path for flow_group_test.json

src/frontend/playwright.config.ts

@@ -21,7 +21,7 @@ export default defineConfig({
   /* Retry on CI only */
   retries: process.env.CI ? 2 : 0,
   /* Opt out of parallel tests on CI. */
-  workers: 1,
+  workers: 10,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   timeout: 120 * 1000,
   // reporter: [
@@ -45,6 +45,9 @@ export default defineConfig({
       name: "chromium",
       use: {
         ...devices["Desktop Chrome"],
+        launchOptions: {
+          headless: false,
+        },
         contextOptions: {
           // chromium-specific permissions
           permissions: ["clipboard-read", "clipboard-write"],
@@ -57,6 +60,7 @@ export default defineConfig({
       use: {
         ...devices["Desktop Firefox"],
         launchOptions: {
+          headless: false,
           firefoxUserPrefs: {
             "dom.events.asyncClipboard.readText": true,
             "dom.events.testing.asyncClipboard": true,

src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx

@@ -65,7 +65,7 @@ export default function AddNewVariableButton({ children }): JSX.Element {
         let responseError = error as ResponseErrorDetailAPI;
         setErrorData({
           title: "Error creating variable",
-          list: [responseError.response.data.detail ?? "Unknown error"],
+          list: [responseError?.response?.data?.detail ?? "Unknown error"],
         });
       });
   }
@@ -138,7 +138,9 @@ export default function AddNewVariableButton({ children }): JSX.Element {
         </div>
       </BaseModal.Content>
       <BaseModal.Footer>
-        <Button onClick={handleSaveVariable}>Save Variable</Button>
+        <Button data-testid="save-variable-button" onClick={handleSaveVariable}>
+          Save Variable
+        </Button>
       </BaseModal.Footer>
     </BaseModal>
   );

src/frontend/src/components/sidebarComponent/components/sideBarFolderButtons/index.tsx

@@ -261,6 +261,7 @@ const SideBarFoldersButtonsComponent = ({
                         }}
                         value={foldersNames[item.name]}
                         id={`input-folder-${item.name}`}
+                        data-testid={`input-folder`}
                       />
                     </div>
                   ) : (

src/frontend/src/controllers/API/api.tsx

@@ -91,7 +91,8 @@ function ApiInterceptor() {
         if (
           config?.url === lastUrl &&
           !isContained &&
-          lastMethodCalled === config.method
+          lastMethodCalled === config.method &&
+          lastMethodCalled === "get"
         ) {
           return Promise.reject("Duplicate request");
         }

src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx

@@ -44,8 +44,8 @@ import useFetchDataOnMount from "../../../hooks/use-fetch-data-on-mount";
 import useHandleOnNewValue from "../../../hooks/use-handle-new-value";
 import useHandleNodeClass from "../../../hooks/use-handle-node-class";
 import useHandleRefreshButtonPress from "../../../hooks/use-handle-refresh-buttons";
-import TooltipRenderComponent from "../tooltipRenderComponent";
 import OutputModal from "../outputModal";
+import TooltipRenderComponent from "../tooltipRenderComponent";
 
 export default function ParameterComponent({
   left,
@@ -273,6 +273,7 @@ export default function ParameterComponent({
                   <button
                     disabled={!displayOutputPreview}
                     onClick={() => setOpenOutputModal(true)}
+                    data-testid={`output-inspection-${title.toLowerCase()}`}
                   >
                     <IconComponent
                       className={classNames(

src/frontend/src/stores/darkStore.ts

@@ -33,7 +33,7 @@ export const useDarkStore = create<DarkStoreType>((set, get) => ({
     // if lastUpdated is null or the difference is greater than 2 hours
     if (lastUpdated === null || diff > 7200000) {
       getRepoStars("langflow-ai", "langflow").then((res) => {
-        window.localStorage.setItem("githubStars", res.toString());
+        window.localStorage.setItem("githubStars", res?.toString() ?? "0");
         window.localStorage.setItem(
           "githubStarsLastUpdated",
           new Date().toString(),

src/frontend/tests/end-to-end/chatInputOutput.spec.ts

@@ -23,7 +23,7 @@ test("chat_io_teste", async ({ page }) => {
   }
 
   const jsonContent = readFileSync(
-    "tests/end-to-end/assets/ChatTest.json",
+    "src/frontend/tests/end-to-end/assets/ChatTest.json",
     "utf-8",
   );
 

src/frontend/tests/end-to-end/chatInputOutputUser.spec.ts

@@ -90,3 +90,57 @@ test("user must interact with chat with Input/Output", async ({ page }) => {
       .isVisible(),
   );
 });
+
+test("user must be able to see output inspection", async ({ page }) => {
+  if (!process.env.CI) {
+    dotenv.config();
+    dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+  }
+
+  await page.goto("/");
+
+  await page.waitForTimeout(1000);
+
+  let modalCount = 0;
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByRole("heading", { name: "Basic Prompting" }).click();
+  await page.waitForTimeout(1000);
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+
+  if (!process.env.OPENAI_API_KEY) {
+    //You must set the OPENAI_API_KEY on .env file to run this test
+    expect(false).toBe(true);
+  }
+
+  await page
+    .getByTestId("popover-anchor-input-openai_api_key")
+    .fill(process.env.OPENAI_API_KEY ?? "");
+
+  await page.getByTestId("button_run_chat output").last().click();
+
+  await page.waitForTimeout(2000);
+
+  await page.getByTestId("icon-ScanEye").last().click();
+
+  const textAreaOutputValue = await page.getByPlaceholder("Empty").inputValue();
+  expect(textAreaOutputValue).not.toBe("");
+  expect(textAreaOutputValue).not.toBe(null);
+});

src/frontend/tests/end-to-end/dragAndDrop.spec.ts

@@ -26,7 +26,7 @@ test.describe("drag and drop test", () => {
     await page.locator("span").filter({ hasText: "My Collection" }).isVisible();
     // Read your file into a buffer.
     const jsonContent = readFileSync(
-      "tests/end-to-end/assets/collection.json",
+      "src/frontend/tests/end-to-end/assets/collection.json",
       "utf-8",
     );
 

src/frontend/tests/end-to-end/filterEdge.spec.ts

@@ -148,7 +148,6 @@ test("LLMChain - Filter", async ({ page }) => {
   await expect(page.getByTestId("model_specsChatOllama")).toBeVisible();
   await expect(page.getByTestId("model_specsChatOpenAI")).toBeVisible();
   await expect(page.getByTestId("model_specsChatVertexAI")).toBeVisible();
-  await expect(page.getByTestId("model_specsCohere")).toBeVisible();
   await expect(
     page.getByTestId("model_specsGoogle Generative AI"),
   ).toBeVisible();

src/frontend/tests/end-to-end/floatComponent.spec.ts

@@ -60,26 +60,20 @@ test("FloatComponent", async ({ page }) => {
   await page.getByTestId("more-options-modal").click();
   await page.getByTestId("edit-button-modal").click();
 
-  await page.locator('//*[@id="showcache"]').click();
-  expect(await page.locator('//*[@id="showcache"]').isChecked()).toBeTruthy();
-
-  await page.locator('//*[@id="showcache"]').click();
-  expect(await page.locator('//*[@id="showcache"]').isChecked()).toBeFalsy();
-
   await page.getByTestId("showformat").click();
   expect(await page.locator('//*[@id="showformat"]').isChecked()).toBeTruthy();
 
   await page.getByTestId("showformat").click();
   expect(await page.locator('//*[@id="showformat"]').isChecked()).toBeFalsy();
 
+  await page.getByTestId("showmirostat").click();
+  expect(await page.locator('//*[@id="showmirostat"]').isChecked()).toBeFalsy();
+
   await page.getByTestId("showmirostat").click();
   expect(
     await page.locator('//*[@id="showmirostat"]').isChecked(),
   ).toBeTruthy();
 
-  await page.getByTestId("showmirostat").click();
-  expect(await page.locator('//*[@id="showmirostat"]').isChecked()).toBeFalsy();
-
   await page.getByTestId("showmirostat_eta").click();
   expect(
     await page.locator('//*[@id="showmirostat_eta"]').isChecked(),

src/frontend/tests/end-to-end/folders.spec.ts

@@ -31,33 +31,16 @@ test("CRUD folders", async ({ page }) => {
   await page.getByText("All").first().isVisible();
   await page.getByText("Select All").isVisible();
 
-  await page.getByText("New Folder", { exact: true }).last().click();
+  await page.getByText("New Folder", { exact: true }).first().click();
-  await page.getByPlaceholder("Insert a name for the folder").fill("test");
+  await page.getByText("New Folder").last().isVisible();
-  await page
-    .getByPlaceholder("Insert a description for the folder")
-    .fill("test");
-  await page.getByText("Save Folder").click();
-
   await page.waitForTimeout(1000);
-  await page.getByText("Folder created succefully").isVisible();
+  await page.getByText("New Folder").last().dblclick();
-  await page.getByText("test").last().isVisible();
+  await page.getByTestId("input-folder").fill("new folder test name");
-  await page
+  await page.keyboard.press("Enter");
-    .getByText("test")
+  await page.getByText("new folder test name").last().isVisible();
-    .last()
-    .hover()
-    .then(async () => {
-      await page.getByTestId("icon-pencil").last().click();
-    });
-
-  await page.getByPlaceholder("Insert a name for the folder").fill("test edit");
-  await page
-    .getByPlaceholder("Insert a description for the folder")
-    .fill("test edit");
-  await page.getByText("Edit Folder").last().click();
-  await page.getByText("test edit").last().isVisible();
 
   await page
-    .getByText("test edit")
+    .getByText("new folder test name")
     .last()
     .hover()
     .then(async () => {
@@ -74,7 +57,7 @@ test("add folder by drag and drop", async ({ page }) => {
   await page.waitForTimeout(2000);
 
   const jsonContent = readFileSync(
-    "tests/end-to-end/assets/collection.json",
+    "src/frontend/tests/end-to-end/assets/collection.json",
     "utf-8",
   );
 
@@ -131,17 +114,13 @@ test("change flow folder", async ({ page }) => {
   await page.getByText("All").first().isVisible();
   await page.getByText("Select All").isVisible();
 
-  await page.getByText("New Folder", { exact: true }).last().click();
+  await page.getByText("New Folder", { exact: true }).first().click();
-  await page.getByPlaceholder("Insert a name for the folder").fill("test");
+  await page.getByText("New Folder").last().isVisible();
-  await page
-    .getByPlaceholder("Insert a description for the folder")
-    .fill("test");
-
-  await page.getByText("Save Folder").click();
-
   await page.waitForTimeout(1000);
-  await page.getByText("Folder created succefully").isVisible();
+  await page.getByText("New Folder").last().dblclick();
-  await page.getByText("test").last().isVisible();
+  await page.getByTestId("input-folder").fill("new folder test name");
+  await page.keyboard.press("Enter");
+  await page.getByText("new folder test name").last().isVisible();
 
   await page.getByText("My Projects").last().click();
   await page.getByText("Basic Prompting").first().hover();

src/frontend/tests/end-to-end/globalVariables.spec.ts

@@ -69,7 +69,6 @@ test("GlobalVariables", async ({ page }) => {
   await page.getByText("Save Variable", { exact: true }).click();
   expect(page.getByText(credentialName, { exact: true })).not.toBeNull();
   await page.getByText(credentialName, { exact: true }).isVisible();
-  await page.getByText("Save Variable", { exact: true }).click();
   await page.waitForTimeout(2000);
 
   await page

src/frontend/tests/end-to-end/inputComponent.spec.ts

@@ -73,9 +73,9 @@ test("InputComponent", async ({ page }) => {
     await page.locator('//*[@id="showchroma_server_host"]').isChecked(),
   ).toBeTruthy();
 
-  await page.locator('//*[@id="showchroma_server_port"]').click();
+  await page.locator('//*[@id="showchroma_server_http_port"]').click();
   expect(
-    await page.locator('//*[@id="showchroma_server_port"]').isChecked(),
+    await page.locator('//*[@id="showchroma_server_http_port"]').isChecked(),
   ).toBeTruthy();
 
   await page.locator('//*[@id="showchroma_server_ssl_enabled"]').click();
@@ -110,9 +110,9 @@ test("InputComponent", async ({ page }) => {
     await page.locator('//*[@id="showchroma_server_host"]').isChecked(),
   ).toBeFalsy();
 
-  await page.locator('//*[@id="showchroma_server_port"]').click();
+  await page.locator('//*[@id="showchroma_server_http_port"]').click();
   expect(
-    await page.locator('//*[@id="showchroma_server_port"]').isChecked(),
+    await page.locator('//*[@id="showchroma_server_http_port"]').isChecked(),
   ).toBeFalsy();
 
   await page.locator('//*[@id="showchroma_server_ssl_enabled"]').click();

src/frontend/tests/end-to-end/intComponent.spec.ts

@@ -39,6 +39,12 @@ test("IntComponent", async ({ page }) => {
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
+
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
+  await page.getByTestId("showmax_tokens").click();
+
+  await page.getByText("Save Changes", { exact: true }).click();
   await page.getByTestId("int-input-max_tokens").click();
   await page
     .getByTestId("int-input-max_tokens")

src/frontend/tests/end-to-end/saveComponents.spec.ts

@@ -26,7 +26,7 @@ test.describe("save component tests", () => {
 
     // Read your file into a buffer.
     const jsonContent = readFileSync(
-      "tests/end-to-end/assets/flow_group_test.json",
+      "src/frontend/tests/end-to-end/assets/flow_group_test.json",
       "utf-8",
     );