MAT-5981 added test suite for DataElementActions component

MeasureAuthoringTool · Nov 28, 2023 · 6157268 · 6157268
1 parent 935c330
commit 6157268
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 6 deletions.
diff --git a/...s/editTestCase/qdm/LeftPanel/ElementsTab/Elements/DataElementsTable/DataElementsTable.tsx b/...s/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/...nel/ElementsTab/Elements/DataElementsTable/dataElementActions/DataElementActions.test.tsx b/...nel/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/...s/DataElementsTable/DatElementActions.tsx → ...dataElementActions/DataElementActions.tsx b/...s/DataElementsTable/DatElementActions.tsx → ...dataElementActions/DataElementActions.tsx
@@ -1,18 +1,18 @@
 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;
   onView: Function;
   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/...lementsTable/DataElementsTablePopover.tsx → ...ementActions/DataElementsTablePopover.tsx b/...lementsTable/DataElementsTablePopover.tsx → ...ementActions/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}
               >