From 467ae9e34f49084d73428be7bb2c0ff464713964 Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Wed, 9 Apr 2025 11:29:22 -0300
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20(tabComponent/index.tsx):=20add=20d?=
 =?UTF-8?q?ata-testid=20attribute=20with=20dynamic=20value=20for=20better?=
 =?UTF-8?q?=20testing=20capabilities=20=E2=9C=A8=20(mcp-server.spec.ts):?=
 =?UTF-8?q?=20add=20end-to-end=20test=20for=20changing=20mode=20of=20MCP?=
 =?UTF-8?q?=20server=20without=20issues?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/tabComponent/index.tsx         |   2 +
 .../extended/features/mcp-server.spec.ts      | 135 ++++++++++++++++++
 2 files changed, 137 insertions(+)
 create mode 100644 src/frontend/tests/extended/features/mcp-server.spec.ts

diff --git a/src/frontend/src/components/core/parameterRenderComponent/components/tabComponent/index.tsx b/src/frontend/src/components/core/parameterRenderComponent/components/tabComponent/index.tsx
index a0e1b109e..6e5b0f712 100644
--- a/src/frontend/src/components/core/parameterRenderComponent/components/tabComponent/index.tsx
+++ b/src/frontend/src/components/core/parameterRenderComponent/components/tabComponent/index.tsx
@@ -1,4 +1,5 @@
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs-button";
+import { testIdCase } from "@/utils/utils";
 import { useEffect, useState } from "react";
 import { InputProps, TabComponentType } from "../../types";
 
@@ -49,6 +50,7 @@ export default function TabComponent({
               value={tab}
               className="block flex-1 truncate px-2"
               disabled={disabled}
+              data-testid={`tab_${index}_${testIdCase(tab)}`}
             >
               {tab}
             </TabsTrigger>
diff --git a/src/frontend/tests/extended/features/mcp-server.spec.ts b/src/frontend/tests/extended/features/mcp-server.spec.ts
new file mode 100644
index 000000000..dce8ad4c4
--- /dev/null
+++ b/src/frontend/tests/extended/features/mcp-server.spec.ts
@@ -0,0 +1,135 @@
+import { expect, test } from "@playwright/test";
+import { awaitBootstrapTest } from "../../utils/await-bootstrap-test";
+import { zoomOut } from "../../utils/zoom-out";
+
+test(
+  "user must be able to change mode of MCP server without any issues",
+  { tag: ["@release", "@workspace"] },
+  async ({ page }) => {
+    await awaitBootstrapTest(page);
+
+    await page.waitForSelector('[data-testid="blank-flow"]', {
+      timeout: 30000,
+    });
+    await page.getByTestId("blank-flow").click();
+    await page.getByTestId("sidebar-search-input").click();
+    await page.getByTestId("sidebar-search-input").fill("mcp server");
+
+    await page.waitForSelector('[data-testid="toolsMCP Server"]', {
+      timeout: 30000,
+    });
+
+    await page
+      .getByTestId("toolsMCP Server")
+      .hover()
+      .then(async () => {
+        await page.getByTestId("add-component-button-mcp-server").click();
+      });
+
+    await page.getByTestId("fit_view").click();
+
+    await zoomOut(page, 3);
+
+    await page.getByTestId("dropdown_str_tool").isDisabled();
+
+    await page.getByTestId("refresh-button-command").click();
+
+    await page.waitForSelector(
+      '[data-testid="dropdown_str_tool"]:not([disabled])',
+      {
+        timeout: 30000,
+      },
+    );
+
+    await page.getByTestId("dropdown_str_tool").click();
+
+    let fetchOptionCount = await page.getByTestId("fetch-0-option").count();
+
+    expect(fetchOptionCount).toBeGreaterThan(0);
+
+    await page.getByTestId("fetch-0-option").click();
+
+    await page.waitForSelector('[data-testid="int_int_max_length"]', {
+      state: "visible",
+      timeout: 30000,
+    });
+
+    let maxLengthOptionCount = await page
+      .getByTestId("int_int_max_length")
+      .count();
+
+    expect(maxLengthOptionCount).toBeGreaterThan(0);
+
+    let urlOptionCount = await page
+      .getByTestId("anchor-popover-anchor-input-url")
+      .count();
+
+    expect(urlOptionCount).toBeGreaterThan(0);
+
+    await page.getByTestId("tab_1_sse").click();
+
+    await page.waitForSelector(
+      '[data-testid="anchor-popover-anchor-input-sse_url"]',
+      {
+        state: "visible",
+        timeout: 30000,
+      },
+    );
+
+    let sseURLCount = await page
+      .getByTestId("anchor-popover-anchor-input-sse_url")
+      .count();
+
+    expect(sseURLCount).toBeGreaterThan(0);
+
+    await page.getByTestId("tab_0_stdio").click();
+
+    await page.getByTestId("refresh-button-command").click();
+
+    await page.waitForSelector(
+      '[data-testid="dropdown_str_tool"]:not([disabled])',
+      {
+        timeout: 30000,
+      },
+    );
+
+    await page.getByTestId("dropdown_str_tool").click();
+
+    fetchOptionCount = await page.getByTestId("fetch-0-option").count();
+
+    await page.getByTestId("fetch-0-option").click();
+
+    expect(fetchOptionCount).toBeGreaterThan(0);
+
+    await page.waitForSelector('[data-testid="int_int_max_length"]', {
+      state: "visible",
+      timeout: 30000,
+    });
+
+    maxLengthOptionCount = await page.getByTestId("int_int_max_length").count();
+
+    expect(maxLengthOptionCount).toBeGreaterThan(0);
+
+    urlOptionCount = await page
+      .getByTestId("anchor-popover-anchor-input-url")
+      .count();
+
+    expect(urlOptionCount).toBeGreaterThan(0);
+
+    await page.getByTestId("tab_1_sse").click();
+
+    await page.waitForSelector(
+      '[data-testid="anchor-popover-anchor-input-sse_url"]',
+      {
+        state: "visible",
+        timeout: 30000,
+      },
+    );
+
+    sseURLCount = await page
+      .getByTestId("anchor-popover-anchor-input-sse_url")
+      .count();
+
+    expect(sseURLCount).toBeGreaterThan(0);
+  },
+);