📝 (index.tsx): add data-testid attributes to the toolbar select items to improve testability

♻️ (toolbarSelectItem/index.tsx): remove unused import and refactor code to include data-testid attribute in the rendered element
📝 (index.ts): add dataTestId property to the toolbarSelectItemProps type to reflect the addition of data-testid attribute in the component
📝 (auto_login.spec.ts): increase timeout for page.waitForTimeout to 16 seconds and test.setTimeout to 140 seconds to accommodate slower test execution
📝 (keyPairListComponent.spec.ts): increase timeout for page.waitForTimeout to 20 seconds to accommodate slower test execution

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx

@@ -453,6 +453,7 @@ export default function NodeToolbarComponent({
                     shift={false}
                     value={"Edit"}
                     icon={"Settings2"}
+                    dataTestId="edit-button-modal"
                   />
                 </SelectItem>
               )}
@@ -463,6 +464,7 @@ export default function NodeToolbarComponent({
                   shift={false}
                   value={"Duplicate"}
                   icon={"Copy"}
+                  dataTestId="duplicate-button-modal"
                 />
               </SelectItem>
               <SelectItem value={"copy"}>
@@ -472,6 +474,7 @@ export default function NodeToolbarComponent({
                   shift={false}
                   value={"Copy"}
                   icon={"Clipboard"}
+                  dataTestId="copy-button-modal"
                 />
               </SelectItem>
               {isOutdated && (
@@ -482,6 +485,7 @@ export default function NodeToolbarComponent({
                     shift={false}
                     value={"Update"}
                     icon={"Code"}
+                    dataTestId="update-button-modal"
                   />
                 </SelectItem>
               )}
@@ -499,6 +503,7 @@ export default function NodeToolbarComponent({
                     styleObj={{
                       iconClasses: "relative top-0.5 -m-1 mr-1 h-6 w-6",
                     }}
+                    dataTestId="share-button-modal"
                   />
                 </SelectItem>
               )}
@@ -523,6 +528,7 @@ export default function NodeToolbarComponent({
                   shift={true}
                   value={"Docs"}
                   icon={"FileText"}
+                  dataTestId="docs-button-modal"
                 />
               </SelectItem>
               {isMinimal && (

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx

@@ -1,4 +1,3 @@
-import { useEffect } from "react";
 import ForwardedIconComponent from "../../../../../components/genericIconComponent";
 import { toolbarSelectItemProps } from "../../../../../types/components";
 
@@ -9,10 +8,10 @@ export default function ToolbarSelectItem({
   value,
   icon,
   styleObj,
+  dataTestId,
 }: toolbarSelectItemProps) {
-
   return (
-    <div className="flex">
+    <div className="flex" data-testid={dataTestId}>
       <ForwardedIconComponent
         name={icon}
         className={`relative top-0.5 mr-2 h-4 w-4 ${styleObj?.iconClasses}`}
@@ -21,15 +20,17 @@ export default function ToolbarSelectItem({
       {isMac ? (
         <ForwardedIconComponent
           name="Command"
-          className={`absolute right-[${shift ? "2rem" : "1.15rem"}] top-[0.65em] h-3.5 w-3.5 stroke-2 ${styleObj?.commandClasses}`}
+          className={`absolute right-[${
+            shift ? "2rem" : "1.15rem"
+          }] top-[0.65em] h-3.5 w-3.5 stroke-2 ${styleObj?.commandClasses}`}
         ></ForwardedIconComponent>
       ) : (
-        <span className={`absolute right-[${shift ? "2.10rem" : "1.15rem"}] top-[0.43em] stroke-2 ${styleObj?.ctrlClasses}`}>
+        <span
-            {shift ? (
+          className={`absolute right-[${
-              "Ctrl"
+            shift ? "2.10rem" : "1.15rem"
-            ) : (
+          }] top-[0.43em] stroke-2 ${styleObj?.ctrlClasses}`}
-              "Ctrl +"
+        >
-            )}
+          {shift ? "Ctrl" : "Ctrl +"}
         </span>
       )}
       {shift && (
@@ -38,7 +39,9 @@ export default function ToolbarSelectItem({
           className={`absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2 ${styleObj?.shiftClasses}`}
         />
       )}
-        <span className={`absolute right-2 top-[0.43em] ${styleObj?.keyClasses}`}>{keyboardKey}</span>
+      <span className={`absolute right-2 top-[0.43em] ${styleObj?.keyClasses}`}>
+        {keyboardKey}
+      </span>
     </div>
   );
 }

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

@@ -702,5 +702,6 @@ export type toolbarSelectItemProps = {
     ctrlClasses?: string;
     keyClasses?: string;
     valueClasses?: string;
-  }
+  };
+  dataTestId: string;
 };

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

@@ -1,7 +1,7 @@
 import { test } from "@playwright/test";
 test.beforeEach(async ({ page }) => {
-  await page.waitForTimeout(1000);
+  await page.waitForTimeout(16000);
-  test.setTimeout(120000);
+  test.setTimeout(140000);
 });
 test.describe("Auto_login tests", () => {
   test("auto_login sign in", async ({ page }) => {

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

@@ -1,6 +1,6 @@
 import { expect, test } from "@playwright/test";
 test.beforeEach(async ({ page }) => {
-  await page.waitForTimeout(10000);
+  await page.waitForTimeout(20000);
   test.setTimeout(120000);
 });
 test("KeypairListComponent", async ({ page }) => {