test: add database-loaded API keys and outdated component detection for starter templates (#6615)

* add outdated starter projects tests

* add api keys loaded from db values

* ✨ (Custom Component Generator.spec.ts): add initialGPTsetup function to setup GPT integration
📝 (Custom Component Generator.spec.ts): update test to handle existing API key and log a message if API key is already added

src/frontend/src/modals/templatesModal/components/TemplateCardComponent/index.tsx

@@ -43,7 +43,10 @@ export default function TemplateCardComponent({
         />
       </div>
       <div className="flex flex-1 flex-col justify-between">
-        <div>
+        <div
+          data-testid="text_card_container"
+          role={convertTestName(example.name)}
+        >
           <div className="flex w-full items-center">
             <h3
               className="line-clamp-3 font-semibold"

src/frontend/tests/core/integrations/Custom Component Generator.spec.ts

@@ -3,6 +3,7 @@ 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";
 
 test(
@@ -29,10 +30,14 @@ test(
       timeout: 100000,
     });
 
-    await page
-      .getByTestId("popover-anchor-input-api_key")
-      .last()
-      .fill(process.env.ANTHROPIC_API_KEY ?? "");
+    try {
+      await page
+        .getByTestId("anchor-popover-anchor-input-api_key")
+        .last()
+        .fill(process.env.ANTHROPIC_API_KEY ?? "");
+    } catch (e) {
+      console.log("There's API already added");
+    }
 
     await page.waitForSelector('[data-testid="dropdown_str_model_name"]', {
       timeout: 5000,

src/frontend/tests/core/integrations/starter-projects.spec.ts

@@ -71,3 +71,52 @@ test(
     expect(nodes).toBe(nodesFromServer);
   },
 );
+
+test(
+  "user should be able to use all starter projects without any outdated components on the flow",
+  { tag: ["@release", "@components"] },
+  async ({ page }) => {
+    await awaitBootstrapTest(page);
+
+    await page.getByTestId("side_nav_options_all-templates").click();
+
+    const numberOfTemplates = await page
+      .getByTestId("text_card_container")
+      .count();
+
+    let numberOfOutdatedComponents = 0;
+
+    for (let i = 0; i < numberOfTemplates; i++) {
+      const exampleName = await page
+        .getByTestId("text_card_container")
+        .nth(i)
+        .getAttribute("role");
+
+      await page.getByTestId("text_card_container").nth(i).click();
+
+      await page.waitForSelector('[data-testid="fit_view"]', {
+        timeout: 3000,
+      });
+
+      if ((await page.getByTestId("update-all-button").count()) > 0) {
+        console.error(`
+          ---------------------------------------------------------------------------------------
+          There's an outdated component on the basic template: ${exampleName}
+          ---------------------------------------------------------------------------------------
+          `);
+        numberOfOutdatedComponents++;
+      }
+
+      await page.getByTestId("icon-ChevronLeft").click();
+      await page.waitForSelector('[data-testid="mainpage_title"]', {
+        timeout: 3000,
+      });
+
+      await page.getByTestId("new-project-btn").first().click();
+
+      await page.getByTestId("side_nav_options_all-templates").click();
+    }
+
+    expect(numberOfOutdatedComponents).toBe(0);
+  },
+);