From 4f1d0b46837b314dff381c69b7295a8e6adac9c8 Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Fri, 24 Nov 2023 11:06:57 -0300
Subject: [PATCH] fix(keypairListComponent): update input ids to include
 "editNode" prefix when editNode prop is true fix(genericModal): add
 data-testid to save button for easier testing fix(sideBarDraggableComponent):
 add data-testid to div element for easier testing fix(nodeToolbarComponent):
 add empty fragment as ConfirmationModal.Trigger to fix warning fix(types):
 add editNodeModal property to KeyPairListComponentType
 fix(codeAreaModalComponent.spec): update locator for Python Function Tool
 fix(floatComponent.spec): update locator for Python Function Tool
 fix(intComponent.spec): update locator for GET Request Tool
 fix(keyPairListComponent.spec): update locator for CSV Loader Tool
 fix(promptModalComponent.spec): update locator for Prompt Template Tool

---
 .../components/keypairListComponent/index.tsx | 20 ++++++++--
 .../src/modals/genericModal/index.tsx         |  1 +
 .../sideBarDraggableComponent/index.tsx       |  1 +
 .../components/nodeToolbarComponent/index.tsx |  3 +-
 src/frontend/src/types/components/index.ts    |  1 +
 .../end-to-end/codeAreaModalComponent.spec.ts | 11 ++---
 .../tests/end-to-end/floatComponent.spec.ts   |  4 +-
 .../tests/end-to-end/intComponent.spec.ts     | 11 ++---
 .../end-to-end/keyPairListComponent.spec.ts   | 40 +++++++++----------
 .../end-to-end/promptModalComponent.spec.ts   |  2 +-
 10 files changed, 57 insertions(+), 37 deletions(-)

