Add actions test cases

ClickHouse · Nov 8, 2023 · 927e12f · 927e12f
1 parent a53ddcf
commit 927e12f
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 12 deletions.
diff --git a/src/components/Table/Table.test.tsx b/src/components/Table/Table.test.tsx
@@ -68,4 +68,34 @@ describe("Table", () => {
     fireEvent.click(selectAllCheckbox);
     expect(onSelect).toBeCalledTimes(2);
   });
+
+  it("should trigger onDelete on clicking closeButton", () => {
+    const onDelete = jest.fn();
+    const { queryByTestId, queryAllByTestId } = renderTable({
+      isSelectable: true,
+      onDelete,
+    });
+    expect(queryByTestId("table")).not.toBeNull();
+    expect(queryAllByTestId("table-row-delete")).toHaveLength(2);
+    expect(queryByTestId("table-row-edit")).toBeNull();
+    const rowCheckbox = queryAllByTestId("table-row-delete")[0];
+    expect(rowCheckbox).not.toBeNull();
+    fireEvent.click(rowCheckbox);
+    expect(onDelete).toBeCalledTimes(1);
+  });
+
+  it("should trigger onEdit on clicking editButton", () => {
+    const onEdit = jest.fn();
+    const { queryByTestId, queryAllByTestId } = renderTable({
+      isSelectable: true,
+      onEdit,
+    });
+    expect(queryByTestId("table")).not.toBeNull();
+    expect(queryAllByTestId("table-row-edit")).toHaveLength(2);
+    expect(queryByTestId("table-row-delete")).toBeNull();
+    const rowCheckbox = queryAllByTestId("table-row-edit")[0];
+    expect(rowCheckbox).not.toBeNull();
+    fireEvent.click(rowCheckbox);
+    expect(onEdit).toBeCalledTimes(1);
+  });
 });
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
@@ -336,18 +336,24 @@ const TableBodyRow = ({
       {(isDeletable || isEditable) && (
         <ActionsList>
           <ActionsContainer>
-            <IconButton
-              type="ghost"
-              icon="pencil"
-              onClick={onEdit}
-            />
-            <TableRowCloseButton
-              as={IconButton}
-              $deleted={deleted}
-              type="ghost"
-              icon="cross"
-              onClick={onDelete}
-            />
+            {isEditable && (
+              <IconButton
+                type="ghost"
+                icon="pencil"
+                onClick={onEdit}
+                data-testid="table-row-edit"
+              />
+            )}
+            {isDeletable && (
+              <TableRowCloseButton
+                as={IconButton}
+                $deleted={deleted}
+                type="ghost"
+                icon="cross"
+                onClick={onDelete}
+                data-testid="table-row-delete"
+              />
+            )}
           </ActionsContainer>
         </ActionsList>
       )}