fix: update drag and drop test (#5048)

* refactor: Improve wait time for modal in drag and drop test

* ✨ (dragAndDrop.spec.ts): update file path to read collection.json from the correct location
🐛 (dragAndDrop.spec.ts): increase timeout for waiting for "uploaded successfully" text to prevent test failures

* ✨ (dragAndDrop.spec.ts): Add tests for drag and drop functionality to ensure users can drag and drop collections and flows without crashing the application
📝 (simulate-drag-and-drop.ts): Add utility function to simulate drag and drop events in tests for improved test coverage and functionality

* add debouncing time on file upload

* [autofix.ci] apply automated fixes

---------

Co-authored-by: cristhianzl <cristhian.lousa@gmail.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

src/frontend/src/hooks/flows/use-upload-flow.ts

@@ -9,7 +9,6 @@ import useAddFlow from "./use-add-flow";
 const useUploadFlow = () => {
   const addFlow = useAddFlow();
   const paste = useFlowStore((state) => state.paste);
-  const { mutate: refreshFlows } = useGetRefreshFlows();
 
   const getFlowsFromFiles = async ({
     files,

src/frontend/src/pages/MainPage/hooks/use-on-file-drop.tsx

@@ -1,4 +1,5 @@
 import useUploadFlow from "@/hooks/flows/use-upload-flow";
+import { useCallback, useRef } from "react";
 import { CONSOLE_ERROR_MSG } from "../../../constants/alerts_constants";
 import useAlertStore from "../../../stores/alertStore";
 
@@ -7,29 +8,44 @@ const useFileDrop = (type?: string) => {
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const uploadFlow = useUploadFlow();
 
-  const handleFileDrop = (e) => {
-    e.preventDefault();
-    if (e.dataTransfer.types.every((type) => type === "Files")) {
-      const files: File[] = Array.from(e.dataTransfer.files);
-      uploadFlow({
-        files,
-        isComponent:
-          type === "component" ? true : type === "flow" ? false : undefined,
-      })
-        .then(() => {
-          setSuccessData({
-            title: `All files uploaded successfully`,
-          });
-        })
-        .catch((error) => {
-          console.log(error);
-          setErrorData({
-            title: CONSOLE_ERROR_MSG,
-            list: [(error as Error).message],
-          });
-        });
-    }
-  };
+  const lastUploadTime = useRef<number>(0);
+  const DEBOUNCE_INTERVAL = 1000;
+
+  const handleFileDrop = useCallback(
+    (e) => {
+      e.preventDefault();
+
+      if (e.dataTransfer.types.every((type) => type === "Files")) {
+        const currentTime = Date.now();
+
+        if (currentTime - lastUploadTime.current >= DEBOUNCE_INTERVAL) {
+          lastUploadTime.current = currentTime;
+
+          const files: File[] = Array.from(e.dataTransfer.files);
+
+          uploadFlow({
+            files,
+            isComponent:
+              type === "component" ? true : type === "flow" ? false : undefined,
+          })
+            .then(() => {
+              setSuccessData({
+                title: `All files uploaded successfully`,
+              });
+            })
+            .catch((error) => {
+              console.log(error);
+              setErrorData({
+                title: CONSOLE_ERROR_MSG,
+                list: [(error as Error).message],
+              });
+            });
+        }
+      }
+    },
+    [type, uploadFlow, setSuccessData, setErrorData],
+  );
+
   return handleFileDrop;
 };
 

src/frontend/tests/extended/features/dragAndDrop.spec.ts

@@ -1,9 +1,10 @@
 import { expect, test } from "@playwright/test";
 import { readFileSync } from "fs";
-
-test.describe("drag and drop test", () => {
-  /// <reference lib="dom"/>
-  test("drop collection", { tag: ["@release"] }, async ({ page }) => {
+import { simulateDragAndDrop } from "../../utils/simulate-drag-and-drop";
+test(
+  "user should be able to drag and drop an old collection without crashing the application",
+  { tag: ["@release"] },
+  async ({ page }) => {
     await page.goto("/");
 
     let modalCount = 0;
@@ -18,33 +19,22 @@ test.describe("drag and drop test", () => {
 
     while (modalCount === 0) {
       await page.getByText("New Flow", { exact: true }).click();
-      await page.waitForTimeout(3000);
+      await page.waitForSelector('[data-testid="modal-title"]', {
+        timeout: 3000,
+      });
       modalCount = await page.getByTestId("modal-title")?.count();
     }
+
     await page.locator("span").filter({ hasText: "Close" }).first().click();
 
-    await page.locator("span").filter({ hasText: "My Collection" }).isVisible();
-    // Read your file into a buffer.
-    const jsonContent = readFileSync("tests/assets/collection.json", "utf-8");
+    await page.locator("span").filter({ hasText: "My Projects" }).isVisible();
 
-    // Create the DataTransfer and File
-    const dataTransfer = await page.evaluateHandle((data) => {
-      const dt = new DataTransfer();
-      // Convert the buffer to a hex array
-      const file = new File([data], "flowtest.json", {
-        type: "application/json",
-      });
-      dt.items.add(file);
-      return dt;
-    }, jsonContent);
+    await simulateDragAndDrop(page, "assets/collection.json", "cards-wrapper");
 
-    // Now dispatch
-    await page.getByTestId("cards-wrapper").dispatchEvent("drop", {
-      dataTransfer,
+    await page.waitForSelector("text=uploaded successfully", {
+      timeout: 60000 * 2,
     });
 
-    await page.waitForTimeout(3000);
-
     const genericNode = page.getByTestId("div-generic-node");
     const elementCount = await genericNode?.count();
     if (elementCount > 0) {
@@ -58,5 +48,72 @@ test.describe("drag and drop test", () => {
     expect(
       await page.locator("text=Getting Started:").last().isVisible(),
     ).toBeTruthy();
-  });
-});
+  },
+);
+
+test(
+  "user should be able to drag and drop a flow on main page",
+  { tag: ["@release"] },
+  async ({ page }) => {
+    await page.goto("/");
+
+    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 Flow", { exact: true }).click();
+      await page.waitForSelector('[data-testid="modal-title"]', {
+        timeout: 3000,
+      });
+      modalCount = await page.getByTestId("modal-title")?.count();
+    }
+
+    await page.locator("span").filter({ hasText: "Close" }).first().click();
+    await page.locator("span").filter({ hasText: "My Projects" }).isVisible();
+
+    // Read your file into a buffer.
+    const jsonContent = readFileSync(
+      "assets/flow_test_drag_and_drop.json",
+      "utf-8",
+    );
+
+    const randomName = Math.random().toString(36).substring(2, 15);
+    const jsonContentWithNewName = jsonContent.replace(
+      "LANGFLOW TEST",
+      randomName,
+    );
+
+    await simulateDragAndDrop(
+      page,
+      "assets/flow_test_drag_and_drop.json",
+      "cards-wrapper",
+      jsonContentWithNewName,
+    );
+
+    await page.waitForSelector("text=uploaded successfully", {
+      timeout: 60000 * 2,
+    });
+
+    const genericNode = page.getByTestId("div-generic-node");
+
+    const elementCount = await genericNode?.count();
+    if (elementCount > 0) {
+      expect(true).toBeTruthy();
+    }
+
+    await page.waitForSelector(`text=${randomName}`, {
+      timeout: 100000,
+    });
+
+    expect(
+      await page.locator(`text=${randomName}`).last().isVisible(),
+    ).toBeTruthy();
+  },
+);

src/frontend/tests/utils/simulate-drag-and-drop.ts

@@ -0,0 +1,31 @@
+import { Page } from "@playwright/test";
+import { readFileSync } from "fs";
+
+export async function simulateDragAndDrop(
+  page: Page,
+  filePath: string,
+  dropSelector: string,
+  jsonContent?: string,
+) {
+  // Read file content
+  let fileContent = await readFileSync(filePath, "utf-8");
+
+  if (jsonContent) {
+    fileContent = jsonContent;
+  }
+
+  // Create DataTransfer object with file
+  const dataTransfer = await page.evaluateHandle(async (content) => {
+    const dt = new DataTransfer();
+    const file = new File([content], "file.json", { type: "application/json" });
+    dt.items.add(file);
+    return dt;
+  }, fileContent);
+
+  const dropzone = page.getByTestId(dropSelector);
+  await dropzone.dispatchEvent("mousedown", { button: 0 });
+  await dropzone.dispatchEvent("mousemove", { buttons: 1 });
+  await dropzone.dispatchEvent("drop", { dataTransfer });
+
+  await dataTransfer.dispose();
+}