Add Frontend Tests (#1571)

* Add TypeScript test workflow

* Update follow-redirects and katex versions

* Add Python setup and Poetry installation for backend

* Update Poetry version and setup Python in workflows

* Add Poetry installation step to GitHub Actions workflow

* Add Playwright report artifact upload and improve test script

* Update Playwright test configuration and add global teardown script

* Update path for playwright-report directory

* Update timeout value in playwright.config.ts

* Update page URLs in end-to-end tests

* Update GitHub Actions workflow and Playwright configuration

* Update TypeScript test workflow

* Add pattern and merge-multiple options to artifact download

* Update TypeScript test workflow to install Poetry

* Add cache steps for Playwright and Poetry

* Update PLAYWRIGHT_BROWSERS_PATH in TypeScript test workflow

* Add 'stuff/' to .gitignore

* Remove caching of Poetry virtualenv

* Update frontend tests to use Playwright for UI testing

* Add global teardown for removing temp database

* Add cache-hit condition to setup-node and setup-python steps

* Add new file to .gitignore and update ignored files

* Update playwright cache key in TypeScript test workflow

* Update path for blob-report in GitHub workflow

* Update path for playwright cache

* Update dependency installation in workflows

* Update baseURL in playwright.config.ts

* Update baseURL in playwright.config.ts

* Refactor test timeouts

* Remove playwright-report index.html file

* Add npm run start command to playwright.config.ts

* Update npm start command in playwright.config.ts

* Update Playwright browser caching and installation

* Update playwright cache path

* Update playwright cache path

* Update actions/cache version to v4

* Update Playwright cache key to use package-lock.json

* Update Playwright cache and install dependencies

* Fix typo in Playwright installation command

* Fix npm ci command in TypeScript test workflow

* Update TypeScript test workflow

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

@@ -1,28 +1,28 @@
 import { test } from "@playwright/test";
 test.beforeEach(async ({ page }) => {
-  await page.waitForTimeout(16000);
-  test.setTimeout(140000);
+  // await page.waitForTimeout(16000);
+  // test.setTimeout(140000);
 });
 test.describe("Auto_login tests", () => {
   test("auto_login sign in", async ({ page }) => {
-    await page.goto("http:localhost:3000/");
+    await page.goto("/");
     await page.locator('//*[@id="new-project-btn"]').click();
   });
 
   test("auto_login block_admin", async ({ page }) => {
-    await page.goto("http:localhost:3000/");
+    await page.goto("/");
     await page.locator('//*[@id="new-project-btn"]').click();
     await page.waitForTimeout(5000);
 
-    await page.goto("http:localhost:3000/login");
+    await page.goto("/login");
     await page.locator('//*[@id="new-project-btn"]').click();
     await page.waitForTimeout(5000);
 
-    await page.goto("http:localhost:3000/admin");
+    await page.goto("/admin");
     await page.locator('//*[@id="new-project-btn"]').click();
     await page.waitForTimeout(5000);
 
-    await page.goto("http:localhost:3000/admin/login");
+    await page.goto("/admin/login");
     await page.locator('//*[@id="new-project-btn"]').click();
     await page.waitForTimeout(5000);
   });

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

@@ -1,10 +1,10 @@
 import { expect, test } from "@playwright/test";
 test.beforeEach(async ({ page }) => {
-  await page.waitForTimeout(2000);
-  test.setTimeout(120000);
+  // await page.waitForTimeout(2000);
+  // test.setTimeout(120000);
 });
 test("CodeAreaModalComponent", async ({ page }) => {
-  await page.goto("http://localhost:3000/");
+  await page.goto("/");
   await page.waitForTimeout(2000);
 
   await page.locator('//*[@id="new-project-btn"]').click();

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

@@ -1,13 +1,13 @@
 import { expect, test } from "@playwright/test";
 import { readFileSync } from "fs";
 test.beforeEach(async ({ page }) => {
-  await page.waitForTimeout(3000);
-  test.setTimeout(120000);
+  // await page.waitForTimeout(3000);
+  // test.setTimeout(120000);
 });
 test.describe("drag and drop test", () => {
   /// <reference lib="dom"/>
   test("drop collection", async ({ page }) => {
-    await page.goto("http:localhost:3000/");
+    await page.goto("/");
     await page.locator("span").filter({ hasText: "My Collection" }).isVisible();
     // Read your file into a buffer.
     const jsonContent = readFileSync(

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

@@ -1,10 +1,10 @@
 import { expect, test } from "@playwright/test";
 test.beforeEach(async ({ page }) => {
-  await page.waitForTimeout(4000);
-  test.setTimeout(120000);
+  // await page.waitForTimeout(4000);
+  // test.setTimeout(120000);
 });
 test("dropDownComponent", async ({ page }) => {
-  await page.goto("http://localhost:3000/");
+  await page.goto("/");
   await page.waitForTimeout(2000);
 
   await page.locator('//*[@id="new-project-btn"]').click();
@@ -255,6 +255,6 @@ class AmazonBedrockComponent(CustomComponent):
 
   `;
   await page.locator("textarea").fill(emptyOptionsCode);
-  await page.getByRole('button', { name: 'Check & Save' }).click();
+  await page.getByRole("button", { name: "Check & Save" }).click();
   await page.getByText("No parameters are available for display.").isVisible();
-})
+});

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

@@ -1,10 +1,10 @@
 import { expect, test } from "@playwright/test";
 test.beforeEach(async ({ page }) => {
-  await page.waitForTimeout(5000);
-  test.setTimeout(120000);
+  // await page.waitForTimeout(5000);
+  // test.setTimeout(120000);
 });
 test("FloatComponent", async ({ page }) => {
-  await page.goto("http://localhost:3000/");
+  await page.goto("/");
   await page.waitForTimeout(2000);
 
   await page.locator('//*[@id="new-project-btn"]').click();

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

@@ -1,17 +1,17 @@
 import { Page, test } from "@playwright/test";
 test.beforeEach(async ({ page }) => {
-  await page.waitForTimeout(6000);
-  test.setTimeout(120000);
+  // await page.waitForTimeout(6000);
+  // test.setTimeout(120000);
 });
 
 test.describe("Flow Page tests", () => {
   async function goToFlowPage(page: Page) {
-    await page.goto("http://localhost:3000/");
+    await page.goto("/");
     await page.getByRole("button", { name: "New Project" }).click();
   }
 
   test("save", async ({ page }) => {
-    await page.goto("http://localhost:3000/");
+    await page.goto("/");
     await page.waitForTimeout(2000);
 
     await page.locator('//*[@id="new-project-btn"]').click();

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

@@ -1,13 +1,13 @@
 import { expect, test } from "@playwright/test";
 import { readFileSync } from "fs";
 test.beforeEach(async ({ page }) => {
-  await page.waitForTimeout(7000);
-  test.setTimeout(120000);
+  // await page.waitForTimeout(7000);
+  // test.setTimeout(120000);
 });
 test.describe("group node test", () => {
   /// <reference lib="dom"/>
   test("group and ungroup updating values", async ({ page }) => {
-    await page.goto("http:localhost:3000/");
+    await page.goto("/");
     await page.locator('//*[@id="new-project-btn"]').click();
 
     await page.getByTestId("blank-flow").click();

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

@@ -1,10 +1,10 @@
 import { expect, test } from "@playwright/test";
 test.beforeEach(async ({ page }) => {
-  await page.waitForTimeout(8000);
-  test.setTimeout(120000);
+  // await page.waitForTimeout(8000);
+  // test.setTimeout(120000);
 });
 test("InputComponent", async ({ page }) => {
-  await page.goto("http://localhost:3000/");
+  await page.goto("/");
   await page.waitForTimeout(2000);
 
   await page.locator('//*[@id="new-project-btn"]').click();

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

@@ -1,10 +1,10 @@
 import { expect, test } from "@playwright/test";
 test.beforeEach(async ({ page }) => {
-  await page.waitForTimeout(9000);
-  test.setTimeout(120000);
+  // await page.waitForTimeout(9000);
+  // test.setTimeout(120000);
 });
 test("IntComponent", async ({ page }) => {
-  await page.goto("http://localhost:3000/");
+  await page.goto("/");
   await page.waitForTimeout(2000);
 
   await page.locator('//*[@id="new-project-btn"]').click();

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

@@ -1,10 +1,10 @@
 import { expect, test } from "@playwright/test";
 test.beforeEach(async ({ page }) => {
-  await page.waitForTimeout(20000);
-  test.setTimeout(120000);
+  // await page.waitForTimeout(20000);
+  // test.setTimeout(120000);
 });
 test("KeypairListComponent", async ({ page }) => {
-  await page.goto("http://localhost:3000/");
+  await page.goto("/");
   await page.waitForTimeout(2000);
 
   await page.locator('//*[@id="new-project-btn"]').click();

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

@@ -1,8 +1,8 @@
 import { expect, test } from "@playwright/test";
 import uaParser from "ua-parser-js";
 test.beforeEach(async ({ page }) => {
-  await page.waitForTimeout(11000);
-  test.setTimeout(120000);
+  // await page.waitForTimeout(11000);
+  // test.setTimeout(120000);
 });
 test("LangflowShortcuts", async ({ page }) => {
   const getUA = await page.evaluate(() => navigator.userAgent);
@@ -13,7 +13,7 @@ test("LangflowShortcuts", async ({ page }) => {
     control = "Meta";
   }
 
-  await page.goto("http://localhost:3000/");
+  await page.goto("/");
   await page.waitForTimeout(1000);
 
   await page.locator('//*[@id="new-project-btn"]').click();

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

@@ -1,10 +1,10 @@
 import { expect, test } from "@playwright/test";
 test.beforeEach(async ({ page }) => {
-  await page.waitForTimeout(12000);
-  test.setTimeout(120000);
+  // await page.waitForTimeout(12000);
+  // test.setTimeout(120000);
 });
 test("NestedComponent", async ({ page }) => {
-  await page.goto("http://localhost:3000/");
+  await page.goto("/");
   await page.waitForTimeout(2000);
 
   await page.locator('//*[@id="new-project-btn"]').click();

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

@@ -1,10 +1,10 @@
 import { expect, test } from "@playwright/test";
 test.beforeEach(async ({ page }) => {
-  await page.waitForTimeout(13000);
-  test.setTimeout(120000);
+  // await page.waitForTimeout(13000);
+  // test.setTimeout(120000);
 });
 test("PromptTemplateComponent", async ({ page }) => {
-  await page.goto("http://localhost:3000/");
+  await page.goto("/");
   await page.waitForTimeout(2000);
 
   await page.locator('//*[@id="new-project-btn"]').click();

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

@@ -1,8 +1,8 @@
 import { Page, expect, test } from "@playwright/test";
 import { readFileSync } from "fs";
 test.beforeEach(async ({ page }) => {
-  await page.waitForTimeout(14000);
-  test.setTimeout(120000);
+  // await page.waitForTimeout(14000);
+  // test.setTimeout(120000);
 });
 test.describe("save component tests", () => {
   async function saveComponent(page: Page, pattern: RegExp, n: number) {
@@ -14,7 +14,7 @@ test.describe("save component tests", () => {
 
   /// <reference lib="dom"/>
   test("save group component tests", async ({ page }) => {
-    await page.goto("http:localhost:3000/");
+    await page.goto("/");
     await page.locator('//*[@id="new-project-btn"]').click();
 
     await page.getByTestId("blank-flow").click();

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

@@ -1,10 +1,10 @@
 import { expect, test } from "@playwright/test";
 test.beforeEach(async ({ page }) => {
-  await page.waitForTimeout(15000);
-  test.setTimeout(120000);
+  // await page.waitForTimeout(15000);
+  // test.setTimeout(120000);
 });
 test("ToggleComponent", async ({ page }) => {
-  await page.goto("http://localhost:3000/");
+  await page.goto("/");
   await page.waitForTimeout(2000);
 
   await page.locator('//*[@id="new-project-btn"]').click();

src/frontend/tests/globalTeardown.ts

@@ -0,0 +1,25 @@
+// tests/globalTeardown.ts
+
+import fs from "fs";
+import path from "path";
+
+export default async () => {
+  try {
+    console.log("Removing the temp database");
+    // Check if the file exists in the path
+    // this file is in src/frontend/tests/globalTeardown.ts
+    // temp is in src/frontend/temp
+    const tempDbPath = path.join(__dirname, "..", "temp");
+    console.log("tempDbPath", tempDbPath);
+    // Remove the temp database
+    fs.rmSync(tempDbPath);
+    // Check if the file is removed
+    if (!fs.existsSync(tempDbPath)) {
+      console.log("Successfully removed the temp database");
+    } else {
+      console.error("Error while removing the temp database");
+    }
+  } catch (error) {
+    console.error("Error while removing the temp database:", error);
+  }
+};