From c30026743a30dc1f220a66fd27790b6ce51cc2d8 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 6 Oct 2023 19:12:35 -0300
Subject: [PATCH] feat(tests): add end-to-end tests for Flow Page and Group
 component

Add end-to-end tests for the Flow Page and Group component in the frontend. The Flow Page tests include a test for saving a custom component and verifying the success alert. The Group component tests include tests for grouping and ungrouping components, editing component properties, and verifying the changes.
---
 .../tests/{ => end-to-end}/flowPage.spec.ts   |   0
 .../tests/end-to-end/groupNode.spec.ts        | 100 ++++++++++++++++++
 2 files changed, 100 insertions(+)
 rename src/frontend/tests/{ => end-to-end}/flowPage.spec.ts (100%)
 create mode 100644 src/frontend/tests/end-to-end/groupNode.spec.ts

diff --git a/src/frontend/tests/flowPage.spec.ts b/src/frontend/tests/end-to-end/flowPage.spec.ts
similarity index 100%
rename from src/frontend/tests/flowPage.spec.ts
rename to src/frontend/tests/end-to-end/flowPage.spec.ts
diff --git a/src/frontend/tests/end-to-end/groupNode.spec.ts b/src/frontend/tests/end-to-end/groupNode.spec.ts
new file mode 100644
index 000000000..40be3d190
--- /dev/null
+++ b/src/frontend/tests/end-to-end/groupNode.spec.ts
@@ -0,0 +1,100 @@
+import { expect, test } from "@playwright/test";
+
+test.describe("Group component tests", () => {
+  test("group test", async ({ page }) => {
+    await page.goto("http://localhost:3000/");
+    await page.getByRole("button", { name: "Community Examples" }).click();
+    await page
+      .locator(
+        "div:nth-child(7) > div:nth-child(2) > .card-component-footer-arrangement > .inline-flex"
+      )
+      .click();
+    await page
+      .locator(
+        "//html/body/div/div/div[2]/div/main/div/div/div/div[1]/div[1]/div[1]/div/div[2]/div[1]/div/div[1]/div"
+      )
+      .click({
+        modifiers: ["Control"],
+      });
+    await page
+      .locator(
+        "//html/body/div/div/div[2]/div/main/div/div/div/div[1]/div[1]/div[1]/div/div[2]/div[2]/div/div[1]/div"
+      )
+      .click({
+        modifiers: ["Control"],
+      });
+    await page
+      .locator(
+        "//html/body/div/div/div[2]/div/main/div/div/div/div[1]/div[1]/div[1]/div/div[2]/div[3]/div/div[1]/div"
+      )
+      .click({
+        modifiers: ["Control"],
+      });
+    await page.getByRole("button", { name: "Group" }).click();
+    expect(
+      await page
+        .locator(
+          "//html/body/div/div/div[2]/div/main/div/div/div/div[1]/div[1]/div[1]/div/div[2]/div/div"
+        )
+        .isVisible()
+    ).toBeTruthy();
+    await page.getByPlaceholder("Type something...").first().click();
+    await page.getByPlaceholder("Type something...").first().fill("test");
+    await page.locator(".side-bar-buttons-arrangement").click();
+    expect(
+      await page
+        .locator(
+          "//html/body/div/div/div[2]/div/main/div/div/div/div[1]/div[1]/div/div/div[2]/div/div/div[1]/div/div[1]/div/div"
+        )
+        .textContent()
+    ).toBe("test");
+    await page
+      .locator(
+        "//html/body/div/div/div[2]/div/main/div/div/div/div[1]/div[1]/div[1]/div/div[2]/div/div"
+      )
+      .locator('input[type="text"]')
+      .click();
+    await page
+      .locator(
+        "//html/body/div/div/div[2]/div/main/div/div/div/div[1]/div[1]/div[1]/div/div[2]/div/div"
+      )
+      .locator('input[type="text"]')
+      .fill("fieldValue");
+    await page.locator(".side-bar-buttons-arrangement").click();
+    await page
+      .locator(
+        "//html/body/div/div/div[2]/div/main/div/div/div/div[1]/div[1]/div[1]/div/div[2]/div/div/div[1]/div"
+      )
+      .click();
+
+    await page
+      .locator(
+        "//html/body/div/div/div[2]/div/main/div/div/div/div[1]/div[1]/div[2]/div/span/button[3]/div/div"
+      )
+      .click();
+    await page.getByLabel("Edit").click();
+    await page
+      .getByRole("button", { name: "zero-shot-react-description" })
+      .click();
+    await page.getByText("openai-functions").click();
+    await page.getByRole("button", { name: "Save Changes" }).click();
+    await page
+      .locator(
+        "//html/body/div/div/div[2]/div/main/div/div/div/div[1]/div[1]/div[2]/div/span/button[3]/div/div"
+      )
+      .click();
+    await page.getByLabel("Ungroup").click();
+    await expect(
+      page.locator(
+        "//html/body/div/div/div[2]/div/main/div/div/div/div[1]/div[1]/div/div/div[2]/div[3]/div/div[2]/div[4]/div/div[2]/div/input"
+      )
+    ).toHaveValue("fieldValue");
+    expect(
+      await page
+        .locator(
+          "//html/body/div/div/div[2]/div/main/div/div/div/div[1]/div[1]/div/div/div[2]/div[2]/div/div[2]/div[5]/div/div[2]/div/button/span[1]"
+        )
+        .textContent()
+    ).toBe("openai-functions");
+  });
+});