fix(keypairListComponent): add data-testid attribute to input elements for better testability

fix(codeAreaModalComponent.spec): remove unnecessary click action
fix(floatComponent.spec): remove unnecessary click action
fix(intComponent.spec): remove unnecessary click action
fix(keyPairListComponent.spec): remove unnecessary click action
fix(promptModalComponent.spec): remove unnecessary comments and unused code

src/frontend/src/components/keypairListComponent/index.tsx

@@ -53,6 +53,9 @@ export default function KeypairListComponent({
           return (
             <div key={idx} className="flex w-full gap-2">
               <Input
+                data-testid={
+                  editNode ? "editNodekeypair" + index : "keypair" + index
+                }
                 id={editNode ? "editNodekeypair" + index : "keypair" + index}
                 type="text"
                 value={key.trim()}
@@ -71,6 +74,11 @@ export default function KeypairListComponent({
               />
 
               <Input
+                data-testid={
+                  editNode
+                    ? "editNodekeypair" + (index + 100).toString()
+                    : "keypair" + (index + 100).toString()
+                }
                 id={
                   editNode
                     ? "editNodekeypair" + (index + 100).toString()
@@ -97,6 +105,11 @@ export default function KeypairListComponent({
                       ? "editNodeplusbtn" + index.toString()
                       : "plusbtn" + index.toString()
                   }
+                  data-testid={
+                    editNode
+                      ? "editNodeplusbtn" + index.toString()
+                      : "plusbtn" + index.toString()
+                  }
                 >
                   <IconComponent
                     name="Plus"
@@ -110,6 +123,11 @@ export default function KeypairListComponent({
                     newInputList.splice(index, 1);
                     onChange(newInputList);
                   }}
+                  data-testid={
+                    editNode
+                      ? "editNodeminusbtn" + index.toString()
+                      : "minusbtn" + index.toString()
+                  }
                   id={
                     editNode
                       ? "editNodeminusbtn" + index.toString()

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

@@ -31,10 +31,6 @@ test("CodeAreaModalComponent", async ({ page }) => {
 
   await page.locator('//*[@id="checkAndSaveBtn"]').click();
 
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div')
-    .click();
-  await page.getByTestId("genericModalBtnSave").click();
   await page.getByTestId("more-options-modal").click();
   await page.getByTestId("edit-button-modal").click();
 
@@ -112,9 +108,6 @@ test("CodeAreaModalComponent", async ({ page }) => {
   if (elementCount === 0) {
     expect(true).toBeTruthy();
 
-    await page
-      .locator('//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div')
-      .click();
     await page.getByTestId("more-options-modal").click();
     await page.getByTestId("edit-button-modal").click();
 

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

@@ -36,11 +36,6 @@ test("FloatComponent", async ({ page }) => {
     expect(false).toBeTruthy();
   }
 
-  await page
-    .locator(
-      '//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div/div/div[1]/div/div[1]/div'
-    )
-    .click();
   await page.getByTestId("more-options-modal").click();
   await page.getByTestId("edit-button-modal").click();
 
@@ -381,11 +376,6 @@ test("FloatComponent", async ({ page }) => {
   if (elementCount === 0) {
     expect(true).toBeTruthy();
 
-    await page
-      .locator(
-        '//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div/div/div[1]/div/div[1]/div'
-      )
-      .click();
     await page.getByTestId("more-options-modal").click();
     await page.getByTestId("edit-button-modal").click();
 

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

@@ -39,9 +39,6 @@ test("IntComponent", async ({ page }) => {
     expect(false).toBeTruthy();
   }
 
-  await page
-    .locator('//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div')
-    .click();
   await page.getByTestId("more-options-modal").click();
   await page.getByTestId("edit-button-modal").click();
 
@@ -78,9 +75,6 @@ test("IntComponent", async ({ page }) => {
   if (elementCount === 0) {
     expect(true).toBeTruthy();
 
-    await page
-      .locator('//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div')
-      .click();
     await page.getByTestId("more-options-modal").click();
     await page.getByTestId("edit-button-modal").click();
 

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

@@ -25,9 +25,10 @@ test("KeypairListComponent", async ({ page }) => {
     .locator('//*[@id="keypair100"]')
     .fill("test test test test test test");
 
-  const valueWithSpace = await page
+  await page.waitForTimeout(1000);
-    .locator('//*[@id="keypair100"]')
+
-    .inputValue();
+  const valueWithSpace = await page.getByTestId("keypair100").inputValue();
+  console.log(valueWithSpace);
 
   if (valueWithSpace !== "test test test test test test") {
     expect(false).toBeTruthy();
@@ -43,7 +44,7 @@ test("KeypairListComponent", async ({ page }) => {
   await page.locator('//*[@id="keypair1"]').fill("testtesttesttest1");
   await page.locator('//*[@id="keypair101"]').click();
   await page.locator('//*[@id="keypair101"]').fill("testtesttesttesttesttest1");
-  await page.locator('//*[@id="plusbtn1"]').click();
+  await page.locator('//*[@id="plusbtn2"]').click();
 
   await page.locator('//*[@id="keypair2"]').click();
   await page.locator('//*[@id="keypair2"]').fill("testtesttesttest2");
@@ -61,11 +62,6 @@ test("KeypairListComponent", async ({ page }) => {
     expect(false).toBeTruthy();
   }
 
-  await page
-    .locator(
-      '//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div/div/div[1]/div/div[1]/div'
-    )
-    .click();
   await page.getByTestId("more-options-modal").click();
   await page.getByTestId("edit-button-modal").click();
 
@@ -82,11 +78,6 @@ test("KeypairListComponent", async ({ page }) => {
   if (elementCount === 0) {
     expect(true).toBeTruthy();
 
-    await page
-      .locator(
-        '//*[@id="react-flow-id"]/div[1]/div[1]/div[1]/div/div[2]/div/div/div[1]/div/div[1]/div'
-      )
-      .click();
     await page.getByTestId("more-options-modal").click();
     await page.getByTestId("edit-button-modal").click();
 

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

@@ -19,12 +19,10 @@ test("PromptTemplateComponent", async ({ page }) => {
   await page.mouse.down();
 
   await page.getByTestId("prompt-input-4-ExternalLink").click();
-  // await page.getByTestId("edit-prompt-sanitized").click();
 
   await page
     .getByTestId("modal-prompt-input-4")
     .fill("{prompt} example {prompt1}");
-  // await page.getByTestId("edit-prompt-sanitized").click();
 
   let value = await page.getByTestId("modal-prompt-input-4").inputValue();