From 2d6a1d193fccbe0ab257ff6b589927251f9922c5 Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Fri, 8 Mar 2024 18:05:19 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20fix(NewFlowCard2):=20add=20missi?=
 =?UTF-8?q?ng=20data-testid=20attribute=20to=20the=20NewFlowCardComponent?=
 =?UTF-8?q?=20to=20improve=20testability=20=F0=9F=94=A7=20fix(nodeToolbarC?=
 =?UTF-8?q?omponent):=20add=20missing=20data-testid=20attribute=20to=20the?=
 =?UTF-8?q?=20save=20button=20to=20improve=20testability=20=F0=9F=94=A7=20?=
 =?UTF-8?q?fix(nodeToolbarComponent):=20add=20missing=20data-testid=20attr?=
 =?UTF-8?q?ibute=20to=20the=20edit=20button=20to=20improve=20testability?=
 =?UTF-8?q?=20=F0=9F=94=A7=20fix(nodeToolbarComponent):=20add=20missing=20?=
 =?UTF-8?q?data-testid=20attribute=20to=20the=20duplicate=20button=20to=20?=
 =?UTF-8?q?improve=20testability=20=F0=9F=94=A7=20fix(codeAreaModalCompone?=
 =?UTF-8?q?nt.spec):=20add=20click=20on=20the=20blank-flow=20element=20bef?=
 =?UTF-8?q?ore=20performing=20other=20actions=20to=20ensure=20proper=20tes?=
 =?UTF-8?q?t=20setup=20=F0=9F=94=A7=20fix(dropdownComponent.spec):=20add?=
 =?UTF-8?q?=20click=20on=20the=20blank-flow=20element=20before=20performin?=
 =?UTF-8?q?g=20other=20actions=20to=20ensure=20proper=20test=20setup=20?=
 =?UTF-8?q?=F0=9F=94=A7=20fix(floatComponent.spec):=20add=20click=20on=20t?=
 =?UTF-8?q?he=20blank-flow=20element=20before=20performing=20other=20actio?=
 =?UTF-8?q?ns=20to=20ensure=20proper=20test=20setup=20=F0=9F=94=A7=20fix(f?=
 =?UTF-8?q?lowPage.spec):=20add=20click=20on=20the=20blank-flow=20element?=
 =?UTF-8?q?=20before=20performing=20other=20actions=20to=20ensure=20proper?=
 =?UTF-8?q?=20test=20setup=20=F0=9F=94=A7=20fix(group.spec):=20add=20click?=
 =?UTF-8?q?=20on=20the=20blank-flow=20element=20before=20performing=20othe?=
 =?UTF-8?q?r=20actions=20to=20ensure=20proper=20test=20setup=20?=
 =?UTF-8?q?=F0=9F=94=A7=20fix(inputComponent.spec):=20add=20click=20on=20t?=
 =?UTF-8?q?he=20blank-flow=20element=20before=20performing=20other=20actio?=
 =?UTF-8?q?ns=20to=20ensure=20proper=20test=20setup=20=F0=9F=94=A7=20fix(i?=
 =?UTF-8?q?ntComponent.spec):=20add=20click=20on=20the=20blank-flow=20elem?=
 =?UTF-8?q?ent=20before=20performing=20other=20actions=20to=20ensure=20pro?=
 =?UTF-8?q?per=20test=20setup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🐛 fix(keyPairListComponent.spec.ts): update key pair IDs and values to match test expectations
✨ feat(keyPairListComponent.spec.ts): add support for dynamic key pair creation and deletion
🔀 merge(langflowShortcuts.spec.ts): add end-to-end tests for langflow shortcuts
🔀 merge(nestedComponent.spec.ts): add end-to-end tests for nested components
🔀 merge(promptModalComponent.spec.ts): add end-to-end tests for prompt modal component
🔀 merge(saveComponents.spec.ts): add end-to-end tests for save components

