From 5b29c325704b059187fa9678212604aa58cdc17b Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Tue, 10 Dec 2024 15:59:08 -0300
Subject: [PATCH] test: Add test IDs and improve UI wait handling in frontend
 tests (#5188)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

📝 (header/index.tsx): add data-testid attribute to new-project-btn button for testing purposes
📝 (dragAndDrop.spec.ts): add comments and improve readability of the test code
📝 (lock-flow.spec.ts): add comments and improve readability of the test code, ensure UI updates are properly handled
---
 .../MainPage/components/header/index.tsx      |  1 +
 .../extended/features/dragAndDrop.spec.ts     | 44 +++++++++++++++++--
 .../tests/extended/features/lock-flow.spec.ts | 16 +++++--
 3 files changed, 53 insertions(+), 8 deletions(-)

diff --git a/src/frontend/src/pages/MainPage/components/header/index.tsx b/src/frontend/src/pages/MainPage/components/header/index.tsx
index 024ea8917..065a539ce 100644
--- a/src/frontend/src/pages/MainPage/components/header/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/header/index.tsx
@@ -141,6 +141,7 @@ const HeaderComponent = ({
                 className="!px-3 md:!px-4 md:!pl-3.5"
                 onClick={() => setNewProjectModal(true)}
                 id="new-project-btn"
+                data-testid="new-project-btn"
               >
                 <ForwardedIconComponent
                   name="Plus"
diff --git a/src/frontend/tests/extended/features/dragAndDrop.spec.ts b/src/frontend/tests/extended/features/dragAndDrop.spec.ts
index fabbff2a5..c78b7969c 100644
--- a/src/frontend/tests/extended/features/dragAndDrop.spec.ts
+++ b/src/frontend/tests/extended/features/dragAndDrop.spec.ts
@@ -8,9 +8,27 @@ test(
   async ({ page }) => {
     await awaitBootstrapTest(page);
 
-    await page.locator("span").filter({ hasText: "Close" }).first().click();
+    //add a new flow just to have the workspace available
+    await page.getByTestId("side_nav_options_all-templates").click();
+    await page.getByRole("heading", { name: "Basic Prompting" }).click();
 
-    await page.locator("span").filter({ hasText: "My Projects" }).isVisible();
+    await page.waitForSelector('[data-testid="fit_view"]', {
+      timeout: 100000,
+    });
+
+    await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
+      timeout: 100000,
+    });
+
+    await page.getByTestId("icon-ChevronLeft").first().click();
+
+    await page.waitForSelector("text=my projects", {
+      timeout: 5000,
+    });
+
+    await page.waitForSelector('[data-testid="new-project-btn"]', {
+      timeout: 100000,
+    });
 
     await simulateDragAndDrop(
       page,
@@ -44,9 +62,27 @@ test(
   async ({ page }) => {
     await awaitBootstrapTest(page);
 
-    await page.locator("span").filter({ hasText: "Close" }).first().click();
-    await page.locator("span").filter({ hasText: "My Projects" }).isVisible();
+    //add a new flow just to have the workspace available
+    await page.getByTestId("side_nav_options_all-templates").click();
+    await page.getByRole("heading", { name: "Basic Prompting" }).click();
 
+    await page.waitForSelector('[data-testid="fit_view"]', {
+      timeout: 100000,
+    });
+
+    await page.waitForSelector('[data-testid="icon-ChevronLeft"]', {
+      timeout: 100000,
+    });
+
+    await page.getByTestId("icon-ChevronLeft").first().click();
+
+    await page.waitForSelector("text=my projects", {
+      timeout: 5000,
+    });
+
+    await page.waitForSelector('[data-testid="new-project-btn"]', {
+      timeout: 100000,
+    });
     // Read your file into a buffer.
     const jsonContent = readFileSync(
       "tests/assets/flow_test_drag_and_drop.json",
diff --git a/src/frontend/tests/extended/features/lock-flow.spec.ts b/src/frontend/tests/extended/features/lock-flow.spec.ts
index 3ed84fb81..c1d77c739 100644
--- a/src/frontend/tests/extended/features/lock-flow.spec.ts
+++ b/src/frontend/tests/extended/features/lock-flow.spec.ts
@@ -23,13 +23,17 @@ test(
 
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 100000,
+      state: "visible",
     });
 
     await page.getByTestId("lock_unlock").click();
+
+    //ensure the UI is updated
+    await page.waitForTimeout(500);
+
     await page.waitForSelector('[data-testid="icon-Lock"]', {
       timeout: 3000,
     });
-    expect(page.getByTestId("icon-Lock")).toBeVisible();
 
     await page.getByTestId("icon-ChevronLeft").click();
     await page.waitForSelector('[data-testid="mainpage_title"]', {
@@ -39,18 +43,20 @@ test(
     await page.getByTestId("list-card").first().click();
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 100000,
+      state: "visible",
     });
 
+    //ensure the UI is updated
+    await page.waitForTimeout(500);
+
     await page.waitForSelector('[data-testid="icon-Lock"]', {
       timeout: 3000,
     });
-    expect(page.getByTestId("icon-Lock")).toBeVisible();
 
     await page.getByTestId("lock_unlock").click();
     await page.waitForSelector('[data-testid="icon-LockOpen"]', {
       timeout: 3000,
     });
-    expect(page.getByTestId("icon-LockOpen")).toBeVisible();
 
     await page.getByTestId("icon-ChevronLeft").click();
     await page.waitForSelector('[data-testid="mainpage_title"]', {
@@ -58,13 +64,15 @@ test(
     });
 
     await page.getByTestId("list-card").first().click();
+
     await page.waitForSelector('[data-testid="fit_view"]', {
       timeout: 100000,
+      state: "visible",
     });
 
     await page.waitForSelector('[data-testid="icon-LockOpen"]', {
       timeout: 3000,
+      state: "visible",
     });
-    expect(page.getByTestId("icon-LockOpen")).toBeVisible();
   },
 );