✨ (stop-building.spec.ts): Add new utility functions to improve code modularity and readability

🔧 (stop-building.spec.ts): Refactor drag and drop operations to use utility functions for better maintainability
🔧 (stop-building.spec.ts): Refactor zoom out operations to use utility function for consistency
🔧 (stop-building.spec.ts): Refactor component positioning operations to use utility functions for clarity
🔧 (stop-building.spec.ts): Refactor outdated components and filled API keys handling to use utility functions for reusability
🔧 (stop-building.spec.ts): Refactor fit view operation to use utility function for consistency

Author: Cristhianzl

src/frontend/tests/core/features/stop-building.spec.ts

@@ -1,6 +1,8 @@
 import { test } from "@playwright/test";
 import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
-
+import { removeOldApiKeys } from "../../utils/remove-old-api-keys";
+import { updateOldComponents } from "../../utils/update-old-components";
+import { zoomOut } from "../../utils/zoom-out";
 // TODO: fix this test
 test(
   "user must be able to stop a building",
@@ -16,18 +18,11 @@ test(
 
     await page
       .getByTestId("inputsText Input")
-      .dragTo(page.locator('//*[@id="react-flow-id"]'));
-
-    await page.getByTestId("zoom_out").click();
-    await page
-      .locator('//*[@id="react-flow-id"]')
-      .hover()
-      .then(async () => {
-        await page.mouse.down();
-        await page.mouse.move(-800, 300);
+      .dragTo(page.locator('//*[@id="react-flow-id"]'), {
+        targetPosition: { x: 0, y: 0 },
       });
 
-    await page.mouse.up();
+    await zoomOut(page, 3);
 
     //second component
 
@@ -36,97 +31,50 @@ test(
 
     await page
       .getByTestId("dataURL")
-      .dragTo(page.locator('//*[@id="react-flow-id"]'));
-
-    await page.getByTestId("zoom_out").click();
-    await page
-      .locator('//*[@id="react-flow-id"]')
-      .hover()
-      .then(async () => {
-        await page.mouse.down();
-        await page.mouse.move(-800, 300);
+      .dragTo(page.locator('//*[@id="react-flow-id"]'), {
+        targetPosition: { x: 100, y: 200 },
       });
 
-    await page.mouse.up();
-
     //third component
 
     await page.getByTestId("sidebar-search-input").click();
     await page.getByTestId("sidebar-search-input").fill("split text");
 
     await page
       .getByTestId("processingSplit Text")
-      .dragTo(page.locator('//*[@id="react-flow-id"]'));
-
-    await page.getByTestId("zoom_out").click();
-    await page
-      .locator('//*[@id="react-flow-id"]')
-      .hover()
-      .then(async () => {
-        await page.mouse.down();
-        await page.mouse.move(-800, 300);
+      .dragTo(page.locator('//*[@id="react-flow-id"]'), {
+        targetPosition: { x: 300, y: 300 },
       });
 
-    await page.mouse.up();
-
     //fourth component
 
     await page.getByTestId("sidebar-search-input").click();
     await page.getByTestId("sidebar-search-input").fill("parse data");
 
     await page
       .getByTestId("processingParse Data")
-      .dragTo(page.locator('//*[@id="react-flow-id"]'));
-
-    await page.getByTestId("zoom_out").click();
-    await page
-      .locator('//*[@id="react-flow-id"]')
-      .hover()
-      .then(async () => {
-        await page.mouse.down();
-        await page.mouse.move(-800, 300);
+      .dragTo(page.locator('//*[@id="react-flow-id"]'), {
+        targetPosition: { x: 100, y: 400 },
       });
 
-    await page.mouse.up();
-
     //fifth component
 
     await page.getByTestId("sidebar-search-input").click();
     await page.getByTestId("sidebar-search-input").fill("chat output");
 
     await page
       .getByTestId("outputsChat Output")
-      .dragTo(page.locator('//*[@id="react-flow-id"]'));
-
-    await page.getByTestId("zoom_out").click();
-    await page
-      .locator('//*[@id="react-flow-id"]')
-      .hover()
-      .then(async () => {
-        await page.mouse.down();
-        await page.mouse.move(-800, 300);
+      .dragTo(page.locator('//*[@id="react-flow-id"]'), {
+        targetPosition: { x: 600, y: 300 },
       });
 
-    await page.mouse.up();
-
-    let outdatedComponents = await page
-      .getByTestId("icon-AlertTriangle")
-      .count();
-
-    while (outdatedComponents > 0) {
-      await page.getByTestId("icon-AlertTriangle").first().click();
-      outdatedComponents = await page.getByTestId("icon-AlertTriangle").count();
-    }
-
-    let filledApiKey = await page.getByTestId("remove-icon-badge").count();
-    while (filledApiKey > 0) {
-      await page.getByTestId("remove-icon-badge").first().click();
-      await page.waitForTimeout(1000);
-      filledApiKey = await page.getByTestId("remove-icon-badge").count();
-    }
+    await updateOldComponents(page);
+    await removeOldApiKeys(page);
 
     await page.getByTestId("fit_view").click();
 
+    await zoomOut(page, 2);
+
     //connection 1
     const urlOutput = await page
       .getByTestId("handle-url-shownode-data-right")
@@ -151,8 +99,6 @@ test(
     await splitTextInput.hover();
     await page.mouse.up();
 
-    await page.getByTestId("fit_view").click();
-
     //connection 3
     const splitTextOutput = await page
       .getByTestId("handle-splittext-shownode-chunks-right")