✅ test(toggleComponent.spec.ts): add test case to simulate clicking on "blank-flow" element and waiting for 2 seconds
🐛 fix(toggleComponent.spec.ts): fix typo in test case, change "locator" to "waitForSelector" for better readability
---
 .../src/components/NewFLowCard2/index.tsx     |  1 +
 .../components/nodeToolbarComponent/index.tsx |  5 +-
 .../end-to-end/codeAreaModalComponent.spec.ts |  3 +
 .../end-to-end/dropdownComponent.spec.ts      |  3 +
 .../tests/end-to-end/floatComponent.spec.ts   |  3 +
 .../tests/end-to-end/flowPage.spec.ts         |  5 +-
 src/frontend/tests/end-to-end/group.spec.ts   |  4 +
 .../tests/end-to-end/inputComponent.spec.ts   |  3 +
 .../tests/end-to-end/intComponent.spec.ts     |  5 +-
 .../end-to-end/keyPairListComponent.spec.ts   | 66 +++-------------
 .../end-to-end/langflowShortcuts.spec.ts      | 78 +++++++++++++++++++
 .../tests/end-to-end/nestedComponent.spec.ts  |  3 +
 .../end-to-end/promptModalComponent.spec.ts   |  6 +-
 .../tests/end-to-end/saveComponents.spec.ts   |  3 +
 .../tests/end-to-end/toggleComponent.spec.ts  |  3 +
 15 files changed, 129 insertions(+), 62 deletions(-)
 create mode 100644 src/frontend/tests/end-to-end/langflowShortcuts.spec.ts

diff --git a/src/frontend/src/components/NewFLowCard2/index.tsx b/src/frontend/src/components/NewFLowCard2/index.tsx
index 7f364cfef..fb472207e 100644
--- a/src/frontend/src/components/NewFLowCard2/index.tsx
+++ b/src/frontend/src/components/NewFLowCard2/index.tsx
@@ -13,6 +13,7 @@ export default function NewFlowCardComponent() {
         });
       }}
       className="h-64 w-80 cursor-pointer bg-background pt-4"
