migrate tests to be e2e

src/frontend/run-tests.sh

@@ -42,26 +42,13 @@ make frontend &
 # Give some time for the frontend to start (adjust sleep duration as needed)
 sleep 10
 
-# Navigate to the test directory
-cd src/frontend
-
-# Run frontend only Playwright tests with or without UI based on the --ui flag
-if [ "$ui" = true ]; then
-    PLAYWRIGHT_HTML_REPORT=playwright-report/onlyFront npx playwright test tests/onlyFront --ui --project=chromium
-else
-    PLAYWRIGHT_HTML_REPORT=playwright-report/onlyFront npx playwright test tests/onlyFront --project=chromium
-fi
-
-# Navigate back to the project root directory
-cd ../../
-
 # Start the backend using 'make backend' in the background
-make backend &
+make backend LANGFLOW_DATABASE_URL=sqlite:// &
 
 # Give some time for the backend to start (adjust sleep duration as needed)
 sleep 25
 
-# Navigate back to the test directory
+# Navigate to the test directory
 cd src/frontend
 
 # Run Playwright tests with or without UI based on the --ui flag

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

@@ -2,19 +2,11 @@ import { test } from "@playwright/test";
 
 test.describe("Auto_login tests", () => {
   test("auto_login sign in", async ({ page }) => {
-    await page.routeFromHAR("harFiles/langflow.har", {
-      url: "**/api/v1/**",
-      update: false,
-    });
     await page.goto("http:localhost:3000/");
     await page.locator('//*[@id="new-project-btn"]').click();
   });
 
   test("auto_login block_admin", async ({ page }) => {
-    await page.routeFromHAR("harFiles/langflow.har", {
-      url: "**/api/v1/**",
-      update: false,
-    });
     await page.goto("http:localhost:3000/");
     await page.locator('//*[@id="new-project-btn"]').click();
     await page.goto("http:localhost:3000/login");

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

@@ -4,16 +4,6 @@ import { readFileSync } from "fs";
 test.describe("drag and drop test", () => {
   /// <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.locator("span").filter({ hasText: "My Collection" }).isVisible();
     // Read your file into a buffer.

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

@@ -1,17 +1,6 @@
 import { expect, test } from "@playwright/test";
 
 test("dropDownComponent", async ({ page }) => {
-  // await page.routeFromHAR("harFiles/backend_12112023.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.waitForTimeout(2000);
 

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

@@ -1,16 +1,6 @@
 import { expect, test } from "@playwright/test";
 
 test("FloatComponent", async ({ page }) => {
-  // await page.routeFromHAR("harFiles/backend_12112023.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.waitForTimeout(2000);
 

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

@@ -7,16 +7,6 @@ test.describe("Flow Page tests", () => {
   }
 
   test("save", async ({ page }) => {
-    // await page.routeFromHAR("harFiles/backend_12112023.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.waitForTimeout(2000);
 

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

@@ -4,16 +4,6 @@ import { readFileSync } from "fs";
 test.describe("group node test", () => {
   /// <reference lib="dom"/>
   test("group and ungroup updating values", 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.locator("span").filter({ hasText: "My Collection" }).isVisible();
     // Read your file into a buffer.

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

@@ -1,16 +1,6 @@
 import { expect, test } from "@playwright/test";
 
 test("InputComponent", 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.waitForTimeout(2000);
 

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

@@ -1,17 +1,6 @@
 import { expect, test } from "@playwright/test";
 
 test("IntComponent", async ({ page }) => {
-  // await page.routeFromHAR("harFiles/backend_12112023.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.waitForTimeout(2000);
 

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

@@ -1,16 +1,6 @@
 import { expect, test } from "@playwright/test";
 
 test("KeypairListComponent", async ({ page }) => {
-  // await page.routeFromHAR("harFiles/backend_12112023.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.waitForTimeout(2000);
 

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

@@ -1,16 +1,6 @@
 import { expect, test } from "@playwright/test";
 
 test("NestedComponent", async ({ page }) => {
-  // await page.routeFromHAR("harFiles/backend_12112023.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.waitForTimeout(2000);
 

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

@@ -11,17 +11,6 @@ test.describe("save component tests", () => {
 
   /// <reference lib="dom"/>
   test("save group component tests", async ({ page }) => {
-    //make front work withoput backend
-    // 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.locator("span").filter({ hasText: "My Collection" }).isVisible();
     // Read your file into a buffer.

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

@@ -1,16 +1,6 @@
 import { expect, test } from "@playwright/test";
 
 test("ToggleComponent", 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.waitForTimeout(2000);
 

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

@@ -1,121 +0,0 @@
-import { test } from "@playwright/test";
-
-test.describe("Login Tests", () => {
-  test("Login_Success", async ({ page }) => {
-    //   await page.route("**/api/v1/login", async (route) => {
-    //     const json = {
-    //       access_token:
-    //         "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJhMWNlM2FkOS1iZTE2LTRiNjgtOGRhYi1hYjA4YTVjMmZjZTkiLCJleHAiOjE2OTUyNTIwNTh9.MBYFwMhTcZnsW_L7p4qavUhSDylCllJQWUCJdU1wX8o",
-    //       refresh_token:
-    //         "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJhMWNlM2FkOS1iZTE2LTRiNjgtOGRhYi1hYjA4YTVjMmZjZTkiLCJ0eXBlIjoicmYiLCJleHAiOjE2OTUyNTI2NTh9.a4wL9-XK_zyTyrXduBFgCsODFXrqiByVr5HOeiCbiQA",
-    //       token_type: "bearer",
-    //     };
-    //     await route.fulfill({ json });
-    //   });
-    //   await page.goto("http://localhost:3000/");
-    //   await page.waitForURL("http://localhost:3000/login");
-    //   await page.waitForURL("http://localhost:3000/login", { timeout: 100 });
-    //   await page.getByPlaceholder("Username").click();
-    //   await page.getByPlaceholder("Username").fill("test");
-    //   await page.getByPlaceholder("Password").click();
-    //   await page.getByPlaceholder("Password").fill("test");
-    //   await page.getByRole("button", { name: "Sign in" }).click();
-    //   await page.getByRole("button", { name: "Community Examples" }).click();
-    //   await page.waitForSelector(".community-pages-flows-panel");
-    //   expect(
-    //     await page
-    //       .locator(".community-pages-flows-panel")
-    //       .evaluate((el) => el.children)
-    //   ).toBeTruthy();
-    // });
-    // test("Login Error", async ({ page }) => {
-    //   await page.route("**/api/v1/login", async (route) => {
-    //     const json = { detail: "Incorrect username or password" };
-    //     await route.fulfill({ json, status: 401 });
-    //   });
-    //   await page.goto("http://localhost:3000/");
-    //   await page.waitForURL("http://localhost:3000/login");
-    //   await page.waitForURL("http://localhost:3000/login", { timeout: 100 });
-    //   await page.getByPlaceholder("Username").click();
-    //   await page.getByPlaceholder("Username").fill("test");
-    //   await page.getByPlaceholder("Password").click();
-    //   await page.getByPlaceholder("Password").fill("test5");
-    //   await page.getByRole("button", { name: "Sign in" }).click();
-    //   await page.getByRole("heading", { name: "Error signing in" }).click();
-    // });
-    // test("Login create account wrong form", async ({ page }) => {
-    //   const fullfillForm = async (username, password, confirmPassword) => {
-    //     await page.getByPlaceholder("Username").click();
-    //     await page.getByPlaceholder("Username").fill(username);
-    //     await page.getByPlaceholder("Password", { exact: true }).click();
-    //     await page.getByPlaceholder("Password", { exact: true }).fill(password);
-    //     await page.getByPlaceholder("Confirm your password").click();
-    //     await page
-    //       .getByPlaceholder("Confirm your password")
-    //       .fill(confirmPassword);
-    //   };
-    //   await page.goto("http://localhost:3000/");
-    //   await page.waitForURL("http://localhost:3000/login");
-    //   await page.waitForURL("http://localhost:3000/login", { timeout: 100 });
-    //   await page
-    //     .getByRole("button", { name: "Don't have an account? Sign Up" })
-    //     .click();
-    //   await page.getByText("Sign up to Langflow").click();
-    //   await page.goto("http://localhost:3000/signup");
-    //   await page.getByText("Sign up to Langflow").click();
-    //   await fullfillForm("name", "vazz", "vazz5");
-    //   expect(
-    //     await page.getByRole("button", { name: "Sign up" }).isDisabled()
-    //   ).toBeTruthy();
-    //   await fullfillForm("", "vazz", "vazz");
-    //   expect(
-    //     await page.getByRole("button", { name: "Sign up" }).isDisabled()
-    //   ).toBeTruthy();
-    //   await fullfillForm("name", "", "");
-    //   expect(
-    //     await page.getByRole("button", { name: "Sign up" }).isDisabled()
-    //   ).toBeTruthy();
-    //   await fullfillForm("", "", "");
-    //   expect(
-    //     await page.getByRole("button", { name: "Sign up" }).isDisabled()
-    //   ).toBeTruthy();
-    // });
-    // test("Login create account success", async ({ page }) => {
-    //   await page.route("**/api/v1/users/", async (route) => {
-    //     const json = {
-    //       id: "e9ac1bdc-429b-475d-ac03-d26f9a2a3210",
-    //       username: "teste",
-    //       profile_image: null,
-    //       is_active: false,
-    //       is_superuser: false,
-    //       create_at: "2023-09-21T01:45:51.873303",
-    //       updated_at: "2023-09-21T01:45:51.873305",
-    //       last_login_at: null,
-    //     };
-    //     await route.fulfill({ json, status: 201 });
-    //   });
-    //   const submitForm = async (username, password, confirmPassword) => {
-    //     await page.getByPlaceholder("Username").click();
-    //     await page.getByPlaceholder("Username").fill(username);
-    //     await page.getByPlaceholder("Password", { exact: true }).click();
-    //     await page.getByPlaceholder("Password", { exact: true }).fill(password);
-    //     await page.getByPlaceholder("Confirm your password").click();
-    //     await page
-    //       .getByPlaceholder("Confirm your password")
-    //       .fill(confirmPassword);
-    //   };
-    //   await page.goto("http://localhost:3000/");
-    //   await page.waitForURL("http://localhost:3000/login");
-    //   await page.waitForURL("http://localhost:3000/login", { timeout: 100 });
-    //   await page
-    //     .getByRole("button", { name: "Don't have an account? Sign Up" })
-    //     .click();
-    //   await page.getByText("Sign up to Langflow").click();
-    //   await page.goto("http://localhost:3000/signup");
-    //   await page.getByText("Sign up to Langflow").click();
-    //   await submitForm("teste", "pass", "pass");
-    //   await page.getByRole("button", { name: "Sign up" }).click();
-    //   await page.waitForURL("http://localhost:3000/login", { timeout: 1000 });
-    //   await page.getByText("Account created! Await admin activation.").click();
-  });
-});