test: add FE tests for new starter project templates (#6772)

* ✨ (Research Translation Loop.spec.ts): add integration test for Research Translation Loop functionality in the frontend to ensure proper functionality and behavior.

* ✨ (Price Deal Finder.spec.ts): Add integration test for Price Deal Finder feature
📝 (Price Deal Finder.spec.ts): Document test cases and setup for Price Deal Finder feature
♻️ (Research Translation Loop.spec.ts): Refactor test setup and add missing test case for Research Translation Loop feature

* add tests to new started projects

src/frontend/tests/core/integrations/Financial Report Parser.spec.ts

@@ -0,0 +1,64 @@
+import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import path from "path";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
+import { getAllResponseMessage } from "../../utils/get-all-response-message";
+import { initialGPTsetup } from "../../utils/initialGPTsetup";
+import { waitForOpenModalWithChatInput } from "../../utils/wait-for-open-modal";
+import { withEventDeliveryModes } from "../../utils/withEventDeliveryModes";
+
+withEventDeliveryModes(
+  "Financial Report Parser",
+  { tag: ["@release", "@starter-projects"] },
+  async ({ page }) => {
+    test.skip(
+      !process?.env?.OPENAI_API_KEY,
+      "OPENAI_API_KEY required to run this test",
+    );
+
+    if (!process.env.CI) {
+      dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+    }
+
+    await page.goto("/");
+    await awaitBootstrapTest(page);
+
+    await page.getByTestId("side_nav_options_all-templates").click();
+    await page
+      .getByRole("heading", { name: "Financial Report Parser" })
+      .click();
+
+    await page.waitForSelector('[data-testid="fit_view"]', {
+      timeout: 100000,
+    });
+
+    await initialGPTsetup(page);
+
+    await page.getByTestId("playground-btn-flow-io").click();
+
+    await page.waitForSelector('[data-testid="button-send"]', {
+      timeout: 3000,
+    });
+
+    await page.getByTestId("button-send").click();
+
+    try {
+      await page.waitForSelector('[data-testid="button-stop"]', {
+        timeout: 180000,
+        state: "hidden",
+      });
+    } catch (error) {
+      console.log("Timeout error");
+      test.skip(true, "Timeout error");
+    }
+
+    await page.waitForSelector(".markdown", { timeout: 3000 });
+    const textContents = await page
+      .locator(".markdown")
+      .last()
+      .allTextContents();
+    const concatAllText = textContents.join(" ").toLowerCase();
+    expect(concatAllText.length).toBeGreaterThan(10);
+    expect(concatAllText).toContain("ebitida");
+  },
+);

src/frontend/tests/core/integrations/Gmail Agent.spec.ts

@@ -0,0 +1,93 @@
+import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import { readFileSync } from "fs";
+import path from "path";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
+import { getAllResponseMessage } from "../../utils/get-all-response-message";
+import { initialGPTsetup } from "../../utils/initialGPTsetup";
+import { waitForOpenModalWithChatInput } from "../../utils/wait-for-open-modal";
+import { withEventDeliveryModes } from "../../utils/withEventDeliveryModes";
+
+withEventDeliveryModes(
+  "Gmail Agent",
+  { tag: ["@release", "@starter-projects"] },
+  async ({ page }) => {
+    test.skip(
+      !process?.env?.OPENAI_API_KEY,
+      "OPENAI_API_KEY required to run this test",
+    );
+
+    test.skip(
+      !process?.env?.COMPOSIO_API_KEY,
+      "COMPOSIO_API_KEY required to run this test",
+    );
+
+    if (!process.env.CI) {
+      dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+    }
+
+    await page.goto("/");
+    await awaitBootstrapTest(page);
+
+    await page.getByTestId("side_nav_options_all-templates").click();
+    await page.getByRole("heading", { name: "Gmail Agent" }).click();
+
+    await page.waitForSelector('[data-testid="fit_view"]', {
+      timeout: 100000,
+    });
+
+    await initialGPTsetup(page);
+
+    await page
+      .getByTestId("popover-anchor-input-api_key")
+      .last()
+      .fill(process.env.COMPOSIO_API_KEY ?? "");
+
+    await page.getByTestId("refresh-button-app_names").last().click();
+
+    await page.waitForSelector(
+      '[data-testid="popover-anchor-input-auth_status"]',
+      {
+        timeout: 30000,
+        state: "visible",
+      },
+    );
+
+    const authStatus = await page
+      .getByTestId("popover-anchor-input-auth_status")
+      .last()
+      .inputValue();
+
+    await page.waitForTimeout(500);
+
+    expect(authStatus).toBe("✅");
+
+    await page.getByTestId("playground-btn-flow-io").click();
+
+    await page.waitForSelector('[data-testid="button-send"]', {
+      timeout: 3000,
+    });
+
+    await page
+      .getByTestId("input-chat-playground")
+      .fill("Send an email to johndoe@test.com wishing him a happy birthday!");
+
+    await page.getByTestId("button-send").click();
+
+    await page.waitForSelector('[data-testid="div-chat-message"]', {
+      timeout: 3000,
+    });
+
+    await page.waitForSelector(".markdown", { timeout: 3000 });
+
+    const textContents = await page
+      .locator(".markdown")
+      .last()
+      .allTextContents();
+
+    const concatAllText = textContents.join(" ");
+
+    expect(concatAllText).toContain("email");
+    expect(concatAllText).toContain("successfully");
+  },
+);

src/frontend/tests/core/integrations/Graph Rag.spec.ts

@@ -0,0 +1,104 @@
+import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import { readFileSync } from "fs";
+import path from "path";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
+import { getAllResponseMessage } from "../../utils/get-all-response-message";
+import { initialGPTsetup } from "../../utils/initialGPTsetup";
+import { waitForOpenModalWithChatInput } from "../../utils/wait-for-open-modal";
+import { withEventDeliveryModes } from "../../utils/withEventDeliveryModes";
+
+withEventDeliveryModes(
+  "Graph Rag",
+  { tag: ["@release", "@starter-projects"] },
+  async ({ page }) => {
+    test.skip(
+      !process?.env?.OPENAI_API_KEY,
+      "OPENAI_API_KEY required to run this test",
+    );
+
+    test.skip(
+      !process?.env?.ASTRA_DB_API_ENDPOINT,
+      "ASTRA_DB_API_ENDPOINT required to run this test",
+    );
+
+    test.skip(
+      !process?.env?.ASTRA_DB_APPLICATION_TOKEN,
+      "ASTRA_DB_APPLICATION_TOKEN required to run this test",
+    );
+
+    if (!process.env.CI) {
+      dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+    }
+
+    await page.goto("/");
+    await awaitBootstrapTest(page);
+
+    await page.getByTestId("side_nav_options_all-templates").click();
+    await page.getByRole("heading", { name: "Graph Rag" }).click();
+
+    await page.waitForSelector('[data-testid="fit_view"]', {
+      timeout: 100000,
+    });
+
+    await initialGPTsetup(page);
+
+    await page
+      .getByTestId("popover-anchor-input-token")
+      .nth(0)
+      .fill(process.env.ASTRA_DB_APPLICATION_TOKEN ?? "");
+
+    await page
+      .getByTestId("popover-anchor-input-token")
+      .nth(1)
+      .fill(process.env.ASTRA_DB_APPLICATION_TOKEN ?? "");
+
+    await page
+      .getByTestId("popover-anchor-input-api_endpoint")
+      .nth(0)
+      .fill(process.env.ASTRA_DB_API_ENDPOINT ?? "");
+
+    await page
+      .getByTestId("popover-anchor-input-api_endpoint")
+      .nth(1)
+      .fill(process.env.ASTRA_DB_API_ENDPOINT ?? "");
+
+    await page.getByTestId("button_run_astra db graph").last().click();
+
+    try {
+      await page.waitForSelector("text=built successfully", {
+        timeout: 30000 * 3,
+      });
+    } catch (e) {
+      console.log("Build timeout");
+      test.skip();
+    }
+
+    await page.getByTestId("playground-btn-flow-io").click();
+
+    await page.waitForSelector('[data-testid="button-send"]', {
+      timeout: 3000,
+    });
+
+    await page.getByTestId("button-send").click();
+
+    await page.waitForSelector('[data-testid="div-chat-message"]', {
+      timeout: 30000 * 3,
+    });
+
+    await page.waitForSelector(".markdown", { timeout: 3000 });
+
+    const textContents = await page
+      .locator(".markdown")
+      .last()
+      .allTextContents();
+
+    const concatAllText = textContents.join(" ");
+
+    expect(concatAllText).toContain("Haskell");
+    expect(concatAllText).toContain("reverseWords");
+    expect(concatAllText).toContain("words");
+    expect(concatAllText).toContain("map reverse");
+    expect(concatAllText).toContain("unwords");
+  },
+);

src/frontend/tests/core/integrations/Meeting Summary.spec.ts

@@ -0,0 +1,92 @@
+import { expect, test } from "@playwright/test";
+import * as dotenv from "dotenv";
+import { readFileSync } from "fs";
+import path from "path";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
+import { getAllResponseMessage } from "../../utils/get-all-response-message";
+import { initialGPTsetup } from "../../utils/initialGPTsetup";
+import { waitForOpenModalWithChatInput } from "../../utils/wait-for-open-modal";
+import { withEventDeliveryModes } from "../../utils/withEventDeliveryModes";
+
+withEventDeliveryModes(
+  "Meeting Summary",
+  { tag: ["@release", "@starter-projects"] },
+  async ({ page }) => {
+    test.skip(
+      !process?.env?.OPENAI_API_KEY,
+      "OPENAI_API_KEY required to run this test",
+    );
+
+    test.skip(
+      !process?.env?.ASSEMBLYAI_API_KEY,
+      "ASSEMBLYAI_API_KEY required to run this test",
+    );
+
+    if (!process.env.CI) {
+      dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+    }
+
+    await page.goto("/");
+    await awaitBootstrapTest(page);
+
+    await page.getByTestId("side_nav_options_all-templates").click();
+    await page.getByRole("heading", { name: "Meeting Summary" }).click();
+
+    await page.waitForSelector('[data-testid="fit_view"]', {
+      timeout: 100000,
+    });
+
+    await initialGPTsetup(page);
+
+    await page
+      .getByTestId("popover-anchor-input-api_key")
+      .nth(0)
+      .fill(process.env.ASSEMBLYAI_API_KEY ?? "");
+
+    await page
+      .getByTestId("popover-anchor-input-api_key")
+      .nth(3)
+      .fill(process.env.ASSEMBLYAI_API_KEY ?? "");
+
+    const audioFilePath = path.join(
+      __dirname,
+      "../../assets/test_audio_file.wav",
+    );
+    await page.getByTestId("button_upload_file").click();
+
+    const fileChooserPromise = page.waitForEvent("filechooser");
+    await page.getByTestId("button_upload_file").click();
+    const fileChooser = await fileChooserPromise;
+    await fileChooser.setFiles(audioFilePath);
+
+    await page.waitForTimeout(2000);
+
+    await page.getByTestId("button_run_chat output").last().click();
+
+    await page.waitForSelector("text=built successfully", { timeout: 30000 });
+
+    await page.getByTestId("playground-btn-flow-io").click();
+
+    await page.waitForSelector('[data-testid="button-send"]', {
+      timeout: 3000,
+    });
+
+    await page.waitForSelector(".markdown", { timeout: 3000 });
+
+    const textContents = await page
+      .locator(".markdown")
+      .last()
+      .allTextContents();
+
+    const concatAllText = textContents.join(" ");
+
+    expect(concatAllText.length).toBeGreaterThan(50);
+    expect(concatAllText).toContain("Pair");
+    expect(concatAllText).toContain("beer");
+    expect(concatAllText).toContain("Address");
+    expect(concatAllText).toContain("Consider");
+    expect(concatAllText).toContain("pickle");
+    expect(concatAllText).toContain("Note");
+    expect(concatAllText).toContain("Recognize");
+  },
+);