From 8b04954a0e8a2e3c454aad378302a2c2b46dbf3c Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Thu, 28 Nov 2024 14:00:52 -0300
Subject: [PATCH] Refactor: Update TableOptions component to add data-testid
 attributes for buttons (#4925)

* Refactor: Update TableOptions component to add data-testid attributes for buttons

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 .../components/TableOptions/index.tsx         | 17 ++++--
 .../core/unit/tableInputComponent.spec.ts     | 53 ++++++++++++++-----
 2 files changed, 53 insertions(+), 17 deletions(-)

diff --git a/src/frontend/src/components/core/parameterRenderComponent/components/tableComponent/components/TableOptions/index.tsx b/src/frontend/src/components/core/parameterRenderComponent/components/tableComponent/components/TableOptions/index.tsx
index 9a446227b..86c602910 100644
--- a/src/frontend/src/components/core/parameterRenderComponent/components/tableComponent/components/TableOptions/index.tsx
+++ b/src/frontend/src/components/core/parameterRenderComponent/components/tableComponent/components/TableOptions/index.tsx
@@ -24,7 +24,7 @@ export default function TableOptions({
         {addRow && (
           <div>
             <ShadTooltip content={"Add a new row"}>
-              <Button unstyled onClick={addRow}>
+              <Button data-testid="add-row-button" unstyled onClick={addRow}>
                 <IconComponent
                   name="Plus"
                   className={cn("h-5 w-5 text-primary transition-all")}
@@ -44,7 +44,12 @@ export default function TableOptions({
                 )
               }
             >
-              <Button unstyled onClick={duplicateRow} disabled={!hasSelection}>
+              <Button
+                data-testid="duplicate-row-button"
+                unstyled
+                onClick={duplicateRow}
+                disabled={!hasSelection}
+              >
                 <IconComponent
                   name="Copy"
                   className={cn(
@@ -67,7 +72,12 @@ export default function TableOptions({
                 )
               }
             >
-              <Button unstyled onClick={deleteRow} disabled={!hasSelection}>
+              <Button
+                data-testid="delete-row-button"
+                unstyled
+                onClick={deleteRow}
+                disabled={!hasSelection}
+              >
                 <IconComponent
                   name="Trash2"
                   className={cn(
@@ -84,6 +94,7 @@ export default function TableOptions({
         <div>
           <ShadTooltip content="Reset Columns">
             <Button
+              data-testid="reset-columns-button"
               unstyled
               onClick={() => {
                 resetGrid();
diff --git a/src/frontend/tests/core/unit/tableInputComponent.spec.ts b/src/frontend/tests/core/unit/tableInputComponent.spec.ts
index 098ccdd9c..ea78e3b0e 100644
--- a/src/frontend/tests/core/unit/tableInputComponent.spec.ts
+++ b/src/frontend/tests/core/unit/tableInputComponent.spec.ts
@@ -1,7 +1,6 @@
 import { expect, test } from "@playwright/test";
 import uaParser from "ua-parser-js";
 
-// TODO: This component doesn't have table input needs updating
 test(
   "user must be able to interact with table input component",
   {
@@ -36,7 +35,9 @@ test(
 
     while (modalCount === 0) {
       await page.getByText("New Flow", { exact: true }).click();
-      await page.waitForTimeout(3000);
+      await page.waitForSelector('[data-testid="modal-title"]', {
+        timeout: 3000,
+      });
       modalCount = await page.getByTestId("modal-title")?.count();
     }
     await page.waitForSelector('[data-testid="blank-flow"]', {
@@ -44,7 +45,12 @@ test(
     });
     await page.getByTestId("blank-flow").click();
 
-    await page.waitForTimeout(1000);
+    await page.waitForSelector(
+      '[data-testid="sidebar-custom-component-button"]',
+      {
+        timeout: 3000,
+      },
+    );
 
     await page.getByTestId("sidebar-custom-component-button").click();
 
@@ -104,11 +110,15 @@ class CustomComponent(Component):
 
     await page.getByText("Check & Save").last().click();
 
-    await page.waitForTimeout(1000);
+    await page.waitForSelector('text="Open Table"', {
+      timeout: 3000,
+    });
 
     await page.getByText("Open Table").click();
 
-    await page.waitForTimeout(1000);
+    await page.waitForSelector(".ag-cell-value", {
+      timeout: 3000,
+    });
 
     const visibleTextsGroup1 = ["Alpha", "Bravo", "Charlie", "Delta", "Echo"];
     const visibleTextsGroup2 = ["X1", "Y2", "Z3", "W4", "V5"];
@@ -130,21 +140,28 @@ class CustomComponent(Component):
 
     await page.getByPlaceholder("Empty").fill(randomText);
     await page.getByText("Save").last().click();
-    await page.waitForTimeout(500);
-
+    await expect(page.getByTestId("icon-Type")).toBeHidden({
+      timeout: 2000,
+    });
     await page.locator(".ag-cell-value").nth(12).click();
 
     await page.getByPlaceholder("Empty").fill(secondRandomText);
     await page.getByText("Save").last().click();
-    await page.waitForTimeout(500);
+    await expect(page.getByTestId("icon-Type")).toBeHidden({
+      timeout: 2000,
+    });
 
     await page.locator(".ag-cell-value").nth(24).click();
-    await page.waitForTimeout(500);
+    await expect(page.getByTestId("icon-Type")).toBeVisible({
+      timeout: 2000,
+    });
 
     await page.getByPlaceholder("Empty").fill(thirdRandomText);
     await page.getByText("Save").last().click();
 
-    await page.waitForTimeout(500);
+    await expect(page.getByTestId("icon-Type")).toBeHidden({
+      timeout: 2000,
+    });
 
     expect(page.getByText(randomText)).toBeVisible();
     expect(page.getByText(secondRandomText)).toBeVisible();
@@ -154,7 +171,9 @@ class CustomComponent(Component):
 
     await page.getByTestId("icon-Copy").last().click();
 
-    await page.waitForTimeout(500);
+    await expect(page.getByTestId("duplicate-row-button")).toBeDisabled({
+      timeout: 1000,
+    });
 
     let numberOfCopiedRows = await page.getByText(thirdRandomText).count();
     expect(numberOfCopiedRows).toBe(2);
@@ -162,7 +181,9 @@ class CustomComponent(Component):
     await page.locator('input[type="checkbox"]').last().click();
     await page.getByTestId("icon-Trash2").last().click();
 
-    await page.waitForTimeout(500);
+    await expect(page.getByTestId("delete-row-button")).toBeDisabled({
+      timeout: 1000,
+    });
 
     await page.locator('input[type="checkbox"]').last().click();
     await page.getByTestId("icon-Trash2").click();
@@ -172,11 +193,15 @@ class CustomComponent(Component):
 
     await page.getByText("Close").last().click();
 
-    await page.waitForTimeout(500);
+    await page.waitForSelector("text=Open Table", {
+      timeout: 3000,
+    });
 
     await page.getByText("Open Table").click();
 
-    await page.waitForTimeout(1000);
+    await page.waitForSelector(".ag-cell-value", {
+      timeout: 3000,
+    });
 
     const visibleTexts = ["Alpha", "Bravo", "Charlie", "Delta", "Echo"];
     const notVisibleTexts = ["X1", "thirdRandomText"];