fix(tabsContext.tsx): add console.log to debug text variable in TabsProvider

test(dragAndDrop.spec.ts): add support for drag and drop functionality to test dropping a collection
test(dragAndDrop.spec.ts): add support for drag and drop functionality to test dropping a flow

src/frontend/tests/onlyFront/dragAndDrop.spec.ts

@@ -1,32 +1,87 @@
 import { expect, test } from "@playwright/test";
+import { readFileSync } from "fs";
 
-test.describe("Auto_login tests", () => {
+test.describe("drag and drop test", () => {
-  test("auto_login sign in", async ({ page }) => {
+  /// <reference lib="dom"/>
+  test("drop collection", async ({ page }) => {
     await page.routeFromHAR("harFiles/langflow.har", {
       url: "**/api/v1/**",
       update: false,
     });
+    await page.route("**/api/v1/flows/", async (route) => {
+      const json = {
+        id: "e9ac1bdc-429b-475d-ac03-d26f9a2a3210",
+      };
+      await route.fulfill({ json, status: 201 });
+    });
     await page.goto("http:localhost:3000/");
-    await page.getByRole("button", { name: "Community Examples" }).click();
+    await page.locator("span").filter({ hasText: "My Collection" }).isVisible();
-    await page.waitForSelector(".community-pages-flows-panel");
+    // Read your file into a buffer.
+    const jsonContent = readFileSync(
+      "tests/onlyFront/assets/collection.json",
+      "utf-8"
+    );
+
+    // 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], "collection.json", {
+        type: "application/json",
+      });
+      dt.items.add(file);
+      return dt;
+    }, jsonContent);
+
+    // Now dispatch
+    await page.dispatchEvent('//*[@id="root"]/div/div[2]/div[2]', "drop", {
+      dataTransfer,
+    });
     expect(
       await page
-        .locator(".community-pages-flows-panel")
+        .locator(".main-page-flows-display")
         .evaluate((el) => el.children)
     ).toBeTruthy();
   });
-  test("auto_login block_admin", async ({ page }) => {
+
+  test("drop flow", async ({ page }) => {
     await page.routeFromHAR("harFiles/langflow.har", {
       url: "**/api/v1/**",
       update: false,
     });
+    await page.route("**/api/v1/flows/", async (route) => {
+      const json = {
+        id: "e9ac1bdc-429b-475d-ac03-d26f9a2a3210",
+      };
+      await route.fulfill({ json, status: 201 });
+    });
     await page.goto("http:localhost:3000/");
-    await page.getByRole("button", { name: "Community Examples" }).click();
+    await page.locator("span").filter({ hasText: "My Collection" }).isVisible();
-    await page.goto("http:localhost:3000/login");
+    // Read your file into a buffer.
-    await page.getByRole("button", { name: "Community Examples" }).click();
+    const jsonContent = readFileSync(
-    await page.goto("http:localhost:3000/admin");
+      "tests/onlyFront/assets/flow.json",
-    await page.getByRole("button", { name: "Community Examples" }).click();
+      "utf-8"
-    await page.goto("http:localhost:3000/admin/login");
+    );
-    await page.getByRole("button", { name: "Community Examples" }).click();
+
+    // 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], "flow.json", {
+        type: "application/json",
+      });
+      dt.items.add(file);
+      return dt;
+    }, jsonContent);
+
+    // Now dispatch
+    await page.dispatchEvent('//*[@id="root"]/div/div[2]/div[2]', "drop", {
+      dataTransfer,
+    });
+    expect(
+      await page
+        .locator(".main-page-flows-display")
+        .evaluate((el) => el.children)
+    ).toBeTruthy();
   });
 });