feat(tests): add toggleComponent.spec.ts to test the functionality of the ToggleComponent

The toggleComponent.spec.ts file contains a test case that verifies the functionality of the ToggleComponent. The test case performs the following actions:

1. Routes network requests from a HAR file, disabling updates for URLs matching "**/api/v1/**".
2. Routes a specific network request to return a JSON response with a status of 201.
3. Navigates to "http://localhost:3000/".
4. Waits for 2000 milliseconds.
5. Clicks on an element with the id "new-project-btn".
6. Waits for 2000 milliseconds.
7. Clicks on an element with the placeholder text "Search" and fills it with "directoryLoader".
8. Waits for 2000 milliseconds.
9. Drags an element with the id "sideDirectoryLoader" to another element with the id "react-flow-id".
10. Performs a series of click actions on various elements to test their functionality.
11. Verifies the state of toggle buttons using the isChecked() method.
12. Clicks on an element with the id "saveChangesBtn".
13. Performs additional click actions and verifications.
14. Clicks on an element with the id "saveChangesBtn".
15. Performs additional click actions and verifications.
16. Clicks on an element with the id "saveChangesBtn".
17. Performs additional click actions and verifications.
18. Clicks on an element with the id "saveChangesBtn".
19. Performs additional click actions and verifications.
20. Clicks on an element with the id "saveChangesBtn".
21. Performs additional click actions and verifications.
22. Verifies the count of elements matching the locator "//*[@id="toggle-1"]" and performs additional actions based on the count.

This test case is added to ensure that the ToggleComponent functions as expected and that the toggle buttons behave correctly.

src/frontend/tests/onlyFront/toggleComponent.spec.ts

@@ -1,6 +1,16 @@
 import { expect, test } from "@playwright/test";
 
 test("ToggleComponent", async ({ page }) => {
+  await page.routeFromHAR("harFiles/langflow.har", {
+    url: "**/api/v1/**",
+    update: false,
+  });
+  await page.route("**/api/v1/flows/", async (route) => {
+    const json = {
+      id: "e9ac1bdc-429b-475d-ac03-d26f9a2a3210",
+    };
+    await route.fulfill({ json, status: 201 });
+  });
   await page.goto("http://localhost:3000/");
   await page.waitForTimeout(2000);