fix(SanitizedHTMLWrapper): add data-testid attribute to the div element for testing purposes

fix(genericIconComponent): add data-testid attribute to the TargetIcon component for testing purposes

fix(promptComponent): add data-testid attribute to the span element for testing purposes

fix(textAreaComponent): add data-testid attribute to the IconComponent component for testing purposes

fix(genericModal): add data-testid attribute to the Textarea component and the input element for testing purposes

fix(types/components): add id property to IconComponentProps type

test(flowPage.spec): update click actions to use getByTestId method for testing purposes

test(intComponent.spec): update fill action to set a different value for testing purposes

test(promptModalComponent.spec): update click and fill actions to use getByTestId method for testing purposes

src/frontend/src/components/SanitizedHTMLWrapper/index.tsx

@@ -11,6 +11,7 @@ const SanitizedHTMLWrapper = ({
 
   return (
     <div
+      data-testid="edit-prompt-sanitized"
       className={className}
       dangerouslySetInnerHTML={{ __html: sanitizedHTML }}
       suppressContentEditableWarning={suppressWarning}

src/frontend/src/components/genericIconComponent/index.tsx

@@ -3,7 +3,10 @@ import { IconComponentProps } from "../../types/components";
 import { nodeIconsLucide } from "../../utils/styleUtils";
 
 const ForwardedIconComponent = forwardRef(
-  ({ name, className, iconColor, stroke }: IconComponentProps, ref) => {
+  (
+    { name, className, iconColor, stroke, id = "" }: IconComponentProps,
+    ref
+  ) => {
     const TargetIcon = nodeIconsLucide[name] ?? nodeIconsLucide["unknown"];
     return (
       <TargetIcon
@@ -12,6 +15,7 @@ const ForwardedIconComponent = forwardRef(
         style={iconColor ? { color: iconColor } : {}}
         ref={ref}
         stroke={stroke ? stroke : "currentColor"}
+        data-testid={id ? `${id}-${name}` : "icon-" + name}
       />
     );
   }

src/frontend/src/components/promptComponent/index.tsx

@@ -53,6 +53,7 @@ export default function PromptAreaComponent({
         <div className="flex w-full items-center">
           <span
             id={id}
+            data-testid={id}
             className={
               editNode
                 ? "input-edit-node input-dialog"
@@ -64,6 +65,7 @@ export default function PromptAreaComponent({
           </span>
           {!editNode && (
             <IconComponent
+              id={id}
               name="ExternalLink"
               className={
                 "icons-parameters-comp" +

src/frontend/src/components/textAreaComponent/index.tsx

@@ -47,6 +47,7 @@ export default function TextAreaComponent({
           />
           {!editNode && (
             <IconComponent
+              id={id}
               name="ExternalLink"
               className={
                 "icons-parameters-comp" +

src/frontend/src/modals/genericModal/index.tsx

@@ -213,6 +213,7 @@ export default function GenericModal({
             {type === TypeModal.PROMPT && isEdit && !readonly ? (
               <Textarea
                 id={"modal-" + id}
+                data-testid={"modal-" + id}
                 ref={divRefPrompt}
                 className="form-input h-full w-full rounded-lg custom-scroll focus-visible:ring-1"
                 value={inputValue}
@@ -252,6 +253,8 @@ export default function GenericModal({
                   handleKeyDown(e, value, "");
                 }}
                 readOnly={readonly}
+                id={"text-area-modal"}
+                data-testid={"text-area-modal"}
               />
             ) : (
               <></>

src/frontend/src/types/components/index.ts

@@ -218,6 +218,7 @@ export type IconComponentProps = {
   iconColor?: string;
   onClick?: () => void;
   stroke?: string;
+  id?: string;
 };
 
 export type InputProps = {

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

@@ -14,7 +14,7 @@ test.describe("Flow Page tests", () => {
       .filter({ hasText: /^Custom Component$/ })
       .nth(4)
       .dragTo(page.locator(".react-flow__pane"));
-    await page.locator("div:nth-child(4) > .extra-side-bar-buttons").click();
+    await page.getByTestId("icon-ExternalLink").click();
-    await page.locator(".success-alert").click();
+    await page.locator('//*[@id="checkAndSaveBtn"]').click();
   });
 });

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

@@ -31,7 +31,7 @@ test("IntComponent", async ({ page }) => {
   }
 
   await page.locator('//*[@id="int-input-2"]').click();
-  await page.locator('//*[@id="int-input-2"]').fill("-3");
+  await page.locator('//*[@id="int-input-2"]').fill("0");
 
   value = await page.locator('//*[@id="int-input-2"]').inputValue();
 

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

@@ -18,14 +18,15 @@ test("PromptTemplateComponent", async ({ page }) => {
   await page.mouse.up();
   await page.mouse.down();
 
-  await page.locator('//*[@id="prompt-input-4"]').click();
+  await page.getByTestId("prompt-input-4-ExternalLink").click();
-  await page
+  // await page.getByTestId("edit-prompt-sanitized").click();
-    .locator('//*[@id="modal-prompt-input-4"]')
-    .fill("{prompt} example {prompt1}");
 
-  let value = await page
+  await page
-    .locator('//*[@id="modal-prompt-input-4"]')
+    .getByTestId("modal-prompt-input-4")
-    .inputValue();
+    .fill("{prompt} example {prompt1}");
+  // await page.getByTestId("edit-prompt-sanitized").click();
+
+  let value = await page.getByTestId("modal-prompt-input-4").inputValue();
 
   if (value != "{prompt} example {prompt1}") {
     expect(false).toBeTruthy();
@@ -43,33 +44,38 @@ test("PromptTemplateComponent", async ({ page }) => {
 
   await page.locator('//*[@id="genericModalBtnSave"]').click();
 
-  await page.locator('//*[@id="textarea-7"]').click();
+  await page.getByTestId("textarea-4-ExternalLink").click();
-  await page.locator('//*[@id="textarea-7"]').fill("prompt_value_!@#!@#");
+  await page.getByTestId("text-area-modal").fill("prompt_value_!@#!@#");
 
-  value = await page.locator('//*[@id="textarea-7"]').inputValue();
+  value = await page.getByTestId("text-area-modal").inputValue();
 
   if (value != "prompt_value_!@#!@#") {
     expect(false).toBeTruthy();
   }
 
-  await page.locator('//*[@id="textarea-8"]').click();
+  await page.getByTestId("genericModalBtnSave").click();
+
+  await page.getByTestId("textarea-5-ExternalLink").click();
   await page
-    .locator('//*[@id="textarea-8"]')
+    .getByTestId("text-area-modal")
     .fill("prompt_name_test_123123!@#!@#");
 
-  value = await page.locator('//*[@id="textarea-8"]').inputValue();
+  value = await page.getByTestId("text-area-modal").inputValue();
 
   if (value != "prompt_name_test_123123!@#!@#") {
     expect(false).toBeTruthy();
   }
 
-  value = await page.locator('//*[@id="prompt-input-4"]').innerText();
+  value = await page.getByTestId("text-area-modal").inputValue();
 
-  if (value != "{prompt} example {prompt1}") {
+  if (value != "prompt_name_test_123123!@#!@#") {
     expect(false).toBeTruthy();
   }
 
-  await page.locator('//*[@id="editAdvancedIcon"]').click();
+  await page.getByTestId("genericModalBtnSave").click();
+
+  await page.getByTestId("more-options-modal").click();
+  await page.getByTestId("edit-button-modal").click();
 
   value = await page.locator('//*[@id="textarea-edit-1"]').inputValue();
 
@@ -146,7 +152,8 @@ test("PromptTemplateComponent", async ({ page }) => {
       )
       .click();
 
-    await page.locator('//*[@id="editAdvancedIcon"]').click();
+      await page.getByTestId("more-options-modal").click();
+      await page.getByTestId("edit-button-modal").click();
 
     await page.locator('//*[@id="showprompt1"]').click();
     expect(