test: Add test IDs and improve UI wait handling in frontend tests (#5188)

📝 (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

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"

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();
+    //add a new flow just to have the workspace available
-    await page.locator("span").filter({ hasText: "My Projects" }).isVisible();
+    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",

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();
   },
 );