+      data-testid="blank-flow"
     >
       <CardContent className="h-full w-full">
         <div className="flex h-full w-full flex-col items-center justify-center rounded-md bg-muted align-middle bg-dotted-spacing-6 bg-dotted-muted-foreground bg-dotted-radius-px"></div>
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 39f5f6660..394d5393e 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -343,6 +343,7 @@ export default function NodeToolbarComponent({
 
           <ShadTooltip content={"Save"} side="top">
             <button
+              data-testid="save-button-modal"
               className={classNames(
                 "relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring  transition-all duration-500 ease-in-out hover:bg-muted focus:z-10",
                 hasCode ? " " : " rounded-l-md "
@@ -410,7 +411,7 @@ export default function NodeToolbarComponent({
             <SelectContent>
               {nodeLength > 0 && (
                 <SelectItem value={nodeLength === 0 ? "disabled" : "advanced"}>
-                  <div className="flex">
+                  <div className="flex" data-testid="edit-button-modal">
                     <IconComponent
                       name="Settings2"
                       className="relative top-0.5 mr-2 h-4 w-4 "
@@ -431,7 +432,7 @@ export default function NodeToolbarComponent({
                 </SelectItem>
               )}
               <SelectItem value={"duplicate"}>
-                <div className="flex" data-testid="save-button-modal">
+                <div className="flex" data-testid="duplicate-button-modal">
                   <IconComponent
                     name="Copy"
                     className="relative top-0.5 mr-2 h-4 w-4"
diff --git a/src/frontend/tests/end-to-end/codeAreaModalComponent.spec.ts b/src/frontend/tests/end-to-end/codeAreaModalComponent.spec.ts
index 5e509cb01..0994fb898 100644
--- a/src/frontend/tests/end-to-end/codeAreaModalComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/codeAreaModalComponent.spec.ts
@@ -7,6 +7,9 @@ test("CodeAreaModalComponent", async ({ page }) => {
   await page.locator('//*[@id="new-project-btn"]').click();
   await page.waitForTimeout(2000);
 
+  await page.getByTestId("blank-flow").click();
+  await page.waitForTimeout(2000);
+
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("pythonfunctiontool");
 
diff --git a/src/frontend/tests/end-to-end/dropdownComponent.spec.ts b/src/frontend/tests/end-to-end/dropdownComponent.spec.ts
index e8b462266..32c402725 100644
--- a/src/frontend/tests/end-to-end/dropdownComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/dropdownComponent.spec.ts
@@ -7,6 +7,9 @@ test("dropDownComponent", async ({ page }) => {
   await page.locator('//*[@id="new-project-btn"]').click();
   await page.waitForTimeout(2000);
 
+  await page.getByTestId("blank-flow").click();
+  await page.waitForTimeout(2000);
+
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("amazon");
 
diff --git a/src/frontend/tests/end-to-end/floatComponent.spec.ts b/src/frontend/tests/end-to-end/floatComponent.spec.ts
index a9d21f95a..4216b0888 100644
--- a/src/frontend/tests/end-to-end/floatComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/floatComponent.spec.ts
@@ -7,6 +7,9 @@ test("FloatComponent", async ({ page }) => {
   await page.locator('//*[@id="new-project-btn"]').click();
   await page.waitForTimeout(2000);
 
+  await page.getByTestId("blank-flow").click();
+  await page.waitForTimeout(2000);
+
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("llamacpp");
 
diff --git a/src/frontend/tests/end-to-end/flowPage.spec.ts b/src/frontend/tests/end-to-end/flowPage.spec.ts
index 78c7b3280..e3f422f7c 100644
--- a/src/frontend/tests/end-to-end/flowPage.spec.ts
+++ b/src/frontend/tests/end-to-end/flowPage.spec.ts
@@ -13,13 +13,16 @@ test.describe("Flow Page tests", () => {
     await page.locator('//*[@id="new-project-btn"]').click();
     await page.waitForTimeout(2000);
 
+    await page.getByTestId("blank-flow").click();
+    await page.waitForTimeout(2000);
+
     await page.getByPlaceholder("Search").click();
     await page.getByPlaceholder("Search").fill("custom");
 
     await page.waitForTimeout(2000);
 
     await page
-      .locator('//*[@id="utilitiesCustomComponent"]')
+      .locator('//*[@id="helpersCustom Component"]')
       .dragTo(page.locator('//*[@id="react-flow-id"]'));
     await page.mouse.up();
     await page.mouse.down();
diff --git a/src/frontend/tests/end-to-end/group.spec.ts b/src/frontend/tests/end-to-end/group.spec.ts
index 1bfddaf57..e8ca742cc 100644
--- a/src/frontend/tests/end-to-end/group.spec.ts
+++ b/src/frontend/tests/end-to-end/group.spec.ts
@@ -6,6 +6,10 @@ test.describe("group node test", () => {
   test("group and ungroup updating values", async ({ page }) => {
     await page.goto("http:localhost:3000/");
     await page.locator('//*[@id="new-project-btn"]').click();
+
+    await page.getByTestId("blank-flow").click();
+    await page.waitForTimeout(2000);
+
     // Read your file into a buffer.
     const jsonContent = readFileSync(
       "tests/end-to-end/assets/flow_group_test.json",
diff --git a/src/frontend/tests/end-to-end/inputComponent.spec.ts b/src/frontend/tests/end-to-end/inputComponent.spec.ts
index 5992b7a12..06e177722 100644
--- a/src/frontend/tests/end-to-end/inputComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/inputComponent.spec.ts
@@ -7,6 +7,9 @@ test("InputComponent", async ({ page }) => {
   await page.locator('//*[@id="new-project-btn"]').click();
   await page.waitForTimeout(2000);
 
+  await page.getByTestId("blank-flow").click();
+  await page.waitForTimeout(2000);
+
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("Chroma");
 
diff --git a/src/frontend/tests/end-to-end/intComponent.spec.ts b/src/frontend/tests/end-to-end/intComponent.spec.ts
index 1acd958a7..86ebe59af 100644
--- a/src/frontend/tests/end-to-end/intComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/intComponent.spec.ts
@@ -7,13 +7,16 @@ test("IntComponent", async ({ page }) => {
   await page.locator('//*[@id="new-project-btn"]').click();
   await page.waitForTimeout(2000);
 
+  await page.getByTestId("blank-flow").click();
+  await page.waitForTimeout(2000);
+
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("openai");
 
   await page.waitForTimeout(2000);
 
   await page
-    .getByTestId("modelsOpenAI Model")
+    .getByTestId("modelsOpenAI")
     .first()
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
diff --git a/src/frontend/tests/end-to-end/keyPairListComponent.spec.ts b/src/frontend/tests/end-to-end/keyPairListComponent.spec.ts
index ad61d1e9f..6f80e5be8 100644
--- a/src/frontend/tests/end-to-end/keyPairListComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/keyPairListComponent.spec.ts
@@ -7,6 +7,9 @@ test("KeypairListComponent", async ({ page }) => {
   await page.locator('//*[@id="new-project-btn"]').click();
   await page.waitForTimeout(2000);
 
+  await page.getByTestId("blank-flow").click();
+  await page.waitForTimeout(2000);
+
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("csv");
 
@@ -41,32 +44,14 @@ test("KeypairListComponent", async ({ page }) => {
   }
   await page.getByTestId("div-generic-node").click();
 
-  await page.locator('//*[@id="keypair1"]').click();
-  await page.locator('//*[@id="keypair1"]').fill("testtesttesttest1");
+  await page.locator('//*[@id="keypair0"]').click();
+  await page.locator('//*[@id="keypair0"]').fill("testtesttesttest1");
   await page.getByTestId("div-generic-node").click();
 
-  await page.locator('//*[@id="keypair101"]').click();
-  await page.locator('//*[@id="keypair101"]').fill("testtesttesttesttesttest1");
-  await page.getByTestId("div-generic-node").click();
-
-  await page.locator('//*[@id="plusbtn1"]').click();
-  await page.getByTestId("div-generic-node").click();
-
-  await page.locator('//*[@id="keypair2"]').click();
-  await page.locator('//*[@id="keypair2"]').fill("testtesttesttest2");
-  await page.getByTestId("div-generic-node").click();
-
-  await page.locator('//*[@id="keypair102"]').click();
-  await page.locator('//*[@id="keypair102"]').fill("testtesttesttesttesttest2");
-  await page.getByTestId("div-generic-node").click();
-
-  await page.locator('//*[@id="minusbtn1"]').click();
-  await page.getByTestId("div-generic-node").click();
-
-  const keyPairVerification = page.locator('//*[@id="keypair102"]');
+  const keyPairVerification = page.locator('//*[@id="keypair100"]');
   const elementKeyCount = await keyPairVerification.count();
 
-  if (elementKeyCount === 0) {
+  if (elementKeyCount === 1) {
     expect(true).toBeTruthy();
   } else {
     expect(false).toBeTruthy();
@@ -103,53 +88,22 @@ test("KeypairListComponent", async ({ page }) => {
 
     await page.locator('//*[@id="editNodekeypair0"]').click();
     await page.locator('//*[@id="editNodekeypair0"]').fill("testtesttesttest");
-    await page.locator('//*[@id="editNodekeypair100"]').click();
-    await page
-      .locator('//*[@id="editNodekeypair100"]')
-      .fill("test test test test test test");
 
-    const plusButtonLocator = page.locator('//*[@id="plusbtn0"]');
-    const elementCount = await plusButtonLocator.count();
-    if (elementCount > 0) {
-      await plusButtonLocator.click();
-    }
-
-    await page.locator('//*[@id="editNodekeypair1"]').click();
-    await page.locator('//*[@id="editNodekeypair1"]').fill("testtesttesttest1");
-    await page.locator('//*[@id="editNodekeypair101"]').first().click();
-    await page
-      .locator('//*[@id="editNodekeypair101"]')
-      .fill("testtesttesttesttesttest1");
-    await page.locator('//*[@id="editNodeplusbtn1"]').click();
-
-    await page.locator('//*[@id="editNodekeypair2"]').click();
-    await page.locator('//*[@id="editNodekeypair2"]').fill("testtesttesttest2");
-    await page.locator('//*[@id="editNodekeypair102"]').click();
-    await page
-      .locator('//*[@id="editNodekeypair102"]')
-      .fill("testtesttesttesttesttest2");
-
-    await page.locator('//*[@id="editNodeminusbtn1"]').click();
-
-    const keyPairVerification = page.locator('//*[@id="editNodekeypair102"]');
+    const keyPairVerification = page.locator('//*[@id="editNodekeypair0"]');
     const elementKeyCount = await keyPairVerification.count();
 
-    if (elementKeyCount === 0) {
+    if (elementKeyCount === 1) {
       await page.locator('//*[@id="saveChangesBtn"]').click();
 
       await page.getByTestId("div-generic-node").click();
 
       const key1 = await page.locator('//*[@id="keypair0"]').inputValue();
       const value1 = await page.locator('//*[@id="keypair100"]').inputValue();
-      const key2 = await page.locator('//*[@id="keypair1"]').inputValue();
-      const value2 = await page.locator('//*[@id="keypair101"]').inputValue();
       await page.getByTestId("div-generic-node").click();
 
       if (
         key1 === "testtesttesttest" &&
-        value1 === "test test test test test test" &&
-        key2 === "testtesttesttest2" &&
-        value2 === "testtesttesttesttesttest2"
+        value1 === "test test test test test test"
       ) {
         expect(true).toBeTruthy();
       } else {
diff --git a/src/frontend/tests/end-to-end/langflowShortcuts.spec.ts b/src/frontend/tests/end-to-end/langflowShortcuts.spec.ts
new file mode 100644
index 000000000..486a66adb
--- /dev/null
+++ b/src/frontend/tests/end-to-end/langflowShortcuts.spec.ts
@@ -0,0 +1,78 @@
+import { expect, test } from "@playwright/test";
+
+test("LangflowShortcuts", async ({ page }) => {
+  await page.goto("http://localhost:3000/");
+  await page.waitForTimeout(1000);
+
+  await page.locator('//*[@id="new-project-btn"]').click();
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("blank-flow").click();
+  await page.waitForTimeout(1000);
+
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("llamacpp");
+
+  await page.waitForTimeout(1000);
+
+  await page
+    .locator('//*[@id="model_specsLlamaCpp"]')
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+  await page.mouse.up();
+  await page.mouse.down();
+
+  await page.getByTestId("title-LlamaCpp").click();
+  await page.keyboard.press("Control+e");
+  await page.locator('//*[@id="saveChangesBtn"]').click();
+
+  await page.getByTestId("title-LlamaCpp").click();
+  await page.keyboard.press("Control+d");
+
+  let numberOfNodes = await page.getByTestId("title-LlamaCpp").count();
+  if (numberOfNodes != 2) {
+    expect(false).toBeTruthy();
+  }
+
+  await page
+    .locator(
+      '//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div[2]/div/div[1]/div/div[1]/div/div/div[1]'
+    )
+    .click();
+  await page.keyboard.press("Backspace");
+
+  numberOfNodes = await page.getByTestId("title-LlamaCpp").count();
+  if (numberOfNodes != 1) {
+    expect(false).toBeTruthy();
+  }
+
+  await page.getByTestId("title-LlamaCpp").click();
+  await page.keyboard.press("Control+c");
+
+  await page.getByTestId("title-LlamaCpp").click();
+  await page.keyboard.press("Control+v");
+
+  numberOfNodes = await page.getByTestId("title-LlamaCpp").count();
+  if (numberOfNodes != 2) {
+    expect(false).toBeTruthy();
+  }
+
+  await page
+    .locator(
+      '//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div[2]/div/div[1]/div/div[1]/div/div/div[1]'
+    )
+    .click();
+  await page.keyboard.press("Backspace");
+
+  await page.getByTestId("title-LlamaCpp").click();
+  await page.keyboard.press("Control+x");
+
+  numberOfNodes = await page.getByTestId("title-LlamaCpp").count();
+  if (numberOfNodes != 0) {
+    expect(false).toBeTruthy();
+  }
+  await page.keyboard.press("Control+v");
+  numberOfNodes = await page.getByTestId("title-LlamaCpp").count();
+  if (numberOfNodes != 1) {
+    expect(false).toBeTruthy();
+  }
+});
diff --git a/src/frontend/tests/end-to-end/nestedComponent.spec.ts b/src/frontend/tests/end-to-end/nestedComponent.spec.ts
index 2cabf2f85..6ee1b7c28 100644
--- a/src/frontend/tests/end-to-end/nestedComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/nestedComponent.spec.ts
@@ -7,6 +7,9 @@ test("NestedComponent", async ({ page }) => {
   await page.locator('//*[@id="new-project-btn"]').click();
   await page.waitForTimeout(2000);
 
+  await page.getByTestId("blank-flow").click();
+  await page.waitForTimeout(2000);
+
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("pinecone");
 
diff --git a/src/frontend/tests/end-to-end/promptModalComponent.spec.ts b/src/frontend/tests/end-to-end/promptModalComponent.spec.ts
index 13c07a36b..46841a6bc 100644
--- a/src/frontend/tests/end-to-end/promptModalComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/promptModalComponent.spec.ts
@@ -7,13 +7,16 @@ test("PromptTemplateComponent", async ({ page }) => {
   await page.locator('//*[@id="new-project-btn"]').click();
   await page.waitForTimeout(2000);
 
+  await page.getByTestId("blank-flow").click();
+  await page.waitForTimeout(2000);
+
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("prompt");
 
   await page.waitForTimeout(2000);
 
   await page
-    .locator('//*[@id="promptsPrompt"]')
+    .locator('//*[@id="inputsPrompt"]')
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
@@ -55,7 +58,6 @@ test("PromptTemplateComponent", async ({ page }) => {
     expect(false).toBeTruthy();
   }
 
-  await page.getByTestId("more-options-modal").click();
   await page.getByTestId("save-button-modal").click();
 
   const replace = await page.getByTestId("replace-button");
diff --git a/src/frontend/tests/end-to-end/saveComponents.spec.ts b/src/frontend/tests/end-to-end/saveComponents.spec.ts
index 72912e0e1..d5acac469 100644
--- a/src/frontend/tests/end-to-end/saveComponents.spec.ts
+++ b/src/frontend/tests/end-to-end/saveComponents.spec.ts
@@ -14,6 +14,9 @@ test.describe("save component tests", () => {
     await page.goto("http:localhost:3000/");
     await page.locator('//*[@id="new-project-btn"]').click();
 
+    await page.getByTestId("blank-flow").click();
+    await page.waitForTimeout(2000);
+
     // Read your file into a buffer.
     const jsonContent = readFileSync(
       "tests/end-to-end/assets/flow_group_test.json",
diff --git a/src/frontend/tests/end-to-end/toggleComponent.spec.ts b/src/frontend/tests/end-to-end/toggleComponent.spec.ts
index bdba6e56f..374ecd491 100644
--- a/src/frontend/tests/end-to-end/toggleComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/toggleComponent.spec.ts
@@ -7,6 +7,9 @@ test("ToggleComponent", async ({ page }) => {
   await page.locator('//*[@id="new-project-btn"]').click();
   await page.waitForTimeout(2000);
 
+  await page.getByTestId("blank-flow").click();
+  await page.waitForTimeout(2000);
+
   await page.getByPlaceholder("Search").click();
   await page.getByPlaceholder("Search").fill("directoryLoader");