From 6157268658193de14f79267b9ec33707488c343f Mon Sep 17 00:00:00 2001
From: Rohit Kandimalla <rohit.kandimalla@semanticbits.com>
Date: Tue, 28 Nov 2023 14:02:08 -0500
Subject: [PATCH] MAT-5981 added test suite for DataElementActions component

---
 .../DataElementsTable/DataElementsTable.tsx   |  4 +-
 .../DataElementActions.test.tsx               | 72 +++++++++++++++++++
 .../DataElementActions.tsx}                   |  8 +--
 .../DataElementsTablePopover.tsx              |  1 +
 4 files changed, 79 insertions(+), 6 deletions(-)
 create mode 100644 src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsTable/dataElementActions/DataElementActions.test.tsx
 rename src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsTable/{DatElementActions.tsx => dataElementActions/DataElementActions.tsx} (94%)
 rename src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsTable/{ => dataElementActions}/DataElementsTablePopover.tsx (98%)

diff --git a/src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsTable/DataElementsTable.tsx b/src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsTable/DataElementsTable.tsx
index 85b3de8de..1c946846d 100644
--- a/src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsTable/DataElementsTable.tsx
+++ b/src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsTable/DataElementsTable.tsx
@@ -11,9 +11,9 @@ import {
 } from "@tanstack/react-table";
 import useQdmExecutionContext from "../../../../../../routes/qdm/useQdmExecutionContext";
 import TimingCell from "./TimingCell";
-import DatElementActions from "./DatElementActions";
 import { generateAttributesToDisplay } from "../../../../../../../util/QdmAttributeHelpers";
 import AttributesCell from "./AttributesCell";
+import DataElementActions from "./dataElementActions/DataElementActions";
 
 const columnHelper = createColumnHelper<DataElement>();
 
@@ -142,7 +142,7 @@ const DataElementTable = ({
         cell: (info) => {
           const el = info.getValue();
           return (
-            <DatElementActions
+            <DataElementActions
               elementId={el.id}
               canEdit={canEdit}
               canView={allowedTypes.hasOwnProperty(el._type)}
diff --git a/src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsTable/dataElementActions/DataElementActions.test.tsx b/src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsTable/dataElementActions/DataElementActions.test.tsx
new file mode 100644
index 000000000..b8aac095a
--- /dev/null
+++ b/src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsTable/dataElementActions/DataElementActions.test.tsx
@@ -0,0 +1,72 @@
+import * as React from "react";
+import { render, screen, within } from "@testing-library/react";
+import DataElementActions from "./DataElementActions";
+import userEvent from "@testing-library/user-event";
+
+const mockOnDelete = jest.fn();
+const mockOnView = jest.fn();
+
+describe("DatElementActions", () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("Should display only View action button for a non owner", () => {
+    render(
+      <DataElementActions
+        elementId={"exampleId"}
+        canView={true}
+        onDelete={mockOnDelete}
+        onView={mockOnView}
+        canEdit={false}
+      />
+    );
+
+    const viewButton = screen.getByRole("button", { name: "View" });
+    expect(viewButton).toBeInTheDocument();
+    userEvent.click(viewButton);
+    expect(mockOnView).toHaveBeenCalledTimes(1);
+  });
+
+  it("Should display View action button along with popover for the owner", async () => {
+    render(
+      <DataElementActions
+        elementId={"exampleId"}
+        canView={true}
+        onDelete={mockOnDelete}
+        onView={mockOnView}
+        canEdit={true}
+      />
+    );
+
+    const viewButton = screen.getByRole("button", { name: "View" });
+    expect(viewButton).toBeInTheDocument();
+    userEvent.click(viewButton);
+    const popOver = await screen.findByTestId("popover-content");
+    const editButton = within(popOver).getByRole("button", { name: "Edit" });
+    userEvent.click(editButton);
+    expect(mockOnView).toHaveBeenCalledTimes(1);
+  });
+
+  it("Should display the delete button if the user is owner and deletes a dataElement when clicked", async () => {
+    render(
+      <DataElementActions
+        elementId={"exampleId"}
+        canView={true}
+        onDelete={mockOnDelete}
+        onView={mockOnView}
+        canEdit={true}
+      />
+    );
+
+    const viewButton = screen.getByRole("button", { name: "View" });
+    expect(viewButton).toBeInTheDocument();
+    userEvent.click(viewButton);
+    const popOver = await screen.findByTestId("popover-content");
+    const deleteButton = within(popOver).getByRole("button", {
+      name: "Delete",
+    });
+    userEvent.click(deleteButton);
+    expect(mockOnDelete).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsTable/DatElementActions.tsx b/src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsTable/dataElementActions/DataElementActions.tsx
similarity index 94%
rename from src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsTable/DatElementActions.tsx
rename to src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsTable/dataElementActions/DataElementActions.tsx
index 7a306e0b0..218fb676a 100644
--- a/src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsTable/DatElementActions.tsx
+++ b/src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsTable/dataElementActions/DataElementActions.tsx
@@ -1,10 +1,10 @@
 import React from "react";
-import DataElementsTablePopover from "./DataElementsTablePopover";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import "./DataElementsTable.scss";
+import "../DataElementsTable.scss";
 import { Button } from "@madie/madie-design-system/dist/react";
+import DataElementsTablePopover from "./DataElementsTablePopover";
 
-type DatElementMenuProps = {
+type DataElementActionsProps = {
   elementId: string;
   canView: boolean;
   onDelete: Function;
@@ -12,7 +12,7 @@ type DatElementMenuProps = {
   canEdit: boolean;
 };
 
-export default function DatElementActions(props: DatElementMenuProps) {
+export default function DataElementActions(props: DataElementActionsProps) {
   const { elementId, canView, onDelete, onView, canEdit } = props;
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
diff --git a/src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsTable/DataElementsTablePopover.tsx b/src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsTable/dataElementActions/DataElementsTablePopover.tsx
similarity index 98%
rename from src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsTable/DataElementsTablePopover.tsx
rename to src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsTable/dataElementActions/DataElementsTablePopover.tsx
index a0737109c..fbad264f5 100644
--- a/src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsTable/DataElementsTablePopover.tsx
+++ b/src/components/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsTable/dataElementActions/DataElementsTablePopover.tsx
@@ -81,6 +81,7 @@ const DataElementsTablePopover = (props: {
           <div className="btn-container">
             {canView && (
               <button
+                key={editSelectOptionProps.dataTestId}
                 data-testid={editSelectOptionProps.dataTestId}
                 onClick={editSelectOptionProps.toImplementFunction}
               >