sorting fields to keep the same order always and fixed group component tests'

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -422,6 +422,7 @@ export default function GenericNode({
             <>
               {Object.keys(data.node!.template)
                 .filter((templateField) => templateField.charAt(0) !== "_")
+                .sort()
                 .map((templateField: string, idx) => (
                   <div key={idx}>
                     {data.node!.template[templateField].show &&

src/frontend/tests/end-to-end/groupNode.spec.ts

@@ -1,100 +0,0 @@
-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");
-  });
-});

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

@@ -1,50 +1,9 @@
 import { expect, test } from "@playwright/test";
 import { readFileSync } from "fs";
 
-test.describe("drag and drop test", () => {
+test.describe("group node test", () => {
   /// <reference lib="dom"/>
-  test("drop collection", 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.locator("span").filter({ hasText: "My Collection" }).isVisible();
-    // Read your file into a buffer.
-    const jsonContent = readFileSync(
-      "tests/onlyFront/assets/collection.json",
-      "utf-8"
-    );
-
-    // Create the DataTransfer and File
-    const dataTransfer = await page.evaluateHandle((data) => {
-      const dt = new DataTransfer();
-      // Convert the buffer to a hex array
-      const file = new File([data], "collection.json", {
-        type: "application/json",
-      });
-      dt.items.add(file);
-      return dt;
-    }, jsonContent);
-
-    // Now dispatch
-    await page.dispatchEvent('//*[@id="root"]/div/div[2]/div[2]', "drop", {
-      dataTransfer,
-    });
-    expect(
-      await page
-        .locator(".main-page-flows-display")
-        .evaluate((el) => el.children)
-    ).toBeTruthy();
-  });
-
-  test("drop flow", async ({ page }) => {
+  test("group and ungroup updating values", async ({ page }) => {
     await page.routeFromHAR("harFiles/langflow.har", {
       url: "**/api/v1/**",
       update: false,
@@ -160,10 +119,11 @@ test.describe("drag and drop test", () => {
       )
       .click();
     await page.getByLabel("Ungroup").click();
-    await expect(page.locator("#input-0")).toHaveValue("fieldValue");
+    await expect(page.locator('//*[@id="input-2"]')).toHaveValue("fieldValue");
     expect(
       await page
-        .locator('//*[@id="headlessui-listbox-button-:r4a:"]/span[1]')
+        .getByTestId(/.*rf__node-AgentInitializer.*/)
+        .getByRole("button", { name: "openai-functions" })
         .textContent()
     ).toBe("openai-functions");
   });

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

@@ -1,6 +1,16 @@
 import { expect, test } from "@playwright/test";
 
 test("InputComponent", 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);