test: Add Test to Prevent Bug on Output Inspection for Grouped Components (#2667)

* add new test for bug on output inspection + grouped components

* [autofix.ci] apply automated fixes

* 🔧 (typescript_test.yml): increase shard count from 14 to 15 to distribute tests more evenly
🔧 (typescript_test.yml): fix syntax issues in conditional expressions

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

.github/workflows/typescript_test.yml

@@ -29,8 +29,8 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
-        shardTotal: [14]
+        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
+        shardTotal: [15]
     env:
       OPENAI_API_KEY: ${{ inputs.openai_api_key || secrets.OPENAI_API_KEY }}
       STORE_API_KEY: ${{ inputs.store_api_key || secrets.STORE_API_KEY }}
@@ -129,7 +129,7 @@ jobs:
   merge-reports:
     needs: setup-and-test
     runs-on: ubuntu-latest
-    if : ${{ needs.setup-and-test.outputs.failed == 'true' }}
+    if: ${{ needs.setup-and-test.outputs.failed == 'true' }}
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
@@ -159,7 +159,7 @@ jobs:
   delete-reports:
     needs: setup-and-test
     runs-on: ubuntu-latest
-    if : ${{ needs.setup-and-test.outputs.failed != 'true' }}
+    if: ${{ needs.setup-and-test.outputs.failed != 'true' }}
     steps:
       - uses: geekyeggo/delete-artifact@v5
         with:

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

@@ -297,7 +297,7 @@ export default function ParameterComponent({
                 disabled={disabledOutput}
                 unstyled
                 onClick={() => handleUpdateOutputHide()}
-                data-testid={`output-inspection-${title.toLowerCase()}`}
+                data-testid={`input-inspection-${title.toLowerCase()}`}
               >
                 <IconComponent
                   className={cn(

src/frontend/src/pages/MainPage/components/componentsComponent/index.tsx

@@ -198,7 +198,10 @@ export default function ComponentsComponent({
         onFileDrop={handleFileDrop}
         dragMessage={`Drag your ${name} here`}
       >
-        <div className="flex h-full w-full flex-col justify-between">
+        <div
+          className="flex h-full w-full flex-col justify-between"
+          data-testid="cards-wrapper"
+        >
           <div className="flex w-full flex-col gap-4">
             {!isLoading && !isLoadingFolders && data?.length === 0 ? (
               <EmptyComponent />

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

@@ -50,8 +50,8 @@ test.describe("drag and drop test", () => {
       },
     );
 
-    const genericNoda = page.getByTestId("div-generic-node");
-    const elementCount = await genericNoda?.count();
+    const genericNode = page.getByTestId("div-generic-node");
+    const elementCount = await genericNode?.count();
     if (elementCount > 0) {
       expect(true).toBeTruthy();
     }

src/frontend/tests/end-to-end/generalBugs-shard-5.spec.ts

@@ -0,0 +1,236 @@
+import { expect, test } from "@playwright/test";
+
+test("should be able to see output preview from grouped components", async ({
+  page,
+}) => {
+  await page.goto("/");
+
+  let modalCount = 0;
+  const randomName = Math.random().toString(36).substring(2);
+  const secondRandomName = Math.random().toString(36).substring(2);
+  const thirdRandomName = Math.random().toString(36).substring(2);
+
+  try {
+    const modalTitleElement = await page?.getByTestId("modal-title");
+    if (modalTitleElement) {
+      modalCount = await modalTitleElement.count();
+    }
+  } catch (error) {
+    modalCount = 0;
+  }
+
+  while (modalCount === 0) {
+    await page.getByText("New Project", { exact: true }).click();
+    await page.waitForTimeout(5000);
+    modalCount = await page.getByTestId("modal-title")?.count();
+  }
+
+  await page.waitForSelector('[data-testid="blank-flow"]', {
+    timeout: 30000,
+  });
+
+  await page.getByTestId("blank-flow").click();
+  await page.waitForSelector('[data-testid="extended-disclosure"]', {
+    timeout: 30000,
+  });
+
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("text input");
+  await page.waitForTimeout(1000);
+
+  await page
+    .getByTestId("inputsText Input")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page.getByTitle("zoom out").click();
+  await page
+    .locator('//*[@id="react-flow-id"]')
+    .hover()
+    .then(async () => {
+      await page.mouse.down();
+      await page.mouse.move(-1000, 500);
+      await page.waitForTimeout(400);
+    });
+
+  await page.mouse.up();
+
+  await page
+    .getByTestId("inputsText Input")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("combine text");
+  await page.waitForTimeout(1000);
+
+  await page
+    .locator('//*[@id="react-flow-id"]')
+    .hover()
+    .then(async () => {
+      await page.mouse.down();
+      await page.mouse.move(-1000, 800);
+      await page.waitForTimeout(400);
+    });
+
+  await page.mouse.up();
+
+  await page
+    .getByTestId("helpersCombine Text")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page
+    .locator('//*[@id="react-flow-id"]')
+    .hover()
+    .then(async () => {
+      await page.mouse.down();
+      await page.mouse.move(-800, 800);
+      await page.waitForTimeout(400);
+    });
+
+  await page.mouse.up();
+
+  await page
+    .getByTestId("helpersCombine Text")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page
+    .locator('//*[@id="react-flow-id"]')
+    .hover()
+    .then(async () => {
+      await page.mouse.down();
+      await page.mouse.move(-200, 800);
+      await page.waitForTimeout(200);
+    });
+
+  await page.mouse.up();
+
+  await page.getByTestId("extended-disclosure").click();
+  await page.getByPlaceholder("Search").click();
+  await page.getByPlaceholder("Search").fill("text output");
+  await page.waitForTimeout(1000);
+
+  await page
+    .locator('//*[@id="react-flow-id"]')
+    .hover()
+    .then(async () => {
+      await page.mouse.down();
+      await page.mouse.move(-200, 500);
+    });
+
+  await page.mouse.up();
+
+  await page
+    .getByTestId("outputsText Output")
+    .dragTo(page.locator('//*[@id="react-flow-id"]'));
+
+  await page.getByTitle("fit view").click({
+    force: true,
+  });
+
+  //connection 1
+  const elementCombineTextOutput0 = await page
+    .getByTestId("handle-combinetext-shownode-combined text-right")
+    .nth(0);
+  await elementCombineTextOutput0.hover();
+  await page.mouse.down();
+  const elementCombineTextInput1 = await page
+    .getByTestId("handle-combinetext-shownode-first text-left")
+    .nth(1);
+  await elementCombineTextInput1.hover();
+  await page.mouse.up();
+
+  await page
+    .getByTestId("title-Combine Text")
+    .first()
+    .click({ modifiers: ["Control"] });
+  await page
+    .getByTestId("title-Combine Text")
+    .last()
+    .click({ modifiers: ["Control"] });
+
+  await page.getByRole("button", { name: "Group" }).click();
+
+  //connection 2
+  const elementTextOutput0 = await page
+    .getByTestId("handle-textinput-shownode-text-right")
+    .nth(0);
+  await elementTextOutput0.hover();
+  await page.mouse.down();
+  const elementGroupInput0 = await page.getByTestId(
+    "handle-groupnode-shownode-first text-left",
+  );
+
+  await elementGroupInput0.hover();
+  await page.mouse.up();
+
+  //connection 3
+  const elementTextOutput1 = await page
+    .getByTestId("handle-textinput-shownode-text-right")
+    .nth(2);
+  await elementTextOutput1.hover();
+  await page.mouse.down();
+  const elementGroupInput1 = await page
+    .getByTestId("handle-groupnode-shownode-second text-left")
+    .nth(1);
+
+  await elementGroupInput1.hover();
+  await page.mouse.up();
+
+  //connection 4
+  const elementGroupOutput = await page
+    .getByTestId("handle-groupnode-shownode-combined text-right")
+    .nth(0);
+  await elementGroupOutput.hover();
+  await page.mouse.down();
+  const elementTextOutputInput = await page
+    .getByTestId("handle-textoutput-shownode-text-left")
+    .nth(0);
+
+  await elementTextOutputInput.hover();
+  await page.mouse.up();
+
+  await page
+    .getByTestId("popover-anchor-input-input_value")
+    .nth(0)
+    .fill(randomName);
+  await page
+    .getByTestId("popover-anchor-input-input_value")
+    .nth(1)
+    .fill(secondRandomName);
+  await page
+    .getByPlaceholder("Type something...", { exact: true })
+    .nth(6)
+    .fill(thirdRandomName);
+
+  await page
+    .getByPlaceholder("Type something...", { exact: true })
+    .nth(3)
+    .fill("-");
+  await page
+    .getByPlaceholder("Type something...", { exact: true })
+    .nth(4)
+    .fill("-");
+
+  await page.waitForTimeout(3000);
+
+  await page.getByTestId("button_run_text output").last().click();
+
+  await page.waitForSelector("text=Text Output built successfully", {
+    timeout: 30000,
+  });
+
+  await page.waitForTimeout(3000);
+
+  expect(
+    await page.getByTestId("output-inspection-combined text").first(),
+  ).not.toBeDisabled();
+  await page.getByTestId("output-inspection-combined text").first().click();
+
+  await page.getByText("Component Output").isVisible();
+
+  const text = await page.getByPlaceholder("Empty").textContent();
+  expect(text).toBe(`${randomName}-${secondRandomName}-${thirdRandomName}`);
+});

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

@@ -40,7 +40,7 @@ test("user should be able to see multiple edges and interact with them", async (
   await page.getByTitle("zoom out").click();
   await page.getByTitle("zoom out").click();
 
-  await page.getByTestId("output-inspection-retriever").first().click();
+  await page.getByTestId("input-inspection-retriever").first().click();
   await page.getByText("Retriever", { exact: true }).first().isHidden();
   await page.getByTestId("icon-ChevronDown").last().isVisible();
   await page.getByTestId("icon-ChevronDown").last().click();