diff --git a/src/frontend/src/components/keypairListComponent/index.tsx b/src/frontend/src/components/keypairListComponent/index.tsx
index ca63c362c..93baa4764 100644
--- a/src/frontend/src/components/keypairListComponent/index.tsx
+++ b/src/frontend/src/components/keypairListComponent/index.tsx
@@ -55,7 +55,7 @@ export default function KeypairListComponent({
           return (
             <div key={idx} className="flex w-full gap-2">
               <Input
-                id={"keypair" + index}
+                id={editNode ? "editNodekeypair" + index : "keypair" + index}
                 type="text"
                 value={key.trim()}
                 className={classNames(
@@ -73,7 +73,11 @@ export default function KeypairListComponent({
               />
 
               <Input
-                id={"keypair" + (index + 100).toString()}
+                id={
+                  editNode
+                    ? "editNodekeypair" + (index + 100).toString()
+                    : "keypair" + (index + 100).toString()
+                }
                 type="text"
                 value={obj[key]}
                 className={editNode ? "input-edit-node" : ""}
@@ -90,7 +94,11 @@ export default function KeypairListComponent({
                     newInputList.push({ "": "" });
                     onChange(newInputList);
                   }}
-                  id={"plusbtn" + index.toString()}
+                  id={
+                    editNode
+                      ? "editNodeplusbtn" + index.toString()
+                      : "plusbtn" + index.toString()
+                  }
                 >
                   <IconComponent
                     name="Plus"
@@ -104,7 +112,11 @@ export default function KeypairListComponent({
                     newInputList.splice(index, 1);
                     onChange(newInputList);
                   }}
-                  id={"minusbtn" + index.toString()}
+                  id={
+                    editNode
+                      ? "editNodeminusbtn" + index.toString()
+                      : "minusbtn" + index.toString()
+                  }
                 >
                   <IconComponent
                     name="X"
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index 8d75e29de..7b0401a13 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -308,6 +308,7 @@ export default function GenericModal({
               )}
             </div>
             <Button
+              data-testid="genericModalBtnSave"
               id="genericModalBtnSave"
               disabled={readonly}
               onClick={() => {
diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx
index 12caba30a..3f0f18888 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx
@@ -88,6 +88,7 @@ export default function SidebarDraggableComponent({
           }}
         >
           <div
+            data-testid={sectionName + display_name}
             id={sectionName + display_name}
             className="side-bar-components-div-form"
           >
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index ade0b3284..8068b4b7c 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -208,7 +208,7 @@ export default function NodeToolbarComponent({
             <SelectContent>
               {nodeLength > 0 && (
                 <SelectItem value={nodeLength === 0 ? "disabled" : "advanced"}>
-                  <div className="flex">
+                  <div className="flex" data-testid="edit-button-modal">
                     <IconComponent
                       name="Settings2"
                       className="relative top-0.5 mr-2 h-4 w-4"
@@ -307,6 +307,7 @@ export default function NodeToolbarComponent({
               </span>
             </ConfirmationModal.Content>
             <ConfirmationModal.Trigger>
+              <></>
             </ConfirmationModal.Trigger>
           </ConfirmationModal>
           <EditNodeModal
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index a85e1fa98..1d3b7109a 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -70,6 +70,7 @@ export type KeyPairListComponentType = {
   duplicateKey?: boolean;
   advanced?: boolean | null;
   dataValue?: any;
+  editNodeModal?: boolean;
 };
 
 export type DictComponentType = {
diff --git a/src/frontend/tests/end-to-end/codeAreaModalComponent.spec.ts b/src/frontend/tests/end-to-end/codeAreaModalComponent.spec.ts
index 517e54f64..d810321a7 100644
--- a/src/frontend/tests/end-to-end/codeAreaModalComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/codeAreaModalComponent.spec.ts
@@ -13,7 +13,7 @@ test("CodeAreaModalComponent", async ({ page }) => {
   await page.waitForTimeout(2000);
 
   await page
-    .locator('//*[@id="sidePythonFunctionTool"]')
+    .getByTestId("toolsPythonFunctionTool")
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
@@ -34,8 +34,9 @@ test("CodeAreaModalComponent", async ({ page }) => {
   await page
     .locator('//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div')
     .click();
-  await page.locator('//*[@id="advancedIcon"]').click();
-  await page.locator('//*[@id="editAdvancedBtn"]').click();
+  await page.getByTestId("genericModalBtnSave").click();
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
 
   await page.locator('//*[@id="showcode"]').click();
   expect(await page.locator('//*[@id="showcode"]').isChecked()).toBeFalsy();
@@ -114,8 +115,8 @@ test("CodeAreaModalComponent", async ({ page }) => {
     await page
       .locator('//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div')
       .click();
-    await page.locator('//*[@id="advancedIcon"]').click();
-    await page.locator('//*[@id="editAdvancedBtn"]').click();
+    await page.getByTestId("more-options-modal").click();
+    await page.getByTestId("edit-button-modal").click();
 
     await page.locator('//*[@id="showcode"]').click();
     expect(await page.locator('//*[@id="showcode"]').isChecked()).toBeTruthy();
diff --git a/src/frontend/tests/end-to-end/floatComponent.spec.ts b/src/frontend/tests/end-to-end/floatComponent.spec.ts
index 264381f6a..e5a594595 100644
--- a/src/frontend/tests/end-to-end/floatComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/floatComponent.spec.ts
@@ -42,6 +42,7 @@ test("FloatComponent", async ({ page }) => {
     )
     .click();
   await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
 
   await page.locator('//*[@id="showcache"]').click();
   expect(await page.locator('//*[@id="showcache"]').isChecked()).toBeTruthy();
@@ -385,7 +386,8 @@ test("FloatComponent", async ({ page }) => {
         '//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div/div/div[1]/div/div[1]/div'
       )
       .click();
-    await page.locator('//*[@id="editAdvancedIcon"]').click();
+    await page.getByTestId("more-options-modal").click();
+    await page.getByTestId("edit-button-modal").click();
 
     // showtemperature
     await page.locator('//*[@id="showtemperature"]').click();
diff --git a/src/frontend/tests/end-to-end/intComponent.spec.ts b/src/frontend/tests/end-to-end/intComponent.spec.ts
index 80900fbdf..fb643f99e 100644
--- a/src/frontend/tests/end-to-end/intComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/intComponent.spec.ts
@@ -13,7 +13,8 @@ test("IntComponent", async ({ page }) => {
   await page.waitForTimeout(2000);
 
   await page
-    .locator('//*[@id="sideGET Request"]')
+    .getByTestId("utilitiesGET Request")
+    .first()
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
@@ -41,8 +42,8 @@ test("IntComponent", async ({ page }) => {
   await page
     .locator('//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div')
     .click();
-  await page.locator('//*[@id="advancedIcon"]').click();
-  await page.locator('//*[@id="editAdvancedBtn"]').click();
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
 
   value = await page.locator('//*[@id="int-input-1"]').inputValue();
 
@@ -80,8 +81,8 @@ test("IntComponent", async ({ page }) => {
     await page
       .locator('//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div')
       .click();
-    await page.locator('//*[@id="advancedIcon"]').click();
-    await page.locator('//*[@id="editAdvancedBtn"]').click();
+    await page.getByTestId("more-options-modal").click();
+    await page.getByTestId("edit-button-modal").click();
 
     await page.locator('//*[@id="showtimeout"]').click();
     expect(
diff --git a/src/frontend/tests/end-to-end/keyPairListComponent.spec.ts b/src/frontend/tests/end-to-end/keyPairListComponent.spec.ts
index 936a07035..aa0228268 100644
--- a/src/frontend/tests/end-to-end/keyPairListComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/keyPairListComponent.spec.ts
@@ -13,7 +13,7 @@ test("KeypairListComponent", async ({ page }) => {
   await page.waitForTimeout(2000);
 
   await page
-    .locator('//*[@id="sideCSVLoader"]')
+    .getByTestId("documentloadersCSVLoader")
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();
@@ -66,8 +66,8 @@ test("KeypairListComponent", async ({ page }) => {
       '//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div/div/div[1]/div/div[1]/div'
     )
     .click();
-  await page.locator('//*[@id="advancedIcon"]').click();
-  await page.locator('//*[@id="editAdvancedBtn"]').click();
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
 
   await page.locator('//*[@id="showfile_path"]').click();
   expect(
@@ -87,8 +87,8 @@ test("KeypairListComponent", async ({ page }) => {
         '//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div/div/div[1]/div/div[1]/div'
       )
       .click();
-    await page.locator('//*[@id="advancedIcon"]').click();
-    await page.locator('//*[@id="editAdvancedBtn"]').click();
+    await page.getByTestId("more-options-modal").click();
+    await page.getByTestId("edit-button-modal").click();
 
     await page.locator('//*[@id="showfile_path"]').click();
     expect(
@@ -99,11 +99,11 @@ test("KeypairListComponent", async ({ page }) => {
       await page.locator('//*[@id="showmetadata"]').isChecked()
     ).toBeTruthy();
 
-    await page.locator('//*[@id="keypair0"]').click();
-    await page.locator('//*[@id="keypair0"]').fill("testtesttesttest");
-    await page.locator('//*[@id="keypair100"]').click();
+    await page.locator('//*[@id="editNodekeypair0"]').click();
+    await page.locator('//*[@id="editNodekeypair0"]').fill("testtesttesttest");
+    await page.locator('//*[@id="editNodekeypair100"]').click();
     await page
-      .locator('//*[@id="keypair100"]')
+      .locator('//*[@id="editNodekeypair100"]')
       .fill("test test test test test test");
 
     const plusButtonLocator = page.locator('//*[@id="plusbtn0"]');
@@ -112,24 +112,24 @@ test("KeypairListComponent", async ({ page }) => {
       await plusButtonLocator.click();
     }
 
-    await page.locator('//*[@id="keypair1"]').click();
-    await page.locator('//*[@id="keypair1"]').fill("testtesttesttest1");
-    await page.locator('//*[@id="keypair101"]').click();
+    await page.locator('//*[@id="editNodekeypair1"]').click();
+    await page.locator('//*[@id="editNodekeypair1"]').fill("testtesttesttest1");
+    await page.locator('//*[@id="editNodekeypair101"]').first().click();
     await page
-      .locator('//*[@id="keypair101"]')
+      .locator('//*[@id="editNodekeypair101"]')
       .fill("testtesttesttesttesttest1");
-    await page.locator('//*[@id="plusbtn1"]').click();
+    await page.locator('//*[@id="editNodeplusbtn1"]').click();
 
-    await page.locator('//*[@id="keypair2"]').click();
-    await page.locator('//*[@id="keypair2"]').fill("testtesttesttest2");
-    await page.locator('//*[@id="keypair102"]').click();
+    await page.locator('//*[@id="editNodekeypair2"]').click();
+    await page.locator('//*[@id="editNodekeypair2"]').fill("testtesttesttest2");
+    await page.locator('//*[@id="editNodekeypair102"]').click();
     await page
-      .locator('//*[@id="keypair102"]')
+      .locator('//*[@id="editNodekeypair102"]')
       .fill("testtesttesttesttesttest2");
 
-    await page.locator('//*[@id="minusbtn1"]').click();
+    await page.locator('//*[@id="editNodeminusbtn1"]').click();
 
-    const keyPairVerification = page.locator('//*[@id="keypair102"]');
+    const keyPairVerification = page.locator('//*[@id="editNodekeypair102"]');
     const elementKeyCount = await keyPairVerification.count();
 
     if (elementKeyCount === 0) {
diff --git a/src/frontend/tests/end-to-end/promptModalComponent.spec.ts b/src/frontend/tests/end-to-end/promptModalComponent.spec.ts
index c6a180713..84a1ace00 100644
--- a/src/frontend/tests/end-to-end/promptModalComponent.spec.ts
+++ b/src/frontend/tests/end-to-end/promptModalComponent.spec.ts
@@ -13,7 +13,7 @@ test("PromptTemplateComponent", async ({ page }) => {
   await page.waitForTimeout(2000);
 
   await page
-    .locator('//*[@id="sidePromptTemplate"]')
+    .locator('//*[@id="promptsPromptTemplate"]')
     .dragTo(page.locator('//*[@id="react-flow-id"]'));
   await page.mouse.up();
   await page.mouse.down();