tests: Add Integration with starter-projects Endpoint and Vector Stor…

…e Test (langflow-ai#3599)

* ✨ (App.tsx): Add useGetStarterProjectsQuery hook to fetch starter projects data
📝 (constants.ts): Add STARTER_PROJECTS constant to define the endpoint for starter projects API
📝 (use-get-starter-projects.ts): Create useGetStarterProjectsQuery hook to fetch starter projects data
📝 (index.tsx): Add AppWrapperPage test for drag and drop functionality with starter projects data
📝 (starter-projects.spec.ts): Add end-to-end test for drag and drop functionality with starter projects data

* ✨ (starter-projects.spec.ts): update test description to be more descriptive and specific about the test scenario

* ♻️ (App.tsx): remove unused useGetStarterProjectsQuery hook to clean up code and improve readability

* 🔧 (App.tsx): remove unused import useGetStarterProjectsQuery to clean up code and improve readability

src/frontend/src/controllers/API/helpers/constants.ts

@@ -20,6 +20,7 @@ export const URLs = {
   VARIABLES: `variables`,
   VALIDATE: `validate`,
   CONFIG: `config`,
+  STARTER_PROJECTS: `starter-projects`,
 } as const;
 
 export function getURL(key: keyof typeof URLs, params: any = {}) {

src/frontend/src/controllers/API/queries/starter-projects/index.ts

@@ -0,0 +1 @@
+export * from "./use-get-starter-projects";

src/frontend/src/controllers/API/queries/starter-projects/use-get-starter-projects.ts

@@ -0,0 +1,44 @@
+import { useDarkStore } from "@/stores/darkStore";
+import { useQueryFunctionType } from "@/types/api";
+import { api } from "../../api";
+import { getURL } from "../../helpers/constants";
+import { UseRequestProcessor } from "../../services/request-processor";
+
+export interface IStarterProjectsDataArray {
+  name: string;
+  last_used_at: string | null;
+  total_uses: number;
+  is_active: boolean;
+  id: string;
+  api_key: string;
+  user_id: string;
+  created_at: string;
+}
+
+interface IApiQueryResponse {
+  total_count: number;
+  user_id: string;
+  api_keys: Array<IStarterProjectsDataArray>;
+}
+
+export const useGetStarterProjectsQuery: useQueryFunctionType<
+  undefined,
+  IApiQueryResponse
+> = (_, options) => {
+  const { query } = UseRequestProcessor();
+
+  const getStarterProjectsFn = async () => {
+    return await api.get<IApiQueryResponse>(`${getURL("STARTER_PROJECTS")}/`);
+  };
+
+  const responseFn = async () => {
+    const { data } = await getStarterProjectsFn();
+    return data;
+  };
+
+  const queryResult = query(["useGetStarterProjectsQuery"], responseFn, {
+    ...options,
+  });
+
+  return queryResult;
+};

src/frontend/tests/end-to-end/starter-projects.spec.ts

@@ -0,0 +1,91 @@
+const { test, expect } = require("@playwright/test");
+
+test("vector store from starter projects should have its connections and nodes on the flow", async ({
+  page,
+  request,
+}) => {
+  const response = await request.get("/api/v1/starter-projects");
+  expect(response.status()).toBe(200);
+  const responseBody = await response.json();
+
+  const astraStarterProject = responseBody.find((project) => {
+    if (project.data.nodes) {
+      return project.data.nodes.some((node) => node.id.includes("Astra"));
+    }
+  });
+
+  await page.route("**/api/v1/flows/", async (route) => {
+    if (route.request().method() === "GET") {
+      try {
+        const response = await route.fetch();
+        const flowsData = await response.json();
+
+        const modifiedFlows = flowsData.map((flow) => {
+          if (flow.name === "Vector Store RAG" && flow.user_id === null) {
+            return {
+              ...flow,
+              data: astraStarterProject?.data,
+            };
+          }
+          return flow;
+        });
+
+        const modifiedResponse = JSON.stringify(modifiedFlows);
+
+        route.fulfill({
+          status: response.status(),
+          headers: response.headers(),
+          body: modifiedResponse,
+        });
+      } catch (error) {
+        console.error("Error in route handler:", error);
+      }
+    } else {
+      // If not a GET request, continue without modifying
+      await route.continue();
+    }
+  });
+
+  await page.goto("/");
+
+  await page.waitForSelector('[data-testid="mainpage_title"]', {
+    timeout: 30000,
+  });
+
+  await page.waitForSelector('[id="new-project-btn"]', {
+    timeout: 30000,
+  });
+
+  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 Project", { exact: true }).click();
+    await page.waitForTimeout(3000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.getByRole("heading", { name: "Vector Store RAG" }).click();
+  await page.waitForSelector('[title="fit view"]', {
+    timeout: 100000,
+  });
+
+  await page.getByTitle("fit view").click();
+  await page.getByTitle("zoom out").click();
+
+  const edges = await page.locator(".react-flow__edge-interaction").count();
+  const nodes = await page.getByTestId("div-generic-node").count();
+
+  const edgesFromServer = astraStarterProject?.data.edges.length;
+  const nodesFromServer = astraStarterProject?.data.nodes.length;
+
+  expect(edges).toBe(edgesFromServer);
+  expect(nodes).toBe(nodesFromServer);
+});